Arduino Nano ESP32 – Webserver mit mehreren Seiten
In diesem Tutorial erfahren wir, wie man einen Arduino Nano 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...
Indem Sie dieser Anleitung folgen, können Sie Ihren Arduino Nano 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 Arduino Nano ESP32 verbunden ist, zu steuern.
- Der Webserver behandelt HTTP-Fehlercodes wie 404 Nicht gefunden.
Es mag kompliziert klingen, aber keine Sorge! Dieses Tutorial bietet eine schrittweise Anleitung, und der Code ist so gestaltet, dass er anfängerfreundlich ist, damit du den Code leicht verstehen und deinen eigenen Arduino Nano ESP32-Webserver erstellen kannst.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 Arduino Nano ESP32 und Webserver
Wenn Sie mit dem Arduino Nano ESP32 und dem Webserver (einschließlich Pinbelegung, Funktionsweise und Programmierung) nicht vertraut sind, können Sie durch die folgenden Tutorials mehr darüber erfahren:
Arduino Nano ESP32 Code - Mehrseitiger Webserver
Nachfolgend finden Sie den vollständigen Arduino Nano 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 Arduino Nano ESP32-Code eingebettet. In einem weiteren Abschnitt werden wir lernen, wie man die HTML-Inhalte jeder Seite in separate Dateien aufteilt, wodurch der Code übersichtlicher und besser verwaltbar wird.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-web-server-multiple-pages
*/
#include <DIYables_ESP32_WebServer.h>
#define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED
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
}
// 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) {
Serial.println("Arduino Nano ESP32 Web Server: home page");
server.sendResponse(client, "This is the ESP32 home page");
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: temperature page");
float temperature = getTemperature();
String reponse = "Temperature: " + String(temperature);
server.sendResponse(client, reponse.c_str());
}
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: LED page");
// Check for the 'state' parameter in the query string
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
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();
break;
}
}
String reponse = "LED state: " + String(LED_state);
server.sendResponse(client, reponse.c_str());
}
void handleNotFound(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
String response = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>404 Not Found</title></head><body>";
response += "<h1>404 - Page Not Found</h1>";
response += "<p>Sorry, we couldn't find that page!</p>";
response += "<a href=\"/\">Return to Home</a></body></html>";
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature.html", handleTemperature);
server.addRoute("/led.html", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Schnelle Schritte
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Schließen Sie das Arduino Nano ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das Arduino Nano ESP32-Board und seinen entsprechenden COM-Port aus.
- Öffnen Sie den Library Manager-Icon in der linken Navigationsleiste der Arduino IDE, indem Sie darauf klicken.
- Suchen Sie „DIYables ESP32 WebServer“, und finden Sie dann den DIYables ESP32 WebServer.
- Klicken Sie auf die Install-Schaltfläche, um die DIYables ESP32 WebServer-Bibliothek von DIYables zu installieren.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino IDE
- Passen Sie die WLAN-Informationen (SSID und Passwort) im Code an
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Serial Monitor
- Überprüfen Sie das Ergebnis im Serial Monitor
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Arduino Nano ESP32 Web server started
- Sie werden im seriellen Monitor eine IP-Adresse sehen, zum Beispiel: 192.168.0.2
- Geben Sie nacheinander Folgendes in die Adressleiste 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/led.html?state=on
192.168.0.2/led.html?state=off
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.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Arduino Nano 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
Der vorherige Code enthält sehr einfache HTML-Inhalte für jede Seite. Doch wenn wir eine aufwändige Benutzeroberfläche mit viel HTML erstellen möchten, kann der Code groß und unübersichtlich werden. Um es einfacher zu gestalten, lernen wir, wie man HTML vom Arduino Nano ESP32-Code trennt. Dadurch können wir das HTML in separaten Dateien halten, was die Verwaltung und die Arbeit damit erleichtert.
Arduino Nano ESP32 Code - Vollständiger mehrseitiger Webserver
- Öffnen Sie die Arduino-IDE.
- Erstellen Sie einen neuen Sketch und geben Sie ihm einen Namen, zum Beispiel ESP32WebServer.ino.
- Kopieren Sie den bereitgestellten Code und fügen Sie ihn in diese Datei ein.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-web-server-multiple-pages
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED
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
}
// 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) {
Serial.println("Arduino Nano ESP32 Web Server: home page");
server.sendResponse(client, HTML_CONTENT_HOME);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: temperature page");
float temperature = getTemperature();
String html = HTML_CONTENT_TEMPERATURE; // Use the HTML content from the temperature.h file
html.replace("%TEMPERATURE_VALUE%", String(temperature)); // update the temperature value
server.sendResponse(client, html.c_str());
}
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: LED page");
// Check for the 'state' parameter in the query string
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
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();
break;
}
}
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.sendResponse(client, html.c_str());
}
void handleNotFound(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Handle 404 Not Found error
Serial.println("Arduino Nano ESP32 Web Server: Not Found");
// Use the HTML content from the error_404.h file
server.sendResponse(client, HTML_CONTENT_404);
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
Serial.println("Arduino Nano ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature.html", handleTemperature);
server.addRoute("/led.html", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Ändern Sie die WiFi-Informationen (SSID und Passwort) im Code auf Ihre
- Erstellen Sie die index.h-Datei im Arduino IDE durch:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neue Registerkarte, 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 folgenden Code und fügen Sie ihn in die index.h Datei ein.
- Analog dazu erstellen Sie die Datei led.h 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.
- Jetzt haben Sie mehrere Dateien in der Arduino-IDE wie unten:
- Klicken Sie in der Arduino-IDE auf die Schaltfläche Hochladen, um Code auf den Arduino Nano ESP32 hochzuladen.
- Greifen Sie wie zuvor nacheinander über Ihren Webbrowser auf die Webseiten des Arduino Nano ESP32-Boards zu. Sie sehen alle Webseiten wie unten dargestellt:
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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 Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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 Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-web-server-multiple-pages
*/
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano 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>Arduino Nano ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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>
)=====";
