Image of Kombinering af skærm- og webserverfunktionalitet - Serie om Luftkvalitets monitoreringsstation, Afsnit 17

Kombinering av skärm- och webbserverfunktionalitet - Serie om luftkvalitetsmätstationer, 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. Specifikt kommer vi att kombinera 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. Denna integration är viktig eftersom den visar hur IoT-enheter kan interagera med flera gränssnitt samtidigt och ge både lokal och fjärråtkomst till viktig data.
När du har slutfört denna lektion kommer du att ha ett fullt integrerat IoT-system som uppdaterar temperatur- och fuktighetsdata i realtid på både TFT-skärmen och en webbserver.

Lista över nödvändiga komponenter:

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

 

Introduktion
Hittills har du lärt dig hur man installerar TFT-skärmen, hur man visar sensordata och hur man hostar en webbserver som visar dynamisk data. Nu är det dags att kombinera dessa funktioner, så att ESP32 kan hantera både lokal visning och fjärr-webbserver samtidigt. Detta steg demonstrerar ESP32:s styrka i IoT-applikationer. Denna mångsidighet är anledningen till att ESP32 är ett starkt val för IoT-projekt.

Steg 1: Genomgång av tidigare komponenter
Låt oss snabbt sammanfatta de två nyckelkomponenter 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. Detta ger omedelbar lokal feedback och är användbart i situationer där direkt interaktion med enheten är nödvändig.

  2. Webbserver:
    Webbservern gör det möjligt för ESP32 att dela data via WiFi. Det gör data tillgängliga på alla enheter som är anslutna till samma nätverk – t.ex. en telefon, surfplatta eller dator. Denna funktion möjliggör fjärrövervakning, vilket är en viktig egenskap i många IoT-system.

I den här lektionen sammanställer vi dessa två komponenter till ett integrerat system.

Steg 2: Kombination av koden
Nu när vi förstår hur varje komponent fungerar individuellt, 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> // Inkludera TFT-biblioteket

// WiFi-information
const char* ssid = "****";
const char* password = "****";

// Skapa WebServer-objekt på port 80
WebServer server(80);
TFT_eSPI tft = TFT_eSPI(); // Skapa en instans av TFT-skärmen

Adafruit_AHTX0 aht; // Skapa en instans av sensorn
Adafruit_Sensor *aht_humidity, *aht_temp;
float temperature = 0;
float humidity = 0;

// Funktion för att hantera root-URL
void handleRoot() {
  String html = "<html><head><meta http-equiv='refresh' content=5></head>";
  html += "<body><h1>Temperatur och Luftfuktighet</h1>";
  html += "<p>Temperatur: " + String(temperature) + " °C</p>";
  html += "<p>Fuktighet: " + String(humidity) + " %</p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

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

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

  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("Webbserver startad");
}

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("Fukt:", 10, 135, 2);
  tft.drawString(String(humidity, 1), 10, 165, 4);
  tft.drawString("%", 110, 175, 2);

  delay(1000); // Uppdatera varje sekund
}

Steg 3: Genomgång av koden

  1. WiFi-anslutning:
    Vi ansluter till ett WiFi-nätverk och väntar på att ESP32 ska ansluta. När anslutningen är upprättad skrivs IP-adressen ut i Serial Monitor. Denna IP-adress är nödvändig för att få åtkomst till webbservern.

  2. Webbserverinställning:
    Webbservern lyssnar efter förfrågningar på root-URL:en ("/") och svarar med HTML som innehåller de senaste temperatur- och luftfuktighetsvärdena.

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

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

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

Steg 4: Testa integrationen

  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 fuktighetsvärden uppdateras varje sekund.

  3. Öppna webbsida:
    Öppna en webbläsare på en enhet som är ansluten till samma nätverk och skriv in ESP32:ans IP-adress. Webbsidan ska visa aktuella värden.

  4. Verifiera synkronisering:
    Bekräfta att värdena på skärmen och webbsidan överensstämmer 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 initialisering i koden.

  3. Sensordata visas inte:
    Bekräfta sensoranslutning och att initialiseringen lyckas.

Steg 6: Användningsområden för integrationen
Denna lektion visar hur man kombinerar flera funktioner i en IoT-enhet. Genom att integrera lokal skärm med en fjärrwebbserver skapar du ett system med dubbla gränssnitt, vilket är mer flexibelt och tillgängligt.
Detta är särskilt användbart för miljöövervakning, där både lokala och fjärranvändare behöver kunna komma åt data.

Slutsats
I denna lektion har du framgångsrikt kombinerat TFT-skärm och webbserverfunktionalitet och skapat ett fullt integrerat IoT-system som kan visa realtidsdata både lokalt och via en webbserver. Detta är ett viktigt steg i utvecklingen av avancerade och mångsidiga IoT-lösningar.

Lämna en kommentar

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