Arduino Nano ESP32 – Steuert Relais über das Web
In diesem Tutorial lernen wir, wie man ein Relais über eine Weboberfläche steuert, die über einen Browser auf einem PC oder Smartphone genutzt wird, wobei der Arduino Nano ESP32 verwendet wird. Genauer gesagt wird der Arduino Nano ESP32 so programmiert, dass er als Webserver fungiert. Nehmen wir an, dass die IP-Adresse des Arduino Nano ESP32 192.168.0.3 lautet. Hier sind die Details dazu, wie es funktioniert:
- Wenn Sie 192.168.0.3 in den Webbrowser eingeben, sendet der Webbrowser eine Anfrage an den ESP32, und der Arduino Nano ESP32 antwortet mit einer Webseite, die den Ein/Aus-Schalter zur Steuerung des Relais enthält.
- Ähnlich, wenn Sie auf der Webseite auf die Schaltfläche 'Einschalten' klicken oder 192.168.0.3/relay1/on in den Webbrowser eingeben, schaltet der Arduino Nano ESP32 das Relais ein und antwortet mit der Steuerungswebseite.
- Ebenso, wenn Sie auf der Webseite auf die Schaltfläche 'Ausschalten' klicken oder 192.168.0.3/relay1/off in den Webbrowser eingeben, schaltet der Arduino Nano ESP32 das Relais aus und antwortet mit der Steuerungswebseite.
Wir lernen anhand von zwei Beispielcodes:
- HTML-Inhalt ist in den Arduino Nano ESP32-Code eingebettet
- HTML-Inhalt wird vom Arduino Nano ESP32-Code getrennt und in eine .h-Datei ausgelagert
Dieses Tutorial bietet die Grundlagen, die Sie problemlos und innovativ anpassen können, um Folgendes zu erreichen:
- Mehrere Relais über das Web steuern
- Neugestaltung der webbasierten Benutzeroberfläche (UI)
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 Relais und Arduino Nano ESP32
Wenn Sie nichts über Relais und das Arduino Nano ESP32 (Pinout, wie es funktioniert, wie man es programmiert …) wissen, lernen Sie in den folgenden Tutorials mehr darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino Nano ESP32 Code - HTML-Inhalt ist in Arduino Nano ESP32-Code eingebettet
/*
* 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-controls-relay-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define RELAY_PIN D2 // The Arduino Nano ESP32 pin connected to the 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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial zu wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Verdrahten Sie die Komponenten gemäß dem bereitgestellten Diagramm.
- Schließen Sie das Arduino Nano ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das Arduino Nano ESP32-Board und den entsprechenden COM-Port.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, dann finden Sie ESPAsyncWebServer.
- Klicken Sie auf den Install-Button, um die ESPAsyncWebServer-Bibliothek von lacamera 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 Zugangsdaten
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Seriellen Monitor
- Sehen Sie sich das Ergebnis im Seriellen Monitor an
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse sehen, zum Beispiel: 192.168.0.3. Dies ist die IP-Adresse des Arduino Nano ESP32 Webservers
- Öffnen Sie einen Webbrowser und geben Sie eines der drei unten aufgeführten Formate in die Adresszeile ein:
192.168.0.3
192.168.0.3/relay1/on
192.168.0.3/relay1/off
- Bitte beachten Sie, dass sich die IP-Adresse ändern kann. Überprüfen Sie bitte den aktuellen Wert im seriellen Monitor.
- Sie werden außerdem die untenstehende Ausgabe im seriellen Monitor sehen.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Arduino Nano ESP32 Web Server: New request recieved:
GET /
Arduino Nano ESP32 Web Server: New request recieved:
GET /relay1/on
Arduino Nano ESP32 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Relaiszustand prüfen
- Sie sehen die Webseite des Arduino Nano ESP32-Boards im Webbrowser wie unten dargestellt
- Sie können jetzt das Relais über die Weboberfläche ein- und ausschalten.
Arduino Nano ESP32-Code - HTML-Inhalt ist vom Arduino Nano ESP32-Code getrennt.
Da eine grafische Webseite eine große Menge HTML-Code enthält, wird es unpraktisch, ihn wie bisher in den Arduino Nano ESP32-Code einzubetten. Um dies zu lösen, müssen der Arduino Nano ESP32-Code und der HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der Arduino Nano 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 einen neuen Sketch. Gib ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopiere den untenstehenden Code und öffne ihn in der Arduino-IDE.
/*
* 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-controls-relay-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN D2 // The Arduino Nano ESP32 pin connected to the 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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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
}
- Passen Sie die WiFi-Informationen (SSID und Passwort) im Code an Ihre eigenen an
- Erstellen Sie die Datei index.h in der Arduino IDE, indem Sie:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie New Tab, oder verwenden Sie 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 Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Greifen Sie wie zuvor mit dem Webbrowser auf Ihrem PC oder Smartphone auf die Webseite des Arduino Nano ESP32-Boards zu. Sie ist unten ähnlich wie beim vorherigen Code gezeigt:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, wird der HTML-Inhalt durch die Arduino-IDE beim Kompilieren und Hochladen des Codes auf den ESP32 nicht aktualisiert.
- Um die Arduino-IDE in diesem Fall 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 ...)
- Mehrere Relais über das Web steuern
- Neugestaltung der webbasierten Benutzeroberfläche (UI)
/*
* 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-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 oben genannten Code problemlos und innovativ anpassen, um Folgendes zu erreichen: