This blog post describes an older method for connecting sensors to a web browser. You can learn about a newer, more robust method using Web Bluetooth in this Under the Hood article from our fall 2017 @Concord newsletter.
What if you were reading a blog or working through an online lesson and you could just plug in your Arduino and start taking data or interacting with models right in your browser?
Here at the Concord Consortium we are very interested in making sensors that are easy to use in the classroom or embedded directly into rich online curriculum. We’ve done some work in the past using applets as an intermediary to read data from commercial sensors and displaying them in lightweight graphs in the browser. When we think of fun, hackable, multi-probe sensors, though, we naturally think of Arduinos — we are open-source geeks after all.
In thinking of ways to display Arduino data in a browser with the minimum amount of fuss, we considered both our existing applet technique and using the new HID capabilities of the Arduino Unos. But while we will probably still find uses for both strategies, it occurred to Scott Cytacki, our Senior Developer, that we could simply use the common Ethernet Shields (or the new Arduino Ethernets) to send the data directly to the browser.
With this idea, it was quick work to hack the Arduino Server example to send JSON values of the analog pins and create a webpage that would rapidly poll the Arduino for data. So here is the first example that I wrote in about 70 lines of code (including the Arduino sketch) usable on any Ethernet-capable Arduino on any browser:
- Upload the tiny server sketch to your Arduino
- Plug in your ethernet shield, connect the Arduino to your computer with an ethernet cable and wait about 30 seconds for the Arduino server to boot up
- Optionally connect a sensor to pin A0. (The demo below is scaled for a L35 temperature sensor, but you don’t need it — you might need to rescale the graph by dragging on the axis to see the plot, though)
- Click the “Start Reading” button below
You should see your Arduino data filling up the graph. If not, wait another 20 seconds to ensure the server is fully booted and click the “play” button at the top right to start it again.
Wow, that was actually pretty easy!
I created the slightly more complicated example below reads data from all six analog pins, applies an optional conversion, and graphs any one of the data streams. If you were already reading data above, you don’t need to do anything new, just hit the button:
We think this is really cool, and we can’t wait to come up with new ways to integrate this into online content. Why not feed the temperature data into the HTML5 version of Molecular Workbench we’re developing under our new grant from Google.org, for instance, and see the atoms speed up as the temperature increases? Or set up an online classroom where students across the globe can take environmental readings and easily upload and pool their data?
- This Arduino Sketch creates a server running on http://169.254.1.1, which is a private local IP that will automatically try to not conflict with other servers, allowing for easier connection without a DHCP server. The sketch then returns JSON data using the JSON-P technique of calling back a function, which allows us to make cross-domain requests.
- Click on the tabs at the tops of the embedded jsFiddle examples to see the source code for streaming data to the webpage, or fork and edit any of the examples yourself.
- The graphs are creating using D3.js, and make use of the simple-graph library created by Stephen Bannasch.