CommandFusion Wiki

Documentation Resources

User Tools

Site Tools



Page 2 - Interface Display Pages

Residential iPad User Interface System - Page 2 This material may not be reproduced or reused elsewhere without the express written permission of Barry Gordon.

All information and GUI's in this case study are by Barry Gordon himself. These are put together to suit his unique requirements and are designed to reflect his personal tastes. All visual and back end system design are Barry's own and should be looked as an example, CommandFusion recommends you design a system that suits your own requirements and tastes.

This case study is divided up into 3 pages:

  1. System Overview - a detailed overview of the house, and what makes up the system.
  2. Interface Display Pages - a detailed look at the iViewer 4 GUI
  3. JavaScript Modules - info on the JavaScript modules that Barry uses to provide additional functionality to his system

The system starts in CF.userMain of the Javascript module Main.js. CF.userMain sets some joins to their startup state, and sets up a watch on Preload Completion. While iViewer is loading the gui file, caching any images and while the system is processing any configuration assets, the system puts up a “Splash page with a spinning hourglass:

Configuration assets include: Interface definitions to external systems.

  • Mapping of IR driven components such as TV sets or STB's to iTach or GC-100 connectors.
  • Loading and mapping of IR files to reference names and devices they apply to.
  • Display Information about all lighting and appliances controlled by Homeseer or the ISY994i.

iViewer will not cache and guiDesigner will not export into zip files any resource that is not explicitly referenced in the guiDesigner XML output, the “gui file”. For that reason all configuration data is encoded into an object named “CFG” in the module “Configuration.js” which is referenced in the project script manager and therefore loaded. The CFG object contains sub objects with the configuration data for a logical entity e.g. a Rooms, Scenes, Interface connectivity, IR files, station (FM, Sirius) lists, and TV channel lists.

At startup after the completion of preloading as signaled by the firing of the preloadCompletionEvent, the system contacts Homeseer and the ISY 994 requesting the current status of every device that they directly control (X10 based devices, the Security system, Insteon device, etc..).

The configuration tables for all devices and systems (e.g. the pool system) are updated with the current state by recording: on/off state, brightness (0-255) if applicable, and a text string if applicable (e.g. standby battery voltage).

Homeseer will dynamically transmit status of devices under its control using a UDP broadcast message. [Note: the Homeseer status messages are sequence numbered and each message is sent N times (N=2) with the same sequence number. This reasonably handles the fact that UDP is not a guaranteed delivery protocol but rather a best effort protocol].

For the ISY994i, a message is sent to turn on subscriptions which cause the ISY994i to send to the iPads any and all status changes for every device it is cognizant of.

When a status message comes in the internal configuration tables are obviously updated. Most entries for a device configuration tables have a “display” sub object.

The display object has several sub objects which are used to drive the information on pages to be updated. The updates to the page displays take place whether they are visible or not. The graphics or text being updated may be in lists and may appear on different pages with the same or different join numbers. The display sub objects are as follows:

Title:Sets the text for a title string. Sets the text for the display graphic which might be in a list.
Icon:Sets an image to one of two images based upon on/off state
Opacity:Sets an images opacity between 1 and 0 based upon brightness
Slider:Sets the position of a designated slider based upon brightness
Text:Sets a text string based upon the current brightness with optional prefix/suffix
String:Similar to Text, but uses the string returned by feedback or an asynchronous input

[Note: for Opacity there are normally two icons at the same position on the page or in a list. The bottom icon is the “Off” icon to be visible when brightness is 0. The top icon is the “On” icon whose opacity is changed based upon the current brightness. At full brightness its opacity is set so it is opaque, at 0 brightness its opacity is set to be transparent. With the proper choice of Icons, this can be a very impressive display].

The remainder of the document will discuss the various pages that make up the iPad graphics. Some pages have multiple subpages and I will provide examples showing the page in various states.

The Home Page

The Home page or Idle page is the first page transferred to when the system has finished its initial setup, or when a page has “timed out”. Each page is timed when it is displayed. The timer is reset on any action to that page so it effectively determines the page's idle state. The Home page looks as follows:

The weather display is updated every hour by an external system which is queried when this page is loaded to be displayed. Each of the black buttons will transfer to a page that displays the state of that function and has the necessary buttons for control.

There are two buttons that do not operate that way; the button for the SqueezePad music system and the button for Movie Showtimes. These two buttons use a URL Schema to load either the SqueezePad app. or the IMDB app. iViewer then will be in the background still running since it is run in multitask mode. Exiting those apps just require a single click to bring iViewer and the system back into view; or if the version of IOS is recent a 4 finger swipe will go back to the prior app in the active multitasking list. These buttons use a Brass coloration to differentiate them.

Local Weather Page

This is the weather detail page. The top portion of the page is the current weather as recorded at the stated time. The graphics all change based upon the weather conditions and the background changes from blue to gray at night (after sunset) and back to blue at sunrise.

