ESP32 Multi-Page Webserver Voorbeeld

WebServer Voorbeeld - Multi-Page Webserver

Overzicht

Dit voorbeeld laat zien hoe u een multi-page webserver maakt op de ESP32 met meerdere onderling verbonden pagina’s voor de startpagina, temperatuurmonitoring en LED-besturing.

Kenmerken

• Multi-page navigatie met naadloze overgang tussen pagina’s
• Startpagina met navigatiemenu en systeeminformatie
• Temperatuurmonitoringpagina met realtime temperatuuraanzeige en mogelijkheid tot verversen
• LED-besturingspagina met functie om LED aan/uit te schakelen
• Template-gebaseerde HTML met dynamische inhoudsvervanging
• Hulpfuncties voor overzichtelijke, onderhoudbare code

Benodigde Hardware

Of u kunt de volgende kits kopen:

Bibliotheek Installatie

Volg deze stappen nauwkeurig:

• Als u voor het eerst met de ESP32 werkt, raadpleeg dan de tutorial over het opzetten van de omgeving voor ESP32 in de Arduino IDE.
• Verbind de ESP32 met uw computer via een USB-kabel.
• Start de Arduino IDE op uw computer.
• Selecteer de juiste ESP32 board (bijvoorbeeld ESP32) en COM-poort.
• Open de Library Manager door op het icoon Library Manager te klikken aan de linkerkant van de Arduino IDE.
• Zoek op Web Server for ESP32 en vind de mWebSockets door DIYables.
• Klik op de knop Install om de mWebSockets-library toe te voegen.

Webserver Voorbeeld

• In de Arduino IDE, ga naar File Examples Web Server for ESP32 WebServer om de voorbeeldcode te openen

Circuitschema Aansluiting

Geen externe componenten nodig - dit voorbeeld gebruikt de ingebouwde LED op pin 13.

Code Structuur

1. home.h: HTML-template voor de startpagina
2. temperature.h: Template voor de temperatuurmonitoringpagina
3. led.h: Template voor de LED-besturingspagina
4. WebServer.ino: Hoofdserver logica

Installatie-instructies

1. Netwerkconfiguratie

Pas de WiFi-inloggegevens direct aan in het WebServer.ino bestand:

2. Code Uploaden en Uitvoer Monitoren

1. Verbind uw ESP32 met uw computer
2. Selecteer het juiste board en de juiste poort in de Arduino IDE
3. Upload de sketch WebServer.ino
4. Open de Seriële Monitor (9600 baud)
5. Wacht tot de WiFi verbinding tot stand is gebracht
6. Noteer het IP-adres dat getoond wordt
7. Mocht u het IP-adres niet zien in de Seriële Monitor, druk dan op de resetknop van de ESP32

Gebruik

Open uw webbrowser en voer het IP-adres dat in de Seriële Monitor werd weergegeven in om toegang te krijgen tot de ESP32 Webserver.

Test de Temperatuurmonitoring:

• Klik op het menu "Temperature".
• Bekijk de temperatuurweergave.

Test de LED-besturing:

• Klik op het menu "LED Control". U ziet dan de webinterface zoals hieronder:

• Schakel de LED aan en uit met de knoppen.
• Zie hoe de status van de ingebouwde LED op de ESP32 direct bijgewerkt wordt.

Beschikbare Pagina’s

Startpagina (`/`)

• URL: http://your-esp32-ip/
• Kenmerken:
• Welkomstbericht met systeeminformatie
• Navigatiemenu naar alle pagina’s
• Schone, professionele lay-out

Temperatuurpagina (`/temperature`)

• URL: http://your-esp32-ip/temperature
• Kenmerken:
• Realtime temperatuurweergave in graden Celsius
• Automatisch verversen elke 5 seconden
• Handmatige verversknop
• Navigatie terug naar startpagina

LED-besturingspagina (`/led`)

• URL: http://your-esp32-ip/led
• ON URL: http://your-esp32-ip/led/on
• OFF URL: http://your-esp32-ip/led/off
• Kenmerken:
• Weergave van huidige LED-status
• Aparte routes voor aan- en uit-acties
• Directe statusupdates na statusverandering
• Navigatie terug naar startpagina

Code Uitleg

Server Routes


// Configureer routes met custom handler functies server.addRoute("/", handleHome); server.addRoute("/temperature", handleTemperature); server.addRoute("/led", handleLed); server.addRoute("/led/on", handleLedOn); server.addRoute("/led/off", handleLedOff); // Voorbeelden van handler functies 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; // Gesimuleerde temperatuurwaarde 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); }

Template Systeem

Het voorbeeld maakt gebruik van een placeholder-systeem om dynamische inhoud te vervangen:

• %TEMP_C%: Wordt vervangen door de huidige temperatuurwaarde in graden Celsius
• %LED_STATUS%: Wordt vervangen door de huidige LED-status ("ON" of "OFF")

Hulpfuncties


// Hulpfunctie om LED-pagina te verzenden met huidige 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()); } // Bijhouden van LED-status int ledState = LOW; // Houd LED-status bij (LOW = UIT, HIGH = AAN)

Aanpassingen

Nieuwe Pagina’s Toevoegen

1. Maak een nieuwe HTML-template in een nieuw headerbestand
2. Voeg een routehandler toe in de hoofdloop
3. Werk het navigatiemenu van bestaande pagina’s bij

Styling

Pas de CSS aan in de HTML-templates om het uiterlijk te wijzigen:


<style> body { font-family: Arial, sans-serif; margin: 40px; } .container { max-width: 600px; margin: 0 auto; } /* Voeg hier uw eigen stijlen toe */ </style>

Sensoren Toevoegen

Vervang de gesimuleerde temperatuurwaarde door werkelijke sensorwaarden:


void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { // Vervang door daadwerkelijke sensoruitlezing // bijvoorbeeld DHT22, DS18B20, etc. float tempC = readActualTemperatureSensor(); // Uw sensorfunctie hier String response = TEMPERATURE_PAGE; response.replace("%TEMP_C%", String(tempC, 1)); server.sendResponse(client, response.c_str()); }

Problemen Oplossen

Veelvoorkomende Problemen

WiFi Verbinding Mislukt

• Controleer SSID en wachtwoord in het WebServer.ino bestand
• Controleer de beschikbaarheid van het WiFi-netwerk
• Zorg dat de ESP32 binnen het bereik van het WiFi-netwerk is

Pagina’s Laden Niet

• Controleer de Seriële Monitor op het IP-adres
• Controleer of de URL in de browser overeenkomt met het IP-adres van de ESP32
• Probeer de pagina te verversen

LED Reageert Niet

• Controleer of de LED is aangesloten op pin 13
• Bekijk debugberichten in de Seriële Monitor
• Controleer of de routehandlers geregistreerd zijn

Debug Output

Activeer extra debugging door Serial.println() statements toe te voegen:

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

Volgende Stappen

• Verken het voorbeeld WebServerJson.ino voor REST API-ontwikkeling
• Probeer WebServerQueryStrings.ino voor geavanceerde parameterverwerking
• Bekijk WebServerWithWebSocket.ino voor realtime communicatie

Leerbronnen

• ESP32 Web Server
• HTML Templates en Dynamische Inhoud

Gerelateerde Tutorials

• DIYables ESP32 Web Server Library
• DIYables ESP32 Web Server Query String Example
• DIYables ESP32 Web Server Json Example
• DIYables ESP32 Web Server With WebSocket Example
• DIYables ESP32 Web Server Authentication Example