ESP8266 - Steuert LED über das Web
Dieses Tutorial zeigt Ihnen, wie Sie eine LED über eine Weboberfläche steuern, die über einen Browser auf einem PC oder Smartphone verwendet wird, wobei der ESP8266 zum Einsatz kommt. Im Detail wird der ESP8266 so programmiert, dass er als Webserver fungiert. Nehmen wir an, die IP-Adresse des ESP8266 lautet 192.168.0.5. Nachfolgend finden Sie die Einzelheiten, wie es funktioniert:
- Wenn Sie 192.168.0.3 in den Webbrowser eingeben, sendet der Browser eine Anfrage an den ESP8266, und der ESP8266 antwortet mit einer Webseite, die den Ein/Aus-Schalter zur Steuerung der LED enthält.
- Genauso, wenn Sie auf der Webseite die 'Einschalten'-Schaltfläche klicken oder 192.168.0.3/led1/on in den Webbrowser eingeben, schaltet der ESP8266 die LED ein und antwortet mit der Steuerungswebseite.
- Genauso, wenn Sie auf der Webseite die 'Ausschalten'-Schaltfläche klicken oder 192.168.0.3/led1/off in den Webbrowser eingeben, schaltet der ESP8266 die LED aus und antwortet mit der Steuerungswebseite.
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 ausgelagert
Das Tutorial bietet die Grundlagen, die Sie problemlos und innovativ anpassen können, um Folgendes zu erreichen:
- Steuerung mehrerer LEDs über das Web
- 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.
Kaufhinweis: Um den Verdrahtungsprozess zu vereinfachen, empfehlen wir die Verwendung des LED Module, das mit einem eingebauten Widerstand geliefert wird.
Über LED und ESP8266
Wenn Sie nichts über LED und ESP8266 wissen (Pinbelegung, wie sie funktionieren, wie man programmiert ...), lernen Sie in den folgenden Tutorials mehr 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-led-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define LED_PIN D6 // The ESP8266 pin connected to LED
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 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 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 LED
server.on("/led1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
server.send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_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:
- Schau dir das Tutorial zur Einrichtung der ESP8266-Umgebung in der Arduino IDE an, falls du ESP8266 zum ersten Mal verwendest.
- Verbinde die Komponenten wie im Diagramm gezeigt.
- Schließe das ESP8266-Board über ein USB-Kabel an deinen Computer an.
- Öffne die Arduino IDE auf deinem Computer.
- Wähle das richtige ESP8266-Board, z. B. NodeMCU 1.0 (ESP-12E-Modul), sowie den jeweiligen COM-Port.
- Kopiere den obigen Code und öffne ihn in der Arduino IDE.
- Passe die WLAN-Informationen (SSID und Passwort) im Code an deine Werte an.
- Klicke den Hochladen-Knopf in der Arduino IDE, um den Code auf den ESP8266 hochzuladen.
- Öffne den seriellen Monitor.
- Sieh dir das Ergebnis im seriellen Monitor an.
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 eine der drei untenstehenden Formate in die Adresszeile ein:
192.168.0.3
192.168.0.3/led1/on
192.168.0.3/led1/off
- Bitte beachten Sie, dass sich die IP-Adresse ändern 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
ESP8266 Web Server's IP address: 192.168.0.3
ESP8266 Web Server: New request recieved:
GET /
ESP8266 Web Server: New request recieved:
GET /led1/on
ESP8266 Web Server: New request recieved:
GET /led1/off
Autoscroll
Clear output
9600 baud
Newline
- LED-Zustand prüfen
- Sie sehen die Webseite des ESP8266-Boards im Webbrowser wie unten dargestellt
- Sie können die LED jetzt ü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 es unpraktisch, sie wie zuvor in den ESP8266-Code einzubetten. Um dem entgegenzuwirken, müssen ESP8266-Code und HTML-Code in verschiedene Dateien aufgeteilt werden:
- Der ESP8266-Code wird in eine .ino-Datei gelegt.
- Der HTML-Code (einschließlich HTML, CSS und JavaScript) wird in eine .h-Datei gelegt.
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 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-led-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
#define LED_PIN D6 // The ESP8266 pin connected to LED
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 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 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 LED
server.on("/led1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /led1/on");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
server.send(200, "text/html", getHTML());
});
server.on("/led1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /led1/off");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
server.send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Ändere die WiFi-Informationen (SSID und Passwort) im Code auf deine.
- Erstelle die index.h-Datei in der Arduino-IDE durch:
- Entweder klickst du auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählst Neue Registerkarte, oder verwendest die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopiere den untenstehenden Code und füge 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 Upload in der Arduino-IDE, um den Code auf den ESP8266 hochzuladen
- Greifen Sie wie zuvor über den Webbrowser auf die Webseite des ESP8266-Boards zu. Sie wird unten ähnlich dem vorherigen Code gezeigt:
- Wenn Sie den HTML-Inhalt in der Datei index.h ändern und nichts in der Datei newbiely.com.ino berühren, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP8266 den HTML-Inhalt nicht aktualisieren.
- Um die Arduino IDE dazu zu bringen, den HTML-Inhalt in diesem Fall zu aktualisieren, nehmen Sie eine Änderung in der Datei newbiely.com.ino vor (z. B. das Hinzufügen einer leeren Zeile, das Hinzufügen eines Kommentars ...).
- Steuerung mehrerer LEDs über das Web
- Neugestaltung der webbasierten 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-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 mühelos und innovativ anpassen, um Folgendes zu erreichen: