Arduino Nano ESP32 - Webserver
In dieser Schritt-für-Schritt-Anleitung zeigen wir dir, wie du so programmierst, dass ein Arduino Nano ESP32-Board zu einem Webserver wird. Du kannst mit einem Webbrowser auf deinem Computer oder Smartphone auf Webseiten zugreifen, die auf dem Arduino Nano ESP32 gehostet werden, wodurch du Daten vom Arduino Nano ESP32 anzeigen und ihn steuern kannst. Um es einfach zu machen, gehen wir in den folgenden Schritten von einfachen zu zunehmend anspruchsvolleren Aufgaben über:
- Arduino Nano ESP32 Web Server - Eine einfache Textanzeige auf der Webseite.
- Arduino Nano ESP32 Web Server - Sensorwerte vom Arduino Nano ESP32 über das Web überwachen.
- Arduino Nano ESP32 Web Server - Den Arduino Nano ESP32 über das Web steuern.
- Arduino Nano ESP32 Web Server - HTML-Inhalte (HTML, CSS und JavaScript) vom Arduino Nano ESP32-Code trennen und in separate Dateien in der Arduino IDE ablegen.
- Arduino Nano ESP32 Web Server - Mehrere Seiten erstellen, wie z. B. index.html, temperature.html, led.html, error_404.html und error_405.html, und mehr.
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.
Arduino Nano ESP32 - Webserver Hallo Welt
Das ist relativ einfach. Der Arduino Nano ESP32-Code erledigt die folgenden Aufgaben:
- Einen Webserver erstellen, der auf HTTP-Anfragen von einem Webbrowser hört.
- Beim Empfang einer Anfrage von einem Webbrowser antwortet der Arduino Nano ESP32 mit den folgenden Informationen:
- HTTP-Header
- HTTP-Body: Dies enthält HTML-Inhalt mit der Nachricht "Hello World!"
- 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 den entsprechenden COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Bibliotheks-Verwaltung-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, dann finden Sie den ESPAsyncWebServer.
- Klicken Sie auf die Schaltfläche Installieren, um die ESPAsyncWebServer-Bibliothek von lacamera zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Kopiere den obigen Code und öffne ihn in der Arduino IDE
- Ändere die WLAN-Informationen (SSID und Passwort) im Code auf deine eigenen WLAN-Daten
- Klicke auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffne den seriellen Monitor
- Sieh dir das Ergebnis im seriellen Monitor an
- Notieren Sie die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- In der Folge sehen Sie die folgende Ausgabe im Serial Monitor.
- Wenn Sie den Webbrowser mit der IP-Adresse aufrufen, wird Ihnen eine sehr einfache Webseite angezeigt, die "Hello, ESP32!" anzeigt. Die Seite wird wie folgt aussehen:
Unten ist der Arduino Nano ESP32-Code, der die oben genannten Aufgaben ausführt:
/*
* 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
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// 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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
request->send(200, "text/html", "<html><body><h1>Hello, Arduino Nano ESP32!</h1></body></html>");
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
Arduino Nano ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
Auslesen des Sensorwerts vom Arduino Nano ESP32 über das Web
Unten ist der Arduino Nano ESP32-Code, der den Temperaturwert auf einer Webseite ausgibt:
/*
* 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
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
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);
// 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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// 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>";
request->send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
- Kopiere den obigen Code und öffne ihn in der Arduino IDE.
- Passe die WLAN-Informationen (SSID und Passwort) im Code an deine eigenen an.
- Lade den Code auf den Arduino Nano ESP32 hoch.
- Sobald du den Webbrowser über die IP-Adresse aufrufst, wird dir eine sehr einfache Webseite angezeigt, die Informationen über das Arduino Nano ESP32-Board enthält. Die Seite wird wie folgt aussehen:
Um die Webseite mit einer grafischen Benutzeroberfläche (GUI) fantastisch aussehen zu lassen, schauen Sie sich den letzten Abschnitt dieses Tutorials an.
※ Notiz:
Mit dem oben bereitgestellten Code müssen Sie die Webseite im Browser neu laden, um die Temperaturaktualisierung zu erhalten. Im nächsten Teil werden wir lernen, wie man die Webseite dazu bringt, den Temperaturwert im Hintergrund zu aktualisieren, ohne die Seite neu zu laden.
Steuerung des Arduino Nano ESP32 über das Web
Etwas, das mit dem Arduino Nano ESP32 verbunden ist, zu steuern, ist etwas anspruchsvoller als nur einen Wert auszulesen. Das liegt daran, dass der Arduino Nano ESP32 die Anfrage verstehen muss, die er vom Webbrowser erhält, um zu wissen, welche Aktion er ausführen soll.
Für ein umfassenderes und detaillierteres Beispiel empfehle ich, die unten aufgeführten Tutorials anzuschauen:
HTML-Inhalt in eine andere Datei in der Arduino-IDE aufteilen
Wenn Sie eine einfache Webseite mit minimalem Inhalt erstellen möchten, können Sie das HTML direkt in den Arduino Nano ESP32-Code einbetten, wie bereits erläutert.
Allerdings wird es unpraktisch, den gesamten HTML-, CSS- und JavaScript-Code direkt in den Arduino Nano ESP32-Code einzubetten, wenn Sie eine anspruchsvollere und beeindruckendere Webseite mit größerem Inhalt erstellen möchten. In diesem Fall können Sie einen anderen Ansatz verwenden, um den Code zu verwalten:
- Der Arduino Nano ESP32-Code wird in einer .ino-Datei abgelegt, genauso wie zuvor.
- Der HTML-Code (HTML, CSS, JavaScript) wird in einer separaten .h-Datei abgelegt. Dies ermöglicht es Ihnen, den Inhalt der Webseite getrennt vom Arduino Nano ESP32-Code zu halten, was die Verwaltung und Änderung erleichtert.
Um dies zu erreichen, müssen wir zwei große Schritte durchführen:
- HTML-Inhalt vorbereiten
- Arduino Nano ESP32 programmieren
HTML-Inhalte vorbereiten
- Erstellen Sie eine HTML-Datei auf Ihrem lokalen PC, die den HTML-Inhalt (HTML, CSS und JavaScript) für Ihr UI-Design enthält.
- In der HTML-Datei verwenden Sie dort, wo Daten vom Arduino Nano ESP32 angezeigt werden sollen, einen beliebigen Wert.
- Testen Sie es und ändern Sie es, bis Sie zufrieden sind.
- Wir werden den HTML-Inhalt in die .h-Datei in der Arduino IDE legen. Siehe den nächsten Schritt.
Arduino Nano ESP32 programmieren
- Öffne die Arduino-IDE und erstelle einen neuen Sketch. Gib ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopiere den unten bereitgestellten Code und füge ihn in die erstellte 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
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
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);
// 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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the HTML page from the file
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
request->send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
request->send(200, "text/plain", temperatureStr);
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
- Ändere die WiFi-Informationen (SSID und Passwort) im Code auf deine eigenen
- Erstelle die index.h-Datei in der Arduino-IDE, indem:
- Klicken Sie entweder 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 untenstehenden Code und fügen Sie ihn in die index.h 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
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Ersetzen Sie die Zeile REPLACE_YOUR_HTML_CONTENT_HERE durch Ihren HTML-Inhalt, den Sie zuvor vorbereitet haben. Es gibt kein Problem mit dem Zeilenumbruchszeichen. Nachfolgend ist ein Beispiel der Datei index.h:
/*
* 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
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 Temperature</title>
</head>
<body>
<h1>Arduino Nano 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
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Greifen Sie wie zuvor über Ihren Webbrowser auf die Webseite des Arduino Nano ESP32-Boards zu. Sie sehen sie wie unten dargestellt:
※ Notiz:
In den oben gezeigten Codes:
- Der HTML-Code ist so konzipiert, dass die Temperatur im Hintergrund in regelmäßigen Abständen aktualisiert wird, derzeit im Code auf alle 4 Sekunden festgelegt. Das bedeutet, dass der Temperaturwert automatisch aktualisiert wird, ohne dass die Webseite manuell neu geladen werden muss. Sie können das Aktualisierungsintervall im Code an Ihre Vorlieben anpassen.
- Der Arduino Nano ESP32-Code bedient zwei Anfragen vom Webbrowser.
- Eine Anfrage, den HTML-Inhalt der Webseite zurückzugeben
- Die andere Anfrage gibt den von der Webseite angeforderten Temperaturwert im Hintergrund zurück
Für eine umfassendere und detailliertere Darstellung verweisen Sie bitte auf das Arduino Nano ESP32 - DS18B20-Temperatursensor über das Web Tutorial.
※ Notiz:
- Wenn Sie Änderungen am HTML-Inhalt in der index.h-Datei vornehmen, aber nichts in der newbiely.com.ino-Datei ändern, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den Arduino Nano ESP32 nicht neu laden oder aktualisieren.
- Um die Arduino IDE in dieser Situation dazu zu zwingen, den HTML-Inhalt zu aktualisieren, müssen Sie eine Änderung in der newbiely.com.ino-Datei vornehmen. Zum Beispiel können Sie eine leere Zeile hinzufügen oder einen Kommentar einfügen. Diese Aktion veranlasst die IDE dazu zu erkennen, dass Änderungen im Projekt vorgenommen wurden, wodurch sichergestellt wird, dass Ihr aktualisierter HTML-Inhalt in den Upload aufgenommen wird.
Arduino Nano ESP32-Webserver – Mehrere Seiten
Schau dir dieses Arduino Nano ESP32 - Web Server Multiple Pages Tutorial an.