Drive a webpage in real-time using Arduino, SensorMonkey and Processing.js

Remote visualization of real-time sensor data.

This tutorial describes in detail how to use the free SensorMonkey service to push real-time sensor data from an Arduino to a webpage for visualization using Processing.js. No server-side coding or Ethernet shield is required. A standard, run of the mill Arduino will work perfectly. You’ll also need a sensor to sample some values. I use an accelerometer, but anything will work (a potentiometer, a gyroscope, a tilt sensor, a temperature sensor, a light sensor etc.). If you don’t have a sensor, it’s still possible to follow the tutorial by sampling the floating input voltages on the Arduino’s analog pins as a (somewhat) crude substitute.

After configuring the Arduino to sample sensor values, I use SensorMonkey to publish the data live over the Internet in real-time (Disclosure: I co-founded the company developing SensorMonkey). Using SensorMonkey, I can access the data from any device connected to the Internet and use it to drive a real-time webpage. Proxies, firewalls and NATs can all be traversed. Best of all, it works with standard Arduino boards (Unos, Duemilanoves etc.) and does not require an Ethernet shield. Instead, I use free software called Bloom to network-enable the Arduino and connect it to SensorMonkey. In this tutorial, I visualize the data using Processing.js.

UPDATE 26-06-2012: Non-Windows Users
As an alternative to Bloom for non-Windows users, I have uploaded a Processing sketch, namedSensorMonkeySerialNet, to our GitHub account. This sketch is a serial-to-network proxy that also serves Flash Socket Policy files inline. It can be used instead of Bloom in Step 3 for users running Mac OS or Linux.

Step 1: Gathering Materials

The following combination of hardware and software is required to complete this tutorial:

Hardware:

– Arduino (I use an Uno but older boards such as a Duemilanove will work fine)
– USB cable to connect Arduino to host computer
– Analog sensor (I use a ADXL335 accelerometer)
– Assorted wires to connect your sensor to the Arduino

Software:

– Arduino development environment (http://www.arduino.cc)
– Free account on SensorMonkey.com (login with your existing Facebook account)
– Bloom (serial port to TCP/IP socket redirector for Microsoft Windows)
– Processing.js

Step 2: Connect Arduino and Upload Sketch

If you have not done so already, you should take the time to familiarize yourself with the basic operation of an Arduino by reading the Getting Started guide on the main Arduino website. In particular, make sure you have downloaded and installed the Arduino development environment and that you are able to upload sketches to the board. The Arduino will be assigned a serial port when connected to the host computer. If using Windows, you can determine the assigned serial port by opening Device Manager and expanding the Ports (COM & LPT) section. You should see the Arduino listed underneath (in my case, the Arduino has been assigned to COM8).

I have connected my ADXL335 accelerometer to the Arduino as shown (image taken from http://bildr.org). I am going to sample analog-to-digital (ADC) pins 0, 1 and 2 on the Arduino at regular intervals and write their values to the serial port. To do this, I upload the following sketch to the Arduino’s microcontroller using the development environment:

void setup() {
Serial.begin( 9600 );    // Open the serial port.
}

void loop() {
unsigned int x = analogRead( 0 );    // Read 10-bit x-axis accelerometer on ADC pin 0.
unsigned int y = analogRead( 1 );    // Read 10-bit y-axis accelerometer on ADC pin 1.
unsigned int z = analogRead( 2 );    // Read 10-bit z-axis accelerometer on ADC pin 2.

// Write synchronization bytes to serial port to act as starting markers for each ‘packet’.
Serial.write( 0xA5 );
Serial.write( 0x5A );

For more detail: Drive a webpage in real-time using Arduino, SensorMonkey and Processing.js