ESP32 - Webserver
In deze stapsgewijze handleiding laten we u zien hoe u een ESP32-board programmeert zodat het als webserver fungeert. U kunt webpagina’s die op de ESP32 gehost worden openen via een webbrowser op uw computer of smartphone, zodat u gegevens van de ESP32 kunt bekijken en het apparaat kunt besturen. Om het overzichtelijk te houden, nemen we u mee van eenvoudige naar meer uitdagende stappen:
- ESP32 Webserver - Eenvoudige tekst op een webpagina weergeven.
- ESP32 Webserver - Sensorwaarden van de ESP32 monitoren via een webpagina.
- ESP32 Webserver - De ESP32 via een webpagina bedienen.
- ESP32 Webserver - HTML-inhoud (HTML, CSS en Javascript) scheiden van ESP32-code en in aparte bestanden plaatsen binnen de Arduino IDE.
- ESP32 Webserver - Meerdere pagina’s maken, zoals index.html, temperature.html, led.html, error_404.html, en error_405.html…, en meer.
Benodigdheden Hardware
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.
Sensorwaarde uitlezen van ESP32 via Web
Dit is relatief eenvoudig. De ESP32-code voert de volgende taken uit:
- Een webserver creëren die luistert naar HTTP-verzoeken van een webbrowser.
- Na ontvangst van een verzoek van een webbrowser, antwoordt de ESP32 met de volgende informatie:
- HTTP-header
- HTTP-body: Dit bevat HTML-inhoud en de waarde die is uitgelezen van de sensor.
- Als u voor het eerst met ESP32 werkt, bekijk dan hoe u de omgeving voor ESP32 instelt in de Arduino IDE.
- Verbind het ESP32-board met uw PC via een micro-USB-kabel.
- Open de Arduino IDE op uw PC.
- Selecteer het juiste ESP32-board (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Open de Bibliotheekbeheerder door op het Bibliotheekbeheerder-icoon te klikken in de linker navigatiebalk van de Arduino IDE.
- Zoek op “DIYables ESP32 WebServer” en vind vervolgens de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Installeren-knop om de Web Server bibliotheek te installeren.
- Kopieer bovenstaande code en open deze met de Arduino IDE.
- Pas de wifi-gegevens (SSID en wachtwoord) aan in de code naar uw eigen netwerk.
- Klik op de Uploaden-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor.
- Noteer het weergegeven IP-adres en vul dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- U ziet dan de volgende uitvoer in de Seriële Monitor.
- Zodra u via het IP-adres de webbrowser opent, ziet u een zeer eenvoudige webpagina met de tekst "Hello, ESP32!". De pagina ziet er als volgt uit:
Hieronder vindt u de ESP32-code die bovenstaande functionaliteit uitvoert:
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Hello, ESP32!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Snelle Stappen
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
Sensorwaarde uitlezen van ESP32 via Web
Hieronder staat de ESP32-code die de temperatuurwaarde op de webpagina toont:
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Snelle Stappen
- Kopieer bovenstaande code en open deze met de Arduino IDE.
- Pas de wifi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerk.
- Upload de code naar de ESP32.
- Zodra u via het IP-adres de webbrowser opent, ziet u een eenvoudige webpagina met informatie over het ESP32-board. De pagina ziet er als volgt uit:
Om de webpagina er prachtig uit te laten zien met een grafische gebruikersinterface (UI), bekijk het laatste deel van deze tutorial.
※ Notiz:
Met de bovenstaande code moet u om de temperatuur te updaten de pagina in de webbrowser herladen. In een volgende sectie leert u hoe u de webpagina automatisch op de achtergrond de temperatuurwaarde laat actualiseren zonder de pagina te verversen.
De ESP32 besturen via Web
Iets besturen dat aan de ESP32 is gekoppeld is iets uitdagender dan alleen een waarde uitlezen. Dit komt omdat de ESP32 het verzoek dat het van de webbrowser ontvangt moet begrijpen om te weten welke actie uitgevoerd moet worden.
Voor een uitgebreidere en gedetailleerdere voorbeeldcode raad ik de volgende tutorials aan:
HTML-inhoud scheiden in een apart bestand in de Arduino IDE
Als u een eenvoudige webpagina met minimale inhoud wilt maken, kunt u de HTML rechtstreeks in de ESP32-code opnemen, zoals eerder uitgelegd.
Wilt u echter een meer geavanceerde en indrukwekkende webpagina met grotere, complexere inhoud creëren, dan is het onhandig om alle HTML, CSS en Javascript direct in de ESP32-code te plaatsen. In dat geval kunt u een andere aanpak gebruiken voor beter beheer van de code:
- De ESP32-code staat in een .ino-bestand, zoals voorheen.
- De HTML-code (HTML, CSS, Javascript) staat in een apart .h-bestand. Dit maakt het mogelijk om de webpagina-inhoud gescheiden te houden van de ESP32-code, wat het beheren en aanpassen vergemakkelijkt.
Hiervoor moeten we twee grote stappen doen:
- HTML-inhoud voorbereiden
- ESP32 programmeren
HTML-inhoud voorbereiden
- Maak een HTML-bestand aan op uw lokale pc met de HTML-inhoud (inclusief CSS en Javascript) voor uw UI-ontwerp.
- Gebruik in het HTML-bestand een willekeurige waarde waar data van de ESP32 moet worden getoond.
- Test en pas het aan totdat u tevreden bent.
- We plaatsen deze HTML-inhoud in het .h-bestand in de Arduino IDE. Dat doen we in de volgende stap.
ESP32 programmeren
- Open de Arduino IDE en maak een nieuwe sketch aan. Geef het bestand een naam, bijvoorbeeld newbiely.com.ino.
- Kopieer onderstaande code en plak die in het aangemaakte bestand.
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, webpage);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerk.
- Maak in de Arduino IDE het index.h-bestand aan door:
- Klik op de knop net onder het Seriële Monitor-icoon en kies Nieuwe tab, of gebruik Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer onderstaande code en plak die in het index.h-bestand.
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Vervang de regel REPLACE_YOUR_HTML_CONTENT_HERE door de HTML-inhoud die u eerder heeft voorbereid. Nieuwe lijnen zijn geen probleem. Hieronder een voorbeeld van een index.h-bestand:
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Temperature</title>
</head>
<body>
<h1>ESP32 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- Nu heeft u de code verdeeld over twee bestanden: newbiely.com.ino en index.h.
- Klik op de Uploaden-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de webpagina van het ESP32-board in een webbrowser zoals voorheen. U ziet nu:
※ Notiz:
In de bovenstaande codes:
- De HTML-code is zo ontworpen dat de temperatuurwaarde periodiek op de achtergrond wordt bijgewerkt, momenteel elke 4 seconden. Dit betekent dat de temperatuur automatisch wordt vernieuwd zonder handmatig herladen van de webpagina. De update-interval kunt u naar wens aanpassen in de code.
- De ESP32-code verwerkt twee typen verzoeken van de webbrowser:
- Eén verzoek om de HTML-inhoud van de webpagina terug te sturen
- Eén verzoek om de temperatuurwaarde op de achtergrond op te halen die door de webpagina wordt opgevraagd
Voor een uitgebreidere en diepgaandere uitleg, raadpleeg de tutorial ESP32 - DS18B20 Temperatuursensor via Web.
※ Notiz:
- Als u wijzigingen aanbrengt in de HTML-inhoud binnen het index.h-bestand maar niets wijzigt in het newbiely.com.ino-bestand, dan zal de Arduino IDE de HTML-inhoud niet bijwerken bij het compileren en uploaden naar de ESP32.
- Om de Arduino IDE te dwingen de HTML-inhoud toch te vernieuwen, moet u een kleine aanpassing maken in het newbiely.com.ino-bestand. Bijvoorbeeld door een lege regel toe te voegen of een commentaarregel in te voegen. Dit zorgt ervoor dat de IDE detecteert dat het project is gewijzigd en de geüpdatete HTML-inhoud in het uploadproces leest.
ESP32 Webserver - Meerdere Pagina’s
Bekijk de tutorial ESP32 - Webserver Meerdere Pagina’s.