ESP32 – Relais über das Web steuern
In diesem Tutorial lernen wir, wie man ein Relais über eine Weboberfläche steuert, indem man einen Browser auf einem PC oder Smartphone verwendet, wobei der ESP32 eingesetzt wird. Im Detail wird der ESP32 so programmiert, dass er als Webserver fungiert. Nehmen wir an, dass die IP-Adresse des ESP32 192.168.0.2 lautet. Hier sind die Details, wie es funktioniert:
- Wenn Sie 192.168.0.2 in den Webbrowser eingeben, sendet der Webbrowser eine Anfrage an den ESP32, und der ESP32 antwortet mit einer Webseite, die den Ein/Aus-Schalter zur Steuerung des Relais enthält.
- Ebenso, wenn Sie auf der Webseite den Button „Einschalten“ klicken oder 192.168.0.2/relay1/on in den Webbrowser eingeben, schaltet der ESP32 das Relais ein und antwortet mit der Steuerungs-Webseite.
- Ebenso, wenn Sie auf der Webseite den Button „Ausschalten“ klicken oder 192.168.0.2/relay1/off in den Webbrowser eingeben, schaltet der ESP32 das Relais aus und antwortet mit der Steuerungs-Webseite.
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:
- Steuerung mehrerer Relais über das Web
- 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.
Über Relais und ESP32
Wenn Sie nichts über Relais und den ESP32 wissen (Pinbelegung, wie es funktioniert, wie man programmiert ...), informieren Sie sich in den folgenden Tutorials darüber:
Verdrahtungsdiagramm
- So verbinden Sie ESP32 und ein Relais mithilfe eines Breadboards (über USB-Kabel mit Strom versorgt)
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.
- Wie man ESP32 und Relais mithilfe eines Breadboard verbindet (über den Vin-Pin mit Strom versorgt)
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
- So verbinden Sie ESP32 und Relais mit einem Schraubklemmen-Breakout-Board (über USB-Kabel betrieben)
- So verbinden Sie ESP32 und Relais mithilfe der Schraubklemmen-Breakout-Platine (über den Vin-Pin mit Strom versorgt)
ESP32-Code - HTML-Inhalte sind 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-relay-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
int relay_state = LOW;
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>Relay state: <span style='color: red;'>";
if (relay_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/relay1/on'>Turn ON</a>";
html += "<br><br>";
html += "<a href='/relay1/off'>Turn OFF</a>";
html += "</html>";
return html;
}
void setup() {
Serial.begin(9600);
pinMode(RELAY_PIN, OUTPUT);
digitalWrite(RELAY_PIN, relay_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 Relay
server.on("/relay1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Your code here
}
Schnelle Schritte
- Falls dies das erste Mal ist, dass Sie ESP32 verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino IDE einrichtet an.
- Schließen Sie die Verdrahtung 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.
- Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino-IDE
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen Daten
- Klicken Sie im Arduino-IDE auf die Schaltfläche Hochladen, um den Code auf den ESP32 hochzuladen
- Öffnen Sie den Serial Monitor
- Sehen Sie das Ergebnis im Serial Monitor
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen eine IP-Adresse, zum Beispiel: 192.168.0.2. Dies ist die IP-Adresse des ESP32-Webservers
- Öffnen Sie einen Webbrowser und geben Sie in die Adressleiste eines der drei untenstehenden Formate ein:
192.168.0.2
192.168.0.2/relay1/on
192.168.0.2/relay1/off
- Bitte beachten Sie, dass die IP-Adresse variieren könnte.
- Sie werden auch die untenstehende Ausgabe im seriellen 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 /relay1/on
ESP32 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Relaiszustand prüfen
- Sie sehen die Webseite des ESP32-Boards im Webbrowser wie unten dargestellt
- Sie können das Relais 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 HTML-Inhalte enthält, wird das Einbetten in den ESP32-Code wie zuvor unpraktisch. Um dieses Problem zu lösen, müssen der ESP32-Code und der HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der ESP32-Code wird in eine .ino-Datei abgelegt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in eine .h-Datei abgelegt.
Schnelle Schritte
- Öffne die Arduino-IDE und erstelle eine neue Skizze. Gib ihr 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-relay-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
int relay_state = LOW;
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state
return html;
}
void setup() {
Serial.begin(9600);
pinMode(RELAY_PIN, OUTPUT);
digitalWrite(RELAY_PIN, relay_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 relay
server.on("/relay1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("ESP32 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
request->send(200, "text/html", getHTML());
});
// 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 du:
- Klicke entweder auf den Button direkt unter dem Symbol des seriellen Monitors und wähle Neuer Tab, oder benutze die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- 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 Schaltfläche Hochladen in der Arduino IDE, um den Code auf den ESP32 hochzuladen.
- Greifen Sie wie zuvor über einen Webbrowser auf die Webseite des ESP32-Boards zu. Sie werden sie unten ähnlich wie der vorherige Code sehen.
- Wenn Sie den HTML-Inhalt in der index.h-Datei ändern und nichts in der newbiely.com.ino-Datei berühren, wird die Arduino-IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um den HTML-Inhalt in diesem Fall von der Arduino-IDE aktualisieren zu lassen, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ....)
- Steuerung mehrerer Relais ü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-relay-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>Relay state: <span style='color: red;'>%RELAY_STATE%</span></p>
<a href='/relay1/on'>Turn ON</a>
<br><br>
<a href='/relay1/off'>Turn OFF</a>
</html>
)=====";
#endif
※ Notiz:
Sie können den obigen Code problemlos und innovativ anpassen, um Folgendes zu erreichen: