ESP8266 - Webserver mit mehreren Seiten
Diese Anleitung zeigt Ihnen, wie Sie einen ESP8266 in einen Webserver verwandeln können, der mehrere Seiten gleichzeitig bedienen kann, wie zum Beispiel index.html, temperature.html, led.html, error_404.html und error_405.html...
Wenn Sie dieser Anleitung folgen, können Sie Ihren ESP8266 in einen Webserver mit einigen coolen Funktionen verwandeln:
- Mehrere Webseiten sind gleichzeitig aktiv.
- Der HTML-Inhalt (einschließlich HTML, CSS und JavaScript) für jede Seite wird separat in ihrer eigenen Datei in der Arduino IDE gespeichert.
- Der HTML-Inhalt kann dynamisch mit Echtzeitwerten von Sensoren aktualisiert werden, wodurch die Webseiten dynamisch und reaktionsschnell werden.
- Der Webserver ermöglicht es, über das Web etwas zu steuern, das mit dem ESP8266 verbunden ist.
- Der Webserver behandelt HTTP-Fehlercodes wie 404 nicht gefunden und 405 Methode nicht erlaubt
Es mag kompliziert klingen, aber keine Sorge! Dieses Tutorial bietet eine Schritt-für-Schritt-Anleitung, und der Code ist darauf ausgelegt, anfängerfreundlich zu sein, damit du ihn leicht verstehen und deinen eigenen ESP8266-Webserver erstellen kannst.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 ESP8266 und Webserver
Wenn Sie mit dem ESP8266 und dem Webserver (einschließlich Pinbelegung, Funktionsweise und Programmierung) nicht vertraut sind, können Sie durch die folgenden Tutorials mehr darüber lernen:
ESP8266-Code - Webserver mit mehreren Seiten
Unten ist der vollständige ESP8266-Code, der einen Webserver mit mehreren Seiten erstellt. Um es einfach zu halten, ist der HTML-Inhalt jeder Seite sehr einfach und direkt im ESP8266-Code eingebettet. In einem weiteren Teil werden wir lernen, wie man die HTML-Inhalte jeder Seite in separate Dateien aufteilt, wodurch der Code übersichtlicher und besser verwaltbar wird.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server-multiple-pages
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define LED_PIN D5 // The ESP8266 pin D5 connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: home page");
server.send(200, "text/html", "This is the ESP8266 home page");
});
server.on("/temperature.html", HTTP_GET, []() {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
server.send(200, "text/html", "Temperature: " + String(temperature));
});
server.on("/led.html", HTTP_GET, []() {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (server.arg("state")) {
String state = server.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();
server.send(200, "text/html", "LED state: " + String(LED_state));
});
// 404 and 405 error handler
server.onNotFound([]() {
if (server.method() == HTTP_GET) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
server.send(404, "text/html", "Not Found");
} else {
// Handle 405 Method Not Allowed error
Serial.println("Web Server: Method Not Allowed");
server.send(405, "text/html", "Method Not Allowed");
}
});
server.begin();
Serial.println("ESP8266 Web server started");
}
void loop() {
// Handle client requests
server.handleClient();
// Your code can go here or be empty; the server is handled asynchronously
}
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schau dir das how to setup environment for ESP8266 on Arduino IDE Tutorial an, falls dies dein erster Einsatz mit dem ESP8266 ist.
- Verdrahte die Bauteile wie im Diagramm gezeigt.
- Verbinde das ESP8266-Board mit deinem Computer über ein USB-Kabel.
- Öffne die Arduino-IDE auf deinem Computer.
- Wähle das richtige ESP8266-Board aus, z. B. NodeMCU 1.0 (ESP-12E-Modul), und den entsprechenden COM-Port.
- Kopiere den obigen Code und öffne ihn mit der Arduino-IDE.
- Passe die WLAN-Informationen (SSID und Passwort) im Code an.
- Klicke im Arduino-IDE auf Hochladen, um den Code auf den ESP8266 hochzuladen.
- Öffne den Serial Monitor.
- Sieh dir das Ergebnis im Serial Monitor an.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web server started
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen eine IP-Adresse im seriellen Monitor, zum Beispiel: 192.168.0.5
- Geben Sie die folgende Liste der Reihe nach in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
192.168.0.5
192.168.0.5/index.html
192.168.0.5/led.html
192.168.0.5/temperature.html
192.168.0.5/blabla.html
- Bitte beachten Sie, dass Sie die 192.168.0.5 durch die IP-Adresse ersetzen müssen, die Sie im Serial Monitor erhalten haben.
- Sie werden die folgenden Seiten sehen: Startseite, LED-Seite, Temperatur-Seite und eine Seite "Nicht gefunden".
- Sie können die Ausgabe auch im Serial Monitor überprüfen.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 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. Wenn wir jedoch eine schicke Oberfläche mit viel HTML erstellen möchten, kann der Code groß und unübersichtlich werden. Um es einfacher zu machen, lernen wir, wie man HTML vom ESP8266-Code trennt. Dadurch können wir das HTML in separaten Dateien speichern, was die Verwaltung und das Arbeiten damit erleichtert.
ESP8266 Quellcode - Vollständiger Mehrseiten-Webserver
- Öffnen Sie die Arduino-IDE.
- Erstellen Sie einen neuen Sketch und geben Sie ihm einen Namen, zum Beispiel ESP8266WebServer.ino.
- Kopieren Sie den bereitgestellten Code und fügen Sie ihn in diese Datei ein.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server-multiple-pages
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#include "error_405.h"
#define LED_PIN D6 // The ESP8266 pin connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: home page");
String html = HTML_CONTENT_HOME; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.on("/temperature.html", HTTP_GET, []() {
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
server.send(200, "text/html", html);
});
server.on("/led.html", HTTP_GET, []() {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (server.arg("state")) {
String state = server.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
server.send(200, "text/html", html);
});
// 404 and 405 error handler
server.onNotFound([]() {
if (server.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
server.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
server.send(405, "text/html", html);
}
});
server.begin();
Serial.println("ESP8266 Web server started");
}
void loop() {
// Handle client requests
server.handleClient();
// Your code can go here or be empty; the server is handled asynchronously
}
- Passe die WLAN-Informationen (SSID und Passwort) im Code an deine eigenen an.
- Erstelle die index.h-Datei in der Arduino IDE, indem du:
- Klicke entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wähle Neue Registerkarte, oder verwende die Tastenkombination Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die Schaltfläche OK.
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die Datei index.h ein.
- Ebenso erstellen Sie die led.h-Datei in der Arduino IDE mit dem folgenden Inhalt.
- Ebenso erstellen Sie die Datei temperature.h in der Arduino IDE mit dem folgenden Inhalt.
- Ebenso erstellen Sie die Datei error_404.h in der Arduino-IDE mit dem folgenden Inhalt.
- Ebenfalls erstellen Sie die Datei error_405.h in der Arduino IDE mit dem folgenden Inhalt.
- Jetzt haben Sie mehrere Dateien in der Arduino-IDE wie unten:
- Klicken Sie im Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP8266 hochzuladen
- Greifen Sie wie zuvor nacheinander über Ihren Webbrowser auf die Webseiten des ESP8266-Boards zu. Sie sehen alle Webseiten wie unten dargestellt:
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 - 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>ESP8266 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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>
)=====";
