Regarder sur YouTube

Projet de matrice LED RGB ESP32-S3 3 - Texte provenant du téléphone mobile

Projet 3 - Contrôle de texte de votre téléphone (texte HTTP)

Dans ce projet, la matrice LED RGB ESP32-S3 héberge une petite page web pour que vous puissiez changer le texte défilant, la couleur, la direction et la vitesse directement depuis votre téléphone ou votre ordinateur. Vous n'avez pas besoin d'une application séparée - juste d'un navigateur web. Cela fait de ce module un petit affichage de texte Wi-Fi que vous pouvez mettre à jour en temps réel.

Tous les six projets de cette série sont expliqués et démontrés dans une vidéo YouTube. La même vidéo est intégrée sur cette page, vous pouvez donc voir exactement à quoi ressemble l'interface web et comment le texte se met à jour instantanément sur la matrice. Le code source complet de ce projet est automatiquement chargé en dessous de l'article, et vous pouvez acheter le module matriciel LED RGB ESP32-S3 dans des magasins affiliés listés sous la section code.

Dans cet article, nous nous concentrons sur le fonctionnement de la logique réseau (Wi-Fi domestique vs point d'accès) et sur les paramètres que vous pouvez modifier dans le code pour personnaliser le comportement.

Aperçu du module de matrice LED RGB ESP32-S3

Le matériel est le même que pour tous les autres projets de cette série : une carte microcontrôleur ESP32-S3 avec une matrice LED RGB 8×8 intégrée et un capteur de mouvement QMI8658C à l'arrière. Le port USB-C est utilisé pour l'alimentation et la programmation, et les broches autour des bords sont toujours disponibles pour d'autres E/S.:contentReference[oaicite:0]{index=0}

• ESP32-S3- Microcontrôleur compatible Wi-Fi et Bluetooth.
• matrice RGB 8×8- 64 LED RGB adressables pour le texte et les graphiques.
• Accéléromètre QMI8658C- utilisé dans les projets de tilt et de jeu.
• port USBalimente la carte et téléverse des croquis depuis l'Arduino IDE.
• Broches exposées- permettre des capteurs ou des actionneurs supplémentaires si nécessaire.
• Boutons de démarrage/réinitialisation- pour le téléchargement du firmware et le redémarrage.

Pour le Projet 3, la caractéristique la plus importante est le Wi-Fi de l'ESP32, qui permet à la carte d'agir comme un petit serveur web pour la page de contrôle du texte.:contentReference[oaicite:1]{index=1}

Projets couverts dans la vidéo (horodatages)

La vidéo unique de cette série couvre les six projets. Pour référence rapide :

• 00:00- Introduction
• 02:01- Installation des cartes ESP32
• 03:32- Installation des bibliothèques
• 05:32- Projet 1 : Point mobile
• 11:11- Projet 2 : Défilement de texte
• 12:59-Projet 3 : Texte HTTP (ce projet)
• 16:41- Projet 4 : Tilt Dot
• 18:55- Projet 5 : Flèche haut
• 20:02- Projet 6 : Jeu de cible

Vous êtes encouragé à regarder la section HTTP Texte dans la vidéo tout en travaillant avec cet article. La vidéo montre comment la page web est générée par l'ESP32 et comment le changement de texte, de couleur et de vitesse est immédiatement reflété sur la matrice LED.:contentReference[oaicite:2]{index=2}

Installation des cartes ESP32 dans l'IDE Arduino

Si vous avez déjà terminé les Projets 1 ou 2, la configuration de la carte est faite et vous pouvez sauter cette section. Sinon, suivez ces étapes dans l'IDE Arduino :

1. OuvrirFile > Preferenceset ajoutez l'URL des cartes ESP32 dans "URLs de gestionnaire de cartes supplémentaires".
2. Aller àTools > Board > Boards Manager…, recherchez pourESP32, et installez le package officiel ESP32.
3. Sélectionnez la bonne carte matricielle RGB ESP32-S3 parmiTools > Board.
4. Connectez le module via USB et choisissez le bon port série sousTools > Port.

Sans le bon support de carte ESP32 et le bon port, le croquis du serveur web ne se téléchargera pas.

Installation de NeoMatrix et des bibliothèques requises

Ce projet utilise les mêmes bibliothèques que le projet de défilement de texte précédent :

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

Installer via le Gestionnaire de bibliothèques :

1. OuvertSketch > Include Library > Manage Libraries….
2. Rechercher pourAdafruit NeoMatrixet cliquezInstaller.
3. Acceptez l'installation des dépendances (Adafruit GFXetAdafruit NeoPixel).

Une fois installé, vous devriez voir les exemples de croquis NeoMatrix et NeoPixel sousFile > Examples.

Deux modes Wi-Fi dans le projet 3

Le concept le plus important dans ce projet est que l'ESP32 peut fonctionner dansdeux modes différents:

1. Mode station (STA)- l'ESP32 se connecte à votre réseau Wi-Fi domestique existant.
2. Mode point d'accès (AP)l'ESP32 crée son propre réseau Wi-Fi si le Wi-Fi domestique n'est pas disponible.

Les deux modes utilisent la même interface web : une page HTML servie par l'ESP32 lui-même, où vous pouvez changer le texte, la couleur, la direction de défilement et la vitesse.:contentReference[oaicite:3]{index=3}

Mode 1 - Se connecter au Wi-Fi domestique (Mode Station)

En mode Station, l'ESP32 rejoint votre réseau Wi-Fi domestique ou de bureau. C'est le mode préféré chaque fois que votre routeur est disponible parce que :

• Votre téléphone et votre ordinateur sont déjà connectés au même réseau Wi-Fi.
• Vous pouvez indiquer l'adresse IP de l'ESP32 dans votre navigateur et contrôler le texte depuis n'importe quel appareil sur ce réseau.

Dans la section des paramètres du croquis, vous fournissez votre SSID Wi-Fi et votre mot de passe :

// Home Wi-Fi credentials (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";
const char* WIFI_PASS = "YourHomePassword";

Après le démarrage de la carte, elle essaie de se connecter àWIFI_SSIDSi le processus réussit, le code affiche l'adresse IP assignée sur le Moniteur Série, par exemple :

Connected to WiFi
IP address: 192.168.1.16

Pour contrôler le texte :

1. Assurez-vous que votre téléphone ou votre PC est connecté au même réseau Wi-Fi (par exemple,YourHomeWiFi).
2. Ouvrez un navigateur et saisissez l'adresse IP imprimée, telle quehttp://192.168.1.16/. :contentReference[oaicite:4]{index=4}
3. La page de contrôle apparaîtra, vous permettant de taper du texte, de choisir une couleur, de sélectionner une direction et d'ajuster la vitesse de défilement.

Mode 2 - Point d'accès autonome (mode AP)

Si l'ESP32 ne peut pas se connecter à votre Wi-Fi domestique (mauvais mot de passe, réseau non disponible ou si vous utilisez le module à l'extérieur), le programme passe automatiquement en mode Point d'Accès. En mode AP, l'ESP32 devient lui-même un point d'accès Wi-Fi avec son propre nom de réseau et mot de passe.

