In this blog post we explain - based on the introduction to the ESP32 ( link ) - how to host a local website with this WLAN-enabled development board, on which sensor data is displayed live. The code used here can be found on GitHub (https://github.com/Simsso/Arduino-Examples/blob/master/ESP32/WiFiSensorServer/WiFiSensorServer.ino).
The basic structure of the project is as follows: An ESP32 is connected to one or more sensors and reads out their values. In addition, the ESP32 is connected to the WLAN and waits for incoming HTTP requests. Depending on the path of the request, it answers it with an HTML website or the sensor data in JSON format.
The sensor can be chosen arbitrarily. For the demonstration, we chose a two-axis joystick that outputs two analog values. Apart from the sensor, no other hardware has to be connected to the microcontroller to run the demo program.
The analog signals of the joystick are used with the function calls
read out. This clearly shows the strength of ESP-Arduino (https://github.com/espressif/arduino-esp32): Reading out the value of an analog-digital converter would normally not just be a function call.
To start an HTTP server that can be reached in the local network, the ESP32 must be able to connect to the WLAN. To do this, change the value of the two constants ssid (WLAN name) and password (WiFi password).
const char * ssid = "Access Point Name";
const char * password = "Password";
The server object is with WiFiServer server (80); created. The parameter specifies on which port the server should be reachable. 80 is the standard for websites.
The serial connection to the PC is established in the setup function. It will only be used for debugging in this project. However, pay attention to the baud rate, which is not 9600 but 115200. In the serial monitor, you may have to adjust these at the bottom right. After the microcontroller has connected to the WLAN, it outputs its IP address via the serial monitor. This is assigned to the device by the WLAN router and looks like this: 192.168.0.103. In the browser you can then by calling http://192.168.0.103 send a request to the ESP32. This has the following form, for example
GET / HTTP / 1.1
and arrives at the ESP32 as a long string, character by character. In the loop function, the first line of the request is separated because it contains the path. In the example, this is just a slash (GET /). However, would be the website http://192.168.0.103/test the first line of the HTTP request would look like this: GET / test HTTP / 1.1
At the end of the query you will be marked with an empty line. In the program, once this is recognized, the sendResponse Function called the first line of the request and that client Object to be passed. The response is written in the latter, which then contains the requested data (for example the HTML code of a website).
The first request line contained the information that the request was made to /sensor the sensor data are sent to the client.
// response header
client.println ("HTTP / 1.1 200 OK");
client.println ("Content-Type: application / json");
// send sensor data in JSON format
\ "x \": "+ String (analogRead (35) / 4096.0) +",
\ "y \": "+ String (analogRead (34) / 4096.0) +",
\ "time \": "+ millis () +"
The read data then arrives in the browser.
To display the sensor values something nice we have a simple website (https://github.com/Simsso/Arduino-Examples/blob/master/ESP32/WiFiSensorServer/index.html), which marks the position of the joystick with a red circle within a square. The data is loaded several times per second from the server.
Displaying the data of a sensor with the ESP32 in the local network on a website is not complex. If you use our sample program (https://github.com/Simsso/Arduino-Examples/blob/master/ESP32/WiFiSensorServer/WiFiSensorServer.ino), you just have to
- connect analog sensors to pins G34 and G35,
- enter the name and password of your WiFi network and
- Call up the IP address of your ESP32 in the browser, which you can find as a log output in the serial monitor.