Kombinering af skærm- og webserverfunktionalitet - Serie om Luftkvalit

Del!

0 kommentarer

Lektionsmål
I denne lektion lærer du at integrere alle komponenter i IoT-systemet i ét samlet projekt. Specifikt vil vi kombinere den lokale TFT-skærmfunktion med webserveren, så ESP32 kan vise sensordata både på den fysiske skærm og via en webgrænseflade. Denne integration er vigtig, fordi den demonstrerer, hvordan IoT-enheder kan interagere med flere grænseflader samtidig og give både lokal og fjernadgang til vigtige data.
Når du har gennemført denne lektion, vil du have et fuldt integreret IoT-system, der opdaterer temperatur- og fugtighedsdata i realtid på både TFT-skærmen og en webserver.

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
Indtil nu har du lært, hvordan man opsætter TFT-skærmen, hvordan man viser sensordata og hvordan man hoster en webserver, der viser dynamiske data. Nu er det tid til at kombinere disse funktioner, så ESP32 kan håndtere både lokal visning og fjern-webserver samtidig. Dette trin demonstrerer ESP32’s styrke i IoT-applikationer. Denne alsidighed er grunden til, at ESP32 er et stærkt valg til IoT-projekter.

Trin 1: Gennemgang af tidligere komponenter
Lad os hurtigt opsummere de to nøglekomponenter, vi skal kombinere:

TFT-skærm:
TFT-skærmen er en lille skærm, der viser realtidsdata som temperatur og luftfugtighed direkte på IoT-enheden. Dette giver øjeblikkelig lokal feedback og er nyttigt i situationer, hvor direkte interaktion med enheden er nødvendig.
Webserver:
Webserveren gør det muligt for ESP32 at dele data via WiFi. Det gør dataene tilgængelige på enhver enhed, der er forbundet til det samme netværk – f.eks. en telefon, tablet eller computer. Denne funktion muliggør fjernovervågning, som er en vigtig egenskab i mange IoT-systemer.

I denne lektion samler vi disse to komponenter i ét integreret system.

Trin 2: Kombination af koden
Nu hvor vi forstår, hvordan hver komponent virker enkeltvis, skal vi kombinere dem i ét program. Følgende kode integrerer TFT-skærmen og webserveren:

#include <Adafruit_AHTX0.h>
#include <WiFi.h>
#include <WebServer.h>
#include <TFT_eSPI.h> // Inkluder TFT-biblioteket

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

// Opret WebServer-objekt på port 80
WebServer server(80);
TFT_eSPI tft = TFT_eSPI(); // Opret en instans af TFT-skærmen

Adafruit_AHTX0 aht; // Opret en instans af sensoren
Adafruit_Sensor *aht_humidity, *aht_temp;
float temperature = 0;
float humidity = 0;

// Funktion til at håndtere root-URL
void handleRoot() {
  String html = "<html><head><meta http-equiv='refresh' content=5></head>";
  html += "<body><h1>Temperatur og Fugtighed</h1>";
  html += "<p>Temperatur: " + String(temperature) + " &#176;C</p>";
  html += "<p>Fugtighed: " + String(humidity) + " %</p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);
  if (!aht.begin()) {
    Serial.println("Kunne ikke finde AHT10 sensor");
    while (1) delay(10);
  }

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Opretter forbindelse til WiFi...");
  }

  Serial.println("Forbundet til WiFi");
  Serial.print("IP-adresse: ");
  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("Webserver startet");
}

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

  delay(1000); // Opdater hvert sekund
}

Trin 3: Gennemgang af koden

WiFi-forbindelse:
Vi opretter forbindelse til et WiFi-netværk og venter på, at ESP32 tilslutter. Når forbindelsen er oprettet, udskrives IP-adressen i Serial Monitor. Denne IP-adresse er nødvendig for at få adgang til webserveren.
Webserveropsætning:
Webserveren lytter efter forespørgsler på root-URL’en ("/") og svarer med HTML, der indeholder de nyeste temperatur- og fugtighedsværdier.
Sensor-data:
Vi læser data fra AHT10-sensoren ved hjælp af Adafruit-biblioteket og gemmer det i variablerne temperature og humidity.
TFT-opdatering:
TFT-skærmen opdateres hvert sekund for at vise de nyeste målinger. Skærmen ryddes og vises med nye værdier.
Kundehåndtering:
server.handleClient() lytter efter HTTP-anmodninger. Når en forespørgsel sendes til root-URL’en, returneres HTML med sensordata.

Trin 4: Test af integrationen

Tjek Serial Monitor:
Bekræft, at ESP32 opretter forbindelse til WiFi og noter IP-adressen.
Observer TFT-skærmen:
Sørg for, at temperatur- og fugtighedsværdier opdateres hver sekund.
Åbn webside:
Åbn en webbrowser på en enhed, der er forbundet til samme netværk, og indtast ESP32’s IP-adresse. Websiden skal vise aktuelle værdier.
Verificér synkronisering:
Bekræft, at værdierne på skærmen og websiden stemmer overens og opdateres i realtid.

Trin 5: Fejlfinding

Webside indlæses ikke:
Tjek IP-adressen og WiFi-forbindelsen.
Problemer med TFT-skærmen:
Tjek ledningsforbindelser og initialisering i koden.
Sensor-data vises ikke:
Bekræft sensorforbindelse og at initialiseringen lykkes.

Trin 6: Anvendelser af integrationen
Denne lektion viser, hvordan man kombinerer flere funktioner i én IoT-enhed. Ved at integrere lokal skærm med en fjernwebserver skaber du et system med dobbelt grænseflade, som er mere fleksibelt og tilgængeligt.
Dette er især nyttigt til miljøovervågning, hvor både lokale og fjernbrugere skal kunne tilgå data.

Konklusion
I denne lektion har du med succes kombineret TFT-skærm og webserver-funktionalitet og skabt et fuldt integreret IoT-system, der kan vise realtidsdata både lokalt og via en webserver. Dette er et vigtigt skridt i udviklingen af avancerede og alsidige IoT-løsninger.

Del!