Aperçu du Projet

Les six projets couverts dans ce tutoriel :

• Projet 1– Point mobile (configuration matricielle de base)
• Projet 2– Défilement du texte sur la matrice 8 × 8
• Projet 3– Texte HTTP : envoyez du texte depuis votre téléphone ou PC via Wi-Fi
• Projet 4– Point d'inclinaison, contrôlé par l'accéléromètre QMI8658
• Projet 5– Flèche Toujours Vers le Haut (pointeur d'orientation utilisant QMI8658)
• Projet 6– Jeu de cible avec buzzer et commande par inclinaison

Si vous êtes perdu à n'importe quelle étape, comparez vos paramètres avec les extraits de code fournis pour chaque projet ci-dessous.

Introduction

Les projets commencent par l'animation la plus simple possible (un point unique en mouvement) et ajoutent progressivement du texte, un contrôle Wi-Fi, et enfin une interaction basée sur des capteurs utilisant l'accéléromètre QMI8658. À la fin, vous comprendrez comment contrôler la matrice de LED et réagir à l'orientation de la carte.

Installation des cartes ESP32-S3 dans l'IDE Arduino

Avant de télécharger un code, installez la prise en charge officielle de la carte ESP32 dans l'IDE Arduino et sélectionnez un profil de carte ESP32-S3 (par exemple, un module de développement ESP32-S3). Cela garantit que les paramètres corrects de taille de mémoire flash, de fréquence et d'USB sont appliqués lors de la compilation et du téléchargement.

Installation des bibliothèques requises

Les bibliothèques suivantes sont requises pour ces projets :

• Adafruit NeoPixel
• Adafruit GFX
• Adafruit NeoMatrix
• QMI8658 (par Lahav Gahali)

Installez-les une fois à l'aide du Gestionnaire de bibliothèques Arduino, puis vous pourrez les réutiliser pour les six projets.

À propos de l'accéléromètre QMI8658

Le QMI8658 est une IMU 6 axes combinant un accéléromètre 3 axes et un gyroscope 3 axes. Dans ces projets, les valeurs de l'accéléromètre sont utilisées pour détecter l'inclinaison et l'orientation de la carte.

Convention d'axes utilisée dans tous les projets :

• X– gauche / droite
• Y– avant / arrière
• Z– vertical (haut / bas)

Dans tous les projets basés sur l'inclinaison, vous configurerez une fois la plage de l'accéléromètre et le débit des données de sortie, puis vous lirez les valeurs pour déplacer un point, orienter une flèche ou contrôler un jeu.

// Common QMI8658 configuration used in tilt projects
// (Projects 4, 5, and 6)

const auto ACC_RANGE   = QMI8658AccRange_2g;
const auto ACC_ODR     = QMI8658AccODR_31_25Hz;
const auto GYR_RANGE   = QMI8658GyrRange_256dps;
const auto GYR_ODR     = QMI8658GyrODR_31_25Hz;

// Sensitivity factor for converting tilt to pixels
const float TILT_TO_PIXEL_SCALE = 4.0f;   // increase for more sensitivity
    

Projet 1 – Point Mobile (Paramètres de Base de la Matrice)

Projet 1 est une simple animation de point en mouvement qui vérifie le câblage de votre matrice LED et les paramètres de base de NeoMatrix. Vous définissez les dimensions de la matrice, la broche de données, la luminosité et la vitesse de déplacement du point.

  (Note: The input appears to be a single non-breaking space HTML entity (` `). The translation preserves this character exactly, as it is a structural element, not linguistic content.)

Paramètres clés

// Project 1 – Moving Dot (basic matrix setup)

// Matrix geometry
#define MATRIX_PIN       14
#define MATRIX_WIDTH      8
#define MATRIX_HEIGHT     8

// Layout (choose one; many boards use ZIGZAG or PROGRESSIVE)
#define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
                        NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG)
// Alternative if needed:
// #define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
//                         NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE)

// Visual parameters
const uint8_t  P1_BRIGHTNESS     = 40;         // overall brightness (0–255)
const uint16_t P1_DOT_COLOR      = matrix.Color(0, 255, 0); // green dot
const uint16_t P1_STEP_DELAY_MS  = 80;         // smaller = faster movement
    

En modifiantP1_DOT_COLORetP1_STEP_DELAY_MS, vous pouvez rapidement tester différentes couleurs et vitesses d'animation.

Projet 2 – Défilement de texte