Dans ce projet, les paramètres AP sont fixés comme suit :

// Access Point (AP) credentials (fallback mode)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

Lorsque le mode Station échoue, le module passe en mode AP et commence à diffuser un réseau Wi-Fi appeléESP32. Pour contrôler la matrice :

1. Sur votre téléphone ou votre ordinateur, ouvrez les paramètres Wi-Fi et connectez-vous au réseau.ESP32.
2. Entrez le mot de passemot de passe(tel que défini dans le code).
3. Une fois connecté, ouvrez un navigateur et allez àhttp://192.168.4.1/(l'adresse IP par défaut pour le mode AP de l'ESP32).
4. La même page de contrôle apparaît, vous permettant de changer le texte, la couleur, la vitesse et la direction.

Ce comportement de secours rend le projet utile partout : à la maison, dans le laboratoire ou dans un environnement de démonstration où aucun routeur n'est disponible.

Projet 3 - Paramètres principaux dans le code

Le sketch complet de texte HTTP est chargé en dessous de cet article par le site web. Ici, nous ne documentons que les options de configuration les plus importantes que vous êtes susceptible de modifier.

Paramètres Wi-Fi et Point d'accès

En haut du croquis, vous trouverez la section de configuration du Wi-Fi. Ne changez que les identifiants de la Station (Wi-Fi à domicile) ; les paramètres AP sont généralement conservés par défaut :

