Introduction

In the previous tutorial, we have built web application for bike-sharing prediction in ESP32. The linear regression was implemented using TensorFlow.js. So, it was processed by the web browser not the ESP32 itself. In this tutorial, we are going to implement the linear regression using C in the ESP32 Arduino. So, it will be processed by the ESP32 instead of the web browser.

System Diagram

The following figure shows the system diagram of this tutorial. The ESP32 runs as a WiFi client connected to the AP. It runs a web server based on the ESPAsyncWebServer library. Web browsers (clients) make an HTTP request to the ESP32. Then, ESP32 sends the HTTP response which are the HTML, CSS, and JavaScript files.

Then, when we enter the temperature data and click the predict button, we are going be redirected to the /predict URL followed by the temperature data, i.e. /predict?temperature=25. This method is called HTTP GET.

There is a template placeholder on the web page that will display the prediction result. It is delimited with % symbols, e.g %RESULT%. The placeholder %RESULT% will be replaced with the prediction result by the web server. The web server calculates the prediction using linear regression.

Web Server

HTML file

First, in the HTML file, there are several changes from the previous tutorial. We can delete the TensorFlow.js (tj.min.js) library within the head tag. As shown in line 8, do not include that line.

Second, within the form tag, we should change several lines. As in the following code, in line 1, add action and method attribute within the form tag. The action="/predict" corresponds our redirection URL (/predict?temperature=25). Then, we use the HTTP GET method, which is specified by method="GET".

Then, in line 4, change the id attribute to name attribute (name="temperature"). This corresponds to the name/value pair of the HTTP GET request query (/predict?temperature=25).

After that, in line 7, change the button type attribute to submit (type="submit"), and delete the id attribute. Finally, in line 10, change the span tag that displays the result with a template placeholder (%RESULT%) of the ESPAsyncWebServer library.

Arduino Code

The following code shows the full Arduino code for the web server.

This is how the code works:

  • First, in line 9-10, we should declare two variables temperature and req_root.
  • The temperature stores the temperature value from the client (web browser), and the req_root identifies whether it is a root request (/) or HTTP GET request (/predict).
  • In line 38, change the input arguments of the code, add the callback function called processor.
  • Then, in line 53-61, it reads the HTTP GET name/value pair (/predict?temperature=25), and stores the the value in temperature variable.
  • After that, in line 62, it calls callback function processor, and sends the HTTP response.
  • The callback function processor is defined in line 73-89. It replaces the template placeholder (%RESULT%) with the prediction result. If the req_root is true, then it replaces the template placeholder (%RESULT%) with value 0, because it is when the client makes the first request the root page and there is no temperature input yet.
  • Finally, in line 91-99, we define our hypothesis function of the linear regression algorithm. It predicts the number of bike-sharing users.
Upload the Data and Sketch

The last step is to upload the web file from the data folder to the SPIFFS file system of ESP32. After that, upload the compiled Arduino sketch to the ESP32.

Summary

In this tutorial, we have learned how to implements a linear regression in ESP32 Arduino. We implements the hypothesis function in C. We develops embedded web server in ESP32. It provides a web page that can be accessed from a web browser. We uses HTTP GET method to transfer temperature input and prediction result between ESP32 and web browser.

Leave a Reply

Close Menu