Jump to content
C4 Forums | Control4

C4 User Interface Design


Recommended Posts

I'm working on the concept for a different style of user interface for C4. See the attached screen show.

I'd really like to get your feedback and suggestions on how you would layout a C4 user interface.

I'm working with the iPhone SDK and slowly creating a user interface. Here is the home screen that shows all the rooms in my house.

I haven't added logos yet, stay tuned.

Next I'll build the screen that shows all the controls in each room.

attachment.php?item=224&download=1

Link to comment
Share on other sites


I would probably have a layer above what you are showing such as:

Rooms/Lighting/Audio/Video/Security/Irrigation

Under Rooms subcategories would be something like Kitchen/Family Room/Basement/Bedrooms, with an additional subcategory for each individual bedroom under the bedrooms group. Once in a room it would show all available options for that room such as audio, video, lights.

That gives you the option to go with room by room control or go to specific things such as audio - whole house audio, or video - then choose a room or source, etc.

It would also be cool if there was a subcategory under 'lighting' that would show you what lights are on in the house.

Link to comment
Share on other sites

akg4y

I can add more items to the tab bar. I think what I'm doing is what you describe. The idea is that clicking the Home tab shows a scrollable list of all the rooms in the house (grouped by floor). This is the screenshot I showed. Once clicking on the room, you will see all the controllable devices in that room. I'm still working on that screen and I'll create another screenshot soon.

The other tab bar items are to show specific groups of devices, regardless of the room you're viewing. For example, the "lights" tab will show a scrollable list of all the lights in your home along with their state and a control to change it.

For music and video, I'm still trying to decide if I should focus on showing the "sources" or the "speakers". I'll do both and see what the feedback is like from others. Now that I think about it, maybe it will be a combined view.

I've put in a few icons, I think this is what you are talking about. I also have a badge in the tab bar to show how many of the devices are on.

attachment.php?item=226&download=1

Link to comment
Share on other sites

Yes, this is a personal project I'm currently working on and am open to sharing the work I create so others can learn and build upon it.

I'll email you some details.

Here are a few more screenshots. One shows the view of the room (Den) and the other shows the configuration settings in the standard iPhone location (SETTINGS | GENERAL).

Below the volume control is where it displays the current source. Click the arrow and you can change the source. I'll eventually design some media controls controls to go along with the source.

487.PNG

488.png

Link to comment
Share on other sites

The application communicates with C4's director via 5020/TCP. I'd like to release the application as open source for others to freely learn and build on.

Link to comment
Share on other sites

It may not seem like it... but I actually have a very busy day (and often evening and weekend) job (as director of Global Security for a Fortune 500 company) so my livelihood does not depend on sales of this application. Fundamentally, I agree in the ideals behind open source and would like to keep any work I release open for others to build on.

Link to comment
Share on other sites

Yes, this is a personal project I'm currently working on and am open to sharing the work I create so others can learn and build upon it.

I'll email you some details.

Here are a few more screenshots. One shows the view of the room (Den) and the other shows the configuration settings in the standard iPhone location (SETTINGS | GENERAL).

Below the volume control is where it displays the current source. Click the arrow and you can change the source. I'll eventually design some media controls controls to go along with the source.

http://imgbin.org/images/487.PNG

http://imgbin.org/images/488.png

I would love to be able to hit the 'daily finance' button and bring it to 100%.

just my 2cents.

Great work though!!

Link to comment
Share on other sites

I've changed the section for audio zones slightly.

Once you select the audio source, a basic set of audio controls are displayed. In the case of the AM/FM receiver, it's a power button and forward/backward seek buttons to change the frequency. Selecting the blue arrow takes you to the full set of controls for that audio source. I think I should inverse the button graphics... it looks a bit fugly.

493.png

Link to comment
Share on other sites

Hey Bog, do you have a vector graphics program to give the buttons some depth? That would make them look much more like the rest of the design.

On those lights if you tap on the symbols on each end would that do full on/full off?

Link to comment
Share on other sites

akg4y: someone suggested the tap on/off so I added those. Now that I think about it, maybe the off indicator should be just a dot without lines radiating from it.

If you can create the media playback buttons I'll gladly add them in :). I'm not much of a graphic designer. Any help would be greatly appreciated.

Link to comment
Share on other sites

Bog, I think the lines radiating make sense because it shows it is a light, just make the center circle "hollow", not "light up".

Just my .02. If AT&T had decent service here, I would have an iPhone and would be toying with this great app!

Link to comment
Share on other sites

Bog, I got the app installed this morning and everything is working great....with one exception. My foyer shows up in the room list, but it shows up with some funky greek looking characters. It actually took me a while to figure out it was the foyer because it is completely FUBAR.

Also, I think the audio buttons should at least be changed to give them some depth. I'll keep toying with it and let you know if I find any other bugs.

So far....great work!

Link to comment
Share on other sites

Checking it out still. I'm not much of a graphic designer but I found some simple black icons I like for the media controls.

How many rooms and devices do you have? Hows the performance of the scrolling?

Link to comment
Share on other sites

Can you telnet or netcat to your controller on 5020/TCP and paste the following command into the terminal:

<c4soap name="GetItems" session="0" operation="RWX" category="composer" async="False"><param name="filter" type="number">0</param></c4soap>

Can you send me the XML file that it returns so I can see what's happening?

Link to comment
Share on other sites

Bog,

I like what you're doing with C4 on the iPhone. I am interested in porting support for C4 to the Blackberry devices. If you are willing to share your reverse engineering of the communication protocol for C4 with me, please email me.

FYI, I have the iPhone SDK as well as the Blackberry SDK and want to develop a similar interface on the Blackberry.

Thanks and I looking forward to working with you on this.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.