// ---------- Wi-Fi SETTINGS ----------

// Home Wi-Fi (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";      // put your router SSID here
const char* WIFI_PASS = "YourHomePassword";  // put your router password here

// Fallback Access Point (AP mode)
const char* AP_SSID = "ESP32";               // fixed AP name
const char* AP_PASS = "password";            // fixed AP password

Comportement :

• SiWIFI_SSIDetWIFI_PASSsont correctes et le réseau est disponible → l'ESP32 se connecte en tant qu'appareil Wi-Fi normal (mode Station).
• Si la connexion échoue après un délai d'attente → l'ESP32 démarre son propre AP en utilisantAP_SSIDetAP_PASS.

Matrice, épingle, taille et luminosité

Ces paramètres sont les mêmes que ceux des projets précédents :

// Matrix configuration
const int MATRIX_PIN    = 14;   // RGB matrix data pin
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// Overall display brightness (0–255)
uint8_t matrixBrightness = 40;  // adjust for your environment

GarderMATRIX_PINà14pour ce tableau. Vous pouvez augmentermatrixBrightnesssi vous avez besoin de plus de lumière, mais des valeurs plus faibles sont plus confortables pour la vision de près.

Texte par défaut et paramètres de défilement

Lorsque le tableau démarre, il affiche un message initial jusqu'à ce que vous ouvriez la page web et que vous en tapiez un nouveau. Vous pouvez changer le texte par défaut dans la configuration :

// Default message shown at startup
String currentText = "Robojax";   // overwrite from web UI later

Le reste du comportement de défilement est contrôlé par un ensemble de variables qui sont mises à jour par l'interface web :

// Scroll delay in milliseconds (lower = faster)
int scrollDelayMs = 50;

// Scroll direction: 0=left, 1=right, 2=up, 3=down
int scrollDirection = 0;   // default: scroll left

La page web envoie de nouvelles valeurs en fonction des sélections du curseur et des boutons. Du côté d'Arduino, vous devez simplement savoir que :

• DiminutionscrollDelayMsfait avancer le texte plus rapidement.
• AugmenterscrollDelayMsle fait de le faire bouger plus lentement.
• ChangerscrollDirectionbascule entre les modes de défilement gauche, droit, haut ou bas.

Couleur du texte (Contrôlée depuis la page Web)

La couleur du texte est contrôlée par trois valeurs de 0 à 255 (rouge, vert, bleu). Elles sont mises à jour chaque fois que vous choisissez une nouvelle couleur sur la page web :

// Current text color (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

Lorsque vous choisissez une couleur dans le navigateur et cliquez sur Appliquer, l'ESP32 analyse les valeurs RGB et met à jour ces trois variables ; le texte change immédiatement de couleur sur la matrice. Dans la vidéo, ce comportement est démontré avec plusieurs changements de couleur, y compris des exemples en rouge, vert et bleu.:contentReference[oaicite:5]{index=5}

Résumé

Le projet 3 transforme votre matrice de LED RGB ESP32-S3 en un écran de texte entièrement sans fil que vous pouvez contrôler avec n'importe quel appareil disposant d'un navigateur web. Le croquis est conçu pour être robuste :

• Il essaie d'abord de se connecter à votre Wi-Fi domestique en utilisant le SSID et le mot de passe que vous avez configurés.
• Si cela échoue, cela devient automatiquement un point d'accès avec le nomESP32et mot de passepassword.
• Dans les deux modes, l'ouverture de la bonne adresse IP dans un navigateur affiche la même page de contrôle pour le texte, la couleur, la direction et la vitesse.

Le code HTTP Text complet est disponible ci-dessous cet article (chargé automatiquement sur le site web). Pour une démonstration complète étape par étape et en direct de la mise à jour du texte en temps réel, assurez-vous de regarder la section Projet 3 de la vidéo. Si vous souhaitez construire le projet vous-même, vous pouvez également acheter le module de matrice LED RGB ESP32-S3 en utilisant les liens d'affiliation listés sous le code.

Images

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text