Highschool art class (a while back) – assignment: “Copy an interesting piece of artwork of your choice.” I’m not really sure what I was thinking when I chose this Andreas Vesalius piece from De humani corporis fabrica libri septem, but I think it turned out pretty cool. The paper is hand-made Native American paper. Click here for larger view.

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

Pencil sketch scanned on 5-28-2009

I scanned in my latest sketch. This one has been a fun one to work on. There is still a lot of detail to add in the middle. I’ll scan it again as it progresses.

Sketch 1

Here’s a scan of page 1 of my most recent sketchbook. If you’re interested in seeing more scans, you can follow this link. I’m working on developing a new 3D Flash photo gallery that I’ll use to display all of these in the future. Stay tuned.

So here’s how it works: There is a tiny flash movie embedded into this page and it’s moved off screen so it doesn’t interfere with the page layout. This movie clip opens a persistent NetworkConnection (a RTMP socket connection) to a Red5 server (running on my office desktop). JavaScript listens for your mouse to move or a click to happen and relays this event to the Flash movie. Flash then sends that data off to the server. The server (running Red5) figures out who’s viewing this same page and pushes an event to that client immediately. The Flash movie receives the event and relays that event to JavaScript. JavaScript then moves the little cursors around or plays the animated ‘click’ thingy.

A custom Red5 application has been created to keep track of who’s visiting what page and which clients needs to be notified of which mouse events. Basically it’s a proxy for mouse events.

Granted, it’s a pretty cheesy example of using this technology, but I think the overall concept has some potential. It allows true ‘push’ to clients unlike AJAX which relies on polling. Let me know what you think.