Projet 2 affiche un texte défilant tel queRobojax. Vous contrôlez le message lui-même, la direction du défilement, la couleur du texte et la vitesse. Ce projet introduit l'affichage de texte sur une matrice très petite.

Paramètres clés

// Project 2 – Text Scroll

// Scrolling message
const char* P2_MESSAGE = "Robojax";

// Text color (R, G, B)
const uint16_t P2_TEXT_COLOR = matrix.Color(255, 0, 0);  // red text

// Scroll speed
const uint16_t P2_SCROLL_DELAY_MS = 70;  // smaller = faster scroll

// Scroll direction (you will use this in your logic)
// Possible values: -1 for left, +1 for right, or use an enum
const int8_t P2_SCROLL_DIR_X = -1;  // -1 = scroll left, +1 = scroll right
const int8_t P2_SCROLL_DIR_Y =  0;  //  0 = no vertical scroll
    

Si vous décidez ultérieurement de faire défiler verticalement (vers le haut ou vers le bas), définissezP2_SCROLL_DIR_Xà0et utiliseP2_SCROLL_DIR_Yà la place.

Projet 3 – Message sur Téléphone Mobile (Message Contrôlé par Wi-Fi)

Projet 3 transforme l'ESP32-S3 en un petit serveur web. Vous vous connectez à la carte via Wi-Fi, ouvrez sa page web et tapez un message. Le texte, la couleur et la vitesse de défilement sont ensuite utilisés pour piloter en temps réel le même effet de défilement de texte sur la matrice.

Paramètres Wi-Fi et de messagerie texte

// Project 3 – HTTP Text

// Wi-Fi credentials (change to your own network)
const char* P3_WIFI_SSID     = "YourWiFiName";
const char* P3_WIFI_PASSWORD = "YourWiFiPassword";

// Default text before anything is sent from the browser
String P3_currentText = "Robojax";

// Default color for the HTTP-controlled text
uint16_t P3_TEXT_COLOR = matrix.Color(0, 255, 255); // cyan

// Scroll speed for HTTP text
uint16_t P3_SCROLL_DELAY_MS = 80;  // can be updated from web page

// Allowed scroll directions (used as options in the HTML form)
enum P3_Direction {
  P3_LEFT,
  P3_RIGHT,
  P3_UP,
  P3_DOWN
};
P3_Direction P3_scrollDirection = P3_LEFT;
    

Sur la page web, l'utilisateur choisit la direction et la vitesse. Votre code se contente de mettre à jourP3_scrollDirectionetP3_SCROLL_DELAY_MSen fonction des options sélectionnées.

Projet 4 – Point d'inclinaison (Utilisation du QMI8658)

Projet 4 lit l'accéléromètre QMI8658 et déplace un point unique sur la matrice en fonction de l'inclinaison de la carte. Lorsque la carte est à plat, le point est au centre. Incliner la carte déplace le point dans cette direction.

`

Paramètres de la matrice et de l'inclinaison

// Project 4 – Tilt Dot

// Matrix geometry / brightness
#define MATRIX_PIN_TILT       14
#define MATRIX_WIDTH_TILT      8
#define MATRIX_HEIGHT_TILT     8

const uint8_t  P4_BRIGHTNESS   = 40;
const uint16_t P4_DOT_COLOR    = matrix.Color(0, 255, 0); // green
const uint16_t P4_UPDATE_DELAY = 30;  // ms between updates

// QMI8658 configuration (reuse from common settings if desired)
const auto P4_ACC_RANGE = QMI8658AccRange_2g;
const auto P4_ACC_ODR   = QMI8658AccODR_125Hz;

// Mapping accelerometer to pixel offset
// Negative sign may be adjusted depending on how the board is held
const float P4_TILT_SCALE_X = 3.5f; // affects left/right sensitivity
const float P4_TILT_SCALE_Y = 3.5f; // affects up/down sensitivity
    

Dans votre code, vous limitez les lectures de l'accéléromètre à une plage comme[-1, 1], multipliez-les parP4_TILT_SCALE_XetP4_TILT_SCALE_Y, et ajoutez-les aux coordonnées du centre. Si le mouvement semble inversé, inversez simplement le signe.

Projet 5 – Flèche Toujours Vers le Haut

Projet 5 affiche une flèche sur la matrice 8 × 8 qui pointe toujours vers le côté « haut » de la carte. Lorsque vous tournez la carte, la flèche pivote de manière à indiquer le côté qui est orienté vers le haut.

Paramètres de flèche et d'orientation

// Project 5 – Arrow Always Up

// Matrix brightness and color for the arrow
const uint8_t  P5_BRIGHTNESS     = 50;
const uint16_t P5_ARROW_COLOR    = matrix.Color(255, 150, 0);  // orange

// How often to update orientation
const uint16_t P5_UPDATE_DELAY_MS = 40;

// Tilt thresholds (in g) used to decide which side is "up"
// Adjust according to the board orientation in your video/demo
const float P5_TILT_THRESHOLD_LOW  = -0.25f;
const float P5_TILT_THRESHOLD_HIGH =  0.25f;

// Example mapping corners/sides based on accelerometer values
// (used in your logic to choose which arrow shape to draw)
/*
  ax, ay conditions (examples):
    ax >  P5_TILT_THRESHOLD_HIGH  -> USB side up
    ax <  P5_TILT_THRESHOLD_LOW   -> opposite USB side up
    ay >  P5_TILT_THRESHOLD_HIGH  -> one lateral side up
    ay <  P5_TILT_THRESHOLD_LOW   -> other lateral side up
*/
    

Le tracé réel de la flèche est mis en œuvre avecmatrix.drawPixel()etmatrix.drawLine(). La partie clé consiste à décider quelle orientation de flèche utiliser en fonction des zones d'inclinaison définies parP5_TILT_THRESHOLD_LOWetP5_TILT_THRESHOLD_HIGH.

Projet 6 – Jeu de Cible (Contrôle par Inclinaison)

Projet 6 est un petit jeu où vous contrôlez un point joueur en utilisant l'accéléromètre, essayez de le déplacer sur un pixel cible, et recevez un retour à la fois de la matrice et d'un buzzer lorsque vous touchez la cible.

Paramètres de jeu et de buzzer

// Project 6 – Tilt-Based Target Game

// Matrix brightness
const uint8_t P6_BRIGHTNESS = 60;

// Colors for game elements
const uint16_t P6_PLAYER_COLOR    = matrix.Color(0, 255, 0);   // green
const uint16_t P6_TARGET_COLOR    = matrix.Color(255, 0, 0);   // red
const uint16_t P6_BACKGROUND_COLOR = matrix.Color(0, 0, 0);    // off
const uint16_t P6_HIT_FLASH_COLOR = matrix.Color(255, 255, 0); // yellow on hit

// Buzzer pin and timing
const int      P6_BUZZER_PIN       = 4;       // change if wired differently
const uint16_t P6_BUZZER_ON_MS     = 120;     // beep duration
const uint16_t P6_BUZZER_OFF_MS    = 80;      // pause between beeps
const uint8_t  P6_BUZZER_VOLUME    = 128;     // if using PWM, duty cycle (0–255)

// Movement and game timing
const uint16_t P6_UPDATE_DELAY_MS  = 35;      // game loop delay
const float    P6_TILT_SCALE_X     = 3.5f;    // convert tilt to pixels (left/right)
const float    P6_TILT_SCALE_Y     = 3.5f;    // convert tilt to pixels (up/down)

// Minimum distance in pixels to count as a "hit"
const uint8_t  P6_HIT_DISTANCE_MAX = 0;       // 0 = exact same pixel
    

Dans la logique du jeu, vous allez :

• Lisez l'accéléromètre et déplacez le point du joueur par une quantité mise à l'échelle.
• Limitez la position du joueur à l'intérieur de la grille 8 × 8.
• Vérifiez si la position du joueur correspond à la position cible (ou se trouve dans la distance autorisée).
• En cas de toucher, faites clignoter la matrice en utilisantP6_HIT_FLASH_COLORet activez le buzzer en utilisantP6_BUZZER_ON_MSetP6_BUZZER_OFF_MS.
• Puis déplacez la cible vers une nouvelle position aléatoire et continuez.

Carte à épingles

Conclusion

Ces six projets couvrent les blocs de construction essentiels pour travailler avec la matrice LED RGB Waveshare ESP32-S3 : contrôle basique des pixels, défilement de texte, interaction basée sur le Wi-Fi, ainsi que des graphismes et jeux basés sur l'inclinaison utilisant l'accéléromètre QMI8658.

Vous pouvez mélanger et assortir ces idées pour créer vos propres projets, tels que des tableaux de score, de petits affichages d'état, des mini-jeux ou des panneaux de notification, tous actionnés par l'inclinaison, le toucher ou des messages provenant de votre téléphone ou ordinateur.