Arduino Uno R4 WiFi bestuurt LED via Web
In deze handleiding leert u hoe u een LED kunt bedienen via een webinterface met behulp van een browser op een pc of smartphone, gebruikmakend van de Arduino Uno R4 WiFi. Concreet zal de Arduino Uno R4 WiFi worden geprogrammeerd als een webserver. Stel dat het IP-adres van de Arduino Uno R4 WiFi 192.168.0.2 is. Hier volgt hoe het werkt:
- Wanneer u 192.168.0.2 invoert in de webbrowser, stuurt de browser een verzoek naar de Arduino en reageert de Arduino met een webpagina met een aan/uit knop om de LED te bedienen.
- Op dezelfde manier, wanneer u op de "LED ON" knop op de webpagina klikt of 192.168.0.2/led1/on invoert in de webbrowser, schakelt de Arduino de LED in en reageert opnieuw met de bedieningspagina.
- Evenzo, wanneer u op de "LED OFF" knop op de webpagina klikt of 192.168.0.2/led1/off invoert in de webbrowser, schakelt de Arduino de LED uit en toont opnieuw de bedieningspagina.
Deze handleiding biedt de basis die u direct kunt aanpassen en innovatief kunt uitbreiden om het volgende te bereiken:
- Meerdere LEDs via het web aansturen
- De web gebruikersinterface (UI) opnieuw vormgeven
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Over LED en Arduino Uno R4
Als u nog niet bekend bent met LED en Arduino Uno R4 (pinout, werking, programmeren, enz.), bekijk dan de volgende tutorials:
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
Arduino Code
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
Snelle Stappen
- Als dit de eerste keer is dat u de Arduino Uno R4 gebruikt, zie hoe u de omgeving instelt voor Arduino Uno R4 in de Arduino IDE.
- Open de Library Manager door op het Library Manager icoon links in de Arduino IDE te klikken.
- Zoek op Web Server for Arduino Uno R4 WiFi en zoek de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Install knop om de Web Server bibliotheek toe te voegen.
- Kopieer de bovenstaande code en open deze in de Arduino IDE.
- Pas de wifi-informatie (SSID en wachtwoord) in de code aan naar uw eigen netwerkgegevens.
- Klik op de Upload knop in de Arduino IDE om de code te uploaden naar de Arduino.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële 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
- U ziet een IP-adres, bijvoorbeeld: 192.168.0.2. Dit is het IP-adres van de Arduino Web Server.
- Open een webbrowser en voer een van de drie onderstaande formaten in de adresbalk in:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Houd er rekening mee dat het IP-adres kan variëren. Controleer de actuele waarde in de Seriële Monitor.
- U ziet ook de volgende output in de Seriële Monitor:
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
- Controleer de LED-status.
- U ziet de webpagina van de Arduino op de webbrowser zoals hieronder:
- U kunt de LED nu via de webinterface aan- en uitzetten.
U kunt de bovenstaande code eenvoudig en creatief aanpassen om het volgende te bereiken:
- Meerdere LEDs via het web bedienen
- De web gebruikersinterface (UI) opnieuw vormgeven
Als u de webpagina wilt verbeteren met een aantrekkelijke grafische gebruikersinterface (UI), kunt u ter inspiratie en begeleiding de tutorial Arduino - Web Server raadplegen.