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

Visa sensordata på en webbsida - Serie om luftkvalitetsövervakningsstationer, Avsnitt 16

  • April 22, 2025
  • |
  • Teofil Corad

Lektionsmål

Målet med den här lektionen är att lära dig hur du dynamiskt kan visa live-sensordata – specifikt temperatur och luftfuktighet – på en webbsida hostad av ESP32. När du är klar med lektionen har du ett fullt fungerande IoT-system som visar sensordata i realtid direkt i en webbläsare.

Lista över nödvändiga komponenter:

AHT10 Hög precision temperatur- och fuktighetssensor
TTGO T-Display ESP32 16MB med WiFi, Bluetooth och 1.1" färg LCD-skärm
Dupont kablar 40 st

 

Introduktion

I förra lektionen lärde vi oss hur man sätter upp en grundläggande webbserver på ESP32. Den servern hostade bara en statisk HTML-sida, men i den här lektionen tar vi ett steg längre genom att integrera live-data. Vi kommer att ändra webbservern så att den levererar dynamiskt HTML-innehåll som innehåller live-sensordata – specifikt temperatur- och fuktighetsmätningar från vår AHT10-sensor.

Detta är ett viktigt steg i att skapa ett interaktivt IoT-projekt, då det ger användare möjlighet att övervaka data på distans från vilken enhet som helst med en webbläsare. Istället för att kolla serieövervakaren kan användaren helt enkelt gå in på en webbsida för att se live-uppdateringar från ESP32.

Steg 1: Översikt över Dynamiskt Webbplatsinnehåll

Dynamiskt webbinnehåll innebär att informationen på en webbsida kan ändras över tid utan att sidan behöver laddas om manuellt. I det här fallet kommer temperatur- och luftfuktighetsmätningarna att uppdateras varje gång en klient (webbläsare) begär sidan.

Webbservern kommer att hämta de senaste sensordata, formatera dem i en HTML-struktur och skicka dem till klienten. Varje gång användaren öppnar sidan eller uppdaterar den visas nya sensormätningar. Detta gör det enklare att övervaka data på distans i realtid.

Steg 2: Kodning av den Dynamiska Webbsidan

Vi kommer att ändra vår webbserverkod för att hämta temperatur- och luftfuktighetsmätningar från AHT10-sensorn och visa dem på webbsidan.

Här är koden:

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

// Ersätt med dina nätverksuppgifter
const char* ssid = "Ditt_SSID";
const char* password = "Ditt_Lösenord";

WebServer server(80);
Adafruit_AHTX0 aht;

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

  String htmlPage = "<html><body>";
  htmlPage += "<h1>Sensordata</h1>";
  htmlPage += "<p>Temperatur: " + String(temp.temperature) + " °C</p>";
  htmlPage += "<p>Luftfuktighet: " + String(humidity.relative_humidity) + " %</p>";
  htmlPage += "</body></html>";

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

void setup() {
  Serial.begin(115200);
  if (!aht.begin()) {
    Serial.println("Kunde inte hitta AHT10-sensorn");
    while (1) delay(10);
  }
  Serial.println("AHT10-sensor initierad");

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Ansluter till WiFi...");
  }
  Serial.println("Ansluten till WiFi");
  Serial.print("IP-adress: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
  Serial.println("Webbserver startad");
}

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

Steg 3: Genomgång av koden

1. Bibliotek:
Vi inkluderar WiFi.h för nätverk, WebServer.h för webbserverfunktioner och Adafruit_AHTX0.h för vår AHT10-sensor.

2. WiFi-inställning:
Vi ansluter ESP32 till ett lokalt WiFi-nätverk.

3. Webbserver:
Vi skapar en WebServer-instans på port 80 (HTTP), som hanterar klientförfrågningar.

4. Hämtning av sensordata:
handleRoot() hämtar aktuella mätningar från AHT10-sensorn.

5. Dynamisk webbsida:
Vi bygger en HTML-sträng med sensordata infogat direkt i koden.

6. Svar till klienten:
server.send() skickar HTML-sidan till webbläsaren.

7. Hantering av klienter:
server.handleClient() lyssnar konstant efter nya HTTP-förfrågningar.

Steg 4: Test av den dynamiska webbsidan

  1. Ladda upp koden: Använd Arduino IDE för att ladda upp.

  2. Öppna Seriel Monitor: Använd Ctrl + Skift + M för att se IP-adressen.

  3. Gå till webbsidan: Skriv IP-adressen i en webbläsare.

  4. Se Live-data: Webbsidan visar nu aktuella temperatur- och luftfuktighetsmätningar från AHT10. Uppdatera sidan för att hämta nya data.

Steg 5: Förbättring av webbsidan

När webbsidan körs kan du lägga till funktioner som automatisk uppdatering. Det görs genom att lägga till följande i HTML-huvudet:

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) + " °C</p>";
  htmlPage += "<p>Luftfuktighet: " + String(humidity.relative_humidity) + " %</p>";
  htmlPage += "</body></html>";

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

Meta-taggen med http-equiv='refresh' berättar för webbläsaren att sidan ska uppdateras var 5:e sekund och därmed automatiskt visa nya data.

Styla webbsidan:
Du kan också lägga till CSS-styling för att göra webbsidan snyggare. Till exempel kan du ändra teckensnittet, lägga till färger eller justera textens layout.

Steg 6: Felsökning

Om du upplever problem under projektet, här är några vanliga fel och lösningar:

Problem med WiFi-anslutning:

  • Se till att SSID och lösenord är korrekta.

  • Kontrollera att ESP32-enheten är inom räckvidden för din WiFi-router.

  • Om ESP32 inte kan ansluta till WiFi, prova att starta om routern eller ESP32.

Webbsidan laddas inte:

  • Se till att du anger rätt IP-adress i webbläsaren.

  • Kontrollera Serial Monitor för att säkerställa att webbservern körs och att rätt IP-adress visas.

Sensoravläsningar verkar felaktiga:

  • Kontrollera att AHT10-sensorn är korrekt ansluten.

  • Se till att sensorn initialiseras korrekt i setup()-funktionen och att det inte finns några fel i Serial Monitor.

Slutsats

I denna lektion har vi framgångsrikt skapat en dynamisk webbsida som visar live sensordata från AHT10 temperatur- och fuktighetssensor. Detta är ett viktigt steg i utvecklingen av ett interaktivt IoT-projekt som kan nås på distans. Genom att kombinera webbutveckling med sensordata har du skapat ett gränssnitt som möjliggör realtidsövervakning av miljödata direkt från en webbläsare.

I kommande lektioner kommer vi att utforska fler möjligheter, som till exempel att samla all skriven kod i en fullt utvecklad och fullt fungerande IoT-lösning.

Lämna en kommentar

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