ESP32 - Matrice LED via Web

Dans ce tutoriel, nous apprendrons comment contrôler un tableau d'affichage à matrice LED via une interface web en utilisant un ESP32. En détail, nous programmerons l'ESP32 pour qu'il devienne un serveur web qui effectue les actions suivantes :

ESP32 contrôle le tableau d'affichage à matrice LED via le web.

Préparation du matériel

1×Module de développement ESP32 ESP-WROOM-32
1×Câble USB Type-A vers Type-C (pour PC USB-A)
1×Câble USB Type-C vers Type-C (pour PC USB-C)
1×FC-16 LED Matrix 32x8
1×Plaque d'essai
1×Fils de connexion
1×Optionnel: Connecteur d'alimentation DC
1×Recommandé: Carte d'extension à bornier à vis pour ESP32
1×Recommandé: Breakout Expansion Board for ESP32
1×Recommandé: Répartiteur d'alimentation pour ESP32

Ou vous pouvez acheter les kits suivants:

1×Kit de Démarrage DIYables ESP32 (ESP32 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.

À propos de la matrice LED et du serveur Web

Nous pouvons utiliser un HTTP pur pour envoyer un texte depuis l'interface web vers l'ESP32. Cependant, l'utilisation de WebSocket le rend plus réactif et n'ajoute pas beaucoup de difficulté, donc dans ce tutoriel, nous utiliserons le WebSocket.

Non familiarisé avec la matrice LED, le serveur Web et WebSocket, y compris leurs brochages, fonctionnalités et programmation ? Explorez des tutoriels complets sur ces sujets ci-dessous :

Diagramme de câblage

Schéma de câblage de l'affichage à matrice de LED ESP32

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.

Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, consultez les instructions dans le tutoriel suivant : Comment alimenter l'ESP32..

Code ESP32

Le contenu de la page web (HTML, CSS, JavaScript) est stocké séparément dans un fichier index.h. Ainsi, nous aurons deux fichiers de code sur Arduino IDE :

  • Un fichier .ino qui est du code ESP32, qui crée un serveur web et un serveur WebSocket
  • Un fichier .h, qui contient le contenu de la page web.

Étapes rapides

  • Si c'est la première fois que vous utilisez ESP32, consultez Installation du logiciel ESP32..
  • Connectez la carte ESP32 à votre PC via un câble micro USB.
  • Ouvrez Arduino IDE sur votre PC.
  • Sélectionnez la bonne carte ESP32 (par exemple, ESP32 Dev Module) et le port COM.
  • Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques dans la barre de navigation gauche de l'Arduino IDE.
  • Recherchez "DIYables ESP32 WebServer", puis trouvez l'DIYables ESP32 WebServer créé par DIYables.
  • Cliquez sur le bouton Install pour installer la bibliothèque DIYables ESP32 WebServer.
Bibliothèque DIYables ESP32 WebServer ESP32
  • Recherchez “MD_Parola”, puis trouvez la bibliothèque MD_Parola
  • Cliquez sur le bouton Install.
Bibliothèque MD_Parola ESP32
  • Il vous sera demandé d'installer la bibliothèque "MD_MAX72XX".
  • Cliquez sur le bouton Install All pour installer la dépendance.
Bibliothèque ESP32 MD_MAX72XX
  • Sur l'IDE Arduino, créez un nouveau croquis, donnez-lui un nom, par exemple, newbiely.fr.ino
  • Copiez le code ci-dessous et ouvrez-le avec l'IDE Arduino.
/* * Ce code ESP32 a été développé par newbiely.fr * Ce code ESP32 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/esp32/esp32-led-matrix-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" #include <MD_Parola.h> #include <MD_MAX72xx.h> #define HARDWARE_TYPE MD_MAX72XX::FC16_HW #define MAX_DEVICES 4 // 4 blocks #define CS_PIN 21 // ESP32 pin GPIO21 // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; DIYables_ESP32_WebSocket* webSocket; // create an instance of the MD_Parola class MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES); // Web Page handlers void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { server.sendResponse(client, HTML_CONTENT); } // WebSocket event handlers void onWebSocketOpen(net::WebSocket& ws) { Serial.println("New WebSocket connection"); // Send welcome message const char welcome[] = "Connected to ESP32 WebSocket Server!"; } void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) { Serial.print("WebSocket Received ("); Serial.print(length); Serial.print(" bytes): "); Serial.println(message); ledMatrix.displayClear(); // clear led matrix display ledMatrix.displayScroll(message, PA_CENTER, PA_SCROLL_LEFT, 100); // Broadcast response to all connected clients using the library if (webSocket != nullptr) { String response = "Displayed: " + String(message) + "on LED Matrix"; webSocket->broadcastTXT(response); Serial.print("WebSocket sent ("); Serial.print(response.length()); Serial.print(" bytes): "); Serial.println(response); } } void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) { Serial.println("WebSocket client disconnected"); } void setup() { Serial.begin(9600); delay(1000); Serial.println("ESP32 Web Server and WebSocket Server"); ledMatrix.begin(); // initialize the object ledMatrix.setIntensity(15); // set the brightness of the LED matrix display (from 0 to 15) ledMatrix.displayClear(); // clear led matrix display ledMatrix.displayScroll("esp32io.com", PA_CENTER, PA_SCROLL_LEFT, 100); // Configure web server routes server.addRoute("/", handleHome); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); // Enable WebSocket functionality webSocket = server.enableWebSocket(81); if (webSocket != nullptr) { // Set up WebSocket event handlers webSocket->onOpen(onWebSocketOpen); webSocket->onMessage(onWebSocketMessage); webSocket->onClose(onWebSocketClose); } else { Serial.println("Failed to start WebSocket server"); } } void loop() { // Then handle HTTP requests server.handleClient(); // Handle WebSocket server.handleWebSocket(); if (ledMatrix.displayAnimate()) { ledMatrix.displayReset(); } }
  • Créez le fichier index.h sur Arduino IDE en :
    • Cliquant soit sur le bouton juste sous l'icône du moniteur série et choisissez Nouvel Onglet, soit en utilisant les touches Ctrl+Shift+N.
    Arduino IDE 2 ajoute un fichier
    • Nommez le fichier index.h et cliquez sur le bouton OK.
    L'IDE Arduino 2 ajoute le fichier index.h
    • Copiez le code ci-dessous et collez-le dans index.h.
    /* * Ce code ESP32 a été développé par newbiely.fr * Ce code ESP32 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/esp32/esp32-led-matrix-via-web */ const char *HTML_CONTENT = R"=====( <!DOCTYPE html> <!-- saved from url=(0019)http://192.168.0.2/ --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>ESP32 WebSocket</title> <meta name="viewport" content="width=device-width, initial-scale=0.7"> <link rel="icon" href="https://diyables.io/images/page/diyables.svg"> <style> /* Add some basic styling for the chat window */ body { font-size: 16px; } .chat-container { width: 400px; margin: 0 auto; padding: 10px; } .chat-messages { height: 250px; overflow-y: auto; border: 1px solid #444; padding: 5px; margin-bottom: 5px; } .user-input { display: flex; margin-bottom: 20px; } .user-input input { flex: 1; border: 1px solid #444; padding: 5px; } .user-input button { margin-left: 5px; background-color: #007bff; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } .websocket { display: flex; align-items: center; margin-bottom: 5px; } .websocket button { background-color: #007bff; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } .websocket .label { margin-left: auto; } </style> <script> var ws; var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */ function update_text(text) { var chat_messages = document.getElementById("chat-messages"); chat_messages.innerHTML += text + '<br>'; chat_messages.scrollTop = chat_messages.scrollHeight; } function send_onclick() { if(ws != null) { var message = document.getElementById("message").value; if (message) { document.getElementById("message").value = ""; ws.send(message + "\n"); update_text('<span style="color:navy">' + message + '</span>'); // You can send the message to the server or process it as needed } } } function connect_onclick() { if(ws == null) { ws = new WebSocket("ws://" + window.location.host + ":81"); document.getElementById("ws_state").innerHTML = "CONNECTING"; ws.onopen = ws_onopen; ws.onclose = ws_onclose; ws.onmessage = ws_onmessage; } else ws.close(); } function ws_onopen() { document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>"; document.getElementById("bt_connect").innerHTML = "Disconnect"; document.getElementById("chat-messages").innerHTML = ""; } function ws_onclose() { document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>"; document.getElementById("bt_connect").innerHTML = "Connect"; ws.onopen = null; ws.onclose = null; ws.onmessage = null; ws = null; } function ws_onmessage(e_msg) { e_msg = e_msg || window.event; // MessageEvent console.log(e_msg.data); update_text('<span style="color:blue">' + e_msg.data + '</span>'); } </script> </head> <body> <div class="chat-container"> <h2>ESP32 WebSocket</h2> <div class="websocket"> <button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button> <span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span> </div> <div class="chat-messages" id="chat-messages"></div> <div class="user-input"> <input type="text" id="message" placeholder="Type your message..."> <button onclick="send_onclick()">Send</button> </div> <div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div> </div> </body></html> )=====";
    • Maintenant, vous avez le code dans deux fichiers : newbiely.fr.ino et index.h.
    • Cliquez sur le bouton Upload dans l'IDE Arduino pour charger le code sur l'ESP32.
    • Ouvrez le moniteur série.
    • Consultez le résultat sur le moniteur série.
    COM6
    Send
    Connecting to WiFi... Connected to WiFi ESP32 Web Server's IP address IP address: 192.168.0.2
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • Prenez note de l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
    • Vous verrez la page web comme ci-dessous :
    Navigateur web websocket ESP32
    • Cliquez sur le bouton CONNECTER pour connecter la page Web à l'ESP32 via WebSocket.
    • Tapez quelques mots et envoyez-les à l'ESP32.
    • Vous verrez la réponse de l'ESP32.
    Serveur de chat websocket ESP32

    ※ Note:

    • Si vous modifiez le contenu HTML dans le fichier index.h et que vous ne touchez à rien dans le fichier newbiely.fr.ino, lorsque vous compilez et téléchargez le code sur l'ESP32, l'IDE Arduino ne mettra pas à jour le contenu HTML.
    • Pour que l'IDE Arduino mette à jour le contenu HTML dans ce cas, apportez une modification dans le fichier newbiely.fr.ino (par exemple, ajouter une ligne vide, ajouter un commentaire...).

    Explication du code ligne par ligne

    Le code ESP32 ci-dessus contient des explications ligne par ligne. Veuillez lire les commentaires dans le code !

Tutoriels connexes

※ NOS MESSAGES

  • N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !