Image of eBits Academy airquality illustration

Visa sensordata på en webbsida – Serien om en luftkvalitetsstation, avsnitt 16

  • April 22, 2025
  • |
  • Teofil Corad

Lektionsmål

Målet med den här lektionen är att lära dig att dynamiskt visa aktuella sensordata – närmare bestämt temperatur och luftfuktighet – på en webbsida som drivs av ESP32. När du är klar har du ett fullt fungerande IoT-system som visar sensordata i realtid direkt i en webbläsare.

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

I föregående lektion lärde vi oss att konfigurera en grundläggande webbserver på ESP32. Servern visade bara en statisk HTML-sida, men i den här lektionen tar vi nästa steg genom att integrera aktuella data. Vi ändrar webbservern så att den levererar dynamiskt HTML-innehåll med aktuella sensordata – närmare bestämt temperatur- och luftfuktighetsmätningar från AHT10-sensorn.

Detta är ett viktigt steg för att skapa ett interaktivt IoT-projekt eftersom användare kan övervaka data på distans från alla enheter med en webbläsare. I stället för att kontrollera den seriella monitorn kan användaren helt enkelt öppna en webbsida för att se aktuella uppdateringar från ESP32.

Steg 1: Översikt över dynamiskt webbinnehåll

Här innebär dynamiskt webbinnehåll att servern skapar sidan med aktuella mätvärden vid varje förfrågan. Det uppdaterar inte i sig en redan öppen sida automatiskt; det kräver omladdning eller den automatiska uppdateringen i steg 5. I det här fallet uppdateras temperatur- och luftfuktighetsmätningarna varje gång en klient (webbläsare) begär sidan.

Webbservern hämtar de senaste sensordata, formaterar dem i en HTML-struktur och skickar dem till klienten. Varje gång användaren öppnar eller uppdaterar sidan visas nya sensoravläsningar. Det gör det enklare att övervaka data på distans i realtid.

Steg 2: Programmera den dynamiska webbsidan

Vi ändrar webbserverkoden 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>

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

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ämta sensordata:
handleRoot() hämtar aktuella mätvärden från AHT10-sensorn.

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

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

7. Hantera klienter:
server.handleClient() lyssnar ständigt efter nya HTTP-förfrågningar.

Steg 4: Testa den dynamiska webbsidan

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

  2. Öppna den seriella monitorn: Använd Ctrl + Shift + M för att se IP-adressen.

  3. Öppna webbsidan: Skriv IP-adressen i en webbläsare.

  4. Visa aktuella 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ättra webbsidan

När webbsidan fungerar kan du lägga till funktioner som automatisk uppdatering. Det gör du genom att lägga till följande i HTML-sidans head-del:

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

Metataggen med http-equiv='refresh' talar om för webbläsaren att uppdatera sidan var 5:e sekund och därmed automatiskt visa nya data.

Formge webbsidan:
Du kan också lägga till CSS-formatering för att göra webbsidan snyggare. Du kan till exempel ändra typsnitt, lägga till färger eller justera textens layout.

Steg 6: Felsökning

Om du stöter på problem under projektet finns här några vanliga fel och lösningar:

Problem med WiFi-anslutningen:

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

  • Kontrollera att ESP32-enheten är inom räckhåll för WiFi-routern.

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

Webbsidan laddas inte:

  • Se till att du skriver 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äsningarna verkar felaktiga:

  • Kontrollera att AHT10-sensorn är korrekt ansluten.

  • Se till att sensorn initieras korrekt i setup() funktionen och att inga fel visas i Serial Monitor.

Slutsats

I den här lektionen har vi skapat en dynamisk webbsida som visar aktuella sensordata från AHT10-sensorn för temperatur och luftfuktighet. Det ä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 övervakning av miljödata i realtid direkt från en webbläsare.

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

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.