In a previous tutorial, we covered how to connect and read from DS18B20 sensors with your Beaglebone. I’d now like to cover the process of displaying live-updating DS18B20 temperatures in your browser using a Beaglebone Black. We’ll be using Socket.IO, a simple library that can be used to quickly communicate between a web browser and the server using the web sockets protocol. This tutorial will display all connected DS18B20 sensors in a nicely formatted table. This is geared towards developing a basic understanding how to use nodeJS with Socket.IO and the DS18B20 sensor. It can be used as a groundwork to use temperature readings in graphs and other formats. I use very similar code to turn on or off my connected SSR and pump relays.

DS18B20 Temperatures In Your Browser

Prerequisites

I will assume you already have the following installed:

The Beaglebone and Raspberry Pi nodeJS development community is quite active. This means there are a lot of libraries available that make it simple to do tasks on your Beaglebone. For example, we will be using a package specifically for reading DS18B20 temperatures.

Install NodeJS Packages

In a SSH session, move the current directory to your webserver’s document root (i.e .e /var/www) and install the necessary Node packages.

The necessary packages should now be installed into the directory ./node_modules/

Create app.js

Using your favorite text editor or IDE, let’s create the app.js file. This file is the node script that will be performing most of the work. It is responsible for the periodic reading of sensor values and sending them to connected web browsers.

Copy and paste the following into the file app.js:

Save and close as app.js.

index.html

Next you will need to create the file index.html. This file is loaded by your web browser and contains code to handle variables emitted from socket.IO.

Save and close as index.html.

Wrapping it up

You’re ready to test out your node script! Start the script using node app.js. You’ll need to leave open your current terminal window as the process is linked to your login when you run it like this.

Open up index.html in your web browser. In a few seconds, you should see live updating temperature readings from each connected DS18B20 sensors.


Dashboard1

I wanted to show what I have done so far for a web interface. I’m using a lot of different CSS and JS to add functionality. I hope to one day put this on GitHub. Right now, it is not very expandable to other server configurations so for the time being it will stay with me.

The core UI is built around bootstrap and a free admin template that’s available online. Bootstrap makes designing pages very simple and straight forward.
I am using a lot of JS libraries to add some ‘flair’ and functionality. To help with managing these dependencies, I’m using the package manager Bower. Here is a look of <code>bower list</code> showing what I’m using so far:

I hope to have everything controlled and all of the data displays on the same page. There is a heavy amount of AJAX to perform all of the sensor updates. Updates are performed on a set number of seconds. Data is returned back in easy to work with JSON format. The possibilities of control with using these multiple languages really is limitless. I’ll cover in a future post on how to execute bash commands as sudo using PHP and the drawbacks of doing so.
This will be under revision for a while longer. I’ll keep you updated on how it progresses.