Lesson objectives
In this lesson, you will learn to integrate all the components of the IoT system into one unified project. Specifically, we will combine the local TFT display function with the web server so the ESP32 can display sensor data both on the physical screen and through a web interface. This integration is important because it demonstrates how IoT devices can interact with multiple interfaces simultaneously and provide both local and remote access to important data.
Once you have completed this lesson, you will have a fully integrated IoT system that updates temperature and humidity data in real time on both the TFT screen and a web server.
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
So far, you have learned how to set up the TFT screen, display sensor data, and host a web server showing dynamic data. Now it is time to combine these functions so the ESP32 can handle both local display and a remote web server simultaneously. This step demonstrates the ESP32's strength in IoT applications. This versatility is why the ESP32 is a strong choice for IoT projects.
Step 1: Review of previous components
Let's quickly summarize the two key components we will combine:
-
TFT screen:
The TFT screen is a small screen that displays real-time data such as temperature and humidity directly on the IoT device. This provides immediate local feedback and is useful in situations where direct interaction with the device is necessary. -
Web server:
The web server lets the ESP32 share data over WiFi. This makes the data accessible on any device connected to the same network — for example, a phone, tablet, or computer. This function enables remote monitoring, an important feature in many IoT systems.
In this lesson, we bring these two components together in one integrated system.
Step 2: Combining the code
Now that we understand how each component works individually, we will combine them into one program. The following code integrates the TFT screen and the web server:
#include <Adafruit_AHTX0.h> #include <WiFi.h> #include <WebServer.h> #include <TFT_eSPI.h> // Inkluder TFT-biblioteket // WiFi-oplysninger const char* ssid = "****"; const char* password = "****"; // Opret WebServer-objekt på port 80 WebServer server(80); TFT_eSPI tft = TFT_eSPI(); // Opret en instans af TFT-skærmen Adafruit_AHTX0 aht; // Opret en instans af sensoren Adafruit_Sensor *aht_humidity, *aht_temp; float temperature = 0; float humidity = 0; // Funktion til at håndtere root-URL void handleRoot() { String html = "<html><head><meta http-equiv='refresh' content=5></head>"; html += "<body><h1>Temperatur og Fugtighed</h1>"; html += "<p>Temperatur: " + String(temperature) + " °C</p>"; html += "<p>Fugtighed: " + String(humidity) + " %</p>"; html += "</body></html>"; server.send(200, "text/html", html); } void setup() { Serial.begin(115200); if (!aht.begin()) { Serial.println("Kunne ikke finde AHT10 sensor"); while (1) delay(10); } WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Opretter forbindelse til WiFi..."); } Serial.println("Forbundet til WiFi"); Serial.print("IP-adresse: "); Serial.println(WiFi.localIP()); tft.init(); tft.fillScreen(TFT_BLACK); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); aht_temp = aht.getTemperatureSensor(); aht_humidity = aht.getHumiditySensor(); server.on("/", handleRoot); server.begin(); Serial.println("Webserver startet"); } void loop() { server.handleClient(); sensors_event_t temp_event, humidity_event; aht_temp->getEvent(&temp_event); aht_humidity->getEvent(&humidity_event); temperature = temp_event.temperature; humidity = humidity_event.relative_humidity; tft.fillScreen(TFT_BLACK); tft.fillRoundRect(5, 15, 130, 100, 5, TFT_CYAN); tft.setTextColor(TFT_BLACK); tft.drawString("Temp:", 10, 25, 2); tft.drawString(String(temperature, 1), 10, 55, 4); tft.drawString("C", 110, 65, 2); tft.fillRoundRect(5, 130, 130, 100, 5, TFT_YELLOW); tft.setTextColor(TFT_BLACK); tft.drawString("Fugt:", 10, 135, 2); tft.drawString(String(humidity, 1), 10, 165, 4); tft.drawString("%", 110, 175, 2); delay(1000); // Opdater hvert sekund }
Step 3: Code walkthrough
-
WiFi connection:
We connect to a WiFi network and wait for the ESP32 to connect. Once connected, the IP address is printed in the Serial Monitor. This IP address is needed to access the web server. -
Web server setup:
The web server listens for requests at the root URL ("/") and responds with HTML containing the latest temperature and humidity values. -
Sensor data:
We read data from the AHT10 sensor using the Adafruit library and store it in the variablestemperatureandhumidity. -
TFT update:
The TFT screen is updated every second to show the latest readings. The screen is cleared and redrawn with new values. -
Client handling:
server.handleClient()listens for HTTP requests. When a request is sent to the root URL, HTML with sensor data is returned.
Step 4: Testing the integration
-
Check the Serial Monitor:
Confirm that the ESP32 connects to WiFi and note the IP address. -
Observe the TFT screen:
Make sure temperature and humidity values update every second. -
Open the web page:
Open a web browser on a device connected to the same network and enter the ESP32 IP address. The web page should display current values. -
Verify synchronization:
Confirm that the values on the screen and the web page match and update in real time.
Step 5: Troubleshooting
-
The web page does not load:
Check the IP address and WiFi connection. -
TFT screen problems:
Check wiring connections and initialization in the code. -
Sensor data is not displayed:
Confirm the sensor connection and that initialization succeeds.
Step 6: Applications of the integration
This lesson shows how to combine multiple functions in one IoT device. By integrating a local screen with a remote web server, you create a system with two interfaces that is more flexible and accessible.
This is especially useful for environmental monitoring where both local and remote users need access to data.
Conclusion
In this lesson, you successfully combined TFT display and web server functionality, creating a fully integrated IoT system that can display real-time data both locally and through a web server. This is an important step in developing advanced and versatile IoT solutions.
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.
