Suchcode

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++
/*
 * Projekt 1: der Punkt - ESP32-S3 RGB LED-Matrix (Waveshare)
 * 
 * dialyse einen Punkt auf dem Bildschirm und bewegt ihn
 * 
 * ▶️ Video-Tutorial:
 * https://youtu.be/JKLuYrRcLMI
 * 
 * 📚⬇️ Ressourcen & Code-Seite:
 * https://robojax.com/RJT829
 * 
 * QMI8658_RGB_2
 */
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Erforderlich für 16 MHz Adafruit Trinket
#endif

 // Welcher Pin am Arduino ist mit den NeoPixels verbunden?
#define PIN        14 // Ändern Sie dies auf 1 auf Trinket oder Gemma.

 // Wie viele NeoPixels sind mit dem Arduino verbunden?
#define NUMPIXELS 64 // Beliebte NeoPixel-Ringgröße

 // Beim Einrichten der NeoPixel-Bibliothek geben wir an, wie viele Pixel,
 // und welchen Pin man verwenden sollte, um Signale zu senden. Beachten Sie, dass für ältere NeoPixel
 // Streifen, bei denen Sie möglicherweise den dritten Parameter ändern müssen – siehe die
 // strandtest-Beispiel für weitere Informationen zu möglichen Werten.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_RGB + NEO_KHZ800);

#define DELAYVAL 50 // Zeit (in Millisekunden), um zwischen den Pixeln zu pausieren

void setup() {
 // Diese Zeilen dienen speziell zur Unterstützung des Adafruit Trinket 5V 16 MHz.
 // Jede andere Platine, Sie können diesen Teil entfernen (aber es schadet nicht, ihn zu lassen):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
#endif
 // ENDE des trinketspezifischen Codes.

  pixels.begin(); // INITIALIZE NeoPixel-Streifenobjekt (ERFORDERLICH)
}

void loop() {
  pixels.clear(); // Setzen Sie alle Pixel-Farben auf 'aus'

 // Der erste NeoPixel in einem Strang ist #0, der zweite ist 1, und so weiter.
 // zum Zähler der Pixel minus eins.
  for(int i=0; i<NUMPIXELS; i++) { // Für jeden Pixel...

 // pixels.Color() nimmt RGB-Werte von 0,0,0 bis 255,255,255 an.
 // Hier verwenden wir eine mäßig helle grüne Farbe:
    pixels.setPixelColor(i, pixels.Color(255, 255, 0));

    pixels.show(); // Sende die aktualisierten Pixel-Farben an die Hardware.

    delay(DELAYVAL); // Beispiel für eine Pause vor dem nächsten Durchgang der Schleife
    pixels.clear();
  }



}

Dinge, die Sie vielleicht brauchen

Ressourcen & Referenzen

Dateien📁

Fritzing-Datei