Arduino Uno R4 WiFi steuert 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 genutzt wird, wobei der Arduino Uno R4 WiFi verwendet wird. Genauer gesagt wird der Arduino Uno R4 WiFi so programmiert, dass er als Webserver arbeitet. Nehmen wir an, die IP-Adresse des Arduino Uno R4 WiFi lautet 192.168.0.2. Hier sind die Details dazu, wie es funktioniert:
- Wenn Sie 192.168.0.2 in den Webbrowser eingeben, sendet der Browser eine Anfrage an den Arduino, und der Arduino antwortet mit einer Webseite, die eine Ein-/Aus-Taste zur Steuerung der LED enthält.
- Ähnlich, wenn Sie auf der Webseite die Schaltfläche „LED AN“ klicken oder 192.168.0.2/led1/on in den Webbrowser eingeben, schaltet der Arduino die LED ein und antwortet mit der Steuerungswebseite.
- Gleiches gilt, wenn Sie auf der Webseite die Schaltfläche „LED AUS“ klicken oder 192.168.0.2/led1/off in den Webbrowser eingeben, schaltet der Arduino die LED aus und antwortet mit der Steuerungswebseite.
Das Tutorial bietet die Grundlagen, die Sie mühelos 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 STEM V4 IoT Starter-Kit (Arduino 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.
Kaufhinweis: Um den Verdrahtungsprozess zu vereinfachen, empfehlen wir die Verwendung des LED Module, das mit einem eingebauten Widerstand geliefert wird.
Über LED und Arduino Uno R4
Wenn Sie nichts über LED und Arduino Uno R4 wissen (Pinbelegung, wie es funktioniert, 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.
Arduino-Code
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-uno-r4-wifi-controls-led-via-web
*/
#include <UnoR4WiFi_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// LED configuration
#define LED_PIN 9
int ledState = LOW; // Track LED state
const char* HTML_CONTENT =
"<!DOCTYPE HTML>\n"
"<html>\n"
"<head>\n"
"<link rel=\"icon\" href=\"data:,\">\n"
"</head>\n"
"<body>\n"
"<a href=\"/led1/on\">LED ON</a>\n"
"<br><br>\n"
"<a href=\"/led1/off\">LED OFF</a>\n"
"</body>\n"
"</html>\n";
// Create web server instance
UnoR4WiFi_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
server.sendResponse(client, HTML_CONTENT);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
server.sendResponse(client, HTML_CONTENT);
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED pin
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, ledState);
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println(" connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/led1/on", handleLedOn);
server.addRoute("/led1/off", handleLedOff);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie Arduino Uno R4 verwenden, siehe wie man die Umgebung für Arduino Uno R4 in der Arduino IDE einrichtet.
- Öffnen Sie die Bibliotheksverwaltung, indem Sie auf das Bibliotheksverwaltung Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Webserver für Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf die Installieren Schaltfläche, um die Webserver-Bibliothek hinzuzufügen.
- Kopieren Sie den obigen Code und öffnen Sie ihn in der Arduino-IDE
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code auf Ihre eigenen
- Klicken Sie in der Arduino-IDE auf die Schaltfläche Hochladen, um den Code auf den Arduino hochzuladen
- Öffnen Sie den seriellen Monitor
- Sehen Sie das Ergebnis im seriellen Monitor
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
Autoscroll
Clear output
9600 baud
Newline
- Sie werden eine IP-Adresse sehen, zum Beispiel: 192.168.0.2. Dies ist die IP-Adresse des Arduino-Webservers
- Öffnen Sie einen Webbrowser und geben Sie eine der drei unten aufgeführten Formate in die Adressleiste ein:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Bitte beachten Sie, dass sich die IP-Adresse ändern 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 YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /led1/on
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- LED-Status überprüfen
- Sie sehen die Webseite des Arduino-Boards im Webbrowser, wie unten gezeigt
- Sie können jetzt die LED über die Weboberfläche ein- und ausschalten
Sie können den obigen Code leicht und innovativ anpassen, um Folgendes zu erreichen:
- Steuern mehrerer LEDs über das Web
- Neugestaltung der Web-Benutzeroberfläche (UI)
Wenn Sie das Erscheinungsbild der Webseite durch eine beeindruckende grafische Benutzeroberfläche (GUI) verbessern möchten, können Sie sich zur Inspiration und Anleitung auf das Arduino - Web Server Tutorial beziehen.