Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
Web server on ESP32: How to update and
display sensor values?
November 20, 2018 ESP32 ESP32, sensor, web page
In many IoT Applications we monitor sensor data and we want to display it in wab page. Web page requires
frequent refresh to get the update from ESP32. To solve this problem you have two options, first is refresh
page with HTML Tag: ex. refresh at every 30 seconds.
<head>
<meta http-equiv=”refresh” content=”30″>
</head>
Disadvantage of using HTML refresh tag is, it flickers the screen and loads complete page again and again.
In this tutorial I will show you how to display ADC data and update without refreshing web page. You can
do a lot of things with this. At the end we will see some advance applications of this. To make this possible we
need to use javaScript Ajax.
Tools you need
only ESP32, Laptop and USB cable
What you will learn?
1. ESP32 Ajax web page to display and update sensor data without refresh.
2. Getting data from ESP32 without page refresh and update it in web page dynamically. such as ADC
values or temperature readings.
HTML and Java Script, AJAX basics
AJAX is about updating parts of a web page, without reloading the whole page.
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
1 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server
behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole
page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
How ESP32 AJAX Works ?
In ESP32 NodeMCU we create two pages on server. First that loads as normal webpage and second webpage
is behind the scene i.e. AJAX.
AJAX is Based on Internet Standards
AJAX is based on internet standards, and uses a combination of:
XMLHttpRequest object (to exchange data asynchronously with a server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (o�en used as the format for transferring data)
Read More on Ajax at https://www.w3schools.com/asp/asp_ajax_intro.asp
Create Web Page with AJAX
2 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
How to create a web page in ESP and uploading it read this post ?
Make your HTML page and test it in browser. Then make it header file as shown in below code. DON’T JUST
CHANGE THE EXTENSION TO .h
Create index.h file near to your final sketch. Copy and paste below code. Program is commented well. You
can read more on HTML and AJAX at w3schools.com
index.h File
1 const char MAIN_page[] PROGMEM = R"=====(
2 <!DOCTYPE html>
3 <html>
4 <style>
5 .card{
6 max-width: 400px;
7 min-height: 250px;
8 background: #02b875;
9 padding: 30px;
10 box-sizing: border-box;
11 color: #FFF;
12 margin:20px;
13 box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
14 }
15 </style>
16 <body>
17
18 <div class="card">
19 <h4>The ESP32 Update web page without refresh</h4><br>
20 <h1>Sensor Value:<span id="ADCValue">0</span></h1><br>
21 <br><a href="https://circuits4you.com">Circuits4you.com</a>
22 </div>
23 <script>
24
25 setInterval(function() {
26 // Call a function repetatively with 2 Second interval
27 getData();
28 }, 2000); //2000mSeconds update rate
29
30 function getData() {
31 var xhttp = new XMLHttpRequest();
32 xhttp.onreadystatechange = function() {
33 if (this.readyState == 4 && this.status == 200) {
34 document.getElementById("ADCValue").innerHTML =
35 this.responseText;
36 }
37 };
38 xhttp.open("GET", "readADC", true);
39 xhttp.send();
40 }
41 </script>
42 </body>
43 </html>
44 )=====";
3 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
ESP32 Web Server Program Main INO file
1 /*
2 * ESP32 AJAX Demo
3 * Updates and Gets data from webpage without page refresh
4 * https://circuits4you.com
5 */
6 #include <WiFi.h>
7 #include <WiFiClient.h>
8 #include <WebServer.h>
9
10 #include "index.h" //Web page header file
11
12 WebServer server(80);
13
14 //Enter your SSID and PASSWORD
15 const char* ssid = ".........";
16 const char* password = ".........";
17
18 //===============================================================
19 // This routine is executed when you open its IP in browser
20 //===============================================================
21 void handleRoot() {
22 String s = MAIN_page; //Read HTML contents
23 server.send(200, "text/html", s); //Send web page
24 }
25
26 void handleADC() {
27 int a = analogRead(A0);
28 String adcValue = String(a);
29
30 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
31 }
32
33 //===============================================================
34 // Setup
35 //===============================================================
36
37 void setup(void){
38 Serial.begin(115200);
39 Serial.println();
40 Serial.println("Booting Sketch...");
41
42 /*
43 //ESP32 As access point
44 WiFi.mode(WIFI_AP); //Access Point mode
45 WiFi.softAP(ssid, password);
46 */
47 //ESP32 connects to your wifi -----------------------------------
48 WiFi.mode(WIFI_STA); //Connectto your wifi
49 WiFi.begin(ssid, password);
50
51 Serial.println("Connecting to ");
52 Serial.print(ssid);
53
54 //Wait for WiFi to connect
55 while(WiFi.waitForConnectResult() != WL_CONNECTED){
56 Serial.print(".");
57 }
58
59 //If connection successful show IP address in serial monitor
60 Serial.println("");
61 Serial.print("Connected to ");
62 Serial.println(ssid);
63 Serial.print("IP address: ");
64 Serial.println(WiFi.localIP()); //IP address assigned to your ESP
65 //----------------------------------------------------------------
66
67 server.on("/", handleRoot); //This is display page
68 server.on("/readADC", handleADC);//To get update of ADC Value only
69
70 server.begin(); //Start server
71 Serial.println("HTTP server started");
72 }
73
74 //===============================================================
75 // This routine is executed when you open its IP in browser
76 //===============================================================
77 void loop(void){
4 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
78 server.handleClient();
79 delay(1);
80 }
Testing
Make WiFi network configuration changes as per your network. Upload the program and test it. Open serial
monitor to observe the IP address and other actions.
Results
Open Serial monitor and get the IP address
Enter the IP address in web browser
In many application you may want to use jQuery and Bigger size HTML, CSS files and images. You can get
clear idea from these two advanced posts
1. SPIFFS (ESP File System) to load webpages in Flash memory
2. Upload images in ESP8266 and display it in web page
3. Using jQuery advance web server on ESP8266
5 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
Related
4 thoughts on “Web server on ESP32: How to update
and display sensor values?”
May 14, 2019 at 4:44 pm
Hi, how can I add more sensors?
Omnimusha
Omni
May 24, 2019 at 9:11 pm
I found the solution for multiple sensors:
http://plnkr.co/edit/7DyTmdRdWSIRxx7ESLNv?p=preview
Daniel Fabro
April 6, 2019 at 10:09 pm
Thank you for the great tutorial. I have a problem that a�er few hours the web server
stops responding. The loop is still runing but no web. I read some sources that it is
MagnusExpe needed to call client.stop() but they use Wifiserver and wifi.h. I am not sure for
rior
6 of 7 5/7/20, 6:01 PM
Web server on ESP32: How to update and displa... https://circuits4you.com/2018/11/20/web-server...
WebServer object.
April 7, 2019 at 10:36 am
here also you can use client.stop() at end.
Manoj R.
Thakur
7 of 7 5/7/20, 6:01 PM
