Image of eBits Academy airquality illustration

Kombinera skärm- och webbserverfunktioner – Serien om en luftkvalitetsstation, avsnitt 17

  • April 29, 2025
  • |
  • Teofil Corad


Lektionsmål
I den här lektionen lär du dig att integrera alla komponenter i IoT-systemet i ett samlat projekt. Vi kombinerar den lokala TFT-skärmfunktionen med webbservern så att ESP32 kan visa sensordata både på den fysiska skärmen och via ett webbgränssnitt. Integreringen är viktig eftersom den visar hur IoT-enheter kan arbeta med flera gränssnitt samtidigt och ge både lokal åtkomst och fjärråtkomst till viktiga data.
När du har genomfört lektionen har du ett fullt integrerat IoT-system som uppdaterar temperatur- och luftfuktighetsdata i realtid på både TFT-skärmen och en webbserver.

Lista över nödvändiga komponenter:

AHT10 temperatur- och luftfuktighetsmätare med hög precision
TTGO T-Display ESP32 16MB med WiFi, Bluetooth och 1.1" LCD-färgskärm
Dupontkablar, 40 st

 

Introduktion
Hittills har du lärt dig att konfigurera TFT-skärmen, visa sensordata och driva en webbserver som visar dynamiska data. Nu är det dags att kombinera funktionerna så att ESP32 kan hantera både lokal visning och en webbserver för fjärråtkomst samtidigt. Detta visar ESP32:s styrka i IoT-tillämpningar. Mångsidigheten är anledningen till att ESP32 är ett bra val för IoT-projekt.

Steg 1: Genomgång av tidigare komponenter
Vi sammanfattar snabbt de två nyckelkomponenterna som vi ska kombinera:

  1. TFT-skärm:
    TFT-skärmen är en liten skärm som visar realtidsdata som temperatur och luftfuktighet direkt på IoT-enheten. Det ger omedelbar lokal återkoppling och är användbart när direkt interaktion med enheten behövs.

  2. Webbserver:
    Webbservern gör det möjligt för ESP32 att dela data via WiFi. Det gör informationen tillgänglig på alla enheter i samma nätverk – till exempel en telefon, surfplatta eller dator. Funktionen möjliggör fjärrövervakning, en viktig egenskap i många IoT-system.

I den här lektionen samlar vi dessa två komponenter i ett integrerat system.

Steg 2: Kombinera koden
Nu när vi förstår hur varje komponent fungerar för sig ska vi kombinera dem i ett program. Följande kod integrerar TFT-skärmen och webbservern:

#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) + " &#176;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
}

Steg 3: Genomgång av koden

  1. WiFi-anslutning:
    Vi ansluter till ett WiFi-nätverk och väntar på att ESP32 ansluter. När anslutningen är upprättad skrivs IP-adressen ut i Serial Monitor. IP-adressen behövs för att nå webbservern.

  2. Konfigurera webbservern:
    Webbservern lyssnar efter förfrågningar på rotadressen ("/") och svarar med HTML som innehåller de senaste temperatur- och luftfuktighetsvärdena.

  3. Sensordata:
    Vi läser data från AHT10-sensorn med Adafruit-biblioteket och sparar dem i variablerna temperature och humidity.

  4. TFT-uppdatering:
    TFT-skärmen uppdateras varje sekund för att visa de senaste mätvärdena. Skärmen rensas och ritas om med nya värden.

  5. Klienthantering:
    server.handleClient() lyssnar efter HTTP-förfrågningar. När en förfrågan skickas till rotadressen returneras HTML med sensordata.

Steg 4: Testa integreringen

  1. Kontrollera Serial Monitor:
    Bekräfta att ESP32 ansluter till WiFi och notera IP-adressen.

  2. Observera TFT-skärmen:
    Se till att temperatur- och luftfuktighetsvärdena uppdateras varje sekund.

  3. Öppna webbsidan:
    Öppna en webbläsare på en enhet i samma nätverk och ange ESP32:s IP-adress. Webbsidan ska visa aktuella värden.

  4. Kontrollera synkroniseringen:
    Bekräfta att värdena på skärmen och webbsidan stämmer överens och uppdateras i realtid.

Steg 5: Felsökning

  1. Webbsidan laddas inte:
    Kontrollera IP-adressen och WiFi-anslutningen.

  2. Problem med TFT-skärmen:
    Kontrollera kabelanslutningar och initiering i koden.

  3. Sensordata visas inte:
    Kontrollera sensoranslutningen och att initieringen lyckas.

Steg 6: Användningsområden för integreringen
Den här lektionen visar hur man kombinerar flera funktioner i en IoT-enhet. Genom att integrera en lokal skärm med en webbserver för fjärråtkomst skapar du ett system med två gränssnitt som är mer flexibelt och tillgängligt.
Det är särskilt användbart för miljöövervakning där både lokala användare och fjärranvändare behöver tillgång till data.

Slutsats
I den här lektionen har du kombinerat TFT-skärm- och webbserverfunktioner och skapat ett fullt integrerat IoT-system som kan visa realtidsdata både lokalt och via en webbserver. Det är ett viktigt steg i utvecklingen av avancerade och mångsidiga IoT-lösningar.

Om mätningarna: Stationen i den här serien mäter temperatur och relativ luftfuktighet med AHT10. Det är mätningar av inomhusklimatet, inte direkta mätningar av CO2, VOC eller partiklar. Seriens benämning ”luftkvalitetsövervakning” ska förstås med denna begränsning.

Lämna en kommentar

Observera att kommentarer måste godkännas innan de publiceras.