Create an IoT Realtime 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.

On the data visualization end, that’s why we created EON, a JavaScript framework for building realtime dashboards for IoT, web and mobile. And how we collect the data? That’s entirely up to you.

The full code repository is available here.

Tutorial Background

This tutorial actually inspired the entire EON framework. I first prototyped a potentiometer realtime dashboard a few weeks ago, and that demo was converted into a plug and play library called EON.

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).

This thing is beefy, it’s like Eclipse for Javascript and IoT. The IDE includes Error checking (jshint), deployment, NPM UI buttons, and a devtools inspector. That’s not even mentioning access to an Arduino inspired header layout, all accessible from NPM modules that come with every example.

We’re seeing a glimpse of future of IoT development. You can’t beat coding NodeJS on microcontrollers, especially when it’s this easy.

Technology Overview

• Intel Galileo Gen 2: Our board that publishes potentiometer resistance to the internet.
• NodeJS: Running on the Galileo linux environment
• PubNub: Realtime Data Stream Network that connects the Galileo to EON
• EON Chart: Realtime 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.

Code Walkthrough

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 0 every 500ms, and publishes it to the PubNub Data Stream Network if it changes.

This is the publishing part:

The 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.

This means we’re halfway there. The value is being read from the Galileo and published over PubNub to the Internet. If you need more help with PubNub, check out our Javascript SDK Examples.

Now to render that value in a realtime, live-updating dashboard.

The 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.

Wrapping Up

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!