ESP32 - Steuert LED über das Web
In diesem Tutorial lernen wir, wie man eine LED über eine Weboberfläche steuert, die über einen Browser auf einem PC oder Smartphone verwendet wird, wobei der ESP32 zum Einsatz kommt. Im Detail wird der ESP32 so programmiert, dass er als Webserver funktioniert. Angenommen, die IP-Adresse des ESP32 lautet 192.168.0.2. Hier sind die Details, wie es funktioniert:
- Wenn Sie 192.168.0.2 in den Webbrowser eingeben, sendet der Browser eine Anfrage an den ESP32, und der ESP32 antwortet mit einer Webseite, die den Ein/Aus-Schalter zur Steuerung der LED enthält.
- Genauso, wenn Sie auf der Webseite die Schaltfläche "Einschalten" anklicken oder 192.168.0.2/led1/on in den Webbrowser eingeben, schaltet der ESP32 die LED ein und antwortet mit der Steuerungswebseite.
- Ebenso, wenn Sie auf der Webseite die Schaltfläche "Ausschalten" anklicken oder 192.168.0.2/led1/off in den Webbrowser eingeben, schaltet der ESP32 die LED aus und antwortet mit der Steuerungswebseite.
Wir lernen anhand von zwei Beispielcodes:
- HTML-Inhalt ist in den ESP32-Code eingebettet
- HTML-Inhalt ist vom ESP32-Code getrennt und in eine .h-Datei ausgelagert
Das Tutorial bietet die Grundlagen, die Sie leicht und innovativ anpassen können, um Folgendes zu erreichen:
- Mehrere LEDs über das Web steuern
- Neugestaltung der Web-Benutzeroberfläche (UI)
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.
Kaufhinweis: Um den Verdrahtungsprozess zu vereinfachen, empfehlen wir die Verwendung des LED Module, das mit einem eingebauten Widerstand geliefert wird.
Über LED und ESP32
Wenn Sie nichts über LEDs und den ESP32 wissen (Pinbelegung, Funktionsweise, wie man ... programmiert), erfahren Sie in den folgenden Tutorials mehr darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
ESP32-Code - HTML-Inhalt ist in den ESP32-Code eingebettet
/*
* 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-controls-led-via-web
*/
#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;
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>LED state: <span style='color: red;'>";
if (LED_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/led1/on'>Turn ON</a>";
html += "<br><br>";
html += "<a href='/led1/off'>Turn OFF</a>";
html += "</html>";
return html;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
// 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());
// home page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /");
request->send(200, "text/html", getHTML());
});
// Route to control the LED
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich wie man die Entwicklungsumgebung 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 dann den von lacamera erstellten ESPAsyncWebServer.
- Klicken Sie auf die Install-Schaltfläche, um die ESPAsyncWebServer-Bibliothek 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 mit der Arduino IDE
- Passe die WLAN-Informationen (SSID und Passwort) im Code an
- Klicke in der Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP32 hochzuladen
- Öffne den Serial Monitor
- Sieh dir das Ergebnis im Serial Monitor an
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse sehen, zum Beispiel: 192.168.0.2. Dies ist die IP-Adresse des ESP32-Webservers
- Öffnen Sie einen Webbrowser und geben Sie eines der drei untenstehenden Formate in die Adresszeile ein:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Bitte beachten Sie, dass die IP-Adresse variieren kann. Bitte überprüfen Sie den aktuellen Wert im Serial Monitor.
- Sie werden auch die unten stehende Ausgabe im Serial Monitor sehen.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request recieved:
GET /
ESP32 Web Server: New request recieved:
GET /led1/on
ESP32 Web Server: New request recieved:
GET /led1/off
Autoscroll
Clear output
9600 baud
Newline
- LED-Status prüfen
- Sie sehen die Webseite des ESP32-Boards im Webbrowser wie unten dargestellt
- Sie können die LED jetzt über die Weboberfläche ein- und ausschalten.
ESP32-Code - HTML-Inhalt ist vom ESP32-Code getrennt
Da eine grafische Webseite eine große Menge an HTML-Inhalten enthält, gestaltet sich das Einbetten in den ESP32-Code wie zuvor als unpraktisch. Um dies zu lösen, müssen der ESP32-Code und der HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der ESP32-Code wird in einer .ino-Datei platziert.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in einer .h-Datei platziert.
Schnelle Schritte
- Öffne die Arduino IDE und erstelle einen neuen Sketch. Gib ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino IDE.
/*
* 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-controls-led-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#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;
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state
return html;
}
void setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
// 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());
// home page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /");
request->send(200, "text/html", getHTML());
});
// Route to control the LED
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
request->send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
- Passe die WiFi-Informationen (SSID und Passwort) im Code so an, dass sie zu deinem Netzwerk passen
- Erstelle die Datei index.h in der Arduino IDE, indem du:
- Entweder klicke direkt auf den Button unter dem Seriemonitor-Symbol und wähle Neuer Tab, 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 index.h ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den ESP32 hochzuladen
- Greifen Sie wie zuvor über einen Webbrowser auf die Weboberfläche des ESP32-Boards von Ihrem PC oder Smartphone aus. Sie werden es ähnlich dem vorherigen Code unten sehen:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, wird die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisieren.
- Um in diesem Fall die Arduino IDE dazu zu bringen, den HTML-Inhalt zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ...)
- Steuerung mehrerer LEDs über das Web
- Neugestaltung der Web-Benutzeroberfläche (UI)
/*
* 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-controls-led-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>LED state: <span style='color: red;'>%LED_STATE%</span></p>
<a href='/led1/on'>Turn ON</a>
<br><br>
<a href='/led1/off'>Turn OFF</a>
</html>
)=====";
#endif
※ Notiz:
Sie können den obigen Code problemlos und innovativ anpassen, um Folgendes zu erreichen: