L'Arduino Uno R4 WiFi contrôle la LED via le Web
Dans ce tutoriel, nous allons apprendre comment contrôler une DEL à l'aide d'une interface Web à partir d'un navigateur sur un PC ou un smartphone, en utilisant l'Arduino Uno R4 WiFi. En détail, l'Arduino Uno R4 WiFi sera programmé pour fonctionner comme un serveur Web. Supposons que l'adresse IP de l'Arduino Uno R4 WiFi soit 192.168.0.2. Voici les détails de son fonctionnement :
- Lorsque vous entrez 192.168.0.2 dans le navigateur Web, le navigateur envoie une requête à l'Arduino, et l'Arduino répond avec une page Web qui contient le bouton marche/arrêt pour contrôler la LED.
- De même, lorsque vous cliquez sur le bouton « LED ALLUMÉE » sur la page Web ou que vous tapez 192.168.0.2/led1/on dans le navigateur Web, l'Arduino allume la LED et répond avec la page Web de contrôle.
- De même, lorsque vous cliquez sur le bouton « LED ÉTEINTE » sur la page Web ou que vous tapez 192.168.0.2/led1/off dans le navigateur Web, l'Arduino éteint la LED et répond avec la page Web de contrôle.
Le tutoriel offre les fondamentaux que vous pouvez facilement et de manière innovante personnaliser pour atteindre ce qui suit :
- Contrôler plusieurs DEL via le web
- Repenser l'interface utilisateur du Web (UI)
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Note d'achat: Pour simplifier le processus de câblage, nous recommandons d'utiliser le LED Module, qui est livré avec une résistance intégrée.
À propos de LED et Arduino Uno R4
Si vous ne connaissez pas la LED et l'Arduino Uno R4 (pinout, fonctionnement, programmation, etc.), renseignez-vous sur eux dans les tutoriels suivants :
Diagramme de câblage
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Code Arduino
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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();
}
Étapes rapides
- Si c'est la première fois que vous utilisez l'Arduino Uno R4, consultez Comment démarrer avec Arduino Uno R4..
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for Arduino Uno R4 WiFi et localisez la bibliothèque Web Server créée par DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque Web Server.
- Copiez le code ci-dessus et ouvrez-le dans l'IDE Arduino.
- Modifiez les informations Wi‑Fi (SSID et mot de passe) dans le code pour les remplacer par les vôtres.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur la carte Arduino.
- Ouvrez le moniteur série.
- Consultez le résultat dans le moniteur série.
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
- Vous verrez une adresse IP, par exemple : 192.168.0.2. Il s'agit de l'adresse IP du serveur Web Arduino
- Ouvrez un navigateur Web et saisissez l’un des trois formats ci-dessous dans la barre d’adresse :
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Sachez que l'adresse IP peut varier. Veuillez vérifier la valeur actuelle dans le Moniteur Série.
- Vous verrez également la sortie ci-dessous dans le Moniteur Série
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
- Vérifiez l'état de la LED
- Vous verrez la page web de la carte Arduino dans le navigateur comme ci-dessous
- Vous pouvez désormais contrôler l'allumage et l'extinction de la DEL via l'interface Web
Vous pouvez facilement et de manière innovante personnaliser le code ci-dessus afin d'obtenir ce qui suit :
- Contrôler plusieurs LEDs via le Web
- Reconcevoir l'interface utilisateur du Web (UI)
Si vous souhaitez améliorer l'apparence de la page web avec une interface utilisateur graphique impressionnante (UI), vous pouvez consulter le tutoriel Arduino - Serveur Web. pour vous inspirer et vous guider.