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?
