(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:
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 .
- Read this great post for more on how to properly set up a Shinyei and about its limitations. (thanks @nanocastro !)
- and see this post for more options for dust sensors
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:
10 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
Reply to this comment...
Log in to comment
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.
Reply to this comment...
Log in to comment
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.
Reply to this comment...
Log in to comment
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.
Reply to this comment...
Log in to comment
@cfastie love the MacGyver example--laughed so hard at this. @warren ty for bringing this up during the recent weekly call. I knew this language rang a bell and it's because I came across it when I first looked into Processing (something I still need to learn). I think there is merit in connecting sensors and p5js because there are a lot of artists and data viz people that are interested in taking the next step, and this may be something they speak. I also think that the whole webjack thing has a lovely old-school quality that some people will find interesting.
Reply to this comment...
Log in to comment
Looking at better breadboardable headphone jacks!
https://www.adafruit.com/product/1699
Reply to this comment...
Log in to comment
These might do the same thing for 10¢ apiece: https://www.ebay.com/itm/10Pcs-3-5mm-Female-Stereo-Audio-Socket-Headphone-Jack-Connector-5-Pin-PCB-Mount/263546027136
Reply to this comment...
Log in to comment
Just compiling some quick links to where these parts can be found cheaply and easily:
For these, it'd be about $21 per kit.
Also, add $14 for a nicer sensor:
Reply to this comment...
Log in to comment
Here's a pic of a WebJack plug (using a 4-pin jack) attached to pins 3 and 6 of the #Simple-Air-Sensor, which has WebJack installed by default:
cc @mimiss 😃
Is this a question? Click here to post it to the Questions page.
TRRS plugs (4-pin plugs) are not super consistent, but this worked for me. I'll try to upload another pic with the exact pins of the jack also shown!
Reply to this comment...
Log in to comment
Login to comment.