Image of eBits Academy airquality illustration

Visning af Sensordata på en Webside - Serie om Luftkvalitets monitoreringsstation, Afsnit 16

  • April 22, 2025
  • |
  • Teofil Corad

Lektionsmål

Målet med denne lektion er at lære dig, hvordan du dynamisk kan vise live-sensordata — specifikt temperatur og luftfugtighed — på en webside hostet af ESP32. Når du er færdig med lektionen, vil du have et fuldt funktionelt IoT-system, der viser sensordata i realtid direkte i en webbrowser.

Liste over nødvendige komponenter:

AHT10 Høj præcisions temperatur og fugtighedsmåler
TTGO T-Display ESP32 16MB med WiFi, Bluetooth og 1.1" farve LCD skærm
Dupont kabler 40 stk

 

Introduktion

I den forrige lektion lærte vi, hvordan man opsætter en grundlæggende webserver på ESP32. Den server hostede blot en statisk HTML-side, men i denne lektion går vi et skridt videre ved at integrere live-data. Vi vil ændre webserveren, så den leverer dynamisk HTML-indhold, der indeholder live-sensordata — specifikt temperatur- og fugtighedsmålinger fra vores AHT10-sensor.

Dette er et vigtigt skridt i at skabe et interaktivt IoT-projekt, da det giver brugere mulighed for at overvåge data eksternt fra enhver enhed med en browser. I stedet for at tjekke seriemonitoren kan brugeren blot tilgå en webside for at se live-opdateringer fra ESP32.

Trin 1: Oversigt over Dynamisk Webindhold

Dynamisk webindhold betyder her, at serveren genererer siden med aktuelle målinger ved hver forespørgsel. Det betyder ikke i sig selv, at en allerede åben side opdateres automatisk; det kræver genindlæsning eller den automatiske opdatering i trin 5. I dette tilfælde vil temperatur- og luftfugtighedsmålinger blive opdateret, hver gang en klient (browser) anmoder om siden.

Webserveren vil hente de nyeste sensordata, formatere dem i en HTML-struktur og sende dem til klienten. Hver gang brugeren åbner siden eller genopfrisker den, vises nye sensormålinger. Dette gør det lettere at overvåge data eksternt i realtid.

Trin 2: Kodning af den Dynamiske Webside

Vi vil ændre vores webserverkode til at hente temperatur- og luftfugtighedsmålinger fra AHT10-sensoren og vise dem på websiden.

Her er koden:

#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();
}

Trin 3: Gennemgang af Koden

1. Biblioteker:
Vi inkluderer WiFi.h til netværk, WebServer.h til webserverfunktioner og Adafruit_AHTX0.h til vores AHT10-sensor.

2. WiFi-opsætning:
Vi forbinder ESP32 til et lokalt WiFi-netværk.

3. Webserver:
Vi opretter en WebServer-instans på port 80 (HTTP), der håndterer klientanmodninger.

4. Hentning af Sensordata:
handleRoot() henter aktuelle målinger fra AHT10-sensoren.

5. Dynamisk Webside:
Vi opbygger en HTML-streng med sensordata indsat direkte i koden.

6. Svar til Klienten:
server.send() sender HTML-siden til browseren.

7. Håndtering af Klienter:
server.handleClient() lytter konstant efter nye HTTP-anmodninger.

Trin 4: Test af den Dynamiske Webside

  1. Upload Koden: Brug Arduino IDE til at uploade.

  2. Åbn Seriel Monitor: Brug Ctrl + Shift + M for at se IP-adressen.

  3. Tilgå Websiden: Skriv IP-adressen i en webbrowser.

  4. Se Live-data: Websiden viser nu aktuelle temperatur- og fugtighedsmålinger fra AHT10. Opdater siden for at hente nye data.

Trin 5: Forbedring af Websiden

Når websiden kører, kan du tilføje funktioner som automatisk opdatering. Det gøres ved at tilføje følgende til HTML-hovedet:

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);
}

Meta-tagget med http-equiv='refresh' fortæller browseren, at siden skal opdateres hvert 5. sekund og dermed automatisk vise nye data.

Stil Websiden:
Du kan også tilføje CSS-styling for at gøre websiden pænere. For eksempel kan du ændre skrifttypen, tilføje farver eller justere layoutet af teksten.

Trin 6: Fejlfinding

Hvis du oplever problemer under projektet, er her nogle almindelige fejl og løsninger:

WiFi-forbindelsesproblemer:

  • Sørg for, at SSID og adgangskode er korrekt.

  • Tjek, at ESP32-enheden er inden for rækkevidde af din WiFi-router.

  • Hvis ESP32 ikke kan oprette forbindelse til WiFi, så prøv at genstarte routeren eller ESP32.

Websiden indlæses ikke:

  • Sørg for, at du indtaster den korrekte IP-adresse i browseren.

  • Tjek Serial Monitor for at sikre, at webserveren kører, og at den rigtige IP-adresse bliver vist.

Sensoraflæsninger virker forkerte:

  • Kontroller at AHT10-sensoren er tilsluttet korrekt.

  • Sørg for, at sensoren bliver initialiseret korrekt i setup() funktionen, og at der ikke er fejl i Serial Monitor.

Konklusion

I denne lektion har vi med succes lavet en dynamisk webside, som viser live sensordata fra AHT10 temperatur- og fugtighedssensoren. Det er et vigtigt skridt i udviklingen af et interaktivt IoT-projekt, som kan tilgås eksternt. Ved at kombinere webudvikling med sensordata har du skabt et interface, der muliggør realtids-overvågning af miljødata direkte fra en browser.

I kommende lektioner vil vi udforske flere muligheder, som fx at samle al den skrevne kode i én fuldt udviklet og fuldt funktionel IoT-løsning.

Om målingerne: Stationen i denne serie måler temperatur og relativ luftfugtighed med AHT10. Det er indeklimamålinger, ikke direkte målinger af CO2, VOC eller partikler. Seriens betegnelse ”luftkvalitetsmonitorering” skal forstås med denne begrænsning.

Efterlad en kommentar

Bemærk venligst, at kommentarer skal godkendes, før de offentliggøres.