The bottom portion of the page is a scrolling list that holds a week's forecast showing both day and night conditions. There are no controls on this page other than those on the right and left for changing the page being displayed. Obviously the ability to scroll the forecast list exists.

Pool/SPA Page

This page displays all of the status received from the Autelis control system that monitors and controls the pool and SPA. The status is dynamically updated as things change. The various on/off buttons will control the functions they are titled to. The SPA may be scheduled for turn on by adjusting the values in The “Set SPA Turn On” region. Homeseer is used to handle the scheduling of a SPA turn on event.

The Autelis control will maintain only a single IP connection at a time. The logic for sending it commands involves (1) connecting, (2) sending the command, (3) waiting for the feedback response and then (4) disconnecting. If a connection cannot be made (another iPad is connected) it is re-tried at 500 millisecond intervals until successful or a maximum retry count has been exceeded. If the maximum retry count is exceeded a dialog is place onto the screen to inform the user of the issue. Note by CommandFusion: You could get around the issue of a single connection by using a CommandFusion LAN Bridge as a multiplexer.

The Autelis Control will send UDP messages for each change of state for any of the pool devices. It sends each message twice as a sequence numbered UDP broadcast to all hosts on the network.


This page is similar in concept to the Pool/SPA page but handles the two zones of Air Conditioning in my home. The system uses Insteon thermostats and the associated control logic. Each Thermostat talks to the ISY994. The use of the controls on the page should be obvious. The system updates dynamically whether the page is visible or not.

Displaying the page merely displays the current values since the joins were updated as the components they represent changed and asynchronous (unsolicited) feedback was received.

Lighting Control

The lighting control page handles all lighting for the house. When flipped to, it will initially show the list for the room the iPad is in. Lighting status is continuously updated whether this page is visible or not. The lower part of the list is normally not visible. It is made visible by touching the title of a light in the list. The list then rolls up to expose the slider. If the entry in the list has a percentage to the right of the bulb icon, then there is a slider associated with that light and the list may be rolled up to expose the slider.

All lighting is controlled by the ISY 994, as are all Insteon devices. The ISY994 can handle 10 simultaneous clients (in my case a client is an iPad), and a relatively unlimited number of devices. Each iPad “Subscribes” to the Insteon during startup, after requesting the ISY configuration and the status of all the devices under ISY994 control.

Non-Lighting Device Control

This page is very similar to the Lighting control page. When this snapshot was taken the Cable box wall receptacle was powered and the Hot water circulator was operating. All other devices were off/closed. The cable STB in the kitchen is out of reach so to “reboot it” was a pain in the butt. It no longer is.

The hot water circulator is a small pump to circulate hot water to every fixture in the house. The house is large so waiting for hot water to arrive at a shower can be a little annoying. The circulator only runs when the house is disarmed and between 7AM and 11PM. If however you walk into a bathroom and turn on the lights, then the circulator immediately starts and runs for one hour. The devices under the control of the ISY994 include Thermostats, Lighting switches, Relays to control outlets etc.

Caller ID and Call Status

The above is the call status page showing calls received. The actual callerID page is bright with a telephone as the background, using large type so it can be read from across the room. The Caller ID page shows who called, and the callers number. The CallerID page is displayed for 15 seconds and then the system reverts to the prior page, generally the black screen.

Homeseer handles the incoming call using a caller ID device which sends it the Caller ID information over a serial link. Homeseer looks up the phone number in a special list to see if it is a known number and if so changes the name displayed to a more readable piece of text. Homeseer announces the call over the house's announcement system (a ceiling speaker in each major room) stating the phone number and the name.

The caller ID message is also broadcast to the Theater control PC. That PC has a list of callers by number for which it will pause the theater (Movie, TV show, whatever is playing) so that the call can be answered, and displays the incoming call on its control screen. When I am finished with the call in the Theater, I just touch the “Play” button on the theater's remote system (Philips Pronto PRO 9800).

Stock Market Status Page

At one time the DOW was displayed but that changed when the owners of the DOW index stopped supplying the feed. The button labeled “Market Dash” will bring up the Market Dash app using its URL Schema. Unfortunately they do not supply a return option in their Schema. If the IOS is recent enough, then a 4-finger swipe can be used to bring back iViewer.

This app has all of the DOW information plus history and trend data.

The current status of any stock can be queried using the “By Symbol” button after entering the symbol in the text filed provided. The portfolio configuration is maintained by Homeseer from a text file which is easily changed with a text editor.

Alarm Clocks Page

This page allows for the control of alarm clocks, one for each of the three possible sleeping areas of the house. When the page is brought up the date and time are set to the current values. When an alarm clock is setup, Homeseer manages the wakeup call.

The wakeup call starts with the playing of a melodious chime followed by an audio announcement stating the time. Optionally I can have the current weather parameters (temperature, and conditions) spoken after the time.

Each room of the house has speakers under the control of Homeseer such that an announcement can be played over all the speakers or a subset of them.

At one time, before I was retired, I traveled quite a bit. My secretary would send an email to Homeseer on my domain with the flight information. Homeseer would then compute when I needed to be awoken and set the alarm clock appropriately. I trusted my secretary not to play games, she enjoyed her well paying job so it was a nice symbiotic relationship.

House Security

The house security system is an Napco Gemini 3200 system which is monitored 24/7 by a security service. The system is interfaced to Homeseer over a serial link.

When I leave the house (I am a widower and currently live alone) I touch a button on the mirror of my car. This sends a message to Homeseer using a Lutron RA system which links to the Homelink system provided by many car manufacturers. Homeseer will know which car I am in, and what time I left. Homeseer then makes sure the garage doors are closed and arms the house security system. When I return, a second button on the mirror is pressed to indicate that fact and Homeseer opens the appropriate garage door for that car and disarms the security system. The third button allows me to leave or return without changing the house's security state.

When I return and enter the house I will be seen by a motion sensor. Homeseer issues a greeting over the audio announcement system and speaks the list of people who called while I was gone, or tells me there were no calls.

I had looked into RFID tags for the cars, but it was not reliable enough. The Homelink/Lutron system has a range of about 100 feet.

Timed Events Page

The timed events page allows for the control of various devices according to some future scheduled event. The SPA is obvious, but does not show here. It is scheduled from the Pool/SPA page. The kitchen which was designed by my late wife, a gourmet cook, has a large center island. There are no ugly “Outlets” anywhere in the kitchen.

The Center Island has a drop down panel at each end which when opened reveals a 6 outlet power strip. These power strips are controlled by the ISY994 and may be set to turn on or off using this page. Very handy for parties when we want to brew coffee at a specific time.

About eight inches above the counter top under all the cabinets is a recessed power strip (Plugmold) with an outlet every 6 inches. The strip is covered in wood veneer which matches the cabinets and the outlets are faux painted to match the veneer. The surface of the strip is flush with the back splash giving the appearance of an accent stripe. My wife's issue was that kitchen outlets were never where she wanted them. I solved that problem! There is an outlet every 6 inches for the full length of all the counters.

Whole House Music

This is the page for the Whole house music system which is a slight misnomer. It should be called the Great Room music system as that is where it plays. It does also play on the Lanai. It interfaces to the Theater Control PC which is normally asleep (Power state s3).

When this page starts it first wakes up the PC by sending it a WOL. When feedback indicates the PC is ready it sends a command to the PC to turn on the Audio system, zone 2, which feeds the house music speakers. The in-wall house music speakers are not the same as the in-ceiling announcement speakers. When the Audio system is fully powered up the system then selects the SIRIUS tuner which is connected to the audio system and the audio system powers it up automatically. Music starts playing on the last selected SIRIUS station.

The grey area is a sliding list divided into the SIRIUS radio categories, and within the categories by each station. The station list is maintained in a configuration file for both the SIRIUS tuner and the FM tuner that is part of the audio system.

Touching the button marked “FM Tuner” will have the audio system switch to its internal FM tuner and the display will change to the following:

Touching the XM Radio button will revert the system back to the XM radio and bring up the prior display.

The little speaker with the X through it controls the announcement speaker on the Lanai. It is normally off, but can be turned on if I am going to be poolside. With it on such things as a phone call or the door bell ringing will be announced poolside.

Oops, there is no doorbell! Pressing the doorbell button sends a message to Homeseer to do its “doorbell” thing. It first plays a brief audio string (think Chime) which can be set to one of several on the Settings and Mode page. It then states: “Someone is at the front door”.

I change the doorbell chime based upon my mood or the season. This will become obvious when I show the Settings and Mode page.

Settings and Modes Page

This is a catch all page for setting operating modes and similar things. The selection of the doorbell chime should now be obvious.

The Slide Show window picks the slide show to be displayed if the Idle screen is set to slide show. The iPads then mimic a digital picture frame as opposed to a black screen.

The pseudo room selection only appears on my development iPad. The wall mounted iPads each know what room they are in.

The mode control list allows for the setting of various house modes. The top three entries relate to a simulated Grandfather Clock chime. “We Have Guests” changes how lights are turned off when I retire for the night. If I have guests, then the lights in the guest wing are not changed. If my friend is here then she gets a good night message and a greeting, it being assumed she is with me. Greet owner has to do with greeting me when I return home. Call transfer on exit is a hold over. my VOIP system automatically transfers calls to my cell phone if I do not pick up after 4 rings. I just have to remember to take my cell phone with me when I go out.

Next Page

case-studies/barry-gordon/residential-ipad-system-page-2.txt · Last modified: 2013/10/01 04:47 by aaron