UPDATED 16th MAY 2011 – download the source from this post.

UPDATED 13th MAY 2012 – have a look at the update to C-ChangePHP in this post.

I was an early adopter of Clipsal’s C-Bus building automation system, adding a small installation to our cosy circa-1917 semi back in 1999.

Initially we had a grand total of 4 or 5 devices on the bus. We ripped it out and took it with us when we moved into our current home, and we now have more than 30 units on the network, with lots of dimmers, relays, auxiliary inputs, analog outputs (for 0-10V dimming control of LEDs) and even a DMX output.

With so many individual channels at our control, the number of outputs eventually exceeded the number of switches, so an alternate means to control everything was required – and so the web interface was born.

Clipsal does offer one or two products that permit some kind of web control, but they were either too complex to code, kludgy, or too expensive for a home environment like this.

So I trawled the web, found some bits and pieces that I liked, and wrote my own user interface.

The code available today is written in PHP, served from a standard web-server. I use WAMP running on a virtual Windows 7 32-bit machine under Hyper-V. When you send commands to, or query, the bus, it opens a Telnet session to the C-Gate application (which must be running on a machine somewhere), squirts the appropriate commands and feeds the response back to the user.

The basic network architecture looks something like this:

There are 3 PHP files running the show, and a couple of CSS files for the formatting.

• PHPTelnet.php is the main communication engine. This was sourced from the web, and I give full credit to Antone Roundy. You don’t need to customise this at all – I’ve already tweaked it to talk C-Bus.
• c-bus_common.php is of my doing. It contains routines that interface between the ‘presentation’ page and the comm’s engine, as well as parsing the site’s XML tags file into session memory. You need to customise this file with the name and location of your C-Gate tags file (normally resident in C:\Clipsal\C-Gate2\tag\) as well as the IP address or host name of your C-Gate machine – which might be the same as this machine.
• index.php or whatever your main page is called. This is the interface the users interact with, so can be as adventurous or as vanilla as you care. When you’re developing and testing the page, simply set $demo = 1; and c-bus_common.php will accept your inputs and fake up a response without talking to the ‘Bus. On this page you also need to remove any references to “19P” (my network name) and replace them with your own.

Demo versions of the code are hosted here for you to have a look at and play with. Simply click on the image to open a new browser instance/window running the active demo. Note that unlike the Big Bang Theory episode, you’re not actually turning my lights on and off, so click away to your heart’s content. :-)

This is the graphical version. It’s essentially just a line-art drawing of the building with a simple HTML table normally layered invisibly over the top. I’ve deliberately left the room outlines coloured so you can see how the hot-spots are defined on the page. Clicking on any of the ‘rooms’ pre-selects the room, then you click on the action required: on, off, or ramp.

There are a couple of utility buttons at the bottom. In my real-world application I’ve coded some of these as “read-only” and they show things such as when the building thinks its dark, or other such events.

This is the tabular version. It simply reads all of  the available Groups from the ‘Bus, then looks up the C-Gate Tags file and presents each Group to you in the table. As with the graphical version, you simply choose one or more Groups, then select the action.

The code is offered to the public domain under the GNU GPL.

Please note that I’m no pro coder (in case that’s not apparent). I realise that a LOT of what I’ve presented here can be done better, and perhaps made device-agnostic and compatible with more browsers. I don’t have a good handle on CSS. We just don’t get along. I’ll leave refining the presentation for those who are capable of it. But for the rest of the C-Bus community on the web, you should find the code I’ve provided can be edited and cajoled to provide a perfectly workable interface to your home or building.

More information is to come, including some tips and gotchas. Stay tuned.