Public Lab Research note


Visualize live sensor data with p5js and an Arduino

by warren |

(This is a draft!) I made a simple p5js sketch (read below) to live sensor data off of an Arduino, from a web page -- with no drivers or cables, just audio tones. It's not perfect, but it's an interesting starting point and it's pretty neat. The sketch is here:

https://alpha.editor.p5js.org/jywarren/sketches/rkztwSt8M

The Arduino sketch to use with this is here, and you can load it onto most Arduinos, although I tested an Arduino Nano and an Arduino Uno:

https://create.arduino.cc/editor/jywarren/023158d8-be51-4c78-99ff-36c63126b554/preview

If you don't have an Arduino on hand, you can test it out with this test audio, recorded from a sensor by @donblair: https://www.youtube.com/watch?v=GtJW1Dlt3cg

If you do set it up on an Arduino, WebJack will output audio from pin 3 + ground. Use (splice?) an audio cable from those to a speaker or just plug it into your computer's microphone port if it has one.\

The demo isn't anything fancy; it just draws a pink circle higher and lower on the screen:image description

The Shinyei dust sensor

The #shinyei dust sensor (the black box at the top of the lead picture) is not a perfect sensor -- it has a lot of limitations, but it's only $20-30 on Amazon, and only $8 on AliExpress, and it reads #PM10 and #PM2.5 .

In the above photo, I connected it to an Arduino using the Serial #DustDuino sketch, modified for #WebJack. The DustDuino project and others like the Speck project have really done a lot with this sensor, although I believe more recent projects like #PurpleAir use a different one that's trying to get better data.

Anyhow, I'd like to get this graphing nicely in p5js... shouldn't be too hard, but I'm looking for collaborators if you want to give it a try! Here, I show the basic WebJack graphing demo with the Shinyei sensor and some chalkboard dust:

WebJack

WebJack (by @rmeister and I as part of Google Summer of Code -- #gsoc) is a way to read data from an Arduino (and other sources) using audio -- it basically turns your Arduino into an audio modem. Arduinos are inexpensive ($4-22) electronics boards which can read from a sensor and -- in this case -- generate audio tones with the data.

The audio tones (a kind of chirping sound) can be read by a web page without any cables or software, even on a phone. This is already a demo at the WebJack page.

p5js

p5js is an awesome platform for writing short visual code sketches -- based on Processing, for those who are familiar with that platform. They recently got a really nice web editor, so you can just write sketches online now:

https://alpha.editor.p5js.org/


I did this  Browse other activities for "webjack"


People who did this (0)

None yet. Be the first to post one!



This is marked this as an activity for others to try.
Try it now   Click here to add some more details.


air-quality sensors gsoc dustduino dust pm shinyei javascript webjack air-sensors purpleair pm10 pm2 p5js

seeks:replications activity:webjack activity:dustduino activity:pm activity:arduino activity:dust activity:javascript


4 Comments

I also proposed this p5js sketch as an example for the p5js web editor: https://github.com/processing/p5.js-web-editor/issues/529


Hi, @cfastie - do you think this could be adapted pretty easily for live debugging from a #nano-data-logger or #mini-pearl-logger ?

Is this a question? Click here to post it to the Questions page.


I have not used graphing for live debugging because I didn't know how easy it was to do. I use the live serial monitor in the Arduino IDE all the time, but it also has a serial plotter built in. So if values are written to serial from an Arduino singly or separated by comma, spaces, or tabs, the serial plotter will display a time-series graph.

This doesn't require anything that you don't already have working if you are using sensors connected to Arduinos. I'm sure there are advantages to using the additional WebJack hardware (but I bet few people reading this could name one) and there are certainly benefits to knowing how to code in Processing (but asking the common folk to learn ANOTHER language just to make a graph is not the best way to encourage computer literacy).

Maybe I need to hear about a scenario in which WebJack would save the day:

We are trapped in an old power plant that is about to blow. The only things we have are a phone, an Arduino, a headphone jack, and MacGyver's phone number. What should we do?

Is this a question? Click here to post it to the Questions page.


Oh, that plotter looks great! Thanks for sharing!

So, there are a lot of people out there teaching each other to make great visualizations in the p5js community, who are interested in using live sensor data, but hadn't been able to without some relatively brittle interfaces like a serial-javascript browser extension. So this'll be a nice way to engage a whole lot of expertise on data visualization from that community. They seem excited about it and are suggesting this be included as one of the standard "example sketches" for p5js, which'll be great.


You must be logged in to comment.