ESP8266 – Relaissteuerung über das Web
Dieses Tutorial zeigt Ihnen, wie Sie ein Relais über eine Weboberfläche mithilfe eines Browsers auf einem PC oder Smartphone steuern, wobei der ESP8266 verwendet wird. Im Detail wird der ESP8266 so programmiert, dass er als Webserver arbeitet. Angenommen, die IP-Adresse des ESP8266 lautet 192.168.0.3. Hier sind die Details, wie es funktioniert:
- Wenn Sie 192.168.0.3 in den Webbrowser eingeben, sendet der Webbrowser eine Anfrage an den ESP8266, und der ESP8266 antwortet mit einer Webseite, die den Ein/Aus-Schalter zur Steuerung des Relais enthält.
- In ähnlicher Weise, wenn Sie auf der Webseite die Schaltfläche „Einschalten“ klicken oder 192.168.0.3/relay1/on in den Webbrowser eingeben, schaltet der ESP8266 das Relais ein und antwortet mit der Steuerungs-Webseite.
- Ebenso, wenn Sie auf der Webseite die Schaltfläche „Ausschalten“ klicken oder 192.168.0.3/relay1/off in den Webbrowser eingeben, schaltet der ESP8266 das Relais aus und antwortet mit der Steuerungs-Webseite.
Wir lernen anhand von zwei Beispielcodes:
- HTML-Inhalt ist in den ESP8266-Code eingebettet.
- HTML-Inhalt ist vom ESP8266-Code getrennt und in eine .h-Datei eingefügt.
Das Tutorial bietet die Grundlagen, die Sie problemlos und innovativ anpassen können, um Folgendes zu erreichen:
- Mehrere Relais über das Web steuern
- Neugestaltung der Web-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 ESP8266
Wenn du nichts über Relais und den ESP8266 weißt (Pinbelegung, wie es funktioniert, wie man programmiert ...), informiere dich in den folgenden Tutorials darüber:
Verdrahtungsdiagramm
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten mit Strom versorgt.
ESP8266-Code - HTML-Inhalt ist in den ESP8266-Code eingebettet
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-relay-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define RELAY_PIN D8 // The ESP8266 pin connected to Relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /");
server.send(200, "text/html", getHTML());
});
// Route to control the Relay
server.on("/relay1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, folgen Sie diesen Schritten:
- Schauen Sie sich das Tutorial wie man die Umgebung für ESP8266 in der Arduino IDE einrichtet an, falls dies Ihre erste Verwendung von ESP8266 ist.
- Verdrahten Sie die Bauteile wie im Diagramm gezeigt.
- Schließen Sie das ESP8266-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das richtige ESP8266-Board aus, z. B. (NodeMCU 1.0 (ESP-12E Module)), und verwenden Sie den entsprechenden COM-Port.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino-IDE.
- Passen Sie im Code die WLAN-Informationen (SSID und Passwort) an Ihre eigenen an.
- Klicken Sie in der Arduino-IDE auf die Schaltfläche Upload, um den Code auf den ESP8266 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Sie sehen eine IP-Adresse, zum Beispiel: 192.168.0.3. Dies ist die IP-Adresse des ESP8266-Webservers
- Öffnen Sie einen Webbrowser und geben Sie eines der drei untenstehenden Formate in die Adressleiste ein:
192.168.0.3
192.168.0.3/relay1/on
192.168.0.3/relay1/off
- Bitte beachten Sie, dass die IP-Adresse variieren kann. Überprüfen Sie bitte den aktuellen Wert im seriellen Monitor.
- Sie werden außerdem die folgende Ausgabe im seriellen Monitor sehen.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
ESP8266 Web Server: New request recieved:
GET /
ESP8266 Web Server: New request recieved:
GET /relay1/on
ESP8266 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Überprüfen Sie den Relaiszustand
- Sie sehen die Webseite des ESP8266-Boards im Webbrowser wie unten dargestellt
- Sie können das Relais nun über die Weboberfläche ein- und ausschalten.
ESP8266-Code - HTML-Inhalt ist vom ESP8266-Code getrennt
Da eine grafische Webseite eine große Menge HTML-Inhalte enthält, wird das Einbetten in den ESP8266-Code wie bisher unpraktisch. Um dieses Problem anzugehen, müssen der ESP8266-Code und der HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der ESP8266-Code wird in einer .ino-Datei abgelegt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in einer .h-Datei abgelegt.
Schnelle Schritte
- Öffnen Sie die Arduino-IDE und erstellen Sie einen neuen Sketch. Geben Sie ihm einen Namen, zum Beispiel, newbiely.com.ino
- Kopieren Sie den untenstehenden Code und öffnen Sie ihn mit der Arduino-IDE
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-relay-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN D8 // The ESP8266 pin connected to relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /");
server.send(200, "text/html", getHTML());
});
// Route to control the relay
server.on("/relay1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Passe die WiFi-Informationen (SSID und Passwort) im Code an deine eigenen an
- Erstelle die Datei index.h im Arduino IDE, indem du:
- Entweder klickst du auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählst Neuer Tab, oder verwendest du die Tastenkombination Ctrl+Shift+N
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopieren Sie den folgenden 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 in der Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP8266 hochzuladen.
- Greifen Sie wie zuvor über einen Webbrowser auf die Webseite des ESP8266-Boards zu. Sie wird ähnlich wie der vorherige Code unten angezeigt:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, wird beim Kompilieren und Hochladen des Codes auf den ESP8266 die HTML-Inhalte 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 ...).
- Steuerung mehrerer Relais über das Web
- Neugestaltung der Web-Benutzeroberfläche (UI)
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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 gezeigten Code mühelos und innovativ anpassen, um Folgendes zu erreichen: