Displaying DS18B20 Temperatures In Your Browser Using Socket.IO and a Beaglebone Black

 May, 17 - 2014   7 comments   BeagleBoneGeneralLinuxWebUI

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.


Related articles

 Comments 7 comments

  • Jon Calisi says:

    I’m watching your progress with great eagerness. I’m currently using a brewtroller but I’m not terribly happy with it. I have a BBB that I was going to use as a small NAS for media but would really like to use it to replace the brewtroller. I’m in IT but don’t have the programming chops to pull it off. I’m more along the lines of the infrastructure side. With that being said is there anything I can do to help you with the project?

  • Greg says:

    I also am currently using a brewtroller and have been anxiously following this project. I am a coder and have been wanting to put one of these together to play with. It’s a bonus that my SSRs and temperature probes will all work directly. I don’t have a ton of time but would certainly help out where I can.

  • Steve says:

    Thank you for the code and tutorial. Got it working with some modifications to make it run with express. It was my first node.js experience, less painful than expected. I to was hoping to use the beaglebone for automating some of my brewing kit as well and I will often be checking back here to see your progress. cheers

  • ken klein says:

    Nice work. I have something similar set up. My BBB reads the temps and stores them in a log file. Crontab is setup to record the temps every 5 minutes, then run gnuplot on two days of temps, then lftp the graph to my 1&1 site (tunapiano.info), when wordpress dishes up the graph current to the last 5 mnutes from anywhere in the WWW. I don’t use javascript, I use Netrexx since I’ve coded thousands of lines of REXX on the mainframe. But it still makes a class file that any JVM can run. I’d love to see your followup to the SSR. The SSR and chipset are on order.

  • M Clark says:

    I can’t seem to get the data to appear on the index.html page – using apache2 server at port 8080 and /var/www as directory for index.html loads in browser ok but no sensor data. sensor data is available from command line. Get a port conflict r: listen EADDRINUSE if app.js uses port 8080 – so i don’t seem to have them talking properly

  • M Clark says:

    Found path and reference issues: npm install -g at /var/www/ does a global install but the programs are looking for the files local to the served web page so install without the -g flag. The port for apache2 is 8080 so use something else for socket.io. And is seems you used a minified version of socket.io.min.js when i installed it was socket.io.js so the code was corrected for that as well. Working on a Beaglebone Black with debian 5-14
    app.js:
    //Include necessary node packages
    var io = require(‘/var/www/node_modules/socket.io’).listen(3030),
    ds18b20 = require(‘/var/www/node_modules/ds18b20’);

    var interval = 3000; //enter the time between sensor queries here (in milliseconds)

    //when a client connects
    io.sockets.on(‘connection’, function (socket) {

    var sensorId = [];
    //fetch array containing each ds18b20 sensor’s ID
    ds18b20.sensors(function (err, id) {
    sensorId = id;
    socket.emit(‘sensors’, id); //send sensor ID’s to clients
    });

    //initiate interval timer
    setInterval(function () {
    //loop through each sensor id
    sensorId.forEach(function (id) {

    ds18b20.temperature(id, function (err, value) {

    //send temperature reading out to connected clients
    socket.emit(‘temps’, {‘id’: id, ‘value’: value});

    });
    });

    }, interval);
    });

    index.html:

    var socket = io.connect(‘http://192.168.1.157:3030’); //enter the IP of your beaglebone and port you are$

    socket.on(‘sensors’, function (data) { //append sensors to table
    data.forEach(function (d) {
    var html = ” + d + ”;
    $(‘#temps’).append(html);
    });
    });

    //update corresponding row with sensor value
    socket.on(‘temps’, function (data) {
    $(‘#’ + data.id).html(data.value);
    });

    DS18B20 Temps

    Sensor ID
    Temperature (celsius)

    apache2 web server with files at [email protected]:/var/www#
    using ethernet access at 192.168.1.157:8080 with socket.io using port 3030 – (on board cloud9 iDE uses port 3000)

    • M Clark says:

      var socket = io.connect(‘http://192.168.1.157:3030’); //enter the IP of your beaglebone and port you are$

      socket.on(‘sensors’, function (data) { //append sensors to table
      data.forEach(function (d) {
      var html = ” + d + ”;
      $(‘#temps’).append(html);
      });
      });

      //update corresponding row with sensor value
      socket.on(‘temps’, function (data) {
      $(‘#’ + data.id).html(data.value);
      });

      DS18B20 Temps

      Sensor ID
      Temperature (celsius)


  • Leave a Reply

    Your email address will not be published. Fields with * are mandatory.