ESP32 - Webserver mit mehreren Seiten
In diesem Tutorial werden wir herausfinden, wie man einen ESP32 in einen Webserver verwandelt, der mehrere Seiten gleichzeitig bedienen kann, wie z. B. index.html, temperature.html, led.html, error_404.html und error_405.html...
Wenn Sie diesem Tutorial folgen, können Sie Ihren ESP32 in einen Webserver mit einigen coolen Funktionen verwandeln:
- Mehrere Webseiten sind gleichzeitig aktiv.
- Der HTML-Inhalt (einschließlich HTML, CSS und JavaScript) jeder Seite wird separat in einer eigenen Datei in der Arduino IDE gespeichert.
- Der HTML-Inhalt kann dynamisch mit Echtzeitwerten von Sensoren aktualisiert werden, wodurch die Webseiten dynamisch und responsiv werden.
- Der Webserver ermöglicht es, über das Web etwas, das mit dem ESP32 verbunden ist, zu steuern.
- Der Webserver behandelt HTTP-Fehlercodes wie 404 Nicht gefunden und 405 Methode nicht erlaubt.
Es mag kompliziert klingen, aber machen Sie sich keine Sorgen! Dieses Tutorial bietet eine Schritt-für-Schritt-Anleitung, und der Code ist darauf ausgelegt, anfängerfreundlich zu sein, damit Sie Ihren eigenen ESP32-Webserver leicht verstehen und erstellen können.
Erforderliche Hardware
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.
Über ESP32 und Webserver
Wenn Sie mit dem ESP32 und einem Webserver nicht vertraut sind, können Sie sich über die folgenden Tutorials informieren.
ESP32-Code – Mehrseiten-Webserver
Unten ist der vollständige ESP32-Code, der einen Webserver mit mehreren Seiten erstellt. Um es einfach zu halten, ist der HTML-Inhalt jeder Seite sehr einfach und direkt im ESP32-Code eingebettet. In einem weiteren Teil werden wir lernen, wie man die HTML-Inhalte jeder Seite in separaten Dateien aufteilt, wodurch der Code organisierter und besser wartbar wird.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
int LED_state = LOW;
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
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: home page");
request->send(200, "text/html", "This is the ESP32 home page");
});
server.on("/temperature.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
request->send(200, "text/html", "Temperature: " + String(temperature));
});
server.on("/led.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (request->hasArg("state")) {
String state = request->arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
request->send(200, "text/html", "LED state: " + String(LED_state));
});
// 404 and 405 error handler
server.onNotFound([](AsyncWebServerRequest *request) {
if (request->method() == HTTP_GET) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
request->send(404, "text/html", "Not Found");
} else {
// Handle 405 Method Not Allowed error
Serial.println("Web Server: Method Not Allowed");
request->send(405, "text/html", "Method Not Allowed");
}
});
server.begin();
Serial.println("ESP32 Web server started");
}
void loop() {
// Your code can go here or be empty; the server is handled asynchronously
}
Schnelle Schritte
- Falls Sie ESP32 zum ersten Mal verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino IDE einrichtet an.
- Schließen Sie die Verkabelung wie im obigen Bild an.
- Verbinden Sie das ESP32-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie „ESPAsyncWebServer“, und finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Schaltfläche Install, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Alle installieren-Schaltfläche.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino-IDE.
- Passen Sie die WLAN-Informationen (SSID und Passwort) im Code an Ihre eigenen an.
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino-IDE, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Sehen Sie sich das Ergebnis im seriellen Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web server started
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse im Serial Monitor sehen, zum Beispiel: 192.168.0.2
- Geben Sie nacheinander die folgende Liste in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
192.168.0.2
192.168.0.2/index.html
192.168.0.2/led.html
192.168.0.2/temperature.html
192.168.0.2/blabla.html
- Bitte beachten Sie, dass Sie die 192.168.0.2 durch die IP-Adresse ersetzen müssen, die Sie im Serial Monitor erhalten haben.
- Sie sehen die folgenden Seiten: Startseite, LED-Seite, Temperaturseite und die Seite 'Nicht gefunden'.
- Sie können die Ausgabe auch im Serial Monitor überprüfen.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web server started
Web Server: home page
Web Server: LED page
Web Server: LED page => turning LED to on
Web Server: LED page => turning LED to off
Web Server: temperature page
Web Server: Not Found
Autoscroll
Clear output
9600 baud
Newline
Der vorherige Code enthält sehr einfachen HTML-Inhalt für jede Seite. Aber wenn wir eine aufwendige Benutzeroberfläche mit viel HTML erstellen möchten, kann der Code groß und unübersichtlich werden. Um es einfacher zu machen, lernen wir, wie man das HTML vom ESP32-Code trennt. Dadurch können wir das HTML in separaten Dateien halten, was die Verwaltung und Bearbeitung erleichtert.
ESP32-Code - Vollständiger mehrseitiger Webserver
- Öffnen Sie die Arduino-IDE.
- Erstellen Sie einen neuen Sketch und benennen Sie ihn, zum Beispiel ESP32WebServer.ino.
- Kopieren Sie den bereitgestellten Code und fügen Sie ihn in diese Datei ein.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#include "error_405.h"
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
int LED_state = LOW;
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
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: home page");
String html = HTML_CONTENT_HOME; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.on("/temperature.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Web Server: temperature page");
String html = HTML_CONTENT_TEMPERATURE; // Use the HTML content from the temperature.h file
float temperature = getTemperature();
html.replace("%TEMPERATURE_VALUE%", String(temperature)); // update the temperature value
request->send(200, "text/html", html);
});
server.on("/led.html", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (request->hasArg("state")) {
String state = request->arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
String html = HTML_CONTENT_LED; // Use the HTML content from the led.h file
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the LED state
request->send(200, "text/html", html);
});
// 404 and 405 error handler
server.onNotFound([](AsyncWebServerRequest *request) {
if (request->method() == HTTP_GET) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
String html = HTML_CONTENT_404; // Use the HTML content from the error_404.h file
request->send(404, "text/html", html);
} else {
// Handle 405 Method Not Allowed error
Serial.println("Web Server: Method Not Allowed");
String html = HTML_CONTENT_405; // Use the HTML content from the error_405.h file
request->send(405, "text/html", html);
}
});
server.begin();
Serial.println("ESP32 Web server started");
}
void loop() {
// Your code can go here or be empty; the server is handled asynchronously
}
- Ändern Sie die WiFi-Informationen (SSID und Passwort) im Code auf Ihre eigenen
- Erstellen Sie die Datei index.h in der Arduino-IDE durch:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die Schaltfläche OK.
- Kopieren Sie den unten stehenden Code und fügen Sie ihn in die index.h-Datei ein.
- Ebenso erstellen Sie die led.h-Datei in der Arduino-IDE mit dem folgenden Inhalt.
- Gleichzeitig erstellen Sie die temperature.h-Datei in der Arduino-IDE mit dem folgenden Inhalt.
- Ebenso erstellen Sie die Datei error_404.h im Arduino IDE mit dem folgenden Inhalt.
- Ebenso erstellen Sie die error_405.h-Datei in der Arduino-IDE mit dem folgenden Inhalt.
- Jetzt hast du mehrere Dateien in der Arduino IDE wie unten:
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino-IDE, um Code auf den ESP32 hochzuladen
- Greifen Sie wie zuvor nacheinander über den Webbrowser auf die Webseiten des ESP32-Boards zu. Sie sehen alle Webseiten wie unten aufgeführt:
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_HOME = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<ul>
<li><a href="/led.html">LED Page</a></li>
<li><a href="/temperature.html">Temperature Page</a></li>
</ul>
</body>
</html>
)=====";
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_LED = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>LED Page</title>
</head>
<body>
<h1>LED Page</h1>
<p>LED State: <span style="color: red;">%LED_STATE%</span></p>
<a href='/led.html?state=on'>Turn ON</a>
<br><br>
<a href='/led.html?state=off'>Turn OFF</a>
</body>
</html>
)=====";
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(%TEMPERATURE_VALUE%);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_404 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>404 - Page Not Found</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>404</h1>
<p>Oops! The page you are looking for could not be found on Esp32 Web Server.</p>
<p>Please check the URL or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_405 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>405 - Method Not Allowed</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>405 - Method Not Allowed</h1>
<p>Oops! The requested method is not allowed for this resource.</p>
<p>Please check your request or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
