Arduino Uno R4 WiFi contrôle une LED via le Web
Dans ce tutoriel, nous allons apprendre à contrôler une LED via une interface web en utilisant 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, celui-ci 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 ON" sur la page web ou 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 la même manière, lorsque vous cliquez sur le bouton "LED OFF" sur la page web ou 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 bases que vous pouvez facilement et de manière innovante personnaliser pour atteindre les objectifs suivants :
- Contrôler plusieurs LED via le web
- Refonte de l'interface utilisateur (UI) web
Préparation du matériel
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
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.
À propos des LED et de l'Arduino Uno R4
Si vous ne connaissez pas les LED et Arduino Uno R4 (répartition des broches, fonctionnement, programmation...), renseignez-vous à leur sujet dans les tutoriels suivants :
Diagramme de câblage
This image is created using Fritzing. Click to enlarge 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 <WiFiS3.h>
const int LED_PIN = 9; // Arduino pin connected to LED's pin
const char ssid[] = "YOUR_WIFI"; // change your network SSID (name)
const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT); // set arduino pin to output mode
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
Serial.println("Please upgrade the firmware");
}
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
// you're connected now, so print out the status:
printWifiStatus();
}
void loop() {
// listen for incoming clients
WiFiClient client = server.available();
if (client) {
// read the first line of HTTP request header
String HTTP_req = "";
while (client.connected()) {
if (client.available()) {
Serial.println("New HTTP Request");
HTTP_req = client.readStringUntil('\n'); // read the first line of HTTP request
Serial.print("<< ");
Serial.println(HTTP_req); // print HTTP request to Serial Monitor
break;
}
}
// read the remaining lines of HTTP request header
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print("<< ");
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
if (HTTP_req.indexOf("GET") == 0) { // check if request method is GET
// expected header is one of the following:
// - GET led1/on
// - GET led1/off
if (HTTP_req.indexOf("led1/on") > -1) { // check the path
digitalWrite(LED_PIN, HIGH); // turn on LED
Serial.println("Turned LED on");
} else if (HTTP_req.indexOf("led1/off") > -1) { // check the path
digitalWrite(LED_PIN, LOW); // turn off LED
Serial.println("Turned LED off");
} else {
Serial.println("No command");
}
}
// send the HTTP response
// send the HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("</head>");
client.println("<a href=\"/led1/on\">LED ON</a>");
client.println("<br><br>");
client.println("<a href=\"/led1/off\">LED OFF</a>");
client.println("</html>");
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
void printWifiStatus() {
// print your board's IP address:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// print the received signal strength:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
Étapes rapides
- Si c'est la première fois que vous utilisez Arduino Uno R4, consultez comment configurer l'environnement pour Arduino Uno R4 sur Arduino IDE.
- Copiez le code ci-dessus et ouvrez-le avec Arduino IDE.
- Changez les informations wifi (SSID et mot de passe) dans le code par les vôtres.
- Cliquez sur le bouton Upload dans Arduino IDE pour charger le code sur Arduino.
- Ouvrez le moniteur série.
- Vérifiez le résultat sur 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. C'est l'adresse IP du serveur Web Arduino.
- Ouvrez un navigateur web et entrez 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
- Veuillez noter que l'adresse IP pourrait varier. Veuillez vérifier la valeur actuelle sur le moniteur série.
- Vous verrez également la sortie ci-dessous sur le moniteur série.
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-41 dBm
New HTTP Request
<< GET /led1/on HTTP/1.1
<< Host: 192.168.0.2
<< Connection: keep-alive
<< Cache-Control: max-age=0
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
<< Accept: text/html,application/xhtml+xml,application/xml
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9
Turned LED on
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 web comme ci-dessous
- Vous pouvez maintenant contrôler l'allumage et l'extinction de la LED via l'interface web.
Vous pouvez facilement et de manière innovante personnaliser le code ci-dessus pour obtenir ce qui suit :
- Contrôler plusieurs LED via le web
- Refonte de l'interface utilisateur (UI) web
Si vous souhaitez améliorer l'apparence de la page web avec une interface graphique utilisateur (UI) impressionnante, vous pouvez consulter le tutoriel Arduino - Serveur Web pour inspiration et orientation.