Web server on ESP32: How to update and display sensor values?

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.

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 (often used as the format for transferring data)

Read More on Ajax at https://www.w3schools.com/asp/asp_ajax_intro.asp

ESP ajax example

Create Web Page with AJAX

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

ESP32 Web Server Program Main INO file

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

ESP32 display and update sensor data on web page

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

Leave a Reply