Dallan’s weblog

I have been working on a little project that ‘pushes’ Arduino data from a USB connected PC to a server running Red5. Red5 treats each Arduino pin as a shared object. So when a pin (the Arduino has 6 analog pins and 14 digital pins) updates, every visitor viewing a subscribing webpage gets live data. I wanted to see how fast I could publish sensor data using Red5. I’m also interested in the performance with regards to bandwidth usages (to/from the server), speed of updates, CPU usage on the client to display the rapidly updating data in the browser, etc…

Click Here to Start Streaming Live Arduino Data
Analog Pin0: n/a
Analog Pin1: n/a
Analog Pin2: n/a
Analog Pin3: n/a
Analog Pin4: n/a
Analog Pin5: n/a

how it works:

First the server side stuff –  I wrote a .NET DLL so I can communicate easily with the Arduino using .NET. Next, I created a simple .NET winforms app that includes my DLL. I will use this application to get the data from the Arduino. The Arduino itself is running Standard Firmata V1.0 (http://firmata.org/wiki/Download). A Flex/Flash Actionscript 3 swf is used to connect to Red5 and create a shared object for each each Arduino pins (i.e. AnalogPin0, AnalogPin1, …, DigitalPin0, …, DigitalPin13). This Flex swf is embedded into the .NET (C# in this case) WinForm (using ActiveX or OLE or whatever) and the ExternalInterface is used to pass messages from C# to Actionscript running in the swf. When the .NET app gets data from the Arduino, it passes it immediately to the swf. The swf is connected to the remote Red5 server and updates the appropriate shared object (pin) immediately. I’ve attached a couple of images of my setup (I’m using a ASUS eee box as my control PC (little black box with the blue LED). Ignore the TED display box for now, I’ll post about that later.

Now for the client side — Since I’m using Red5, we need a swf on the client to create the connection to the Red5 server. I create a little (literally — it’s like 4 x 4 pixels and transparent) swf that handles the connection to the server. It also provides several callbacks that can be called from Javascript (again using the ExternalInterface). So all of the data that comes to us from the Red5 server is handled in the client browser using javascript. Here’s an example:


function subscribeClick()
{
alert("Subscribing!");
var con = getConnector();
if(con)
{
con.subscribe("arduino", "onArduinoData");
}
else
{
alert("Error subscribing.");
}
}


This function subscribeClick is called when I click on a simple HTML button. con in this example is the handle to the tiny flash swf embedded on the page. getConnector is just a helper function that does the document.getElementById(…) stuff. con.subscribe is where we register a javascript callback function (onArduinoData in this case) with the “arduino” object. Now, when an event happens on the Arduino, that onArduinoData will be immediately called on every client web browser that happens to have the page opened up. Pretty cool. Want to try it? If I have my Arduino running (which I hope to leave running for now), go to www.porterdigital.com and on the homepage in the upper-right, click on “Start Streaming Live Arduino Data” link. That subscribeClick() will get called and you should connect. I’ve only displayed the 6 analog pins for now.

That’s it. Hopefully you find it useful. Let me know if you have any questions or comments.

Files:
- Client Push GUI Project – talks to the Arduino (MS Visual Studio project)
- Flex Project for creating swf proxy (Adobe Flex Builder project)
- Javascript files
- Aduino DLL Project – used by Client Push GUI (MS Visual Studio project)
- Red5 Application – the project that runs on your Red5 server
- Client SWF connector – the tiny swf to embed on the page to relay RTMP to JS