or Connect
AVS › AVS Forum › A/V Control & Automation › Remote Control Area › One UI to rule and control them all!
New Posts  All Forums:Forum Nav:

One UI to rule and control them all!

post #1 of 5
Thread Starter 
I am working with my programming team to develop a Flash/Flex based user interface that virtually clones the Iphone standard datagrid UI simplicity. This is for personal hobby. It will utilize SqlLite to store all the menus/navigation/commands, so it will be theoretically be easy to skin. It is designed to work with a Crestron system initially, maybe later it will be expanded to be more generic.

The end goal is a UI that scales gracefully from 1920x1080 down to 480x320, so the same user interface can be used on bigscreen as well as small handheld devices like iphone,android,winmo,symbian,etc. Unfortunatley, iphone does not yet run Flash, hopefully a future version will. I am sure the coming Apple tablet will run Flash. At this point, the best handheld device Flash will work only on is the HTC Android device coming in next months. It is interesting to note that Adobe has a plans to put Flash Lite embedded in future generations of TVs. Hence, the UI theoretically will be able to run directly from big screen TVs. In the meantime, to view the UI on a bigscreen TV a PC running Flash will drive the display.

-=Task Overview=-
Build a prototype/mockup using Adobe Flex that will control a Digital Home - things such as Music, Lights, Security Cameras, Video. This prototype will not actually interface with any automation equipment - that will be Phase 2 of the project!

The main goal of the prototype app is to refine the user interface. Although the app is developed with Adobe Flex, it will have "look and feel" of a simple Iphone App.


-=Usability Requirements=-
read this:
http://developer.apple.com/iphone/li...IElements.html
Important terms to understand from the article:: nav bar, tab bar, table view

The tab bar and nav bar components MUST appear no matter what the application resolution is! As the app is resized to different resolutions the "content area" will resize.

App*can be resized and the UI components will resize gracefully.
App components will be animated and slide similar to Iphone components.

App will be developed with Adobe Flex - but it must also be compatible with Adobes initiative to run on TVs, Mobile Devices with Flash Lite and also normal Flash.
http://www.adobe.com/devnet/devices/...gital_home.pdf
App must work as a touchscreen application and also using directional keys UP DOWN LEFT RIGHT and ENTER.
App must *be developed in Object Oriented manner, efficient use of CPU, low resource usage.

Much of the interface info such as text labels will be stored in a SqlLite database.*
All the table views in the application are database driven. The items can be rearranged, edited *by updating the SqlLite database.

Target Resolution is 1920x1080 all the way down to 480x320. Actually it can scale bigger than this, it is just a reference resolution for testing.

-= Helpful Resources =-
I have a zip file containing all the iphone assets (images in Flash vector format, etc). I paid for them from http://www.iphonedesigntools.com/index.html


-= Tab Bar Component =-
Tab Bar appears on every screen. It is a reusable component that can be easily edited in a single "class" file. The Tab Bar has has an item for Music, Video, Lights, Talk, Quick


-= Music Workflow=-

If the Music tab item is clicked/touched a table view will appear that shows Zones Table View (see below).After the user clicks on the Zone they wish to control they will see a Table View of Favorite Music (see below). After they choose their Favorite Music item then they will go to Media Player screen (see below).

-= Video Workflow=-

If the Video tab item is clicked/touched a table view will appear that shows Zones Table View (see below). After the user clicks on the Zone they wish to control they will see a Table View of Favorite Video (see below). After they choose their Favorite Video item then they will go to Media Player screen (see below).

-= Lights Workflow=-

If the Lights tab item is clicked/touched a table view will appear that shows Zones Table View (see below).*After the user clicks on the Zone they wish to control they will see a Table View of Lighting Presets (see below). After they choose their Lighting Preset.*

-= Talk Workflow=-

If the Talk tab item is clicked/touched a table view will appear that shows Zones Table View (see below)

-= Quick Workflow=-
QUICK: when pressed a table view appears with items "Party Mode >", "All Off".
PARTY MODE: opens new table view with*Favorite Music Table View.



-= Zones Table View =- (reusable component)
Whole House
Family Room
Kitchen
Her Office
Foyer
Living Room
Dining Room
Master Bedroom
Master Sitting
His Office
Upstairs Hall
Guest Bedroom
Baby Room


-=Favorite Music Table View=-*(reuseable component)
XM Grateful Dead
XM Shade 45*
XM Hip Hop Nation
XM Hits 1
XM 20 on 20
Pandora Rick Ross
Pandora Too Short
Pandora Kayslay


-= Favorite Video Table View=-
HBO
Cinemax
Showtime
Speed
etc
**

-= Media Player Screen=-
will be a clone of this screen:*http://publicola.horsesass.org/files/apple_iphone_2.jpg

-= Lighting Presets Table View=-
Watch Video
All On Low
All On Medium
All On High
Romantic
All Off
post #2 of 5
post #3 of 5
Thread Starter 
Haha 39 cent. You are too funny. You make us want to visit this site and the others you post your photoshop art to. By the way, I just signed up with a dealer account on Liberty Wire and in the dealer application section that lists "where did you hear about us?" I checkedboxed "other" and penciled in "39 cent stamp". haha

Well anyways, Prototype version 0.01 of the software is here! A prototype that has 80% of the functionality of the final product. The hardcore programming is finished. All the code is done in c++ MVC framework style (think reuseable components). All the screens are dynamic, NOTHING is hardcoded. All the screens are controlled by a sql Lite database. You never need to create graphics to use this UI, it is 100% database driven! Anyways, read the post #1 to see all the details.

DOWNLOAD:
http://dl.getdropbox.com/u/70589/App.air.zip

Do you have Adobe Air installed on your pc? You can install it from here: http://get.adobe.com/air/

After you install it, you can open the attached air file which will install the prototype on your pc as an application, you can see a shortcut to it in Start > Programs > App

As you can see it is a rough around the edges, I need to send it to my graphics guy to finish it with proper vector graphics. But the core functionality is here! Obviously it needs new icons on the bottom tab view. Everything is in the DB! the DB is located at c:\\program files\\App\\data.db and you can install SqlLite db browser at http://sourceforge.net/projects/sqlitebrowser/ After you install the SqlLiteBrowser go to File > Open > and open c:\\program files\\App\\data.db and then you can easily add records to the "zones" table and any other table you want. The next step is that I will have our developer add a new table to the sql db and it will be named "Commands" and in this table we will have all the analog/digital joins sent to the a Crestron processor. Maybe if there is interest, we will develop modules for other control systems as well (AMX, CQC, etc). I intend to have the contol module layer abstracted from the coure UI. That way, modules "layers" can be developed for different control systems independent of the core UI functionality.

Please let me know your feedback.
post #4 of 5
I cant wait to see it after the graphics guy gets a hold of it. Right now it doesn't scale like i expected it to so you end up with scroll bars. Will this change? I am pretty sure the future of control systems will be browser based interfaces that can be used on anything.. that or the touchscreen prices will come way down .

A plus to following the iphone / itouch navigation style is that many end users are already familiar with it. Is it possible or are there plans for controlling a more complex system?

An example would be a popup prompting you to select the front door camera when the front door bell is pressed.
post #5 of 5
Thread Starter 
Quote:
Originally Posted by 39CentStamp View Post

I cant wait to see it after the graphics guy gets a hold of it. Right now it doesn't scale like i expected it to so you end up with scroll bars. Will this change? I am pretty sure the future of control systems will be browser based interfaces that can be used on anything.. that or the touchscreen prices will come way down .

A plus to following the iphone / itouch navigation style is that many end users are already familiar with it. Is it possible or are there plans for controlling a more complex system?

An example would be a popup prompting you to select the front door camera when the front door bell is pressed.

Thanks for taking a look. If you download the SqlLite Browser from sourceforge (see the URL above) you can open up the "params" table and change the value for "ScaleY". This number sets the Y axis scaling. If the resolution you are running the UI at is 1024x768 then you should change the scaleY to be 768 in order to get dimensions that match the Apple dimensions. Hope that makes sense. For instance if you install a system at an elderly person who is visually impaired, and they complain "I cannot read it, the words are too small!" then you could open up the database, change the ScaleY number, restart the app, and then all the text will appear larger "automagically."

On devices that support "flick" gestures, you will be able to flick scrolling lists that are too big (like "All TV Channels").

Unfortunatley the iphone does not run Flash yet! The upcoming HTC android phone will support Flash, it will probably be the first device I test with. I think it comes out late September.

I think you are the first person to understand why I chose the iphone UI. Basically it is the most intuitive UI, anybody with half a brain (such as myself) can figure out how to navigate the UI without much thinking. It is so simple. Plus, it will work great no matter what the screen size is!

Finally, in a few years TVs will support Flash *natively*. So, this UI could be displayed on a TV directly! (Until a TVs support Flash natively I will have a couple dedicated PCs running this thru a video matrix switch. I think we talked about this alot on the RC CI forum)

So the goal is to pick up the TPMC3X handheld remote, press a button, the TV comes on, the Flash UI is able to be navigated using the D-PAD on the TPMC3X. Of course this is optional, if the user just wants to to use the TPMC3X normally everything is just fine.

http://www.adobe.com/mobile/ has a lot of good info on the "common interface among all devices" and talks about how Adobe is supporting TV makers and other manufacturers to support Flash natively. I hope it is adopted and really happens.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Remote Control Area
AVS › AVS Forum › A/V Control & Automation › Remote Control Area › One UI to rule and control them all!