Displaying Sensor Data on a Web Page - Air Quality Monitoring Station

Displaying Sensor Data on a Web Page - Air Quality Monitoring Station Series, Episode 16

April 22, 2025
|
Teofil Corad

eBits topic: Sensorer & måling

Lesson objectives

The goal of this lesson is to teach you how to dynamically display live sensor data — specifically temperature and humidity — on a web page hosted by the ESP32. When you finish the lesson, you will have a fully functional IoT system that displays real-time sensor data directly in a web browser.

List of required components:

	AHT10 high-precision temperature and humidity sensor
	TTGO T-Display ESP32 16MB with WiFi, Bluetooth and 1.1" color LCD screen
	Dupont cables, 40 pcs

Introduction

In the previous lesson, we learned how to set up a basic web server on the ESP32. That server only hosted a static HTML page, but in this lesson we take it a step further by integrating live data. We will modify the web server to serve dynamic HTML content containing live sensor data — specifically temperature and humidity readings from our AHT10 sensor.

This is an important step in creating an interactive IoT project, as it allows users to monitor data remotely from any device with a browser. Instead of checking the serial monitor, users can simply access a web page to see live updates from the ESP32.

Step 1: Overview of dynamic web content

Here, dynamic web content means that the server generates the page with current readings for each request. This does not itself update an already open page automatically; that requires reloading or the automatic refresh in step 5. In this case, temperature and humidity readings will be updated whenever a client (browser) requests the page.

The web server will retrieve the latest sensor data, format it into an HTML structure, and send it to the client. Each time the user opens or refreshes the page, new sensor readings are displayed. This makes it easier to monitor data remotely in real time.

Step 2: Coding the dynamic web page

We will modify our web server code to retrieve temperature and humidity readings from the AHT10 sensor and display them on the web page.

Here is the code:

#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_AHTX0.h>

// Erstat med dine netværksoplysninger
const char* ssid = "Dit_SSID";
const char* password = "Dit_Kodeord";

WebServer server(80);
Adafruit_AHTX0 aht;

void handleRoot() {
  sensors_event_t humidity, temp;
  aht.getEvent(&humidity, &temp);

  String htmlPage = "<html><body>";
  htmlPage += "<h1>Sensor Data</h1>";
  htmlPage += "<p>Temperatur: " + String(temp.temperature) + " &#176;C</p>";
  htmlPage += "<p>Luftfugtighed: " + String(humidity.relative_humidity) + " %</p>";
  htmlPage += "</body></html>";

  server.send(200, "text/html", htmlPage);
}

void setup() {
  Serial.begin(115200);
  if (!aht.begin()) {
    Serial.println("Kunne ikke finde AHT10-sensoren");
    while (1) delay(10);
  }
  Serial.println("AHT10-sensor initialiseret");

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Forbinder til WiFi...");
  }
  Serial.println("Forbundet til WiFi");
  Serial.print("IP-adresse: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
  Serial.println("Webserver startet");
}

void loop() {
  server.handleClient();
}

Step 3: Code walkthrough

1. Libraries:
We include WiFi.h for networking, WebServer.h for web server functions, and Adafruit_AHTX0.h for our AHT10 sensor.

2. WiFi setup:
We connect the ESP32 to a local WiFi network.

3. Web server:
We create a WebServer instance on port 80 (HTTP) to handle client requests.

4. Retrieving sensor data:
handleRoot() retrieves current readings from the AHT10 sensor.

5. Dynamic web page:
We build an HTML string with sensor data inserted directly into the code.

6. Response to the client:
server.send() sends the HTML page to the browser.

7. Handling clients:
server.handleClient() constantly listens for new HTTP requests.

Step 4: Testing the dynamic web page

Upload the code: Use Arduino IDE to upload.
Open the serial monitor: Use Ctrl + Shift + M to see the IP address.
Access the web page: Enter the IP address in a web browser.
View live data: The web page now displays current temperature and humidity readings from the AHT10. Refresh the page to retrieve new data.

Step 5: Improving the web page

Once the web page is running, you can add features such as automatic refreshing. Do this by adding the following to the HTML head:

void handleRoot() {
  sensors_event_t humidity, temp;
  aht.getEvent(&humidity, &temp);

  String htmlPage = "<html><head>";
  htmlPage += "<meta http-equiv='refresh' content='5'>";
  htmlPage += "</head><body>";
  htmlPage += "<h1>Live Sensordata</h1>";
  htmlPage += "<p>Temperatur: " + String(temp.temperature) + " &#176;C</p>";
  htmlPage += "<p>Luftfugtighed: " + String(humidity.relative_humidity) + " %</p>";
  htmlPage += "</body></html>";

  server.send(200, "text/html", htmlPage);
}

The meta tag with http-equiv='refresh' tells the browser to refresh the page every 5 seconds and thereby automatically display new data.

Style the web page:
You can also add CSS styling to improve the appearance of the web page. For example, you can change the font, add colors, or adjust the text layout.

Step 6: Troubleshooting

If you encounter problems during the project, here are some common errors and solutions:

WiFi connection problems:

Make sure the SSID and password are correct.
Check that the ESP32 device is within range of your WiFi router.
If the ESP32 cannot connect to WiFi, try restarting the router or the ESP32.

The web page does not load:

Make sure you enter the correct IP address in the browser.
Check the Serial Monitor to make sure the web server is running and the correct IP address is displayed.

Sensor readings seem incorrect:

Check that the AHT10 sensor is connected correctly.
Make sure the sensor is initialized correctly in the setup() function and that there are no errors in the Serial Monitor.

Conclusion

In this lesson, we successfully created a dynamic web page that displays live sensor data from the AHT10 temperature and humidity sensor. This is an important step in developing an interactive IoT project that can be accessed remotely. By combining web development with sensor data, you have created an interface that enables real-time monitoring of environmental data directly from a browser.

In upcoming lessons, we will explore more possibilities, such as combining all the code we have written into one fully developed and fully functional IoT solution.

About the measurements: The station in this series measures temperature and relative humidity using the AHT10. These are indoor climate readings, not direct measurements of CO2, VOCs, or particles. The series name “air quality monitoring” should be understood with this limitation.

Log in

Reset password

Create an account

Your bag(0)

Your cart is empty

Search