Drive a webpage in real-time using Arduino, SensorMonkey and Processing.js by amccoy6
Featured
main.jpg
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

Step 1: Gathering Materials

circuit.jpg
setup.jpg
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
santoroma17 says: Mar 9, 2013. 7:20 AM
I only get the outline of the graphs not the data on the web page? any ideas
amccoy6 (author) says: Mar 11, 2013. 3:46 AM
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.
botronics says: Nov 16, 2012. 11:19 AM
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) says: Nov 16, 2012. 4:51 PM
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.
botronics says: Nov 17, 2012. 6:45 PM
Yes, that does work. Thank you.
thegrendel says: Jun 21, 2012. 3:41 PM
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) says: Jun 26, 2012. 3:39 PM
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.
hankenstien says: Jun 23, 2012. 1:33 AM


Yeah NO facebook


And of course anything Linux is good, mayb it;ll work with wine?
HANKIENSTIEN
rduino.com
anniemagz says: Jun 21, 2012. 11:19 AM
this would work pretty well with the twittering toilet idea...   ;)
Pro

Get More Out of Instructables

Already have an Account?

close

PDF Downloads
As a Pro member, you will gain access to download any Instructable in the PDF format. You also have the ability to customize your PDF download.

Upgrade to Pro today!