Last March user BigcSpecv posted his iOS 7 control pages and concept for an iPhone interface. Basically he modeled it after the iPhone Settings app on the iPhone. I was amazed and looked in the file library for the icons and implementation details. To my dismay it wasn't there. But I felt he was definitely on the right track.
So here is my implementation and I WILL post all the files in the file library and explain how to implement this interface.
This is still a work in progress so some of my explanations may not match the implementation images yet.
I have not implemented dimmer controls yet even though most of my light switched are dimmers. This will be in a future version.
The control page is setup for my iPhone 6 so its size is 750 x 1000 or 750 x 1200 depending on the number of lines I need. The background is set to white.
Icons should refer to the room or device being controlled, Family Room Couch, Table Lamp, Patio Lantern.
Colored icons should help denote areas or device types, as an example maybe all ceiling fixtures should use a light blue icon.
I used virtual device groups for each logical area that contains more than one controlled device like Floor 1, Floor 2, Family Room, etc. The virtual device group displays ON or OFF. This lets me see at a high level where lights are on and turn them all off with a single click at multiple levels.
If more than one controlled device exists in a given area like Floor 1, then a simple Right Arrow lets you know that there is more to see.
Turning a single device on or off is done with a standard iPhone slide control image.
On the Home page I break down the house into logical areas, First Floor, Second Floor, Garage, Basement, Outside. Then below that I have some items that pertain to the entire house like scenes, thermostats, music, etc. Since the basement has only one controlled device I placed the slider at this level. There is no need to drill down to a Basement page just to display a single light control.
- iPhoneHome.png (73.4 KiB) Viewed 15556 times
On Floor 1 we can see the rooms with a single light have a slider that shows its status and can be used to turn on the light. The slider has 3 images (slider+.png, slider+on.png, slider+off.png)
On Floor 1 the Family Room has multiple devices so we show the status of the virtual device group and a Right Arrow to drill down into the room. Clicking the virtual device group status turns the group off. You can turn a virtual device group off but not on.
- iPhoneFloor1.png (74.19 KiB) Viewed 15556 times
Once we are in the Family Room we can see all the devices and turn them on or off.
- iPhoneFamilyRoom.png (41.85 KiB) Viewed 15556 times
Building the page
Here I have added the grey top bar graphic and an orange icon row. These are both added as static images.
- IconRowExample.png (11.82 KiB) Viewed 15556 times
Now we need an arrow to drill down to devices within this floor or room. Notice that the arrow icon is the same height as the row to make placement easy. Also its wide enough for a finger tip.
- IconRowArrowExample.png (9.05 KiB) Viewed 15556 times
If we needed a slider control instead we can use the device state of a light and the slider image. Again the image is the same height as the row for easy placement.
- IconRowSliderExample.png (10.93 KiB) Viewed 15556 times
Now we add the text. I used a static image/caption 30pt text with 5 spaces so that I can line the braces up on the row icon but still indent the text a little.
- IconRowNameExample.png (15.16 KiB) Viewed 15556 times
Now I add the icon. I got all the icons from the site flaticon.com They are all free. The icons are all white with transparent backgrounds. Again the icons are the same size as the colored square background for easy placement. This also lets you choose any color you want for the background color.
- IconRowPictureExample.png (16.2 KiB) Viewed 15556 times
I will upload the files in a day or so. If you have any questions about implementation please let me know.