Kevin Hoyt

JavaScript and Hardware Integration

Did you know that in 1960, when GE started mass producing red colored LED lights that they ran $260 USD each? Of course today, LED lights are mass produced, and you can pick one up for about $0.50 USD. As a commodity, the price of an LED is trending towards zero, and that’s the general direction for most electronics hardware. With a little know-how, some web standards and low-cost electronics at your side, it is easy to start making your own custom hardware creations. I’ll be showing you how during my general session presentation at The Ajax Experience 2009 in Boston, but here’s a sneak peak of the projects.

You might already be asking “How is that possible with the security sandbox of the browser?” Well, there are four main parts to getting started.

1. Hardware

The first part is some of that low-cost electronics hardware I mentioned earlier. Not just any electronics however, electronics that can be extended to your USB port. It just so happens that is pretty common these days, but there are two specific prototyping platforms I’ll be showing you, Phidgets and Arduino. Phidgets are the easiest place to get started as they are designed with plug-and-play in mind. The Arduino by comparison is an extensible jumping off point for pretty much anything you can dream up.

2. Serial to Socket Server

The second piece you will need is a serial-to-socket server. As the name implies, this software runs on your computer, and will use the native system to communicate with the USB port. As it gets data from the port, it will in turn broadcast that data over a network (generally a TCP/IP network for web purposes). While this type of server may sound obscure, there are actually a number of options available. I’ll be using the freely available Serproxy server on my Mac during the session, but you can find implementations for pretty much any operating system.

3. Socket Library

Now all you need is a socket library that can accept and interpret the data from the network. Again, you might be thinking that JavaScript doesn’t have a socket library, and that even if it did, the browser security sandbox would shut you down. That’s where I come in, as an Adobe evangelist, to show you Adobe AIR. Adobe AIR allows you to build desktop applications using web standards, and guess what? There’s virtually no security sandbox in place, and it also provides a socket class for you to use. Bingo!

4. Your Code and Innovation

The last part you need then is to write some JavaScript that does something interesting with all of this data. Again, during my session, I’ll be walking you through all the details, including a heavy amount of JavaScript. In the meantime however, here are some screenshots of the specific projects I’ll be showing. Keep in mind as you look these over that the most interesting parts aren’t the application, but the hardware itself, and the specifics on the integration. Oh, and yes, I’ll be making all the source available after the conference.

Our first stop is a piece of hardware that is already designed to be connected to your USB port that I didn’t mention – the SparkFun USB Weather Board. Weather is always changing, so tracking it makes for a good source of interesting data. In this case however, you’re getting the data in real-time, from the board, and as such, you could broadcast it onto the web. I don’t go that far in my demonstration, but rather put the weather data in a “weather center” application based on my Oregon Scientific weather station.

We as humans are emotional creatures, and that emotion shows up in our online social networks – namely, Twitter. Ever use a “smiley”? Maybe you went all upper case on somebody? Perhaps you are more subtle and just dropped an exclamation point. All that expresses data, and there’s a web site called “emotionstream” that aims to analyze those points of inflection and report on the specific emotions of a given Twitter user. Building on their JSON data stream, this demonstration allows you to query the emotions of a specific Twitter user, and then drive a servo (small motor) to show you whether or not it’s a good day to ask for a raise.

A “photocell” is a piece of electronics hardware called a resistor. Most resistors do what the name implies, they resist a certain amount of electrical flow. That amount however is usually fixed. The resistance of a photocell however is dependent on the available light. On the other side of the photocell then we can measure how much electricity is coming across, and determine how much resistance is being applied. This application graphs that resistance over time using a jQuery plugin called Flot.

At this point you should probably have enough inspiration to really start building your own projects. Did somebody leave the refrigerator door open? You know how to check for light with a photocell. Want to pull that tea bag out of the water after exactly five minutes? You know how to drive a servo. Want to know what the weather is like at home when you’re off on vacation? USB Weather Board to the rescue! And really, this is just the start. There are far too many components for me to mention in the thirty minutes I have available.

In fact, there’s two more projects I have lined up that I haven’t even mentioned here. Hey, if I told you everything, you wouldn’t attend the session! As a teaser though, one involves tracking every day household items like books and DVDs, and the other gets rid of that troublesome USB cable so we can collect data and interact with items when there’s no computer (or person for that matter) around. After the conference, I’ll blog each project individually with detailed code coverage and source for you to download.