Using Sensor Data as Input for Simple Linear Regression and Plot Predictions in Real Time Charts

Introduction

In the previous tutorial, we have built a web application for predicting the number of bike-sharing users. We have built the simple linear regression algorithm in C/C++. The application predicts the number of bike-sharing users from the temperature data. The temperature data is entered from the web UI. In this tutorial, we are going to build a more useful system, in which we use DHT11 temperature sensor as input data for the system.

System Overview

In this tutorial, we are going to modify the project from the previous tutorial. Firstly, we are going to setup DHT11 temperature sensor. Secondly, we are going to use a gauge and a chart in the web page for displaying real-time temperature and prediction result.

The following figure shows the block diagram of this tutorial.

Algorithm

In this tutorial, we are going to use the simple linear regression model to make a prediction. It takes one independent variable (temperature) and produce one dependent variable (number of users). The algorithm was modeled in this tutorial.

The following equation defines the hypothesis function of the simple linear regression. We obtained the parameters \(\theta_{0}=25\) and \(\theta_{1}=1.25\) from the training using gradient descent. We are going to implements this hypothesis function in C/C++ programming language.

\(h_{\theta}(x)=25+1.25x\)

Parts Required

In order to follow this tutorial, you need the following parts:

  • ESP32 DevKit v1 (or other ESP32 boards)
  • DHT11 temperature sensor
  • Jumper wire
  • Breadboard
Schematic Diagram

The following figure shows the schematic diagram of the ESP32 (in this case, I use the ESP32 DevKit v1).

  • First, connect the VCC and GND from ESP32 to DHT11.
  • Second, connect a GPIO (in this case, I use D4, you can use other pins) from ESP32 to the data pin of DHT11.
  • Third, connect a 10k resistor from the VCC to the GPIO.

Test the DHT11 Sensor

First of all, we should test the DHT11 sensor with a minimum Arduino sketch in order to make sure that the sensor works. You can use the following code for testing the DHT11. Before that, you should install libraries for DHT11 sensor:

The purpose of this code is for reading the DHT11 temperature value every 2 seconds.

Recommended reading: ESP32 DHT11/DHT22 Web Server – Temperature and Humidity using Arduino IDE

HTML File

The following code is the HTML code for the web page. Before you write the code, you should download the following CSS and JavaScript libraries (from this link), and put all of the files in one folder along with the index.html.

First of all, we need to import the CSS and JavaScript library in line 5-11. Then, in body element, we define the content of the web page. We use div element with Bootstrap grid system. The grid consists of one row (line 26) and two columns (line 28 and 39). The first column is for temperature gauge and the second column is for prediction chart. Finally, we define div elements for temperature gauge and prediction chart in line 34 and 45.

CSS (Bootstrap)

First, we use the Bootstrap container-fluid class for the main container in line 25. So, the web page expands to fill the available width. In line 28, we set the column size with col-md-3 class, and set the column offset with offset-md-2 class.  The my-auto class is used for centering the column vertically. In line 39, we set the column size with col-md-5 class, and also set the column to be vertically centered.

Inside the column containers, we style the div elements with Bootstrap card in line 29 and 40. The cards consist of header and body. Within the header, we define the card’s title.  Within the body, we define the card’s content (temperature gauge and prediction chart).

Finally, in line 12-22, we define additional CSS for styling the card. In line 14, we set the minimum height of the card. Then, in line 17-20, we style the content of the card (temperature gauge and prediction chart) to be centered horizontally and vertically.

JavaScript

In line 52-146, the JavaScript code defines the functionality of the web page. The code is divided into two parts, namely the temperature gauge and prediction chart.

First, in line 54-72, we define the temperature gauge. Basically, in those code, we define the gauge ID, gauge range, color, font, etc. Then, in line 74-83, we define a function that will be executed every 5 seconds with the setInterval function. So, every 5 seconds it makes HTTP GET request to the /temperature URL to get the temperature value from the ESP32. In line 78, the HTTP response, which is the temperature value, is converted from string to integer. Then, the gauge is refreshed with the new temperature value.

Recommended reading: JustGage

Second, in line 86-122, we define the prediction chart. We can define the chart ID, axis, color, etc. Then, in line 124-127, we define code for resizing the width of the chart automatically. So, the width of the chart depends on the size of the chart_container. Then, in line 129-145, we define code for adding points to the chart every 5 seconds. It makes HTTP GET request to the /predict URL to get the prediction result from the ESP32. After that, the data are converted to integer and added as a new point on the chart.

Recommended reading: Highcharts Demo

Arduino Sketch

The following code is the Arduino code for the web server. Please make sure to change the WiFi credentials (SSID and password) to make it works.

This is how the code works. First, in line 6, please make sure that you use the correct GPIO pin for DHT11. In line 9-10, please change those to your WiFi credentials.

Then, in setup function, we initialize the serial communication, DHT11, SPIFFS, and web server. In line 43-72, this is the handle definition for every HTTP request from the web browser. When the web browser requests the web files, then web server reads the web files from the SPIFFS, and sends them to the web browser.

When the web server receives HTTP request on /temperature and /predict URLs, then it calls the readDHT11Temperature and predictNumberofUsers functions, respectively. In line 82-92, we define the readDHT11Temperature function. It reads the temperature from DHT11. In  line 94-101, we define the predictNumberofUsersfunction. It calculates the number of bike-sharing users using the hypothesis function.

Demonstration

After you upload the data files and the Arduino sketch, you can open the web application either from PC or smartphone. Open your browser and type the ESP32’s IP address. Then, check that the temperature gauge and prediction chart are updated correctly.

The following figure shows the web application on a PC’s web browser:

The following figure shows the web application on a smartphone’s web browser:

Source Code

You can get the source code from this repository.

Summary

In this tutorial, we have learned how to read temperature value from DHT11 sensor. This value is used as a real-time input to the simple linear regression algorithm. Then, we have learned how to create gauge to display the temperature, and create chart to display prediction result.