Home automation via iPhone

When we had our house built a little over 10 years ago, we had a home automation system installed, which included a Lutron Homeworks lighting control system. This meant every light circuit in the house was wired to Lutron’s controller, which could be programmed with their custom Windows application.

The installation company distributed multi-button keypads throughout the house and programmed them to do interesting things, like turning on a dim path of lights from the bedroom to the kitchen, or the ever-popular “30 seconds from now, turn off all lights in the house” button we use when going out or going to bed. One requirement I had was that they leave me with a copy of the application so I could re-program the keypads myself.

I quickly grew dissatisfied with being limited to the keypads, so did some digging around and discovered the documentation for the RS-232 command set used to program the keypads. I hooked up the serial port of the Lutron controller to my Linux server in the basement and quickly whipped up some HTML+Javascript to show me the status of all the lights in the house and let me change the level of any of the lights. Since we’re a very laptop-enabled household, this meant no more getting up off the couch to adjust the lights! There’s a generally-accepted belief that programmers are lazy, since we often write programs to do things for us, rather than do the things ourselves.

Now that we’re also an iPhone-enabled household, I decided it was time to get with the times. After all, it’s been almost 10 years since my original web-based version. I looked into several UI frameworks for creating iPhone web apps, and decided to go with jQTouch. After one evening I was up and running with an iPhone web app that would let me control the lights The next evening I had the app updated to query the lighting system to display the status of the lights in the house. Touching one of the lights brings up the iPhone radial selector to change the brightness of that light. Touching done sends a command to the Linux server with the RS-232 connection to the Lutron controller.

With jQTouch, the HTML and CSS were very straightforward, and only a little bit of JavaScript glue was needed to bring in the interactivity.

Here’s a bit of the Haml for the main page of the web app:

[cc lang=”haml” line_numbers=”false”]
%body
#home
.toolbar
%h1 Lighting
%form
%h2 Main Floor
%ul.rounded.lights
%li
.title Kitchen
%select{:id => ‘z_01_04_01_08_03’}
%optgroup{:label => “Kitchen”}
%option{:value => ‘0’} 0%
%option{:value => ’20’} 20%
%option{:value => ’40’} 40%
%option{:value => ’60’} 60%
%option{:value => ’80’} 80%
%option{:value => ‘100’} 100%
%li
.title Breakfast
%select{:id => ‘z_01_04_01_08_04’}
%optgroup{:label => “Breakfast”}
%option{:value => ‘0’} 0%
[/cc]

And the HTML which is delivered to the iPhone after Haml conversion:

[cc lang=”html4strict” line_numbers=”false”]

Lighting

Main Floor

  • Kitchen

  • Breakfast

    jQTouch’s CSS turns the unordered list with rounded class into a pretty iPhone screen, and its JavaScript enables effects like moving between screens (not used in this example).

    The JavaScript (jQuery) glue I mentioned earlier consists of two parts. First, when the web application loads, it makes an AJAX query to the Linux server and gathers information about the lights, then sets the initial state of the select form fields:

    [cc lang=’javascript’ line_numbers=”false”]
    // Populate the data
    $(document).ready(function() {
    $.getJSON(‘/automate/get_lutron.php’, function(data) {
    $.each(data, function(key, val) {
    var v = Math.round(parseFloat(val)/20)*20;
    $(“#z_” + key).val(v);
    });
    });
    });
    [/cc]

    The Lutron system identifies each light with a 5-part numeric string, like “02_04_01_02_01”. In order to do as little data transformation as possible, I used the same string as the selector IDs in the form (with z_ prepended since XHTML IDs can’t start with a number). Since I’m using 20% brightness granularity, a little math needs to be done for lights that are set to other values. All the lights have manual analog dimmer switches, so a light might be set to any value from 0-100% the old fashioned way (you know, walking over to the switch and physically moving the slider).

    The second part of the JavaScript glue listens for changes to any of the selectors in the web app, and then sends the new value to the Linux server’s Lutron RS-232 interface:

    [cc lang=’javascript’ line_numbers=”false”]
    // Lutron SELECT elements get wired to AJAX
    $(document).ready(function() {
    $(‘select’).change(function() {
    id = this.id.substring(2).replace(/_/g, ‘.’);
    val = $(this).val();
    var command = ‘fadedim,’ + val + ‘,1,0,’ + id;
    $.get(‘/automate/send_lutron.cgi’, {cmd: command});
    });
    });
    [/cc]

    The end result works beautifully, and now it’s even easier to turn off that forgotten kitchen light after settling down with popcorn in the family room!

    5 Comments to “Home automation via iPhone”