Regarder sur YouTube

Projet 2 de matrice LED RGB ESP32-S3 - Texte défilant

Projet 2 - Défilement de texte sur matrice LED RGB ESP32-S3

Dans ce projet, nous transformons la matrice LED RGB ESP32-S3 en une petite bannière de texte. Un court message (par exempleRobojax) défile sur l'écran RGB 8×8, et vous pouvez facilement changer le texte, la couleur, la luminosité et la vitesse de défilement directement dans le code. Cela est très utile pour des notifications simples, des étiquettes de nom ou de petits messages d'état.

Tous les six projets de cette série sont démontrés et expliqués dans une seule vidéo YouTube. La même vidéo est intégrée sur cette page, afin que vous puissiez voir exactement à quoi ressemble le défilement du texte en temps réel et comment chaque réglage affecte l'animation. Le code complet de ce projet est chargé automatiquement sous l'article, et vous pouvez acheter le module de matrice LED RGB ESP32-S3 dans les magasins affiliés répertoriés sous la section code.

Ce projet s'appuie sur les bases du Projet 1 (déplacement de point et contrôle des couleurs) et ajoute le rendu de texte et le défilement à l'aide de la bibliothèque NeoMatrix.

Aperçu du module matrice LED RGB ESP32-S3

Le matériel est le même pour les six projets : un microcontrôleur ESP32-S3 avec Wi-Fi et Bluetooth, une matrice LED RGB 8×8 (64 LED RGB adressables), un accéléromètre QMI8658C, un port USB et des broches d’E/S accessibles.:contentReference[oaicite:0]{index=0}

• ESP32-S3- processeur principal avec Wi-Fi/BLE pour des projets avancés.
• matrice RGB 8×8- 64 LED RGB pour les icônes, le texte et les animations.
• QMI8658C accéléromètre- utilisé dans des projets ultérieurs pour l'inclinaison et l'orientation.
• port USB- utilisé pour l'alimentation et la programmation via Arduino IDE.
• Broches exposées- vous permettre d'utiliser la carte comme un ESP32 normal pour d'autres entrées/sorties.
• Boutons de démarrage / réinitialisation- pour le téléversement de firmware et le redémarrage de croquis.

Dans le Projet 2, nous nous concentrons principalement sur la matrice et les fonctions de texte NeoMatrix. L'accéléromètre n'est pas encore utilisé, mais la même carte gérera également toutes les interactions et projets de jeu ultérieurs.

Projets Couvert dans la Vidéo (Horodatages)

La vidéo qui accompagne cet article couvre les six projets. Les horodatages approximatifs sont :

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

Vous êtes encouragé à regarder la vidéo tout en lisant cet article. Elle montre le texte défiler en direct sur la matrice LED et passe en revue toutes les étapes dans l'IDE Arduino.

Installation des cartes ESP32 dans Arduino IDE

Avant d'exécuter le code de défilement de texte, assurez-vous que la prise en charge de l'ESP32 est installée dans votre IDE Arduino :

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

Si le type de carte ou le port n'est pas correct, le croquis ne se chargera pas.

Installation de NeoMatrix et des bibliothèques requises

Le défilement du texte est implémenté en utilisant Adafruit NeoMatrix et ses dépendances. Dans la vidéo, ils sont installés via le Gestionnaire de bibliothèques.

Vous aurez besoin de :

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. OuvrirSketch > Include Library > Manage Libraries….
2. Rechercher pourAdafruit NeoMatrixet cliquezInstaller.
3. Lorsque vous y êtes invité, autorisez-le à s'installer.Adafruit GFXetAdafruit NeoPixelen tant que dépendances.

Si l'installation est réussie, vous devriez voir des exemples de croquis sousFile > Examples > Adafruit NeoMatrixetFile > Examples > Adafruit NeoPixel.

Projet 2 - Paramètres de code (Défilement de texte)

Le croquis de défilement du texte complet est automatiquement chargé ci-dessous cet article sur le site web. Ici, nous nous concentrons uniquement sur les valeurs de configuration que vous voudrez probablement modifier : broche, taille de matrice, luminosité, chaîne de texte, couleur, vitesse de défilement et direction optionnelle.

Tous les extraits ci-dessous sont tirés de la section de configuration en haut du croquis afin que vous puissiez rapidement ajuster le comportement sans toucher à la logique principale.

Taille et épingle de matrice

Tout comme le Projet 1, la matrice RGB est connectée à GPIO 14 et contient 64 LED (8×8). Assurez-vous que ces deux lignes correspondent à votre module :

 // Pin connected to 8×8 RGB matrix 
const int MATRIX_PIN = 14; // must be 14 on this module // Matrix size (width and height)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Si vous copiez un exemple de la bibliothèque NeoMatrix, il peut utiliser une broche ou une taille différente ; veillez toujours à les modifier pour qu'ils correspondent à cette carte.

