Your Smart IOT

Streaming Accelerometer Readings to a Realtime Dashboard

Wall's Corners

Link Author

Title: Streaming Accelerometer Readings to a Realtime Dashboard
Author: Wall's Corners
Rating 5 of 5 Des:

In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime...

<a href="http://bit.ly/1rxvWOl" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f58356c4b3557412e676966" class="aligncenter size-full wp-image-12771" height="480" src="http://bit.ly/1rxvWOl" width="480" /></a>
In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime dashboard, powered by an Intel Galileo. Accelerometers are in smartphones, rockets, navigation systems, and even structures.
Accelerometers work like this. Imagine a cardboard box with a basketball inside. Now imagine picking up the box and moving it left or right. Depending on how fast you pick up the box, the basketball may hit the roof. If you move it left or right, it’ll hit the sides.
<a href="http://bit.ly/1SSRvj4" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f546470544f77712e706e67" class="aligncenter size-full wp-image-12772" height="280" src="http://bit.ly/1SSRvj4" width="450" /></a>
This is how an accelerometer works. The only difference is there is some component to measure the force of the ball hitting a wall. It also happens on a much smaller scale, about the size of your fingernail.
By measuring the amount of static acceleration due to gravity, you can find out the angle the device is tilted at with respect to the earth. By sensing the amount of dynamic acceleration, you can analyze the way the device is moving. At first, measuring tilt and acceleration doesn’t seem all that exciting. However, engineers have come up with many ways to make really useful products with them. Check out <a href="http://bit.ly/1rxvWOm" target="_blank">this article</a> for more on accelerometers.
<h3>ADXL335 Triple Axis Accelerometer</h3>
<a href="http://bit.ly/1SSRxHU" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f574850546854592e6a7067" class="aligncenter size-full wp-image-12773" height="442" src="http://bit.ly/1SSRxHU" width="442" /></a>
For this demo we’re going to be using the <a href="http://bit.ly/1rxvUpO" target="_blank">SainSmart ADXL335 Triple Axis Accelerometer</a>. The sensor is a polysilicon surface-micromachined structure built on top of a silicon wafer. Polysilicon springs suspend the structure over the surface of the wafer and provide a resistance against forces due to applied acceleration, As described in <a href="http://bit.ly/1SSRvj7" target="_blank">the data sheet</a>.
Here are some specs:
<ul>
<li>3-axis sensing</li>
<li>Small, low profile package</li>
<li>4 mm × 4 mm × 1.45 mm LFCSP</li>
<li>Low power : 350 μA (typical)</li>
<li>Single-supply operation: 1.8 V to 3.6 V</li>
<li>10,000 g shock survival</li>
<li>Excellent temperature stability</li>
<li>BW adjustment with a single capacitor per axis</li>
<li>RoHS/WEEE lead-free compliant</li>
</ul>
<h3>Tutorial Overview</h3>
<ul>
<li><a href="http://intel.ly/1rxvUpP" target="_blank">Intel Galileo Gen 2</a>: Publishes accelerometer readings via PubNub to the dashboard.</li>
<li><a href="https://nodejs.org/" target="_blank">NodeJS</a>: Running on the Galileo <a href="http://bit.ly/1T1LpPV" itemprop="url" target="_bank" title="linux">linux</a> environment.</li>
<li><a href="http://bit.ly/1rZ3028" target="_blank">PubNub</a>: Realtime Data Stream Network that connects the Galileo to Eon-chart and streams the data in realtime.</li>
<li><a href="http://bit.ly/1T1LrXT" target="_blank">EON-chart</a>: Realtime dashboard and charting framework that connects to PubNub and renders the acceleration readings in HTML (in this case, a realtime dashboard).</li>
</ul>
<a href="http://bit.ly/1rZ3029" target="_blank">Full code repository here.</a>
<h3><a class="anchor" href="http://bit.ly/1T1Lq68" id="user-content-galileo" name="user-content-galileo" target="_blank"></a>Intel Galileo</h3>
We’re going to use Intel Galileo; Intel’s flagship IOT prototyping chip that runs <a href="http://bit.ly/1rZ302b" itemprop="url" target="_bank" title="NodeJS">NodeJS</a>. Check out the <a href="http://bit.ly/1T1Lq69" target="_blank">last post where we connected a potentiometer to Intel Galileo</a>.
<h3><a class="anchor" href="http://bit.ly/1rZ302d" id="user-content-solder-the-accelerometer" name="user-content-solder-the-accelerometer" target="_blank"></a>Solder the Accelerometer</h3>
First thing we need to do is solder headers to the accelerometer. Soldering headers is very simple. Just insert some headers into the provided points, touch solder to the connection, and then touch the soldering iron.
<a href="http://bit.ly/1T1LrXW" target="_blank"><img alt="687474703a2f2f7777772e63646e2e736369656e6365627564646965732e6f72672f46696c65732f323038342f352f456c65635f7072696d65722d736f6c646572322e6a7067" class="aligncenter size-full wp-image-12774" height="308" src="http://bit.ly/1T1LrXW" width="600" /></a>
When you’re done, you’ll have an accelerometer you can plug into anything.
<a href="http://bit.ly/1rZ2YYg" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f316e576f7678632e6a7067" class="aligncenter size-large wp-image-12775" height="509" src="http://bit.ly/1T1Lq6c" width="1024" /></a>
<h3>Wiring the Accelerometer into the Galileo</h3>
Great, now let’s wire the accelerometer. This particular device is really simple, there are 6 connections.
<ul>
<li>ST – don’t worry about this</li>
<li>Z – z axis acceleration</li>
<li>Y – y axis acceleration</li>
<li>X – x axis acceleration</li>
<li>– – ground</li>
<li>+ – 3.3v power</li>
</ul>
Thanks to the header pins we just soldered, we can simply plug the accelerometer into our breadboard. Take 5 jumper cables, and wire them to each of the connections (excluding ST).
<a href="http://bit.ly/1rZ2YYi" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f4b5573586778652e6a7067" class="aligncenter size-large wp-image-12776" height="579" src="http://bit.ly/1T1Lq6e" width="1024" /></a>
I used green for x, y, and z, red for power, and black for ground. Now plug the other ends of the jumpers into the Galileo. Note that you need to use 3.3v power and not 5v. 5v will damage your accelerometer.
<table border="1">
<thead>
<tr>
<th>Connection</th>
<th>Wire Color</th>
<th>Galileo Pin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Z</td>
<td>Green</td>
<td>A0</td>
</tr>
<tr>
<td>X</td>
<td>Green</td>
<td>A1</td>
</tr>
<tr>
<td>Z</td>
<td>Green</td>
<td>A2</td>
</tr>
<tr>
<td>–</td>
<td>Black</td>
<td>GND</td>
</tr>
<tr>
<td>+</td>
<td>Red</td>
<td>3.3v</td>
</tr>
</tbody>
</table>
Here’s what mine looked like when I was done connecting everything:
<a href="http://bit.ly/1rZ2YYk" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f4b4e4359734d612e6a7067" class="aligncenter size-large wp-image-12777" height="579" src="http://bit.ly/1T1Lq6i" width="1024" /></a>
<h3>Node.js</h3>
Now we’re going to read the accelerometer data using Node.js and publish it via <a href="http://bit.ly/1rZ2YYm" target="_blank">PubNub Data Streams</a> so we can display it in realtime on our dashboard. Load the Intel XDK and start with a blank project.
If you need help setting up your Galileo, check out the beginning of our <a href="http://bit.ly/1T1Lq69" target="_blank">post on connecting a potentiometer to the Galileo</a>.
<a href="http://bit.ly/1T1Lq6k" target="_blank"><img alt="68747470733a2f2f736f6674776172652e696e74656c2e636f6d2f73697465732f64656661756c742f66696c65732f6d616e616765642f38652f32662f696e74656c78646b696f745f646576656c6f702e706e67-1" class="aligncenter size-large wp-image-12778" height="609" src="http://bit.ly/1rZ2YYn" width="1024" /></a>
<h3>Package.json</h3>
In the package.json add PubNub as a dependency:
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-1-json" class="file">
<div class="blob-wrapper data type-json">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-1-json-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-1-json-LC1" class="blob-code blob-code-inner js-file-line">{</td>
</tr>
<tr>
<td id="file-1-json-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-1-json-LC2" class="blob-code blob-code-inner js-file-line">“name“: “pubnub-galileo“,</td>
</tr>
<tr>
<td id="file-1-json-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-1-json-LC3" class="blob-code blob-code-inner js-file-line">“description“: ““,</td>
</tr>
<tr>
<td id="file-1-json-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-1-json-LC4" class="blob-code blob-code-inner js-file-line">“version“: “0.0.0“,</td>
</tr>
<tr>
<td id="file-1-json-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-1-json-LC5" class="blob-code blob-code-inner js-file-line">“main“: “main.js“,</td>
</tr>
<tr>
<td id="file-1-json-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-1-json-LC6" class="blob-code blob-code-inner js-file-line">“engines“: {</td>
</tr>
<tr>
<td id="file-1-json-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-1-json-LC7" class="blob-code blob-code-inner js-file-line">“node“: “>=0.10.0“</td>
</tr>
<tr>
<td id="file-1-json-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-1-json-LC8" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-1-json-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-1-json-LC9" class="blob-code blob-code-inner js-file-line">“dependencies“: {</td>
</tr>
<tr>
<td id="file-1-json-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-1-json-LC10" class="blob-code blob-code-inner js-file-line">“pubnub“: “3.7.10“</td>
</tr>
<tr>
<td id="file-1-json-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-1-json-LC11" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-1-json-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-1-json-LC12" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1LrY2" target="_blank">view raw</a><a href="http://bit.ly/1rZ302g" target="_blank">1.json</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Then click Install/Build. This essentially runs <code>npm install</code> on your Galileo and adds the PubNub library to your build. PubNub is the backend for this demo; it allows us to publish the accelerometer data to the internet and read it somewhere else.
We can read the accelerometer data using analog read. We’ll assign the values to x, y, and z within our javascript file.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-2-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-2-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-2-js-LC1" class="blob-code blob-code-inner js-file-line">var mraa = require(‘mraa‘);</td>
</tr>
<tr>
<td id="file-2-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-2-js-LC2" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-2-js-LC3" class="blob-code blob-code-inner js-file-line">console.log(‘MRAA Version: ‘ + mraa.getVersion()); //write the mraa version to the console</td>
</tr>
<tr>
<td id="file-2-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-2-js-LC4" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-2-js-LC5" class="blob-code blob-code-inner js-file-line">var x = new mraa.Aio(0);</td>
</tr>
<tr>
<td id="file-2-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-2-js-LC6" class="blob-code blob-code-inner js-file-line">var y = new mraa.Aio(1);</td>
</tr>
<tr>
<td id="file-2-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-2-js-LC7" class="blob-code blob-code-inner js-file-line">var z = new mraa.Aio(2);</td>
</tr>
<tr>
<td id="file-2-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-2-js-LC8" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-2-js-LC9" class="blob-code blob-code-inner js-file-line">var xo = x.read();</td>
</tr>
<tr>
<td id="file-2-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-2-js-LC10" class="blob-code blob-code-inner js-file-line">var yo = y.read();</td>
</tr>
<tr>
<td id="file-2-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-2-js-LC11" class="blob-code blob-code-inner js-file-line">var zo = z.read();</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lq6m" target="_blank">view raw</a><a href="http://bit.ly/1rZ302i" target="_blank">2.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Next, we’ll create a loop to continually read the values of the X, Y, and Z accelerations. In the following case, we store the initial values as a “zero” value and then calculate the difference.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-3-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-3-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-3-js-LC1" class="blob-code blob-code-inner js-file-line">setInterval(function(){</td>
</tr>
<tr>
<td id="file-3-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-3-js-LC2" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-3-js-LC3" class="blob-code blob-code-inner js-file-line">var xv = x.read() – xo;</td>
</tr>
<tr>
<td id="file-3-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-3-js-LC4" class="blob-code blob-code-inner js-file-line">var yv = y.read() – yo;</td>
</tr>
<tr>
<td id="file-3-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-3-js-LC5" class="blob-code blob-code-inner js-file-line">var zv = z.read() – zo;</td>
</tr>
<tr>
<td id="file-3-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-3-js-LC6" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-3-js-LC7" class="blob-code blob-code-inner js-file-line">console.log(xv, yv, zv);</td>
</tr>
<tr>
<td id="file-3-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-3-js-LC8" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-3-js-LC9" class="blob-code blob-code-inner js-file-line">}, 1000);</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lseg" target="_blank">view raw</a><a href="http://bit.ly/1rZ302k" target="_blank">3.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
<h3>Integrating PubNub</h3>
Now let’s integrate PubNub for the realtime streaming of the accelerometer data.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-4-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-4-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-4-js-LC1" class="blob-code blob-code-inner js-file-line">var mraa = require(‘mraa‘);</td>
</tr>
<tr>
<td id="file-4-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-4-js-LC2" class="blob-code blob-code-inner js-file-line">var PUBNUB = require(‘pubnub‘);</td>
</tr>
<tr>
<td id="file-4-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-4-js-LC3" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-4-js-LC4" class="blob-code blob-code-inner js-file-line">console.log(‘MRAA Version: ‘ + mraa.getVersion()); //write the mraa version to the console</td>
</tr>
<tr>
<td id="file-4-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-4-js-LC5" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-4-js-LC6" class="blob-code blob-code-inner js-file-line">var x = new mraa.Aio(0);</td>
</tr>
<tr>
<td id="file-4-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-4-js-LC7" class="blob-code blob-code-inner js-file-line">var y = new mraa.Aio(1);</td>
</tr>
<tr>
<td id="file-4-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-4-js-LC8" class="blob-code blob-code-inner js-file-line">var z = new mraa.Aio(2);</td>
</tr>
<tr>
<td id="file-4-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-4-js-LC9" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-4-js-LC10" class="blob-code blob-code-inner js-file-line">var xo = x.read();</td>
</tr>
<tr>
<td id="file-4-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-4-js-LC11" class="blob-code blob-code-inner js-file-line">var yo = y.read();</td>
</tr>
<tr>
<td id="file-4-js-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-4-js-LC12" class="blob-code blob-code-inner js-file-line">var zo = z.read();</td>
</tr>
<tr>
<td id="file-4-js-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-4-js-LC13" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-4-js-LC14" class="blob-code blob-code-inner js-file-line">var pubnub = PUBNUB.init({</td>
</tr>
<tr>
<td id="file-4-js-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-4-js-LC15" class="blob-code blob-code-inner js-file-line">publish_key: ‘demo‘,</td>
</tr>
<tr>
<td id="file-4-js-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-4-js-LC16" class="blob-code blob-code-inner js-file-line">subscribe_key: ‘demo‘</td>
</tr>
<tr>
<td id="file-4-js-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-4-js-LC17" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-4-js-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-4-js-LC18" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-4-js-LC19" class="blob-code blob-code-inner js-file-line">setInterval(function(){</td>
</tr>
<tr>
<td id="file-4-js-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-4-js-LC20" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-4-js-LC21" class="blob-code blob-code-inner js-file-line">var xv = x.read() – xo;</td>
</tr>
<tr>
<td id="file-4-js-L22" class="blob-num js-line-number" data-line-number="22"></td>
<td id="file-4-js-LC22" class="blob-code blob-code-inner js-file-line">var yv = y.read() – yo;</td>
</tr>
<tr>
<td id="file-4-js-L23" class="blob-num js-line-number" data-line-number="23"></td>
<td id="file-4-js-LC23" class="blob-code blob-code-inner js-file-line">var zv = z.read() – zo;</td>
</tr>
<tr>
<td id="file-4-js-L24" class="blob-num js-line-number" data-line-number="24"></td>
<td id="file-4-js-LC24" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L25" class="blob-num js-line-number" data-line-number="25"></td>
<td id="file-4-js-LC25" class="blob-code blob-code-inner js-file-line">console.log(xv, yv, zv);</td>
</tr>
<tr>
<td id="file-4-js-L26" class="blob-num js-line-number" data-line-number="26"></td>
<td id="file-4-js-LC26" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L27" class="blob-num js-line-number" data-line-number="27"></td>
<td id="file-4-js-LC27" class="blob-code blob-code-inner js-file-line">pubnub.publish({</td>
</tr>
<tr>
<td id="file-4-js-L28" class="blob-num js-line-number" data-line-number="28"></td>
<td id="file-4-js-LC28" class="blob-code blob-code-inner js-file-line">channel: ‘pubnub-intel-gal-demo-xyz‘,</td>
</tr>
<tr>
<td id="file-4-js-L29" class="blob-num js-line-number" data-line-number="29"></td>
<td id="file-4-js-LC29" class="blob-code blob-code-inner js-file-line">message: {</td>
</tr>
<tr>
<td id="file-4-js-L30" class="blob-num js-line-number" data-line-number="30"></td>
<td id="file-4-js-LC30" class="blob-code blob-code-inner js-file-line">columns: [</td>
</tr>
<tr>
<td id="file-4-js-L31" class="blob-num js-line-number" data-line-number="31"></td>
<td id="file-4-js-LC31" class="blob-code blob-code-inner js-file-line">[‘x‘, xv],</td>
</tr>
<tr>
<td id="file-4-js-L32" class="blob-num js-line-number" data-line-number="32"></td>
<td id="file-4-js-LC32" class="blob-code blob-code-inner js-file-line">[‘y‘, yv],</td>
</tr>
<tr>
<td id="file-4-js-L33" class="blob-num js-line-number" data-line-number="33"></td>
<td id="file-4-js-LC33" class="blob-code blob-code-inner js-file-line">[‘z‘, zv]</td>
</tr>
<tr>
<td id="file-4-js-L34" class="blob-num js-line-number" data-line-number="34"></td>
<td id="file-4-js-LC34" class="blob-code blob-code-inner js-file-line">]</td>
</tr>
<tr>
<td id="file-4-js-L35" class="blob-num js-line-number" data-line-number="35"></td>
<td id="file-4-js-LC35" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-4-js-L36" class="blob-num js-line-number" data-line-number="36"></td>
<td id="file-4-js-LC36" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-4-js-L37" class="blob-num js-line-number" data-line-number="37"></td>
<td id="file-4-js-LC37" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L38" class="blob-num js-line-number" data-line-number="38"></td>
<td id="file-4-js-LC38" class="blob-code blob-code-inner js-file-line">}, 1000);</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lq6o" target="_blank">view raw</a><a href="http://bit.ly/1rZ2ZeF" target="_blank">4.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
The <code>channel</code> is the name of the room for which we’ll subscribe to messages on the other end. The <code>message</code> is formatted like so because it matches the schema defined in eon-chart.
If everything is working, you should see the value of the accelerometer output on the <a href="http://bit.ly/1T1Lq6q" target="_blank">PubNub Developer Console here</a>. Try moving the accelerometer around and watch as the value output changes. That data is being streamed over PubNub.
Now to render that data on our realtime dashboard.
<h3>Receiving and Visualizing the Data on a Dashboard</h3>
Now to create an HTML webpage to render the realtime dashboard. We include the <code>eon</code> framework in the head of the page, and that’ll take care of connecting to PubNub and creating our chart. Easy huh?
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-5-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-5-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-5-html-LC1" class="blob-code blob-code-inner js-file-line"><script type=“text/javascript“ src=“http://bit.ly/1rZ302m“></script></td>
</tr>
<tr>
<td id="file-5-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-5-html-LC2" class="blob-code blob-code-inner js-file-line"><link type=“text/css“ rel=“stylesheet“ href=“http://bit.ly/1T1Lsei“ /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1rZ302o" target="_blank">view raw</a><a href="http://bit.ly/1T1Lsek" target="_blank">5.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Create the chart with the following function. We supply the same PubNub channel the Galileo is broadcasting from (<code>pubnub-intel-gal-demo-xyz</code>) and render the data in a <code>bar</code> type chart. EON-chart subscribes to that PubNub channel, renders the chart, and updates it when the value changes.
<a href="http://bit.ly/1rZ302q" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f71703666706f6c2e676966" class="aligncenter size-full wp-image-12779" height="654" src="http://bit.ly/1rZ302q" width="968" /></a>
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-6-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-6-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-6-html-LC1" class="blob-code blob-code-inner js-file-line"><script></td>
</tr>
<tr>
<td id="file-6-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-6-html-LC2" class="blob-code blob-code-inner js-file-line">var channel = “pubnub-intel-gal-demo-xyz“;</td>
</tr>
<tr>
<td id="file-6-html-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-6-html-LC3" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-6-html-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-6-html-LC4" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-6-html-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-6-html-LC5" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-6-html-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-6-html-LC6" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart‘,</td>
</tr>
<tr>
<td id="file-6-html-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-6-html-LC7" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-6-html-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-6-html-LC8" class="blob-code blob-code-inner js-file-line">labels: true,</td>
</tr>
<tr>
<td id="file-6-html-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-6-html-LC9" class="blob-code blob-code-inner js-file-line">type: ‘bar‘</td>
</tr>
<tr>
<td id="file-6-html-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-6-html-LC10" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-6-html-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-6-html-LC11" class="blob-code blob-code-inner js-file-line">bar: {</td>
</tr>
<tr>
<td id="file-6-html-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-6-html-LC12" class="blob-code blob-code-inner js-file-line">width: {</td>
</tr>
<tr>
<td id="file-6-html-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-6-html-LC13" class="blob-code blob-code-inner js-file-line">ratio: 0.5</td>
</tr>
<tr>
<td id="file-6-html-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-6-html-LC14" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-6-html-LC15" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-6-html-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-6-html-LC16" class="blob-code blob-code-inner js-file-line">tooltip: {</td>
</tr>
<tr>
<td id="file-6-html-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-6-html-LC17" class="blob-code blob-code-inner js-file-line">show: false</td>
</tr>
<tr>
<td id="file-6-html-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-6-html-LC18" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-6-html-LC19" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-6-html-LC20" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-6-html-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-6-html-LC21" class="blob-code blob-code-inner js-file-line"></script></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lsem" target="_blank">view raw</a><a href="http://bit.ly/1rZ30iE" target="_blank">6.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Try it out! Load this page up in Chrome and move your accelerometer around.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-7-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-7-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-7-html-LC1" class="blob-code blob-code-inner js-file-line"><html></td>
</tr>
<tr>
<td id="file-7-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-7-html-LC2" class="blob-code blob-code-inner js-file-line"><head></td>
</tr>
<tr>
<td id="file-7-html-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-7-html-LC3" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-7-html-LC4" class="blob-code blob-code-inner js-file-line"><script type=“text/javascript“ src=“http://bit.ly/1rZ302m“></script></td>
</tr>
<tr>
<td id="file-7-html-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-7-html-LC5" class="blob-code blob-code-inner js-file-line"><link type=“text/css“ rel=“stylesheet“ href=“http://bit.ly/1T1Lsei“ /></td>
</tr>
<tr>
<td id="file-7-html-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-7-html-LC6" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-7-html-LC7" class="blob-code blob-code-inner js-file-line"><style></td>
</tr>
<tr>
<td id="file-7-html-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-7-html-LC8" class="blob-code blob-code-inner js-file-line">.c3-region-1 {</td>
</tr>
<tr>
<td id="file-7-html-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-7-html-LC9" class="blob-code blob-code-inner js-file-line">fill: #dd3333;</td>
</tr>
<tr>
<td id="file-7-html-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-7-html-LC10" class="blob-code blob-code-inner js-file-line">fill–opacity: 0.8</td>
</tr>
<tr>
<td id="file-7-html-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-7-html-LC11" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-7-html-LC12" class="blob-code blob-code-inner js-file-line"></style></td>
</tr>
<tr>
<td id="file-7-html-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-7-html-LC13" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-7-html-LC14" class="blob-code blob-code-inner js-file-line"></head></td>
</tr>
<tr>
<td id="file-7-html-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-7-html-LC15" class="blob-code blob-code-inner js-file-line"><body></td>
</tr>
<tr>
<td id="file-7-html-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-7-html-LC16" class="blob-code blob-code-inner js-file-line"><div id=“chart“></div></td>
</tr>
<tr>
<td id="file-7-html-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-7-html-LC17" class="blob-code blob-code-inner js-file-line"><div id=“chart2“></div></td>
</tr>
<tr>
<td id="file-7-html-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-7-html-LC18" class="blob-code blob-code-inner js-file-line"><script></td>
</tr>
<tr>
<td id="file-7-html-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-7-html-LC19" class="blob-code blob-code-inner js-file-line">var channel = “pubnub-intel-gal-demo-xyz“;</td>
</tr>
<tr>
<td id="file-7-html-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-7-html-LC20" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-7-html-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-7-html-LC21" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-7-html-L22" class="blob-num js-line-number" data-line-number="22"></td>
<td id="file-7-html-LC22" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-7-html-L23" class="blob-num js-line-number" data-line-number="23"></td>
<td id="file-7-html-LC23" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart‘,</td>
</tr>
<tr>
<td id="file-7-html-L24" class="blob-num js-line-number" data-line-number="24"></td>
<td id="file-7-html-LC24" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-7-html-L25" class="blob-num js-line-number" data-line-number="25"></td>
<td id="file-7-html-LC25" class="blob-code blob-code-inner js-file-line">labels: true,</td>
</tr>
<tr>
<td id="file-7-html-L26" class="blob-num js-line-number" data-line-number="26"></td>
<td id="file-7-html-LC26" class="blob-code blob-code-inner js-file-line">type: ‘bar‘</td>
</tr>
<tr>
<td id="file-7-html-L27" class="blob-num js-line-number" data-line-number="27"></td>
<td id="file-7-html-LC27" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L28" class="blob-num js-line-number" data-line-number="28"></td>
<td id="file-7-html-LC28" class="blob-code blob-code-inner js-file-line">bar: {</td>
</tr>
<tr>
<td id="file-7-html-L29" class="blob-num js-line-number" data-line-number="29"></td>
<td id="file-7-html-LC29" class="blob-code blob-code-inner js-file-line">width: {</td>
</tr>
<tr>
<td id="file-7-html-L30" class="blob-num js-line-number" data-line-number="30"></td>
<td id="file-7-html-LC30" class="blob-code blob-code-inner js-file-line">ratio: 0.5</td>
</tr>
<tr>
<td id="file-7-html-L31" class="blob-num js-line-number" data-line-number="31"></td>
<td id="file-7-html-LC31" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L32" class="blob-num js-line-number" data-line-number="32"></td>
<td id="file-7-html-LC32" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L33" class="blob-num js-line-number" data-line-number="33"></td>
<td id="file-7-html-LC33" class="blob-code blob-code-inner js-file-line">tooltip: {</td>
</tr>
<tr>
<td id="file-7-html-L34" class="blob-num js-line-number" data-line-number="34"></td>
<td id="file-7-html-LC34" class="blob-code blob-code-inner js-file-line">show: false</td>
</tr>
<tr>
<td id="file-7-html-L35" class="blob-num js-line-number" data-line-number="35"></td>
<td id="file-7-html-LC35" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L36" class="blob-num js-line-number" data-line-number="36"></td>
<td id="file-7-html-LC36" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L37" class="blob-num js-line-number" data-line-number="37"></td>
<td id="file-7-html-LC37" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-7-html-L38" class="blob-num js-line-number" data-line-number="38"></td>
<td id="file-7-html-LC38" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-7-html-L39" class="blob-num js-line-number" data-line-number="39"></td>
<td id="file-7-html-LC39" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-7-html-L40" class="blob-num js-line-number" data-line-number="40"></td>
<td id="file-7-html-LC40" class="blob-code blob-code-inner js-file-line">flow: {</td>
</tr>
<tr>
<td id="file-7-html-L41" class="blob-num js-line-number" data-line-number="41"></td>
<td id="file-7-html-LC41" class="blob-code blob-code-inner js-file-line">duration: 100</td>
</tr>
<tr>
<td id="file-7-html-L42" class="blob-num js-line-number" data-line-number="42"></td>
<td id="file-7-html-LC42" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L43" class="blob-num js-line-number" data-line-number="43"></td>
<td id="file-7-html-LC43" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-7-html-L44" class="blob-num js-line-number" data-line-number="44"></td>
<td id="file-7-html-LC44" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart2‘,</td>
</tr>
<tr>
<td id="file-7-html-L45" class="blob-num js-line-number" data-line-number="45"></td>
<td id="file-7-html-LC45" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-7-html-L46" class="blob-num js-line-number" data-line-number="46"></td>
<td id="file-7-html-LC46" class="blob-code blob-code-inner js-file-line">labels: false</td>
</tr>
<tr>
<td id="file-7-html-L47" class="blob-num js-line-number" data-line-number="47"></td>
<td id="file-7-html-LC47" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L48" class="blob-num js-line-number" data-line-number="48"></td>
<td id="file-7-html-LC48" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L49" class="blob-num js-line-number" data-line-number="49"></td>
<td id="file-7-html-LC49" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-7-html-L50" class="blob-num js-line-number" data-line-number="50"></td>
<td id="file-7-html-LC50" class="blob-code blob-code-inner js-file-line"></script></td>
</tr>
<tr>
<td id="file-7-html-L51" class="blob-num js-line-number" data-line-number="51"></td>
<td id="file-7-html-LC51" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L52" class="blob-num js-line-number" data-line-number="52"></td>
<td id="file-7-html-LC52" class="blob-code blob-code-inner js-file-line"></body></td>
</tr>
<tr>
<td id="file-7-html-L53" class="blob-num js-line-number" data-line-number="53"></td>
<td id="file-7-html-LC53" class="blob-code blob-code-inner js-file-line"></html></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1LqmE" target="_blank">view raw</a><a href="http://bit.ly/1rZ30iG" target="_blank">7.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
That’s it! Now you’re Galileo is broadcasting it’s information over the internet (via PubNub) and into a webpage. You’re probably loading the page locally, but it can be hosted anywhere and it’ll still work all the same.
<h3><a class="anchor" href="http://bit.ly/1T1Lseo" id="user-content-where-to-go-from-here" name="user-content-where-to-go-from-here" target="_blank"></a>Wrapping Up</h3>
You can extend this demo by adding more charts, more analog inputs (a potentiometer, buttons, <a href="http://bit.ly/1VNpzU4" itemprop="url" target="_bank" title="light">light</a> 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!
<iframe src="https://player.vimeo.com/video/129155881" width="678" height="381" frameborder="0" title="Realtime Dashboards, Charts, and Maps with PubNub's Project EON JavaScript Framework" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
 
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Streaming%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Streaming Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1T1LqmG%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmG Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1rZ2ZeJ%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard&mini=true&url=http://bit.ly/1XReO0g" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeJ Accelerometer Readings to a Realtime Dashboard&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1T1Lsep%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1Lsep Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://di.gg/1rZ2ZeL%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://di.gg/1rZ2ZeL Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://stumble.it/1T1Lser%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://stumble.it/1T1Lser Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeN%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeN Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1LqmI%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmI Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeP%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeP Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1Lset%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1Lset Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ30iM%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard&pic=&ralateUid=&" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ30iM Accelerometer Readings to a Realtime Dashboard&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1LqmK%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmK Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeR%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeR Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Streaming Accelerometer Readings to a Realtime Dashboard

In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime...

Streaming Accelerometer Readings to a Realtime Dashboard

Wall's Corners

Link Author

Title: Streaming Accelerometer Readings to a Realtime Dashboard
Author: Wall's Corners
Rating 5 of 5 Des:

In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime...

<a href="http://ift.tt/1T1Lm6F" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f58356c4b3557412e676966" class="aligncenter size-full wp-image-12771" height="480" src="http://ift.tt/1T1Lm6F" width="480" /></a>
In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime dashboard, powered by an Intel Galileo. Accelerometers are in smartphones, rockets, navigation systems, and even structures.
Accelerometers work like this. Imagine a cardboard box with a basketball inside. Now imagine picking up the box and moving it left or right. Depending on how fast you pick up the box, the basketball may hit the roof. If you move it left or right, it’ll hit the sides.
<a href="http://ift.tt/1rZ2X6s" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f546470544f77712e706e67" class="aligncenter size-full wp-image-12772" height="280" src="http://ift.tt/1rZ2X6s" width="450" /></a>
This is how an accelerometer works. The only difference is there is some component to measure the force of the ball hitting a wall. It also happens on a much smaller scale, about the size of your fingernail.
By measuring the amount of static acceleration due to gravity, you can find out the angle the device is tilted at with respect to the earth. By sensing the amount of dynamic acceleration, you can analyze the way the device is moving. At first, measuring tilt and acceleration doesn’t seem all that exciting. However, engineers have come up with many ways to make really useful products with them. Check out <a href="http://ift.tt/1NrNunx" target="_blank">this article</a> for more on accelerometers.
<h3>ADXL335 Triple Axis Accelerometer</h3>
<a href="http://ift.tt/1rZ2YHM" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f574850546854592e6a7067" class="aligncenter size-full wp-image-12773" height="442" src="http://ift.tt/1rZ2YHM" width="442" /></a>
For this demo we’re going to be using the <a href="http://ift.tt/1fcdhLO" target="_blank">SainSmart ADXL335 Triple Axis Accelerometer</a>. The sensor is a polysilicon surface-micromachined structure built on top of a silicon wafer. Polysilicon springs suspend the structure over the surface of the wafer and provide a resistance against forces due to applied acceleration, As described in <a href="http://ift.tt/1NrNsfs" target="_blank">the data sheet</a>.
Here are some specs:
<ul>
<li>3-axis sensing</li>
<li>Small, low profile package</li>
<li>4 mm × 4 mm × 1.45 mm LFCSP</li>
<li>Low power : 350 μA (typical)</li>
<li>Single-supply operation: 1.8 V to 3.6 V</li>
<li>10,000 g shock survival</li>
<li>Excellent temperature stability</li>
<li>BW adjustment with a single capacitor per axis</li>
<li>RoHS/WEEE lead-free compliant</li>
</ul>
<h3>Tutorial Overview</h3>
<ul>
<li><a href="http://ift.tt/1c8GwkO" target="_blank">Intel Galileo Gen 2</a>: Publishes accelerometer readings via PubNub to the dashboard.</li>
<li><a href="https://nodejs.org/" target="_blank">NodeJS</a>: Running on the Galileo <a href="http://bit.ly/1T1LpPV" itemprop="url" target="_bank" title="linux">linux</a> environment.</li>
<li><a href="http://bit.ly/1rZ3028" target="_blank">PubNub</a>: Realtime Data Stream Network that connects the Galileo to Eon-chart and streams the data in realtime.</li>
<li><a href="http://bit.ly/1T1LrXT" target="_blank">EON-chart</a>: Realtime dashboard and charting framework that connects to PubNub and renders the acceleration readings in HTML (in this case, a realtime dashboard).</li>
</ul>
<a href="http://bit.ly/1rZ3029" target="_blank">Full code repository here.</a>
<h3><a class="anchor" href="http://bit.ly/1T1Lq68" id="user-content-galileo" name="user-content-galileo" target="_blank"></a>Intel Galileo</h3>
We’re going to use Intel Galileo; Intel’s flagship IOT prototyping chip that runs <a href="http://bit.ly/1rZ302b" itemprop="url" target="_bank" title="NodeJS">NodeJS</a>. Check out the <a href="http://bit.ly/1T1Lq69" target="_blank">last post where we connected a potentiometer to Intel Galileo</a>.
<h3><a class="anchor" href="http://bit.ly/1rZ302d" id="user-content-solder-the-accelerometer" name="user-content-solder-the-accelerometer" target="_blank"></a>Solder the Accelerometer</h3>
First thing we need to do is solder headers to the accelerometer. Soldering headers is very simple. Just insert some headers into the provided points, touch solder to the connection, and then touch the soldering iron.
<a href="http://bit.ly/1T1LrXW" target="_blank"><img alt="687474703a2f2f7777772e63646e2e736369656e6365627564646965732e6f72672f46696c65732f323038342f352f456c65635f7072696d65722d736f6c646572322e6a7067" class="aligncenter size-full wp-image-12774" height="308" src="http://bit.ly/1T1LrXW" width="600" /></a>
When you’re done, you’ll have an accelerometer you can plug into anything.
<a href="http://bit.ly/1rZ2YYg" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f316e576f7678632e6a7067" class="aligncenter size-large wp-image-12775" height="509" src="http://bit.ly/1T1Lq6c" width="1024" /></a>
<h3>Wiring the Accelerometer into the Galileo</h3>
Great, now let’s wire the accelerometer. This particular device is really simple, there are 6 connections.
<ul>
<li>ST – don’t worry about this</li>
<li>Z – z axis acceleration</li>
<li>Y – y axis acceleration</li>
<li>X – x axis acceleration</li>
<li>– – ground</li>
<li>+ – 3.3v power</li>
</ul>
Thanks to the header pins we just soldered, we can simply plug the accelerometer into our breadboard. Take 5 jumper cables, and wire them to each of the connections (excluding ST).
<a href="http://bit.ly/1rZ2YYi" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f4b5573586778652e6a7067" class="aligncenter size-large wp-image-12776" height="579" src="http://bit.ly/1T1Lq6e" width="1024" /></a>
I used green for x, y, and z, red for power, and black for ground. Now plug the other ends of the jumpers into the Galileo. Note that you need to use 3.3v power and not 5v. 5v will damage your accelerometer.
<table border="1">
<thead>
<tr>
<th>Connection</th>
<th>Wire Color</th>
<th>Galileo Pin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Z</td>
<td>Green</td>
<td>A0</td>
</tr>
<tr>
<td>X</td>
<td>Green</td>
<td>A1</td>
</tr>
<tr>
<td>Z</td>
<td>Green</td>
<td>A2</td>
</tr>
<tr>
<td>–</td>
<td>Black</td>
<td>GND</td>
</tr>
<tr>
<td>+</td>
<td>Red</td>
<td>3.3v</td>
</tr>
</tbody>
</table>
Here’s what mine looked like when I was done connecting everything:
<a href="http://bit.ly/1rZ2YYk" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f4b4e4359734d612e6a7067" class="aligncenter size-large wp-image-12777" height="579" src="http://bit.ly/1T1Lq6i" width="1024" /></a>
<h3>Node.js</h3>
Now we’re going to read the accelerometer data using Node.js and publish it via <a href="http://bit.ly/1rZ2YYm" target="_blank">PubNub Data Streams</a> so we can display it in realtime on our dashboard. Load the Intel XDK and start with a blank project.
If you need help setting up your Galileo, check out the beginning of our <a href="http://bit.ly/1T1Lq69" target="_blank">post on connecting a potentiometer to the Galileo</a>.
<a href="http://bit.ly/1T1Lq6k" target="_blank"><img alt="68747470733a2f2f736f6674776172652e696e74656c2e636f6d2f73697465732f64656661756c742f66696c65732f6d616e616765642f38652f32662f696e74656c78646b696f745f646576656c6f702e706e67-1" class="aligncenter size-large wp-image-12778" height="609" src="http://bit.ly/1rZ2YYn" width="1024" /></a>
<h3>Package.json</h3>
In the package.json add PubNub as a dependency:
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-1-json" class="file">
<div class="blob-wrapper data type-json">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-1-json-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-1-json-LC1" class="blob-code blob-code-inner js-file-line">{</td>
</tr>
<tr>
<td id="file-1-json-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-1-json-LC2" class="blob-code blob-code-inner js-file-line">“name“: “pubnub-galileo“,</td>
</tr>
<tr>
<td id="file-1-json-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-1-json-LC3" class="blob-code blob-code-inner js-file-line">“description“: ““,</td>
</tr>
<tr>
<td id="file-1-json-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-1-json-LC4" class="blob-code blob-code-inner js-file-line">“version“: “0.0.0“,</td>
</tr>
<tr>
<td id="file-1-json-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-1-json-LC5" class="blob-code blob-code-inner js-file-line">“main“: “main.js“,</td>
</tr>
<tr>
<td id="file-1-json-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-1-json-LC6" class="blob-code blob-code-inner js-file-line">“engines“: {</td>
</tr>
<tr>
<td id="file-1-json-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-1-json-LC7" class="blob-code blob-code-inner js-file-line">“node“: “>=0.10.0“</td>
</tr>
<tr>
<td id="file-1-json-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-1-json-LC8" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-1-json-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-1-json-LC9" class="blob-code blob-code-inner js-file-line">“dependencies“: {</td>
</tr>
<tr>
<td id="file-1-json-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-1-json-LC10" class="blob-code blob-code-inner js-file-line">“pubnub“: “3.7.10“</td>
</tr>
<tr>
<td id="file-1-json-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-1-json-LC11" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-1-json-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-1-json-LC12" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1LrY2" target="_blank">view raw</a><a href="http://bit.ly/1rZ302g" target="_blank">1.json</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Then click Install/Build. This essentially runs <code>npm install</code> on your Galileo and adds the PubNub library to your build. PubNub is the backend for this demo; it allows us to publish the accelerometer data to the internet and read it somewhere else.
We can read the accelerometer data using analog read. We’ll assign the values to x, y, and z within our javascript file.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-2-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-2-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-2-js-LC1" class="blob-code blob-code-inner js-file-line">var mraa = require(‘mraa‘);</td>
</tr>
<tr>
<td id="file-2-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-2-js-LC2" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-2-js-LC3" class="blob-code blob-code-inner js-file-line">console.log(‘MRAA Version: ‘ + mraa.getVersion()); //write the mraa version to the console</td>
</tr>
<tr>
<td id="file-2-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-2-js-LC4" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-2-js-LC5" class="blob-code blob-code-inner js-file-line">var x = new mraa.Aio(0);</td>
</tr>
<tr>
<td id="file-2-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-2-js-LC6" class="blob-code blob-code-inner js-file-line">var y = new mraa.Aio(1);</td>
</tr>
<tr>
<td id="file-2-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-2-js-LC7" class="blob-code blob-code-inner js-file-line">var z = new mraa.Aio(2);</td>
</tr>
<tr>
<td id="file-2-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-2-js-LC8" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-2-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-2-js-LC9" class="blob-code blob-code-inner js-file-line">var xo = x.read();</td>
</tr>
<tr>
<td id="file-2-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-2-js-LC10" class="blob-code blob-code-inner js-file-line">var yo = y.read();</td>
</tr>
<tr>
<td id="file-2-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-2-js-LC11" class="blob-code blob-code-inner js-file-line">var zo = z.read();</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lq6m" target="_blank">view raw</a><a href="http://bit.ly/1rZ302i" target="_blank">2.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Next, we’ll create a loop to continually read the values of the X, Y, and Z accelerations. In the following case, we store the initial values as a “zero” value and then calculate the difference.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-3-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-3-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-3-js-LC1" class="blob-code blob-code-inner js-file-line">setInterval(function(){</td>
</tr>
<tr>
<td id="file-3-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-3-js-LC2" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-3-js-LC3" class="blob-code blob-code-inner js-file-line">var xv = x.read() – xo;</td>
</tr>
<tr>
<td id="file-3-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-3-js-LC4" class="blob-code blob-code-inner js-file-line">var yv = y.read() – yo;</td>
</tr>
<tr>
<td id="file-3-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-3-js-LC5" class="blob-code blob-code-inner js-file-line">var zv = z.read() – zo;</td>
</tr>
<tr>
<td id="file-3-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-3-js-LC6" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-3-js-LC7" class="blob-code blob-code-inner js-file-line">console.log(xv, yv, zv);</td>
</tr>
<tr>
<td id="file-3-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-3-js-LC8" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-3-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-3-js-LC9" class="blob-code blob-code-inner js-file-line">}, 1000);</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lseg" target="_blank">view raw</a><a href="http://bit.ly/1rZ302k" target="_blank">3.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
<h3>Integrating PubNub</h3>
Now let’s integrate PubNub for the realtime streaming of the accelerometer data.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-4-js" class="file">
<div class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-4-js-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-4-js-LC1" class="blob-code blob-code-inner js-file-line">var mraa = require(‘mraa‘);</td>
</tr>
<tr>
<td id="file-4-js-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-4-js-LC2" class="blob-code blob-code-inner js-file-line">var PUBNUB = require(‘pubnub‘);</td>
</tr>
<tr>
<td id="file-4-js-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-4-js-LC3" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-4-js-LC4" class="blob-code blob-code-inner js-file-line">console.log(‘MRAA Version: ‘ + mraa.getVersion()); //write the mraa version to the console</td>
</tr>
<tr>
<td id="file-4-js-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-4-js-LC5" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-4-js-LC6" class="blob-code blob-code-inner js-file-line">var x = new mraa.Aio(0);</td>
</tr>
<tr>
<td id="file-4-js-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-4-js-LC7" class="blob-code blob-code-inner js-file-line">var y = new mraa.Aio(1);</td>
</tr>
<tr>
<td id="file-4-js-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-4-js-LC8" class="blob-code blob-code-inner js-file-line">var z = new mraa.Aio(2);</td>
</tr>
<tr>
<td id="file-4-js-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-4-js-LC9" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-4-js-LC10" class="blob-code blob-code-inner js-file-line">var xo = x.read();</td>
</tr>
<tr>
<td id="file-4-js-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-4-js-LC11" class="blob-code blob-code-inner js-file-line">var yo = y.read();</td>
</tr>
<tr>
<td id="file-4-js-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-4-js-LC12" class="blob-code blob-code-inner js-file-line">var zo = z.read();</td>
</tr>
<tr>
<td id="file-4-js-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-4-js-LC13" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-4-js-LC14" class="blob-code blob-code-inner js-file-line">var pubnub = PUBNUB.init({</td>
</tr>
<tr>
<td id="file-4-js-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-4-js-LC15" class="blob-code blob-code-inner js-file-line">publish_key: ‘demo‘,</td>
</tr>
<tr>
<td id="file-4-js-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-4-js-LC16" class="blob-code blob-code-inner js-file-line">subscribe_key: ‘demo‘</td>
</tr>
<tr>
<td id="file-4-js-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-4-js-LC17" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-4-js-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-4-js-LC18" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-4-js-LC19" class="blob-code blob-code-inner js-file-line">setInterval(function(){</td>
</tr>
<tr>
<td id="file-4-js-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-4-js-LC20" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-4-js-LC21" class="blob-code blob-code-inner js-file-line">var xv = x.read() – xo;</td>
</tr>
<tr>
<td id="file-4-js-L22" class="blob-num js-line-number" data-line-number="22"></td>
<td id="file-4-js-LC22" class="blob-code blob-code-inner js-file-line">var yv = y.read() – yo;</td>
</tr>
<tr>
<td id="file-4-js-L23" class="blob-num js-line-number" data-line-number="23"></td>
<td id="file-4-js-LC23" class="blob-code blob-code-inner js-file-line">var zv = z.read() – zo;</td>
</tr>
<tr>
<td id="file-4-js-L24" class="blob-num js-line-number" data-line-number="24"></td>
<td id="file-4-js-LC24" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L25" class="blob-num js-line-number" data-line-number="25"></td>
<td id="file-4-js-LC25" class="blob-code blob-code-inner js-file-line">console.log(xv, yv, zv);</td>
</tr>
<tr>
<td id="file-4-js-L26" class="blob-num js-line-number" data-line-number="26"></td>
<td id="file-4-js-LC26" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L27" class="blob-num js-line-number" data-line-number="27"></td>
<td id="file-4-js-LC27" class="blob-code blob-code-inner js-file-line">pubnub.publish({</td>
</tr>
<tr>
<td id="file-4-js-L28" class="blob-num js-line-number" data-line-number="28"></td>
<td id="file-4-js-LC28" class="blob-code blob-code-inner js-file-line">channel: ‘pubnub-intel-gal-demo-xyz‘,</td>
</tr>
<tr>
<td id="file-4-js-L29" class="blob-num js-line-number" data-line-number="29"></td>
<td id="file-4-js-LC29" class="blob-code blob-code-inner js-file-line">message: {</td>
</tr>
<tr>
<td id="file-4-js-L30" class="blob-num js-line-number" data-line-number="30"></td>
<td id="file-4-js-LC30" class="blob-code blob-code-inner js-file-line">columns: [</td>
</tr>
<tr>
<td id="file-4-js-L31" class="blob-num js-line-number" data-line-number="31"></td>
<td id="file-4-js-LC31" class="blob-code blob-code-inner js-file-line">[‘x‘, xv],</td>
</tr>
<tr>
<td id="file-4-js-L32" class="blob-num js-line-number" data-line-number="32"></td>
<td id="file-4-js-LC32" class="blob-code blob-code-inner js-file-line">[‘y‘, yv],</td>
</tr>
<tr>
<td id="file-4-js-L33" class="blob-num js-line-number" data-line-number="33"></td>
<td id="file-4-js-LC33" class="blob-code blob-code-inner js-file-line">[‘z‘, zv]</td>
</tr>
<tr>
<td id="file-4-js-L34" class="blob-num js-line-number" data-line-number="34"></td>
<td id="file-4-js-LC34" class="blob-code blob-code-inner js-file-line">]</td>
</tr>
<tr>
<td id="file-4-js-L35" class="blob-num js-line-number" data-line-number="35"></td>
<td id="file-4-js-LC35" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-4-js-L36" class="blob-num js-line-number" data-line-number="36"></td>
<td id="file-4-js-LC36" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-4-js-L37" class="blob-num js-line-number" data-line-number="37"></td>
<td id="file-4-js-LC37" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-4-js-L38" class="blob-num js-line-number" data-line-number="38"></td>
<td id="file-4-js-LC38" class="blob-code blob-code-inner js-file-line">}, 1000);</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lq6o" target="_blank">view raw</a><a href="http://bit.ly/1rZ2ZeF" target="_blank">4.js</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
The <code>channel</code> is the name of the room for which we’ll subscribe to messages on the other end. The <code>message</code> is formatted like so because it matches the schema defined in eon-chart.
If everything is working, you should see the value of the accelerometer output on the <a href="http://bit.ly/1T1Lq6q" target="_blank">PubNub Developer Console here</a>. Try moving the accelerometer around and watch as the value output changes. That data is being streamed over PubNub.
Now to render that data on our realtime dashboard.
<h3>Receiving and Visualizing the Data on a Dashboard</h3>
Now to create an HTML webpage to render the realtime dashboard. We include the <code>eon</code> framework in the head of the page, and that’ll take care of connecting to PubNub and creating our chart. Easy huh?
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-5-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-5-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-5-html-LC1" class="blob-code blob-code-inner js-file-line"><script type=“text/javascript“ src=“http://bit.ly/1rZ302m“></script></td>
</tr>
<tr>
<td id="file-5-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-5-html-LC2" class="blob-code blob-code-inner js-file-line"><link type=“text/css“ rel=“stylesheet“ href=“http://bit.ly/1T1Lsei“ /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1rZ302o" target="_blank">view raw</a><a href="http://bit.ly/1T1Lsek" target="_blank">5.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Create the chart with the following function. We supply the same PubNub channel the Galileo is broadcasting from (<code>pubnub-intel-gal-demo-xyz</code>) and render the data in a <code>bar</code> type chart. EON-chart subscribes to that PubNub channel, renders the chart, and updates it when the value changes.
<a href="http://bit.ly/1rZ302q" target="_blank"><img alt="687474703a2f2f692e696d6775722e636f6d2f71703666706f6c2e676966" class="aligncenter size-full wp-image-12779" height="654" src="http://bit.ly/1rZ302q" width="968" /></a>
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-6-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-6-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-6-html-LC1" class="blob-code blob-code-inner js-file-line"><script></td>
</tr>
<tr>
<td id="file-6-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-6-html-LC2" class="blob-code blob-code-inner js-file-line">var channel = “pubnub-intel-gal-demo-xyz“;</td>
</tr>
<tr>
<td id="file-6-html-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-6-html-LC3" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-6-html-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-6-html-LC4" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-6-html-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-6-html-LC5" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-6-html-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-6-html-LC6" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart‘,</td>
</tr>
<tr>
<td id="file-6-html-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-6-html-LC7" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-6-html-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-6-html-LC8" class="blob-code blob-code-inner js-file-line">labels: true,</td>
</tr>
<tr>
<td id="file-6-html-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-6-html-LC9" class="blob-code blob-code-inner js-file-line">type: ‘bar‘</td>
</tr>
<tr>
<td id="file-6-html-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-6-html-LC10" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-6-html-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-6-html-LC11" class="blob-code blob-code-inner js-file-line">bar: {</td>
</tr>
<tr>
<td id="file-6-html-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-6-html-LC12" class="blob-code blob-code-inner js-file-line">width: {</td>
</tr>
<tr>
<td id="file-6-html-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-6-html-LC13" class="blob-code blob-code-inner js-file-line">ratio: 0.5</td>
</tr>
<tr>
<td id="file-6-html-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-6-html-LC14" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-6-html-LC15" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-6-html-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-6-html-LC16" class="blob-code blob-code-inner js-file-line">tooltip: {</td>
</tr>
<tr>
<td id="file-6-html-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-6-html-LC17" class="blob-code blob-code-inner js-file-line">show: false</td>
</tr>
<tr>
<td id="file-6-html-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-6-html-LC18" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-6-html-LC19" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-6-html-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-6-html-LC20" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-6-html-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-6-html-LC21" class="blob-code blob-code-inner js-file-line"></script></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1Lsem" target="_blank">view raw</a><a href="http://bit.ly/1rZ30iE" target="_blank">6.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
Try it out! Load this page up in Chrome and move your accelerometer around.
<div id="gist26212826" class="gist">
<div class="gist-file">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-7-html" class="file">
<div class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody>
<tr>
<td id="file-7-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
<td id="file-7-html-LC1" class="blob-code blob-code-inner js-file-line"><html></td>
</tr>
<tr>
<td id="file-7-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
<td id="file-7-html-LC2" class="blob-code blob-code-inner js-file-line"><head></td>
</tr>
<tr>
<td id="file-7-html-L3" class="blob-num js-line-number" data-line-number="3"></td>
<td id="file-7-html-LC3" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L4" class="blob-num js-line-number" data-line-number="4"></td>
<td id="file-7-html-LC4" class="blob-code blob-code-inner js-file-line"><script type=“text/javascript“ src=“http://bit.ly/1rZ302m“></script></td>
</tr>
<tr>
<td id="file-7-html-L5" class="blob-num js-line-number" data-line-number="5"></td>
<td id="file-7-html-LC5" class="blob-code blob-code-inner js-file-line"><link type=“text/css“ rel=“stylesheet“ href=“http://bit.ly/1T1Lsei“ /></td>
</tr>
<tr>
<td id="file-7-html-L6" class="blob-num js-line-number" data-line-number="6"></td>
<td id="file-7-html-LC6" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L7" class="blob-num js-line-number" data-line-number="7"></td>
<td id="file-7-html-LC7" class="blob-code blob-code-inner js-file-line"><style></td>
</tr>
<tr>
<td id="file-7-html-L8" class="blob-num js-line-number" data-line-number="8"></td>
<td id="file-7-html-LC8" class="blob-code blob-code-inner js-file-line">.c3-region-1 {</td>
</tr>
<tr>
<td id="file-7-html-L9" class="blob-num js-line-number" data-line-number="9"></td>
<td id="file-7-html-LC9" class="blob-code blob-code-inner js-file-line">fill: #dd3333;</td>
</tr>
<tr>
<td id="file-7-html-L10" class="blob-num js-line-number" data-line-number="10"></td>
<td id="file-7-html-LC10" class="blob-code blob-code-inner js-file-line">fill–opacity: 0.8</td>
</tr>
<tr>
<td id="file-7-html-L11" class="blob-num js-line-number" data-line-number="11"></td>
<td id="file-7-html-LC11" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L12" class="blob-num js-line-number" data-line-number="12"></td>
<td id="file-7-html-LC12" class="blob-code blob-code-inner js-file-line"></style></td>
</tr>
<tr>
<td id="file-7-html-L13" class="blob-num js-line-number" data-line-number="13"></td>
<td id="file-7-html-LC13" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L14" class="blob-num js-line-number" data-line-number="14"></td>
<td id="file-7-html-LC14" class="blob-code blob-code-inner js-file-line"></head></td>
</tr>
<tr>
<td id="file-7-html-L15" class="blob-num js-line-number" data-line-number="15"></td>
<td id="file-7-html-LC15" class="blob-code blob-code-inner js-file-line"><body></td>
</tr>
<tr>
<td id="file-7-html-L16" class="blob-num js-line-number" data-line-number="16"></td>
<td id="file-7-html-LC16" class="blob-code blob-code-inner js-file-line"><div id=“chart“></div></td>
</tr>
<tr>
<td id="file-7-html-L17" class="blob-num js-line-number" data-line-number="17"></td>
<td id="file-7-html-LC17" class="blob-code blob-code-inner js-file-line"><div id=“chart2“></div></td>
</tr>
<tr>
<td id="file-7-html-L18" class="blob-num js-line-number" data-line-number="18"></td>
<td id="file-7-html-LC18" class="blob-code blob-code-inner js-file-line"><script></td>
</tr>
<tr>
<td id="file-7-html-L19" class="blob-num js-line-number" data-line-number="19"></td>
<td id="file-7-html-LC19" class="blob-code blob-code-inner js-file-line">var channel = “pubnub-intel-gal-demo-xyz“;</td>
</tr>
<tr>
<td id="file-7-html-L20" class="blob-num js-line-number" data-line-number="20"></td>
<td id="file-7-html-LC20" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-7-html-L21" class="blob-num js-line-number" data-line-number="21"></td>
<td id="file-7-html-LC21" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-7-html-L22" class="blob-num js-line-number" data-line-number="22"></td>
<td id="file-7-html-LC22" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-7-html-L23" class="blob-num js-line-number" data-line-number="23"></td>
<td id="file-7-html-LC23" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart‘,</td>
</tr>
<tr>
<td id="file-7-html-L24" class="blob-num js-line-number" data-line-number="24"></td>
<td id="file-7-html-LC24" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-7-html-L25" class="blob-num js-line-number" data-line-number="25"></td>
<td id="file-7-html-LC25" class="blob-code blob-code-inner js-file-line">labels: true,</td>
</tr>
<tr>
<td id="file-7-html-L26" class="blob-num js-line-number" data-line-number="26"></td>
<td id="file-7-html-LC26" class="blob-code blob-code-inner js-file-line">type: ‘bar‘</td>
</tr>
<tr>
<td id="file-7-html-L27" class="blob-num js-line-number" data-line-number="27"></td>
<td id="file-7-html-LC27" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L28" class="blob-num js-line-number" data-line-number="28"></td>
<td id="file-7-html-LC28" class="blob-code blob-code-inner js-file-line">bar: {</td>
</tr>
<tr>
<td id="file-7-html-L29" class="blob-num js-line-number" data-line-number="29"></td>
<td id="file-7-html-LC29" class="blob-code blob-code-inner js-file-line">width: {</td>
</tr>
<tr>
<td id="file-7-html-L30" class="blob-num js-line-number" data-line-number="30"></td>
<td id="file-7-html-LC30" class="blob-code blob-code-inner js-file-line">ratio: 0.5</td>
</tr>
<tr>
<td id="file-7-html-L31" class="blob-num js-line-number" data-line-number="31"></td>
<td id="file-7-html-LC31" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L32" class="blob-num js-line-number" data-line-number="32"></td>
<td id="file-7-html-LC32" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L33" class="blob-num js-line-number" data-line-number="33"></td>
<td id="file-7-html-LC33" class="blob-code blob-code-inner js-file-line">tooltip: {</td>
</tr>
<tr>
<td id="file-7-html-L34" class="blob-num js-line-number" data-line-number="34"></td>
<td id="file-7-html-LC34" class="blob-code blob-code-inner js-file-line">show: false</td>
</tr>
<tr>
<td id="file-7-html-L35" class="blob-num js-line-number" data-line-number="35"></td>
<td id="file-7-html-LC35" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L36" class="blob-num js-line-number" data-line-number="36"></td>
<td id="file-7-html-LC36" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L37" class="blob-num js-line-number" data-line-number="37"></td>
<td id="file-7-html-LC37" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-7-html-L38" class="blob-num js-line-number" data-line-number="38"></td>
<td id="file-7-html-LC38" class="blob-code blob-code-inner js-file-line">eon.chart({</td>
</tr>
<tr>
<td id="file-7-html-L39" class="blob-num js-line-number" data-line-number="39"></td>
<td id="file-7-html-LC39" class="blob-code blob-code-inner js-file-line">channel: channel,</td>
</tr>
<tr>
<td id="file-7-html-L40" class="blob-num js-line-number" data-line-number="40"></td>
<td id="file-7-html-LC40" class="blob-code blob-code-inner js-file-line">flow: {</td>
</tr>
<tr>
<td id="file-7-html-L41" class="blob-num js-line-number" data-line-number="41"></td>
<td id="file-7-html-LC41" class="blob-code blob-code-inner js-file-line">duration: 100</td>
</tr>
<tr>
<td id="file-7-html-L42" class="blob-num js-line-number" data-line-number="42"></td>
<td id="file-7-html-LC42" class="blob-code blob-code-inner js-file-line">},</td>
</tr>
<tr>
<td id="file-7-html-L43" class="blob-num js-line-number" data-line-number="43"></td>
<td id="file-7-html-LC43" class="blob-code blob-code-inner js-file-line">generate: {</td>
</tr>
<tr>
<td id="file-7-html-L44" class="blob-num js-line-number" data-line-number="44"></td>
<td id="file-7-html-LC44" class="blob-code blob-code-inner js-file-line">bindto: ‘#chart2‘,</td>
</tr>
<tr>
<td id="file-7-html-L45" class="blob-num js-line-number" data-line-number="45"></td>
<td id="file-7-html-LC45" class="blob-code blob-code-inner js-file-line">data: {</td>
</tr>
<tr>
<td id="file-7-html-L46" class="blob-num js-line-number" data-line-number="46"></td>
<td id="file-7-html-LC46" class="blob-code blob-code-inner js-file-line">labels: false</td>
</tr>
<tr>
<td id="file-7-html-L47" class="blob-num js-line-number" data-line-number="47"></td>
<td id="file-7-html-LC47" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L48" class="blob-num js-line-number" data-line-number="48"></td>
<td id="file-7-html-LC48" class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td id="file-7-html-L49" class="blob-num js-line-number" data-line-number="49"></td>
<td id="file-7-html-LC49" class="blob-code blob-code-inner js-file-line">});</td>
</tr>
<tr>
<td id="file-7-html-L50" class="blob-num js-line-number" data-line-number="50"></td>
<td id="file-7-html-LC50" class="blob-code blob-code-inner js-file-line"></script></td>
</tr>
<tr>
<td id="file-7-html-L51" class="blob-num js-line-number" data-line-number="51"></td>
<td id="file-7-html-LC51" class="blob-code blob-code-inner js-file-line"></td>
</tr>
<tr>
<td id="file-7-html-L52" class="blob-num js-line-number" data-line-number="52"></td>
<td id="file-7-html-LC52" class="blob-code blob-code-inner js-file-line"></body></td>
</tr>
<tr>
<td id="file-7-html-L53" class="blob-num js-line-number" data-line-number="53"></td>
<td id="file-7-html-LC53" class="blob-code blob-code-inner js-file-line"></html></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="gist-meta"><a href="http://bit.ly/1T1LqmE" target="_blank">view raw</a><a href="http://bit.ly/1rZ30iG" target="_blank">7.html</a> hosted with ❤ by <a href="https://github.com/" target="_blank">GitHub</a></div>
</div>
</div>
That’s it! Now you’re Galileo is broadcasting it’s information over the internet (via PubNub) and into a webpage. You’re probably loading the page locally, but it can be hosted anywhere and it’ll still work all the same.
<h3><a class="anchor" href="http://bit.ly/1T1Lseo" id="user-content-where-to-go-from-here" name="user-content-where-to-go-from-here" target="_blank"></a>Wrapping Up</h3>
You can extend this demo by adding more charts, more analog inputs (a potentiometer, buttons, <a href="http://bit.ly/1VNpzU4" itemprop="url" target="_bank" title="light">light</a> 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!
<iframe src="https://player.vimeo.com/video/129155881" width="678" height="381" frameborder="0" title="Realtime Dashboards, Charts, and Maps with PubNub's Project EON JavaScript Framework" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
 
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Streaming%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Streaming Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1T1LqmG%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmG Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1rZ2ZeJ%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard&mini=true&url=http://bit.ly/1XReO0g" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeJ Accelerometer Readings to a Realtime Dashboard&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1T1Lsep%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1Lsep Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://di.gg/1rZ2ZeL%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://di.gg/1rZ2ZeL Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://stumble.it/1T1Lser%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://stumble.it/1T1Lser Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeN%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeN Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1LqmI%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmI Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeP%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeP Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1Lset%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1Lset Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ30iM%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard&pic=&ralateUid=&" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ30iM Accelerometer Readings to a Realtime Dashboard&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1T1LqmK%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1T1LqmK Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1rZ2ZeR%20Accelerometer%20Readings%20to%20a%20Realtime%20Dashboard" id="backforunical611" name="backforunical611" onclick="javascript:void window.open('http://bit.ly/1rZ2ZeR Accelerometer Readings to a Realtime Dashboard','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Streaming Accelerometer Readings to a Realtime Dashboard

In this blog post, we’ll connect an Accelerometer to the Internet and stream the acceleration data in realtime to a live-updating, realtime...

Streaming Accelerometer Readings to a Realtime Dashboard

Streaming Accelerometer Readings to a Realtime Dashboard

Contact Form