Dieses Tutorial ist Teil von: ESP32-S3 RGB-LED-Matrix
Ein cooles Projekt zum Nachbauen – sowohl für Spaß als auch für praktische Anwendungen – mit dem ESP32-S3 RGB-Matrix-Modul. Links zu weiteren Videos finden Sie unter diesem Artikel.
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.
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.
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.
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.
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 mit
P6_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
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.
Dieses Tutorial ist Teil von: ESP32-S3 RGB-LED-Matrix
- ESP32-S3 RGB-LED-Matrix-Projekt 2 - Lauftext
- ESP32-S3 RGB-LED-Matrix-Projekt 3 - Text vom Mobiltelefon
- ESP32-S3 RGB-LED-Matrix-Projekt 4 - Neigungspunkt
- ESP32-S3 RGB-LED-Matrix-Projekt 5 - Pfeil immer nach oben
- ESP32-S3 RGB-LED-Matrix-Projekt 6 - Cible-Spiel
- ESP32-S3 RGB-LED-Matrix Wi-Fi + NTP-Uhrzeit-Projekt - 1 Grundlegende Uhr
- ESP32-S3 RGB-LED-Matrix-Internet-Uhrprojekt - 2-Uhr mehrfarbige Zeit- und Datumsanzeige
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr-Projekt - 3 Nachtfarben mit Datum
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr-Projekt - 5 Regenbogenfarben
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr Projekt - 4 Zufallsfarben
- ESP32-S3 RGB-LED-Matrix-Test für RGB-, GRB-Einstellung
Dinge, die Sie vielleicht brauchen
-
Amazon
-
eBay
-
AliExpressESP32-S3 RGB-Matrix von AliExpress kaufen (2)s.click.aliexpress.com
-
AliExpressKaufen Sie das ESP32-S3 RGB-Matrix von AliExpress.s.click.aliexpress.com
Ressourcen & Referenzen
-
Intern🎨 Farbauswahlwerkzeugrobojax.com
Dateien📁
Fritzing-Datei
-
esp32-S3-supermini-tht fritzing part
esp32-S3-supermini-tht.fzpz0.02 MB