Create an IoT Real-time Dashboard with Intel Galileo
Being a data stream network, we’re constantly looking for new ways to visualize data streams collected from the physical world. And that’s a large part of the rise of the Internet of Things in general.
Now that EON is complete, we’re revisiting the idea that started it all. The potentiometer demo.
I originally tried to build this with Raspberry Pi, but discovered it doesn’t have Analog inputs. While I wait on my Analog to Digital Converter, I dug through my supply and rediscovered the shiny Intel Galileo I got from participating in the IOT contest on CodeProject.
Intel Galileo Gen 2
The Intel Galileo is really a fantastic product. Not only are you getting Intel quality hardware, packaging, and documentation, but it also comes with a custom IDE powered by Brackets. It was harder to setup than the Raspberry Pi and Arduino (Uno and Yun).
We’re seeing a glimpse of future of IoT development. You can’t beat coding NodeJS on microcontrollers, especially when it’s this easy.
- Intel Galileo Gen 2: Our board that publishes potentiometer resistance to the internet.
- NodeJS: Running on the Galileo linux environment
- PubNub: Real-time Data Stream Network that connects the Galileo to EON
- EON Chart: Real-time charting framework that connects to PubNub and renders the resistance value in HTML
Setup the Intel Galileo
This tutorial assumes you own a Mac and a Galileo Gen 2.
The very first step is to format an SD card and update the firmware. (I wasted a lot of time trying to get set up on old firmware). You can follow this guide for detailed instructions.
After you complete the steps in this guide, you’ll have Node.js running on your Galileo and you’ll be ready to get to hacking.
It’s also worth noting that I used a Thunderbolt Ethernet adapter to share my MacBook connection with my Galileo. I usually have an easier time setting my sharing to BootP when this is the case. If you have your Galileo plugged directly into a switch, ignore this.
Set up the XDK
Once you’re all setup and have connected to your Galileo, you should see the screen above. Try running “Onboard LED Blink” and then the “Analog Read” templates to get a feel for how the Galileo works.
All we’re going to do is modify the Analog Read demo to publish the values of Pin 0 to the Internet (over PubNub). PubNub has an easy to use package for this, but more on that later.
Wire the Potentiometer
Let’s wire the potentiometer.
Potentiometers are simple. 5 volts goes into one pin and the ground goes out the other pin. When you turn the potentiometer, it increases or decreases resistance and that value is fed out of the middle pin.
The red wire is 5v, the black wire is ground, and the green wire is fed into analog input 0.
You can test your setup with a multimeter, or dive right into the code.
Back to Node.js. Start by loading the the Analog Read example in the IoT XDK.
In the package.json, add PubNub as a dependency:
Then click Install/Build. This essentially runs
npm install on your Galileo and adds the PubNub library to your build.
PubNub is the backend for this demo; it allows us to publish the value of the potentiometer to the Internet and read it somewhere else.
The following example reads the value of analog pin
500ms, and publishes it to the PubNub Data Stream Network if it changes.
This is the publishing part:
channel is the name of the room for which we’ll subscribe to messages on the other end. The
message is formatted like so because it matches the schema defined in eon-chart. More on that later.
If everything is working you should see the value of the potentiometer output to the PubNub console here.
Now to render that value in a real-time, live-updating dashboard.
Now we’ll create a HTML webpage to render the chart. We include the
eon framework in the head of the page, and that’ll take care of connecting to PubNub and creating our chart.
Create the chart with the following function. We supply the same PubNub channel the Galileo is broadcasting from (
pubnub-intel-gal-demo) and render the data in a
gauge type chart. EON-chart subscribes to that PubNub channel, renders the chart, and updates it when the value changes.
Try it out! Load this page up in chrome and turn the potentiometer.
That’s it! Now your Intel Galileo is broadcasting its information over the Internet (via PubNub Data Streams) and into a webpage displaying a live-updating dashboard. You’re probably loading the page locally, but it can be hosted anywhere and it’ll still work all the same.
You can extend this demo by adding more charts (a spline chart for example), more analog inputs (more potentiometers, buttons, light sensors, etc), or even adding more microcontrollers. You can even use PubNub to allow one Galileo to talk to another Galileo, or command them all from a centralized control panel!
If you want to learn more about all the things you can do with the EON framework and PubNub, check out the video below!