I had some issues with the serial input for Processing a few months back and thought it would be cool to visualize instead in the browser.  This way I could learn awesome HTML5 canvas stuff.

Today I decided to try and implement something simple.  Set up a local server and get the serial out to print in the browser.

On the Arduino side I simply had a reading from one of the analog pins:

/*
  AnalogReadSerial
 Reads an analog input on pin 0, prints the result to
the serial monitor
 This example code is in the public domain.
 */
void setup() {
  Serial.begin(9600);
}
void loop() {
  int sensorValue = analogRead(A0);
  delay(500);
  Serial.println(sensorValue, DEC);
}

In the above script, “delay(500)” puts half a second, 500ms, in the loop.  You can change that to any delay value to set the rate for new values printed to serial out.  On the local server side I needed something to retrieve the values and send them to the browser.  I used bottle.py since I used it last week for another project.  It was quick and easy to get up and running.

import serial
import sys
import bottle
@bottle.route('/arduino/')
def getArduino():
	#/dev/tty.<port where your arduino is>
	#this will probably not be the same as mine
	#you can find it by entering ls /dev/tty.* to see your
	#ports.  Also in Arduino IDE, go to Tools> Serial Port to
	#see which one you're at
	ser = serial.Serial('/dev/tty.usbserial-A900ceuF',9600)
	a = ser.readline()
	d = {}
	d['val']=a
	return d
@bottle.route('/')
def index():
	return open('index.html','r')
#These are for debugging, you can uncomment these,
#and comment out the bottle.run() if you need to debug
#bottle.debug(True)
#bottle.run(reloader = True )
bottle.run()

Bottle is pretty cool because it makes it easy to set things via http.  It returns the index.html page, as well as a JSON file for the arduino serial value.  Bottle converts the python dict to a JSON.

To get that script running, I just entered

python browser_vis_serial.py

and the localhost was set up.  Entering the localhost into the browser (ex. http://127.0.0.1:8080/) would fetch the index.html file.  Using jQuery, I got a JSON file from http://127.0.0.1:8080/arduino/, and displayed it using

$.getJSON(‘/arduino/’, function(data){

$(‘#vals’).html(data.val);
});

This retrieves the JSON by calling the python function under @bottle.route(‘/arduino/’), which reads in the incoming serial values.   The retrieved JSON is printed under the ‘#vals’ <div>.

This is within the recursive function, which loops every 500 ms as shown in the setTimeout that calls the function itself.

function getArduinoVals(){
$.getJSON(‘/arduino/’, function(data){

$(‘#vals’).html(data.val);

});

t = setTimeout(“getArduinoVals()”,500); //second argument is the milliseconds delay
}

And voila, I get something like this:

Click for full size

You can see the full code on github.

update (7/11/11) After posting this, the incredible Max Ogden showed me a similar project he made.  In his own words: ‘i made an arduino linear potentiometer control a youtube video of a monkey riding a goat on a tightrope’.

Wow.  Its pretty wild.  With serial into the browser, you can interface with the web through all sorts of controls- anything that hooks into the Arduino.  What would you make?