Internet of things (IoT) temperature logger for the BeagleBone Black (Part 3)

click for Part 1
click for Part 2
click for Part 4

Introduction

In this post we will make our web-client display a graph of the live data being collected  by the BBB. This graph can be updated to use the latest data upon pressing a button.

Continuing on from the previous post we add the following:

• Add a graph using Chart.js which can have its data updated using the JS fetch() function. For this the JSON data format will be used.
• Ensure that only one instance of the server can be run in the same directory, so we don't inadvertently have multiple processes duplicating what is written to the database.
• Have the server find the serial number of the W1 temperature sensor automatically.
• Put the database logging back into the server, and make it such that the temperature is recorded every half hour with no option to change this interval or to turn the data recording on and off. If the server is running the data logging is on.

I have now tested the front end on  Google Chrome, Firefox and iOS Safari.

The Graph

Chart.js provides an API to make HTML graphs using JS. In our case the date will be required for the lower axis data and Chart.js makes use of Moment.js for this. The necessary  libraries are provided using CDN's in the HTML file. The Chart.js library is able to work with JSON data straightforwardly.

When the HTML is loaded our JS draw() function is called. This function asks our server for the file "data.json" using the fetch() function. Rather than write this file and then send it our server just sends what would be it's contents directly to the socket stream, the actual file "data.json" never exists. Finally our draw() function calls our drawChart() function and passes the JSON data to it. This function draws our graph.

The Chart.js documentation provides a means to alter or update the data in an existing chart. The chart is updated using our updateData() function which is called when the HTML button "Update graph data" is pushed. A picture of the resulting front end is shown directly below:

The front end rendered in Google Chrome

The front end has two buttons, the first of which is just what we had in the last post. The second button ("Update graph data") causes the graph to update when it is pressed. Every half hour another data point is added to the database, so if more data has been added since the graph was last updated it will be added.

The front end

The front end is in the files "graph.html" and "graph.js" which are provided by the server. The JS first waits for the "DOMContentLoaded" event, which occurs when the HTML has finished loading, and then calls the draw() function. The draw() function gets the JSON data from the server and then calls the drawChart() function which draws the graph on the web-page.
The "Update graph data" button on the web-page calls the updateData() function which reloads the JSON data from the server.

The Server

Single Instance

The server writes and locks a pid file to make sure it is not already running in the given directory. Another instance can be run in a different directory, which will have its own database file. This eliminates more than one instance of the server writing duplicate data to the same database file. The pid file is locked using Linux's C function flock(). When the program and all its child processes stop or are killed the lock will cease.

Finding the serial number

The probes driver directory, which depends explicitly upon its individual serial number is found using the Linux's C function scandir(). The directory we are looking for will start with "28-" with the number 28 signifying that the one-wire device is a temperature probe. If there is more than one temperature probe connected there will be additional directories starting with "28-". It has been arranged that the first probe directory found is used. If a temperature probe is not found a temperature of 100,000 degrees is returned.

Database logging

The database logging process is called very early on as a forked off child process. It logs the temperature to the database every half an hour. If the program is killed but this child process is still running the pid file lock will prevent the program from being started again in the same directory. The parent and all child processes must be killed before the program can be restarted.

The Code

https://github.com/wilstep/IoT-temperature-logger-for-the-BeagleBone-Black/releases/tag/1.2

or on the command line obtain with the command:

git clone -b '1.2' https://github.com/wilstep/IoT-temperature-logger-for-the-BeagleBone-Black.git

What's Next

I would like to add some input options to restrict the time range which the graph is plotted over, and allow the graph to be replotted upon adjusting this input. Then I'd like to add an option to download the currently plotted subset of data as a CSV file, but I haven't settled on how this will all work out or how to do it yet.