Visning af Sensordata på en Webside - Serie om Luftkvalitets monitorer

Del!

0 kommentarer

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, at informationen på en webside kan ændres over tid uden at siden skal genindlæses manuelt. 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

Upload Koden: Brug Arduino IDE til at uploade.
Åbn Seriel Monitor: Brug Ctrl + Shift + M for at se IP-adressen.
Tilgå Websiden: Skriv IP-adressen i en webbrowser.
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.

Del!