This page last changed on Aug 07, 2009 by mredeker.

iPhone Panel 2.0 UI Design

After playing around with the current iPhone panel and looking at the requirements I defined for my home, I created some mockups for a possible next generation iPhone panel UI.
Some of this I already tested to see how it looks on the iPhone and I like it. The RGB control is really cool
Here are the pictures and I will explain what I had in mind further down. Let me know your thoughts and ideas.


1) TabBar Controller

As you can see I added a tab bar at the bottom of the application. This control gives the UI a really nice look and lets you navigate to the most often used screens. We would need an extra tag in the iphone.xml to say that we want a tab bar and then we have to have a tag for each activity to define if this activity should appear as a tab in the tab bar.

2) Gesture control

The first mockup "TV" is just a one screen activity because I want to use gestures on it. If we have a multi screen activity the left and right swipe would be taken. This is my general TV remote which is probably used 80% of the time. To be able to control the TV without having to look at the device I want gestures for the most common functions. I was thinking of swipe up/down for channel up/down, swipe left/right for volume up/down and drawing a circle for mute. At least those are the keys on my TV remote which are pretty outworn. We could think of a few gestures which we support and then use the designer to map a button to a gesture. This would mean that we need a new tag for a button to say that this is button can also be triggered from a gesture.

3) Intermediate activity / grouping

I have an activity "Lights" which shows up in the tab bar but this does not directly display a screen. It will group all "light" related activities together to be able to "drill-down" to whatever 'real' light activity I want to control. This is an extra layer to group activities together for the tab bar.

4) Table control, status buttons, dimming sliders and RGB control

 On the "Livingroom" and "Bedroom" light screens you can see that I used the iPhone table control to organize my switches. I thought it looks pretty neat and we would be able to support the scrolling up and down which Marc already mentioned in the composer discussion. For the light switches itself I used the on/off switch control to be able to see the status. This would involve some kind of feedback configuration. So if that screen is made visible all "status switches" will do a REST request to ask for their current status. Since I also have dimming devices I used the slider control for the dimming. This device would also need a feedback to be able to adjust itself to the current dimming position.

Having stayed at the citizenM hotel, I liked the RGB lights they had and I immediately got some cool RGB led's from IKEA. I control them with a KNX/DALI gateway and this looks really cool. So I created a colorwheel to select the color I want the led's to show. With my KNX/DALI gateway I can also program some nice sequences to have automatic color changes which can be started through scenes. So the colorwheel is probably some kind of special control which can be configured. You also need three KNX group addresses for it to dimm each color.

5) None action elements

For some grouping or as labels I want to have elements that don't represent a button or action. This could just be plain text or an image. Right now we only have buttons which trigger a REST command. Each activity should also be able to have a background image. If we a have a multi screen activity the image would stick and the buttons will flow on top off the image. This is a really cool effect and it looks great.

6) Floorplan

As Marc mentioned in the other post a floorplan could be used to navigate to buttons which are available in one room or maybe to display the status of lights in one room. We could use the zoom in/zoom out with two fingers gesture to go from the whole floorplan to a specific room. Once a certain room size is reached we could overlay the controls to be able to see the status eg. light bulb which is on or off. This is done in a lot of other KNX visualization tools.


mockup_1.png (image/png)
mockup_2.png (image/png)

1) TabBar Controller

As you can see I added a tab bar at the bottom of the application. This control gives the UI a really nice look and lets you navigate to the most often used screens. We would need an extra tag in the iphone.xml to say that we want a tab bar and then we have to have a tag for each activity to define if this activity should appear as a tab in the tab bar.

Thinking this a little further, what should be defined is a navigational element in the UI, not a tab bar per se. This makes it more generalized and applicable to all panel types. A navigational element(s) can have any custom look & feel (image) and can be made to appear as a tab bar. This also leaves it up to the UI designer to decide where the elements are placed in the UI and how they should look like.

3) Intermediate activity / grouping

I have an activity "Lights" which shows up in the tab bar but this does not directly display a screen. It will group all "light" related activities together to be able to "drill-down" to whatever 'real' light activity I want to control. This is an extra layer to group activities together for the tab bar.

Activities screen is a screen that has nothing but navigational buttons in it. It is currently hard-coded but should be generalized as described above. Therefore it wont be necessary to build additional layers into it such as grouping. Navigational UI elements can be placed anywhere on the screen and grouped in a way the UI designer wants it.

The other suggestions are also good although I'd focus on the navigational buttons and monitoring/status UI elements as the key features for the next revision.

Posted by juha at Aug 08, 2009 00:13

5/ I have a hard time seeing what you talk about but since you say it looks great I want to see it.

I do like the list of features here and find it pretty exhaustive.  Do you have something mocked up yet?

Posted by marcf at Sep 08, 2009 11:18

I have the following features working:

- TabBar controller
- On/Off element for KNX switching including status (if you start the app the UIControl asks the controller for current status)
- Dimming control (no status yet)
- RGB color wheel which sets a real RGB Led light using KNX and Dali

So far it is just some hacks to proove if everything works with the iPhone toolkit and Calimero.
This needs to be cleaned up and put into SVN. But I will wait until we have the iphone xml schema defined (see other thread).
I could post some screenshots of the iPhone screen.

Posted by mredeker at Sep 08, 2009 12:33

yes screen shots, yes....

Also the status stuff is pretty interesting.  It is something that needs to be generalized as for example the Lutron classes do have status attached to them.  How we handle that in the system is important.   I also ran into the need to "initialize" in the case of GC where we could lookup the beacon at instanciation of the class and keep that in the background and not just when we call the class.  This is really starting to look like a stateful EJB

Posted by marcf at Sep 08, 2009 13:15

I will do some screenshots tonight.
The KNX actuators can always be asked to return the status (on/off, dimming value, open/close, temperature, ...)
We would not need an EJB for that. I don't know about the other devices.

Posted by mredeker at Sep 08, 2009 13:29

Trust me, I don't mean this litterally

Posted by marcf at Sep 08, 2009 13:33
Document generated by Confluence on Jun 05, 2016 09:30