Displaying sensor data on the webpage

This is a continuation post to https://raspluonto.wordpress.com/2017/09/27/basic-webpage-for-reading-status-data/.

We had our site’s visual look already established very early on in the beginning of this project. Now that we know how we’re sending, storing and retrieving data, I could make the final changes to the front-end.

Our server’s back-end serves sensor data by the request of main.js file. Source code can be found on GitHub: https://github.com/wikkii/raspluonto. With AJAX (Asynchronous JavaScript and XML), the webpage makes a GET-request every 5 seconds, and receives the amount of detections by both of the sensors in JSON. This only updates the tables on the page so there’s no need to refresh the page all the time.

I’m not going through the entire code here, but I’ll explain the most important bits. After all, it’s better to just check the code that we have on GitHub.

First, the page makes a new XMLHttpRequest (AJAX), which then makes the GET-request to Python Flask and the data is returned as JSON.

function getData () {

          // Request & receive JSON Data
          var pageRequest = new XMLHttpRequest();
          pageRequest.open('GET', '/data');
          pageRequest.onload = function() {

                   // Save JSON data to a variable
                   var mySensorData = JSON.parse(pageRequest.responseText);

                   // Call the renderTest function and pass it to mySensorData variable
                   renderData(mySensorData);
          };

// Send the request
pageRequest.send();

} // Function ends here

          // Call function before setting an interval
          getData();
          // Set Interval. Last argument is in milliseconds NOTE: setInterval() keeps triggering expression again and again unless you tell it to stop
          setInterval( getData, 5000 );

The JSON contains the amount of rows in the database for both sensors within the last 5 minutes. Since we’re only storing sensor data to MySQL when the sensors are actually detecting something, we can easily count the amount of detections simply by checking the amount of rows in their dedicated tables.

For example, currently the contents of nuotiovahti.info/data look like this:

{
 "flame": 0, 
 "pir": 0
}

So that means that there has not been any detections by either of the two sensors in the last 5 minutes.

Now, we can set a detection limit which has to be exceeded before we’re displaying the campsite as reserved. This is done to assure that a bird etc. can’t just fool our device and make the spot look like it’s occupied by actual people. So essentially, we’re doing a error check of sorts. A few detected movements is not enough to display the spot as occupied online.

Based on our test results in the Nuuksio national park, we found that 25 detected movements is enough for a reliable detection limit. The flame sensor is less prone to mistakes, so we made a limit of 5 for that.

// If the amount of rows from the PIR sensor is higher than value, then use the HMTL class "AreaStatusYes"
if (data.pir > 25) {
          pirhtml = "<td class='AreaStatusYes'>";
}

// If the amount of rows from the flame sensor is higher than value, then use the HMTL class "AreaStatusYes"
if (data.flame > 5) {
          flamehtml = "<td class='FlameStatusYes'>";
}

Basically, we’re just changing the CSS-class for their dedicated table cells. Color green is the default and means that the place is available and there’s no fire. Red means either occupied or a detected fire.

The elements we’re then added to a htmlString, which creates the HTML table on the webpage.

// Add elements to htmlString
htmlString += "<tr><td>" + "Mustalampi" + "</td>"+ pirhtml + data.pir + "</td>" + flamehtml + data.flame + "</td></tr>";

With jQuery’s .text method, we also added their respective text contents for each occasion.

// Add htmlString as content to HTML
$("#datatable tbody").html(htmlString);

// Text values for the classes
$( ".AreaStatusNo" ).text("Available (detections: " + data.pir + ")");

$( ".AreaStatusYes" ).text("Occupied (detections: " + data.pir + ")");

$( ".FlameStatusNo" ).text("No fire (detections: " + data.flame + ")");

$( ".FlameStatusYes" ).text("Burning (detections: " + data.flame + ")");

For example, if the PIR-sensor has detected movement over 25 times within the last 5 minutes and the flame sensor has not detected once, the page would look like this:

So, the campsite is currently occupied by people but there’s no fire. The detection counter was displayed on the site just for the sake of testing. It’s not really helpful to actual users, but for our testing purposes, it helped a lot.

The final product: