SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32 Webserver mit mehreren Seiten – Beispiel

Webserver-Beispiel – Mehrseitiger Webserver

Überblick

Dieses Beispiel demonstriert, wie man auf dem ESP32 einen Mehrseiten-Webserver erstellt, der mehrere miteinander verbundene Seiten für Startseite, Temperaturüberwachung und LED-Steuerung umfasst.

Funktionen

Mehrseitige Navigation mit nahtlosen Seitenübergängen
Startseite mit Navigationsmenü und Systeminformationen
Temperaturüberwachungsseite mit Echtzeit-Temperaturanzeige und Aktualisierungsfunktion
LED-Steuerungsseite mit Ein/Aus-Umschaltfunktion
Vorlagenbasiertes HTML mit dynamischer Inhaltsersetzung
Hilfsfunktionen für sauberen und wartbaren Code

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 enthalten)
1	×	DIYables Sensor-Kit (30 Sensoren/Displays)
1	×	DIYables Sensor-Kit (18 Sensoren/Displays)

Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

Bibliotheksinstallation

Befolgen Sie diese Anweisungen Schritt für Schritt:

Falls dies Ihre erste Verwendung des ESP32 ist, lesen Sie das Tutorial zur Einrichtung der Umgebung für ESP32 in der Arduino IDE (die Einrichtung der Umgebung für ESP32 in der Arduino IDE).
Verbinden Sie das ESP32-Board über ein USB-Kabel mit Ihrem Computer.
Starten Sie die Arduino IDE auf Ihrem Computer.
Wählen Sie das passende ESP32-Board (z. B. ESP32) und den COM-Port aus.
Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Library Manager-Symbol auf der linken Seite der Arduino IDE klicken.
Suchen Sie nach Web-Server für ESP32 und finden Sie die mWebSockets von DIYables.
Klicken Sie auf die Schaltfläche Installieren, um die mWebSockets-Bibliothek hinzuzufügen.

Beispiel für einen Webserver

In der Arduino-IDE gehen Sie zu Datei Beispiele Webserver für ESP32 WebServer-Beispiel, um den Beispielcode zu öffnen

Schaltkreisverbindung

Keine externen Bauteile erforderlich – dieses Beispiel verwendet die eingebaute LED am Pin 13.

Code-Struktur

home.h: HTML-Vorlage für die Startseite
temperature.h: HTML-Vorlage für die Temperaturüberwachungsseite
led.h: HTML-Vorlage für die LED-Steuerungsseite
WebServer.ino: Hauptserverlogik

Installationsanweisungen

1. Netzwerkkonfiguration

Bearbeiten Sie die WLAN-Zugangsdaten direkt in der WebServer.ino-Datei:

const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

2. Quellcode hochladen und Ausgabe überwachen

Verbinde deinen ESP32 mit deinem Computer
Wähle das richtige Board und den richtigen Port in der Arduino IDE
Lade den WebServer.ino-Sketch hoch
Öffne den seriellen Monitor (9600 Baud)
Warte auf die WLAN-Verbindung
Notiere die angezeigte IP-Adresse
Wenn du die IP-Adresse im seriellen Monitor nicht siehst, drücke den Reset-Knopf auf dem ESP32-Board

Verwendung

Öffnen Sie Ihren Webbrowser und geben Sie die im Serial Monitor angezeigte IP-Adresse ein, um auf den ESP32-Webserver zuzugreifen.

Testen Sie die Temperaturüberwachungsfunktion:

Klicken Sie auf das Menü „Temperatur“.
Sehen Sie sich die Temperaturanzeige an.

LED-Steuerfunktion testen:

Klicken Sie im Menü 'LED-Steuerung'. Sie sehen die Weboberfläche wie unten dargestellt.

Schalten Sie die LED mit den bereitgestellten Tasten ein- und aus.
Beobachten Sie den Status der integrierten LED auf dem ESP32-Board, der sich sofort aktualisiert.

Verfügbare Seiten

Startseite (`/`)

Webadresse: http://your-esp32-ip/
Eigenschaften:
Willkommensnachricht mit Systeminformationen
Navigationsmenü zu allen Seiten
Sauberes, professionelles Layout

Temperaturseite (`/temperature`)

URL: http://your-esp32-ip/temperature
Funktionen:
Echtzeit-Temperaturanzeige in Celsius
Automatische Aktualisierung alle 5 Sekunden
Manuelle Aktualisierungsschaltfläche

Zurück zur Startnavigation

LED-Steuerungsseite (`/led`)

URL: http://your-esp32-ip/led
AN-URL: http://your-esp32-ip/led/on
AUS-URL: http://your-esp32-ip/led/off
Funktionen:
Aktuelle LED-Statusanzeige
Getrennte Routen für Ein- und Ausschaltaktionen
Sofortige Statusaktualisierungen nach einer Zustandsänderung

Zurück zur Startnavigation

Code-Erklärung

Serverrouten

// Configure routes with custom handler functions server.addRoute("/", handleHome); server.addRoute("/temperature", handleTemperature); server.addRoute("/led", handleLed); server.addRoute("/led/on", handleLedOn); server.addRoute("/led/off", handleLedOff); // Handler function examples void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, HOME_PAGE); } void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { float tempC = 25.5; // Simulated temperature value String response = TEMPERATURE_PAGE; response.replace("%TEMP_C%", String(tempC, 1)); server.sendResponse(client, response.c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { ledState = HIGH; digitalWrite(LED_PIN, ledState); sendLedPage(client); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { ledState = LOW; digitalWrite(LED_PIN, ledState); sendLedPage(client); }

Vorlagensystem

Das Beispiel verwendet ein Platzhalter-Ersetzungssystem für dynamische Inhalte:

%TEMP_C%: Wird durch den aktuellen Temperaturwert in Grad Celsius ersetzt
%LED_STATUS%: Wird durch den aktuellen LED-Status ersetzt ("AN" oder "AUS")

Hilfsfunktionen

// Helper function to send LED page with current status void sendLedPage(WiFiClient& client) { String ledStatus = (ledState == HIGH) ? "ON" : "OFF"; String response = LED_PAGE; response.replace("%LED_STATUS%", ledStatus); server.sendResponse(client, response.c_str()); } // LED state tracking int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)

Anpassung

Neue Seiten hinzufügen

HTML-Vorlage in einer neuen Header-Datei erstellen
Einen Routen-Handler in der Hauptschleife hinzufügen
Navigationsmenü in bestehenden Seiten aktualisieren

Gestaltung

Passen Sie das CSS in HTML-Vorlagen an, um das Erscheinungsbild zu ändern:

Sensoren hinzufügen

Ersetzen Sie den simulierten Temperaturwert durch reale Sensormesswerte:

void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { // Replace with actual sensor reading // e.g., DHT22, DS18B20, etc. float tempC = readActualTemperatureSensor(); // Your sensor function here String response = TEMPERATURE_PAGE; response.replace("%TEMP_C%", String(tempC, 1)); server.sendResponse(client, response.c_str()); }

Fehlerbehebung

Häufige Probleme

WLAN-Verbindung fehlgeschlagen

SSID und Passwort in der WebServer.ino-Datei überprüfen
Verfügbarkeit des WLAN-Netzwerks überprüfen
Stellen Sie sicher, dass der ESP32 innerhalb der WLAN-Reichweite liegt

Seiten werden nicht geladen.

Suchen Sie im seriellen Monitor nach der IP-Adresse
Überprüfen Sie, ob die URL des Browsers mit der IP-Adresse des ESP32 übereinstimmt
Versuchen Sie, die Seite neu zu laden

LED reagiert nicht

Stellen Sie sicher, dass die LED am Pin 13 angeschlossen ist.
Überprüfen Sie den Serial Monitor auf Debug-Nachrichten.
Stellen Sie sicher, dass die Routen-Handler registriert sind.

Debug-Ausgabe

Zusätzliches Debugging aktivieren, indem Sie Serial.println()-Anweisungen hinzufügen:

void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("LED route accessed"); Serial.println("Method: " + method); Serial.println("Request: " + request); sendLedPage(client); }

Nächste Schritte

Erkunde das WebServerJson.ino-Beispiel für die REST-API-Entwicklung
Probiere WebServerQueryStrings.ino für eine fortgeschrittene Parameterbehandlung
Schau dir WebServerWithWebSocket.ino für Echtzeit-Kommunikation an