Free up to 1MM monthly messages. No credit card required.
The core of IoT monitoring is streaming readings from a sensor (or network of sensors) to a real-time dashboard as the data changes. To do this, we need a data stream network to publish the data from the sensor, and a live-updating dashboard to subscribe to the readings and display them in real time.
In the video below, we give a live demonstration of the application in-action, as well as a code walkthrough. Now, let’s get to coding!
app.js Then, install two npm packages. These two packages will be installed globally.
npm install pubnub -g
npm install johnny-five -g
Here, we have required both the Johnny-Five and PubNub packages. In the pubnub variable, input your unique publish and subscribe keys.
Then we initiate the Arduino:
Here, ‘five’ has a board module, where inside we set up the sensor on pin ‘A0’ which will collect the readings every 1000ms. You can read more about the board component initialization and usage here, as well as the Johnny-Five sensors’ APIs here.
Once everything is set up, we can start sending and receiving the events (ie. the pressure sensor readings).
Here, set the scale of readings that we get from sensor as the range of 0 to 10. Whenever EON receives the data, we convert it into two digit decimals, and then we publish that reading to ‘pubnub-eon-iot’ channel. Inside the message, we have a columns array. Inside that columns array, we have just one array.
The first element is by default ‘data’. And second element is the data we are getting from the sensor and passing to channel.
With that, the serve side is ready. Here’s the full code.
For this tutorial, our client side will be a single HTML file that displays the gauge chart.
Here’s what our HTML looks like:
‘eon.chart’ returns a C3 chart object. We supplied the PubNub channel name to the channel parameter. Inside ‘generate’ parameter, we mention where the chart will be coming in the bindto parameter as the id or class of the HTML tag where it will be put (i.e. #gauge).
In the data object, we only have to specify the type, i.e. gauge. It will be automatically bound to the data parameter of the columns on the server side. This provides us another object called ‘gauge’ where we set the minimum and maximum value of the gauge. We can also define the color pattern it should display on the gauge when a particular value is crossed.
To run this program, you have to push the Standard Firmata file from the Arduino IDE to your board first and then run ‘node app.js’. Open the index.html in the browser. With that, we’re now streaming live pressure data from the Arduino to our live gauge chart.
To learn more about EON and its use cases, watch the video below.
Display real-time notification badges with PubNub and React Native to display important information and bring users back to your...
The concept of Digital Twins has evolved over the last two decades, however, one thing remains the same: the need for real-time...
Learn the ins-and-outs of PubNub message size and get a better idea of how many text characters fit in a single message.