Instructables

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

Featured
Picture of Drive a webpage in real-time using Arduino, SensorMonkey and Processing.js
overview.jpg
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, named SensorMonkeySerialNet, 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.
 
Remove these adsRemove these ads by Signing Up

I know it is a simple circuit, but I have just got to say: That's a great photo of a nice, clean breadboard and workspace. Well done.

pbhat17 months ago

Im doing a project similar to your description, But Im using android cam as webcam, usin Droid cam app. and Im not usin Pan and tilt, It is just stationary.

Now in my project I have to turn on the webcam depending on PIR sensor output which is interfaced with arduino UNO. Im also using sensor monkey, bloom and justin.TV , how can I achieve it. Please do help me .

prajjujan@gmail.com

Hi I'm a total beginner and I'm trying to follow along with the tutorial, I just have one question, how would the tutorial differ if I'm using an arduino YUN, what steps would I leave out?
piano3331 year ago
You we're right, it is a Frontpage problem. I had a problem with where the processing.js file was located, apparently I needed to have the whole URL in there. Once I did that the connection error went away.

I am now getting the same problem as the user below that was only getting the outline of the graphs. I can view it on Sensor Monkey as a remote sensor without any problems, so I know it is streaming. I assume it is a problem with my HTML code then. I have entered my name and public key in the right place, all the text, and without quotation marks. I am new to HTML, and not sure why I am seeing nothing as a result. I can send you the code I have here if it will help. Thanks for your quick response. I hope I can get this thing working.
amccoy6 (author)  piano3331 year ago
Hi,

If you're still having problems you can send me the code and I can take a look through it for you. It could be one of a number of things.

Either send me a private message through Instructables or mail it to sensor.monkeys@gmail.com if you can.

Sincere apologies for the delay in getting back to you.
piano3331 year ago
I have the same problem. I am using Microsoft Frontpage and when doing the preview mode, it continually gives me the error "'Processing' is undefined." I have downloaded the processing-1.4.1.js file and have it referenced in my program the same way as demonstrated above. Any idea why I keep getting this same error?
amccoy6 (author)  piano3331 year ago
I'm not familiar with Microsoft Frontpage so it may be an issue to do with its 'preview' mode.

I would suggest uploading your files to a webserver (one running on your local machine will do) and testing it out to see if the error message persists.
I only get the outline of the graphs not the data on the web page? any ideas
amccoy6 (author)  santoroma171 year ago
Hi,

Can you check that you are not receiving any JavaScript errors inside your browser? Can you also verify that you can see your stream in the 'Remote Sensors' tab in the SensorMonkey Control Panel (this will tell you whether your data is being streamed correctly).

If you're not receiving any errors and your data is being streamed correctly then double check that you have entered the correct namespace/streamname details in your HTML viewer page (as described in Step 6). These are unique for every user.
botronics2 years ago
I signed up an account with Sensor Monkey. I'm having no success in graphing data from a picaxe sending decimal numbers with the serial port. Such as "72" for 72
degrees. I got Bloom to connect, baud rate is correct, its just the graph is all missed up. How do I set up the Format Description File to receive decimal numbers from the Picaxe?
amccoy6 (author)  botronics2 years ago
Hi,

SensorMonkey only supports binary data encodings. So, when sending the decimal number 72, for example, you can't send it as two separate characters, i.e. "72" where '7' and '2' are the characters. Instead, you have to encode it as an 8-bit binary number, i.e. a single byte containing a bit sequence of 01001000. You do this by writing the raw value to the serial port directly.

Basically, if you are using the PICAXE function sertxd, make sure you DO NOT put a # symbol in front of the variable or value that you are trying to send. Then, in your format description file, you can use an unsigned 8-bit integer (i.e. u8) to read and graph the data in the SensorMonkey control panel.
Yes, that does work. Thank you.
thegrendel2 years ago
This is an intriguing idea. I have a couple of suggestions to
make this more accessible.

1) It should be possible to create an account on SensorMonkey.com
without Facebook. Facebook-centric is a definite disadvantage.

2) Linux support would be extremely helpful. Bloom or equivalent
is probably not necessary on a Linux machine.
amccoy6 (author)  thegrendel2 years ago
Hi Grendel,

Thanks for the comments and apologies for the belated reply.

In response to point (1), we are currently assessing alternatives to Facebook for user logins.

As regards point (2), I have uploaded a Processing sketch to our GitHub account. The sketch is named SensorMonkeySerialNet and runs on Mac OS and Linux. It's not as full-featured as Bloom, but should enable users to connect their Arduinos to SensorMonkey without needing Windows.
hankenstien2 years ago


Yeah NO facebook


And of course anything Linux is good, mayb it;ll work with wine?
HANKIENSTIEN
rduino.com
anniemagz2 years ago
this would work pretty well with the twittering toilet idea...   ;)