Arduino - Matrice de LED via le Web
Dans ce tutoriel, nous allons apprendre à contrôler une matrice 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 saisissez 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 contenant une boîte de message.
- Vous tapez un message dans la boîte de message et cliquez sur le bouton d'envoi. Le message est envoyé à l'Arduino.
- Arduino affiche le message sur la matrice LED.
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 de la matrice LED et de l'Arduino Uno R4
Si vous ne connaissez pas la matrice LED et Arduino Uno R4 (brochage, 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
Étapes rapides
- Si c'est la première fois que vous utilisez un Arduino Uno R4, consultez comment configurer l'environnement pour Arduino Uno R4 sur Arduino IDE.
- Ouvrez l'IDE Arduino.
- Recherchez "MD_Parola", puis trouvez la bibliothèque MD_Parola.
- Cliquez sur le bouton Install.
- Vous devrez installer la bibliothèque MD_MAX72XX pour dépendance. Cliquez sur le bouton Install All.
- Créez un nouveau croquis. Donnez-lui un nom, par exemple, ArduinoGetStarted.com.ino.
- Copiez le code fourni ci-dessous et collez-le dans le fichier créé.
/*
* 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-led-matrix-via-web
*/
#include <WiFiS3.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 3
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
const char ssid[] = "YOUR_WIFI_SSID"; // 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);
ledMatrix.begin(); // initialize the object
ledMatrix.setIntensity(0); // set the brightness of the LED matrix display (from 0 to 15)
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll("Hello", PA_CENTER, PA_SCROLL_LEFT, 100);
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 ?/message= "user message"
if (HTTP_req.indexOf("message=") > -1) { // check the path
int pos_1 = HTTP_req.indexOf("message=") + 8; // 8 is the lengh of "message="
int pos_2 = HTTP_req.indexOf(" ", pos_1);
String message = HTTP_req.substring(pos_1, pos_2);
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
}
}
// 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
String html = String(HTML_CONTENT);
client.println(html);
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
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");
}
- Modifiez les informations WiFi (SSID et mot de passe) dans le code pour les vôtres
- Créez le fichier index.h sur Arduino IDE en :
- Cliquez sur le bouton situé juste en dessous de l'icône du moniteur série et choisissez Nouvel Onglet, ou utilisez les touches Ctrl+Shift+N.
- Nommez le fichier index.h et cliquez sur le bouton OK.
- Copiez le code ci-dessous et collez-le dans le fichier index.h.
/*
* 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-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino LED Matrix Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body {
font-size: 16px;
}
.user-input {
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input input[type="submit"] {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Arduino - LED Matrix via Web</h2>
<form class="user-input" action="" method="GET">
<input type="text" id="message" name="message" placeholder="Message to LED Matrix...">
<input type="submit" value="Send">
</form>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
- Maintenant, vous avez le code dans deux fichiers : ArduinoGetStarted.com.ino et index.h
- Cliquez sur le bouton Upload dans l'IDE Arduino pour transférer le code vers Arduino
- Voir 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):-41 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 saisissez l'une des adresses IP dans la barre d'adresse.
- Veuillez noter que l'adresse IP peut 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 / 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
<< Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9
Autoscroll
Clear output
9600 baud
Newline
- Vous verrez la page web de la carte Arduino sur le navigateur web comme ci-dessous.
- Tapez un message et cliquez sur le bouton d'envoi pour envoyer le message à Arduino.
- Regardez l'affichage de la matrice LED.
※ NOTE THAT:
- Si des modifications sont apportées au contenu HTML dans le fichier index.h sans aucune modification du fichier ArduinoGetStarted.com.ino, l'IDE Arduino ne rafraîchira ni ne mettra à jour automatiquement le contenu HTML lors de la compilation et du téléchargement du code vers l'ESP32.
- Pour contraindre l'IDE Arduino à mettre à jour le contenu HTML dans un tel scénario, il est nécessaire d'effectuer une modification dans le fichier ArduinoGetStarted.com.ino. Par exemple, vous pouvez ajouter une ligne vide ou insérer un commentaire. Cette action incite l'IDE à reconnaître les changements dans le projet, garantissant que le contenu HTML révisé est inclus dans le téléchargement.