ioBridge tells us when someone's at HackPGH

Last Friday, HackPittsburgh was lucky enough to get an in-person presentation and demo of the ioBridge, a fantastic way to wire up your electronics projects to the web.  On top of that, the ioBridge team was nice enough to donate one of their awesome IO-204 control modules, and a handful of expansion modules!

Members Andy Leer and Marty McGuire thought that a nice first project for our ioBridge would be a shop presence notification system.  The idea is simple: the ioBridge senses the ambient light in the shop.  A web-widget reads this data from the ioBridge service, and displays an open sign if the light level is above a certain threshold, or a closed sign in the light level is below threshold. If the module is offline, we should not display the widget at all.

Step 1 – Prepare the ioBridge

Set up your ioBridge with the ambient light sensor module on channel 1 and connect it to the internet.  Next, register your module as described on the ioBridge Interface page.

Step 2 – Get your module’s Feed ID

On the Modules page, copy your Feed URL by right-clicking on the link shown below and copying it to the clipboard.

This URL gives you a JSON snapshot of the state of your module, including its ID, Online/Offline status, and the status of the lines on each channel. Now, we need to do something with this data!

Step 3 – Feed your module data to jQuery

jQuery is an excellent JavaScript foundation library for making AJAX techniques easy. In this case, we’ll be using jQuery to periodically load the JSON-formatted data from the ioBridge and update parts of the web page accordingly.  Below is the code for a simple test page that will display the Online/Offline status of the module, and whether the ambient light is over 500 (on a scale of 0–1023):

Step 4 – Pretty It Up

The last part of this project involved creating a couple of images to indicate lights-on/lights-off and some changes in the code to show the appropriate image only if the ioBridge appears to be Online. Here are the images that Andy created:

Because we use WordPress to host this blog, it was a pretty simple matter to add jQuery to the main template, and create a plain HTML widget that includes all of the correct code:

This is what it looks like at time of writing, with the ioBridge online and the shop lights off: