Arduino Nano ESP32 – Steuert eine 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 läuft, wobei der Arduino Nano ESP32 verwendet wird. Im Detail 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, wie es funktioniert:
- Wenn Sie 192.168.0.3 in den Webbrowser eingeben, sendet der Browser eine Anfrage an den ESP32, und der Arduino Nano ESP32 antwortet mit einer Webseite, die die Ein/Aus-Schaltfläche zur Steuerung der LED enthält.
- Ebenso, wenn Sie auf der Webseite die Schaltfläche "Einschalten" klicken oder 192.168.0.3/led1/on in den Webbrowser eingeben, schaltet der Arduino Nano ESP32 die LED ein und antwortet mit der Steuerungswebseite.
- Ebenso, wenn Sie auf der Webseite die Schaltfläche "Ausschalten" klicken oder 192.168.0.3/led1/off in den Webbrowser eingeben, schaltet der Arduino Nano ESP32 die LED aus und antwortet mit der Steuerungswebseite.
Wir lernen anhand von zwei Beispielcodes:
- HTML-Inhalt ist in den Code des Arduino Nano ESP32 eingebettet
- Der HTML-Inhalt ist vom Arduino Nano ESP32-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 Arduino Nano ESP32
Wenn Sie nichts über LED und Arduino Nano ESP32 (Pinbelegung, Funktionsweise, Programmierung ...) wissen, informieren Sie sich in den folgenden Tutorials 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 den 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-led-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#define LED_PIN D5 // The Arduino Nano ESP32 pin 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("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 LED
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Arduino Nano 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("Arduino Nano 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
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial 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 aus.
- Öffnen Sie den Library Manager-Bereich, indem Sie auf das Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, dann finden Sie die ESPAsyncWebServer.
- Klicken Sie auf die Installieren-Schaltfläche, 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 WLAN-Daten
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Überprüfen Sie das Ergebnis im seriellen Monitor
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 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 die IP-Adresse variieren kann. Bitte überprüfen Sie den aktuellen Wert im Serial Monitor.
- Sie werden außerdem die untenstehende Ausgabe im Serial 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 /led1/on
Arduino Nano ESP32 Web Server: New request recieved:
GET /led1/off
Autoscroll
Clear output
9600 baud
Newline
- LED-Status prüfen
- Sie sehen die Webseite des Arduino Nano ESP32-Boards im Webbrowser wie unten dargestellt
- Sie können jetzt die LED ü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-Inhalte enthält, wird das Einbetten in den Arduino Nano ESP32-Code wie zuvor unpraktisch. Um dies zu lösen, müssen wir den Arduino Nano ESP32-Code und den HTML-Code in verschiedene Dateien aufteilen:
- Der Arduino Nano ESP32-Code wird in eine .ino Datei platziert.
- Der HTML-Code (einschließlich HTML, CSS und Javascript) wird in eine .h Datei platziert.
Schnelle Schritte
- Öffne die Arduino-IDE und erstelle eine neue Skizze, gib ihr einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den unten stehenden Code und öffne ihn mit 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-led-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "index.h" // Include the index.h file
#define LED_PIN D5 // The Arduino Nano ESP32 pin 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("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 LED
server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) {
Serial.println("Arduino Nano 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("Arduino Nano 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 an
- Erstelle die Datei index.h in der Arduino-IDE, indem du:
- Entweder klicke auf die Schaltfläche direkt unter dem Seriemonitor-Symbol und wähle Neue Registerkarte, oder verwende die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h an und klicken Sie auf die OK-Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h-Datei ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie auf die Upload-Schaltfläche in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Greifen Sie wie zuvor über einen Webbrowser auf die Webseite des Arduino Nano ESP32-Boards zu. Diese wird dem vorherigen Code unten ähneln:
- 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 ESP32 die HTML-Inhalte von der Arduino IDE nicht aktualisiert.
- Um die Arduino IDE dazu zu bringen, die HTML-Inhalte in diesem Fall 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 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-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 oben genannten Code leicht und innovativ anpassen, um Folgendes zu erreichen: