ESP32 Query String Web Server - Dynamische URL-parameters
WebServerQueryStrings Voorbeeld - Dynamische Meerpagina Server
Overzicht
Dit voorbeeld laat zien hoe u een dynamische meerpagina webserver maakt die gebruikmaakt van URL-queryparameters om interactieve content en besturingsfuncties te bieden met een naadloze navigatie tussen pagina’s.
Kenmerken
- Meerpagina navigatie met dynamische content gebaseerd op URL-parameters
- Temperatuureenheid conversie (Celsius/Fahrenheit) via queryparameters
- LED-besturing met query string parameters
- Dynamische content generatie gebaseerd op gebruikersinvoer
- Professionele meerpagina lay-out met consistente navigatie
- Parsing en validatie van URL-parameters
Hardware Benodigdheden
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Bibliotheek Installatie
Volg deze stappen nauwkeurig:
- Als dit uw eerste keer is met de ESP32, raadpleeg dan de tutorial over het opzetten van de ESP32-omgeving 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 Bibliotheekbeheerder door te klikken op het Library Manager icoon aan de linkerzijde van de Arduino IDE.
- Zoek op Web Server for ESP32 en vind de mWebSockets van DIYables.
- Klik op de Install-knop om de mWebSockets bibliotheek toe te voegen.
Voorbeeld Web Server Query Strings
- Open in Arduino IDE via File Examples Web Server for ESP32 WebServerQueryStrings om de voorbeeldcode te laden.
Code-structuur
- home.h: HTML-sjabloon voor de startpagina
- temperature.h: Sjabloon voor temperatuurscherm
- led.h: Sjabloon voor LED-besturingspagina
- WebServerQueryStrings.ino: Hoofdserverlogica
Aansluitschema
Geen externe componenten nodig – dit voorbeeld gebruikt de ingebouwde LED op pin 13.
Query Parameter Functies
Temperatuurscherm Parameters
- unit=c of unit=celsius - Temperatuur weergeven in Celsius
- unit=f of unit=fahrenheit - Temperatuur weergeven in Fahrenheit
- Geen parameter - Standaard Celsius
LED-besturingsparameters
- state=on - Zet de LED aan
- state=off - Zet de LED uit
Installatie-instructies
1. Netwerkconfiguratie
Pas de WiFi-gegevens direct aan in het bestand WebServerQueryStrings.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Code uploaden en output monitoren
- Verbind uw ESP32 met de computer
- Selecteer het correcte board en poort in de Arduino IDE
- Upload de sketch WebServerQueryStrings.ino
- Open de Seriële Monitor op 9600 baud
- Wacht op de WiFi-verbinding
- Noteer het IP-adres dat wordt weergegeven
- Als het IP-adres niet verschijnt, druk dan op de resetknop van de ESP32
Gebruik Voorbeelden
Open uw webbrowser en voer het IP-adres in dat wordt weergegeven in de Seriële Monitor om toegang te krijgen tot de webserver.
Test de temperatuurmonitorfunctie:
- Klik in het menu op "Temperature".
- Bekijk de temperatuurweergave. Klik op elke knop om de temperatuureenheid te wijzigen.
Test de LED-besturing:
- Klik in het menu op "LED Control". U ziet het webinterface zoals hieronder:
- Zet de LED AAN en UIT met de beschikbare knoppen.
- Observeer dat de ingebouwde LED op het ESP32-bord direct van status verandert.
Toegang tot verschillende pagina’s
Startpagina
- URL: http://your-esp32-ip/
- Kenmerken: Welkompagina met navigatiemenu
Temperatuurscherm (Standaard - Celsius)
- URL: http://your-esp32-ip/temperature
- Weergave: Temperatuur in Celsius met eenheidselector
Temperatuur in Fahrenheit
- URL: http://your-esp32-ip/temperature?unit=f
- URL: http://your-esp32-ip/temperature?unit=fahrenheit
- Weergave: Temperatuur omgezet naar Fahrenheit
LED-besturing
- AAN zetten: http://your-esp32-ip/led?state=on
- UIT zetten: http://your-esp32-ip/led?state=off
Code Uitleg
Verwerking van Query Parameters
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Controleer op queryparameter "unit"
String unit = "C";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "unit") {
unit = params.params[i].value;
}
}
// Genereer temperatuurweergave op basis van unit
String temperatureDisplay = "Simulated temperature: 25°" + unit;
// Gebruik het TEMPERATURE_PAGE sjabloon en vervang de placeholder
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
server.sendResponse(client, response.c_str());
}
LED-besturing met Query Parameters
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Controleer op queryparameter "state"
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
break;
}
}
// Bestuur LED op basis van state
if (state == "on") {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
} else if (state == "off") {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
} else if (state == "") {
// Geen state-parameter opgegeven, toon alleen huidige status
} else {
// Ongeldige state-parameter
client.println("HTTP/1.1 400 Bad Request");
client.println("Connection: close");
client.println();
client.print("Invalid state parameter. Use ?state=on or ?state=off");
return;
}
// Bepaal huidige LED-status
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
// Gebruik het LED_PAGE sjabloon en vervang de placeholders
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
Parameter Validatie
// Hulpfunctie om queryparameterwaarde te vinden
String getQueryParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return "";
}
// Validatiefuncties
bool isValidTemperatureUnit(String unit) {
unit.toLowerCase();
return (unit == "c" || unit == "celsius" ||
unit == "f" || unit == "fahrenheit" ||
unit == "");
}
bool isValidLedState(String state) {
return (state == "on" || state == "off" || state == "");
}
HTML-sjablonen met Dynamische Content
Temperatuurscherm Sjabloon
<div class="temperature-display">
<h2>Huidige Temperatuur</h2>
<div class="temp-value">%TEMPERATURE% %UNIT%</div>
<div class="unit-selector">
<p>Weergeven in:</p>
<a href="/temperature?unit=c" class="unit-btn">Celsius</a>
<a href="/temperature?unit=f" class="unit-btn">Fahrenheit</a>
</div>
</div>
LED-besturingssjabloon
<div class="led-control">
<h2>LED-besturing</h2>
<div class="status">Status: <span>%LED_STATUS%</span></div>
<div class="controls">
<a href="/led?state=on" class="btn btn-on">Zet AAN</a>
<a href="/led?state=off" class="btn btn-off">Zet UIT</a>
</div>
</div>
Geavanceerde Features
Route Configuratie
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
ledState = LOW;
digitalWrite(LED_PIN, ledState);
// Initialiseer webserver met credentials
server.begin(WIFI_SSID, WIFI_PASSWORD);
server.printWifiStatus();
// Voeg routes toe
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
// Stel aangepaste 404-handler in
server.setNotFoundHandler(handleNotFound);
}
Hulpfuncties voor Query Parameters
// Haal parameter op uit QueryParams-structuur
String getParam(const QueryParams& params, const String& key, const String& defaultValue = "") {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return params.params[i].value;
}
}
return defaultValue;
}
// Controleer of parameter bestaat
bool hasParam(const QueryParams& params, const String& key) {
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == key) {
return true;
}
}
return false;
}
URL Bouw Hulpfuncties
// Hulpfunctie om URLs met parameters te bouwen
String buildLedUrl(String state) {
return "/led?state=" + state;
}
String buildTempUrl(String unit) {
return "/temperature?unit=" + unit;
}
Aantekeningen bij Werkelijke Implementatie
Huidige Beperkingen
De daadwerkelijke implementatie is eenvoudiger dan een volwaardige webserver:
- Ondersteunt slechts één parameter extractie per handler
- Simpele stringgebaseerde temperatuur simulatie (geen eenheid conversie)
- Basale LED-besturing met alleen aan/uit status
- Gebruikt pin 9 in plaats van standaard pin 13
Probleemoplossing
Veelvoorkomende Problemen
Parameters Werken Niet
- Controleer de URL-opmaak: page?param=value
- Parameter namen zijn hoofdlettergevoelig en moeten exact kloppen
- Huidige implementatie gebruikt state voor LED, niet action
LED Pin Issues
- Dit voorbeeld gebruikt pin 9, niet pin 13
- Controleer of de LED_PIN constant overeenkomt met uw hardware
Toegang tot Query Parameters
- Gebruik de QueryParams-structuur, niet server.arg()
- Loop door params.params[i] om specifieke parameters te vinden
Debug Output
void debugParameters(const QueryParams& params) {
Serial.println("=== Request Parameters ===");
Serial.println("Params count: " + String(params.count));
for (int i = 0; i < params.count; i++) {
Serial.print(" ");
Serial.print(params.params[i].key);
Serial.print(" = ");
Serial.println(params.params[i].value);
}
Serial.println("========================");
}
Aanpassingen
Nieuwe Handler Toevoegen met Parameters
void handleCustomPage(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
String theme = getParam(params, "theme", "light");
String lang = getParam(params, "lang", "en");
// Verwerk parameters en genereer respons
String response = "<html><body>";
response += "<h1>Aangepaste Pagina</h1>";
response += "<p>Thema: " + theme + "</p>";
response += "<p>Taal: " + lang + "</p>";
response += "</body></html>";
server.sendResponse(client, response.c_str());
}
// Registreer de nieuwe route in setup()
server.addRoute("/custom", handleCustomPage);
Verbetering Template Systeem
De huidige implementatie gebruikt simpele placeholder vervanging:
String response = TEMPERATURE_PAGE;
response.replace("%TEMPERATURE_VALUE%", temperatureDisplay);
// Voeg zo nodig meer vervangingen toe
response.replace("%UNIT%", unit);
response.replace("%TIMESTAMP%", String(millis()));
Volgende Stappen
- Ontdek WebServerJson.ino voor REST API-ontwikkeling
- Probeer WebServerWithWebSocket.ino voor realtime communicatie
- Implementeer formulierverwerking met POST-parameters