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
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: