ESP32-S3 RGB-LED-Matrix-Projekte (Kippspiel, Text, Pfeil, WiFi-Demo)

ESP32-S3 RGB-LED-Matrix-Projekte (Kippspiel, Text, Pfeil, WiFi-Demo)

ESP32-S3 RGB-LED-Matrix: Sechs praktische Projekte (mit QMI8658-Beschleunigungssensor)

Dieses Tutorial führt Sie durch sechs praktische Mini-Projekte mit dem Waveshare ESP32-S3 RGB LED Matrix Board. Sie beginnen mit der Installation der Boards und Bibliotheken in der Arduino IDE und enden mit einem unterhaltsamen, neigungsgesteuerten Zielspiel.

ESP32 S3 Matrix zeigt Regenbogenherz an

Das hier verwendete Board enthält:

  • 8 × 8 RGB-LED-Matrix (64 adressierbare RGB-LEDs)
  • QMI86586-Achsen-Beschleunigungssensor
  • ESP32-S3-Mikrocontroller mit Wi-Fi und BLE
  • USB-Anschluss für Programmierung und Stromversorgung

Alle Projekte sind in Arduino geschrieben und verwenden die Adafruit NeoMatrix, Adafruit NeoPixel, Adafruit GFX und QMI8658 Bibliotheken.

Projektübersicht

Die sechs in diesem Tutorial behandelten Projekte:

  • Projekt 1– Bewegender Punkt (grundlegende Matrix-Einrichtung)
  • Projekt 2– Textlaufschrift auf der 8×8-Matrix
  • Projekt 3– HTTP-Text: Senden Sie Text von Ihrem Telefon oder PC über Wi-Fi
  • Projekt 4– Tilt Dot, gesteuert vom QMI8658-Beschleunigungsmesser
  • Projekt 5– Pfeil immer nach oben (Orientierungszeiger mit QMI8658)
  • Projekt 6– Zielspiel mit Summer und Neigungssteuerung

Wenn Sie an irgendeinem Punkt nicht weiterkommen, vergleichen Sie Ihre Einstellungen mit den unten für jedes Projekt bereitgestellten Codeausschnitten.

Einleitung

Die Projekte beginnen mit der einfachstmöglichen Animation (ein einzelner sich bewegender Punkt) und fügen nach und nach Text, Wi-Fi-Steuerung und schließlich sensor-basierte Interaktion unter Verwendung des QMI8658-Beschleunigungsmessers hinzu. Am Ende werden Sie verstehen, wie Sie die LED-Matrix steuern und auf die Ausrichtung des Boards reagieren können.

Installieren von ESP32-S3 Boards in der Arduino IDE

Bevor Sie Code hochladen, installieren Sie die offizielle ESP32-Board-Unterstützung in der Arduino-IDE und wählen Sie ein ESP32-S3-Board-Profil aus (zum Beispiel ein ESP32-S3 Dev Module). Dadurch wird sichergestellt, dass die richtige Flash-Größe, Frequenz und USB-Einstellungen beim Kompilieren und Hochladen angewendet werden.

Installieren der erforderlichen Bibliotheken

Die folgenden Bibliotheken werden für diese Projekte benötigt:

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

Installieren Sie sie einmal über den Arduino Library Manager, dann können Sie sie für alle sechs Projekte wiederverwenden.

Über den QMI8658-Beschleunigungssensor

Der QMI8658 ist ein 6-Achsen-IMU, der einen 3-Achsen-Beschleunigungssensor und einen 3-Achsen-Gyroskop kombiniert. In diesen Projekten werden die Beschleunigungssensorwerte verwendet, um die Neigung und Ausrichtung der Platine zu erfassen.

Achsenkonvention, die in allen Projekten verwendet wird:

  • X– links / rechts
  • Y– vorwärts / rückwärts
  • Z– vertikal (oben / unten)

Bei allen neigungsbasierten Projekten konfigurieren Sie den Beschleunigungsmesserbereich und die Ausgabedatenrate einmal und lesen dann die Werte, um einen Punkt zu bewegen, einen Pfeil auszurichten oder ein Spiel zu steuern.


// 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
    

Projekt 1 – Bewegender Punkt (Grundlegende Matrix-Einstellungen)

Projekt 1 ist eine einfache Animation eines sich bewegenden Punkts, die Ihre LED-Matrix-Verkabelung und die grundlegenden NeoMatrix-Einstellungen überprüft. Sie definieren die Matrixabmessungen, den Daten-Pin, die Helligkeit und die Bewegungsgeschwindigkeit des Punkts.

 

|||Haupteinstellungen


// 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
    

Durch ÄndernP1_DOT_COLORundP1_STEP_DELAY_MS, können Sie schnell verschiedene Farben und Animationsgeschwindigkeiten testen.

Projekt 2 – Textlauf

Projekt 2 zeigt Lauftext an, wie zum BeispielRobojax. Sie kontrollieren die Nachricht selbst, die Scrollrichtung, die Textfarbe und die Geschwindigkeit. Dieses Projekt führt Textwiedergabe auf einer sehr kleinen Matrix ein.

|||Haupteinstellungen


// 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
    

Wenn Sie sich später entscheiden, vertikal zu scrollen (nach oben oder unten), setzen SieP2_SCROLL_DIR_Xzu0und verwendenP2_SCROLL_DIR_Ystattdessen.

Projekt 3 – Mobiltelefon-Text (Wi-Fi-gesteuerte Nachricht)

Projekt 3 verwandelt den ESP32-S3 in einen kleinen Webserver. Man verbindet sich über WLAN mit dem Board, öffnet seine Webseite und gibt eine Nachricht ein. Der Text, die Farbe und die Scrollgeschwindigkeit werden dann verwendet, um denselben Texteffekt in Echtzeit auf der Matrix abzuspielen.

ESP32-S3 RGB-Matrix-Mobiltelefon-Text

Wi-Fi- und Texteinstellungen


// 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;
    

Auf der Webseite wählt der Benutzer die Richtung und Geschwindigkeit. Ihr Code aktualisiert einfachP3_scrollDirectionundP3_SCROLL_DELAY_MSbasierend auf den ausgewählten Optionen.

Projekt 4 – Tilt Dot (unter Verwendung des QMI8658)

Projekt 4 liest den QMI8658-Beschleunigungssensor und bewegt einen einzelnen Punkt entsprechend der Neigung des Boards auf der Matrix. Wenn das Board flach liegt, ist der Punkt in der Mitte. Durch Neigen des Boards bewegt sich der Punkt in diese Richtung.

`

Matrix- und Neigungseinstellungen


// 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
    

In Ihrem Code begrenzen Sie die Beschleunigungsmesserwerte auf einen Bereich wie[-1, 1], multiplizieren Sie sie mitP4_TILT_SCALE_XundP4_TILT_SCALE_Y, und fügen Sie sie den Mittelpunktskoordinaten hinzu. Wenn sich die Bewegung umgekehrt anfühlt, kehren Sie einfach das Vorzeichen um.

Projekt 5 – Pfeil immer nach oben

Projekt 5 zeigt einen Pfeil auf der 8×8-Matrix an, der immer zur "Oben"-Seite des Boards zeigt. Wenn Sie das Board drehen, dreht sich der Pfeil so, dass er auf die Seite zeigt, die nach oben weist.

ESP32-S3-Mtrix - Immer Aktiv

Pfeil- und Ausrichtungs-Einstellungen


// 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
*/
    

Die tatsächliche Zeichnung des Pfeils wird implementiert mitmatrix.drawPixel()undmatrix.drawLine(). Der entscheidende Teil ist die Entscheidung, welche Pfeilausrichtung basierend auf den definierten Neigungszonen verwendet werden sollP5_TILT_THRESHOLD_LOWundP5_TILT_THRESHOLD_HIGH.

ESP32 S3 Matrix zeigt grünes Herz an

Projekt 6 – Zielspiel (Neigungssteuerung)

Projekt 6 ist ein kleines Spiel, bei dem du einen Spielerpunkt mit dem Beschleunigungsmesser steuerst, versuchst, ihn auf einen Zielpixel zu bewegen und sowohl von der Matrix als auch von einem Summer eine Rückmeldung bekommst, wenn du das Ziel triffst.

Spiel- und Summer-Einstellungen


// 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
    

In der Spiel-Logik wirst du:

  • Lies den Beschleunigungssensor aus und bewege den Spielerpunkt um einen skalierten Betrag.
  • Klemme die Spielerposition innerhalb des 8 × 8 Rasters fest.
  • Überprüfen Sie, ob die Spielerposition mit der Zielposition übereinstimmt (oder innerhalb des erlaubten Abstands liegt).
  • Bei Treffer, flashe die Matrix mitP6_HIT_FLASH_COLORund aktivieren Sie den Summer mitP6_BUZZER_ON_MSundP6_BUZZER_OFF_MS.
  • Dann bewege das Ziel zu einer neuen zufälligen Position und fahre fort.

Steckkarte

ESP32 S3 Matrix Pinbelegung

Fazit

Diese sechs Projekte decken die wesentlichen Bausteine für die Arbeit mit der Waveshare ESP32-S3 RGB-LED-Matrix ab: grundlegende Pixelsteuerung, Lauftext, WiFi-basierte Interaktion sowie neigungsbasierte Grafiken und Spiele unter Verwendung des QMI8658-Beschleunigungssensors.

Sie können diese Ideen kombinieren und anpassen, um Ihre eigenen Projekte zu erstellen, wie zum Beispiel Anzeigetafeln, kleine Statusdisplays, Minispiele oder Benachrichtigungspanels, die alle durch Neigung, Berührung oder Nachrichten von Ihrem Telefon oder Computer gesteuert werden.

Bilder

ESP32 S3 Matrix  pin out
ESP32 S3 Matrix pin out
ESP32 S3 Matrix displaying green heart
ESP32 S3 Matrix displaying green heart
ESP32 S3 Matrix displaying rainbow heart
ESP32 S3 Matrix displaying rainbow heart
ESP32-S3 RGB Matrix- Mobile Phone Text
ESP32-S3 RGB Matrix- Mobile Phone Text
ESP32-S3-Mtrix - Alway Up
ESP32-S3-Mtrix - Alway Up
799-ESP32-S3 RGB LED Matrix Project 1 - Dot
Sprache: C++
Kopiert!

Dinge, die Sie vielleicht brauchen

Ressourcen & Referenzen

Dateien📁

Fritzing-Datei