Luminosité du texte

La luminosité est généralement contrôlée par une valeur comprise entre 0 et 255, où 0 est éteint et 255 est la luminosité maximale. Une valeur modérée est généralement suffisante :

// Overall matrix brightness (0–255) 
uint8_t matrixBrightness = 40; // comfortable indoor brightness // In 
setup(): 
matrix.setBrightness(matrixBrightness); 

Si vous utilisez le panneau dans un environnement lumineux ou pendant une courte période, vous pouvez augmenter cette valeur, mais évitez de trop l'augmenter si vous êtes proche de l'écran.

Texte à faire défiler

Le message réel est stocké sous forme de chaîne. Dans la vidéo, le texte exemple estRobojaxVous pouvez le changer en n'importe quel libellé ou message court de votre choix :

 // Text to scroll on the 8×8 matrix const char scrollText[] = "Robojax";
 // change this to your message 

Gardez à l'esprit qu'il s'agit seulement d'une matrice 8×8, donc des messages très longs prendront plus de temps à défiler et pourraient devenir difficiles à lire.

Couleur du texte (valeurs RVB)

La couleur du texte défilant est définie par des composants rouge, vert et bleu (0-255). Par exemple, le rouge pur est(255, 0, 0), le vert pur est(0, 255, 0), et le bleu pur est(0, 0, 255). Dans le croquis, vous verrez quelque chose comme :

 // Text color (R, G, B) uint8_t textRed = 255; // red component uint8_t textGreen = 0; // green component uint8_t textBlue = 0; // blue component 

Pour changer la couleur :

• Jaune:textRed = 255; textGreen = 255; textBlue = 0;
• Cyan :textRed = 0; textGreen = 255; textBlue = 255;
• Blanc :textRed = 255; textGreen = 255; textBlue = 255;

La vidéo montre également comment utiliser un sélecteur de couleurs en ligne pour trouver les valeurs RGB et les entrer dans le code.:contentReference[oaicite:1]{index=1}

Vitesse de défilement (Délai entre les images)

La vitesse de défilement est contrôlée par une valeur de délai en millisecondes entre chaque étape de mise à jour. Une valeur plus petite fait déplacer le texte plus vite ; une valeur plus grande le ralentit. Dans le croquis, vous devriez trouver une variable comme :

// Delay between scroll steps (in milliseconds) int scrollDelayMs = 50; 
// smaller = faster, larger = slower 

Exemples :

• scrollDelayMs = 20;→ défilement rapide.
• scrollDelayMs = 50;→ vitesse moyenne (similaire à la vidéo).
• scrollDelayMs = 100;ou plus → défilement lent et facile à lire.

Dans leloop(), cette valeur est utilisée dans undelay(scrollDelayMs);appeler après chaque redessin de la position du texte.

Direction de défilement (facultatif)

Dans le projet "défilement de texte de base", nous faisons généralement défiler vers la gauche, mais il est utile de définir une variable de direction symbolique afin que vous puissiez expérimenter avec d'autres directions par la suite (gauche, droite, haut, bas).

Un schéma courant est :

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

La boucle principale vérifie ensuitescrollDirectionet déplace le texte dans la direction choisie. Pour le projet 2, vous pouvez le laisser à0(gauche), mais si vous prolongez le croquis plus tard, vous pouvez ajouter des conditions telles que :

 if (scrollDirection == 0) { 
// move text left 
} else if (scrollDirection == 1) { 
// move text right 
} else if (scrollDirection == 2) { 
// move text up
 } else if (scrollDirection == 3) { 
// move text down 
}
 

Pour cet article, nous ne documentons que les paramètres. L'implémentation complète fait partie du code chargé sous l'article.

Résumé

Le projet 2 transforme votre matrice LED RGB ESP32-S3 en un affichage textuel simple mais accrocheur. En modifiant juste quelques variables en haut du code, vous pouvez rapidement changer :

• Quel message est affiché ?scrollText).
• La couleur du textetextRed,textGreen,textBlue).
• La luminosité de la matricematrixBrightness).
• La vitesse de défilementscrollDelayMs).
• La direction du défilementscrollDirection, si vous choisissez de l'utiliser).

Le schéma complet de ce projet est disponible ci-dessous cet article (chargé automatiquement par le site web). Pour une configuration détaillée étape par étape et une démonstration en direct du texte défilant en action, assurez-vous de regarder la section correspondante de la vidéo. Si vous aimez le projet et souhaitez le réaliser vous-même, vous pouvez également acheter le module de matrice LED RGB ESP32-S3 à partir des liens d'affiliation répertoriés sous le code.

Images

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up