Auf YouTube ansehen

ESP32-S3 RGB-LED-Matrix-Projekt 3 - Text vom Mobiltelefon

Projekt 3 - Steuerungsmatrix Text von Ihrem Telefon (HTTP-Text)

In diesem Projekt hostet die ESP32-S3 RGB LED-Matrix eine kleine Webseite, damit Sie den laufenden Text, die Farbe, die Richtung und die Geschwindigkeit direkt von Ihrem Telefon oder Computer aus ändern können. Sie benötigen keine separate App - nur einen Webbrowser. Dies macht das Modul zu einem kleinen Wi-Fi-Textdisplay, das Sie in Echtzeit aktualisieren können.

Alle sechs Projekte in dieser Reihe werden in einem YouTube-Video erklärt und demonstriert. Dasselbe Video ist auf dieser Seite eingebettet, sodass Sie genau sehen können, wie die Web-Oberfläche aussieht und wie sich der Text sofort auf der Matrix aktualisiert. Der vollständige Quellcode für dieses Projekt wird automatisch unter dem Artikel angezeigt, und Sie können das ESP32-S3 RGB-LED-Matrixmodul in den unter dem Code-Bereich aufgeführten Affiliate-Shops erwerben.

In diesem Artikel konzentrieren wir uns darauf, wie die Netzwerklogik funktioniert (Heim-WLAN vs. Zugangspunkt) und welche Einstellungen Sie im Code ändern können, um das Verhalten anzupassen.

ESP32-S3 RGB-LED-Matrixmodul Übersicht

Die Hardware ist dieselbe wie bei allen anderen Projekten dieser Reihe: ein ESP32-S3-Mikrocontroller-Board mit einer integrierten 8×8 RGB-LED-Matrix und einem QMI8658C-Bewegungssensor auf der Rückseite. Der USB-C-Anschluss wird für Stromversorgung und Programmierung verwendet, und Pins um die Ränder sind weiterhin für andere IO verfügbar.:contentReference[oaicite:0]{index=0}

• ESP32-S3- Wi-Fi- und Bluetooth-fähiger Mikrocontroller.
• 8×8 RGB-Matrix- 64 adressierbare RGB-LEDs für Text und Grafiken.
• QMI8658C Beschleunigungssensor- verwendet in den Tilt- und Spielprojekten.
• USB-Anschluss- versorgt das Board mit Strom und lädt Skizzen von der Arduino IDE hoch.
• Freiliegende Pins- zusätzliche Sensoren oder Aktuatoren zulassen, falls erforderlich.
• Boot-/Reset-Tasten- zum Hochladen der Firmware und zum Neustarten.

Für Projekt 3 ist das wichtigste Merkmal das Wi-Fi des ESP32, das es der Platine ermöglicht, als winziger Webserver für die Textsteuerungsseite zu fungieren.:contentReference[oaicite:1]{index=1}

Im Video behandelte Projekte (Zeitstempel)

Das eine Video für diese Reihe behandelt alle sechs Projekte. Zur schnellen Orientierung:

• 00:00- Einführung
• 02:01- ESP32-Boards installieren
• 03:32- Bibliotheken installieren
• 05:32- Projekt 1: Bewegender Punkt
• 11:11- Projekt 2: Textlauf
• 12:59-Projekt 3: HTTP-Text (dieses Projekt)
• 16:41- Projekt 4: Tilt Dot
• 18:55- Projekt 5: Pfeil nach oben
• 20:02- Projekt 6: Zielspiel

Wir empfehlen Ihnen, den Abschnitt HTTP-Text im Video anzusehen, während Sie mit diesem Artikel arbeiten. Das Video zeigt, wie die Webseite vom ESP32 generiert wird und wie Änderungen an Text, Farbe und Geschwindigkeit sofort auf der LED-Matrix angezeigt werden.:contentReference[oaicite:2]{index=2}

ESP32-Boards im Arduino IDE installieren

Wenn Sie bereits die Projekte 1 oder 2 abgeschlossen haben, ist das Board-Setup erledigt und Sie können diesen Abschnitt überspringen. Andernfalls folgen Sie diesen Schritten in der Arduino IDE:

1. ÖffnenFile > Preferencesund die URL der ESP32-Boards zu "Zusätzliche Board-Manager-URLs" hinzufügen.
2. Gehe zuTools > Board > Boards Manager…, suchen nachESP32, und installieren Sie das offizielle ESP32-Paket.
3. Wählen Sie das richtige ESP32-S3 RGB-Matrix-Board ausTools > Board.
4. Schließen Sie das Modul über USB an und wählen Sie den richtigen seriellen Port aus unterTools > Port.

Ohne die richtige Unterstützung für das ESP32-Board und den korrekten Port wird der Webserver-Sketch nicht hochgeladen.

Installation von NeoMatrix und erforderlichen Bibliotheken

Dieses Projekt verwendet dieselben Bibliotheken wie das vorherige Textlaufprojekt:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

Über den Bibliotheksmanager installieren:

1. ÖffnenSketch > Include Library > Manage Libraries….
2. Suche nachAdafruit NeoMatrixund klickenInstallieren.
3. Akzeptieren Sie die Installation von Abhängigkeiten (Adafruit GFXundAdafruit NeoPixel).

Sobald installiert, sollten Sie die NeoMatrix- und NeoPixel-Beispielskizzen unter sehen.File > Examples.

Zwei Wi-Fi-Modi in Projekt 3

Das wichtigste Konzept in diesem Projekt ist, dass der ESP32 arbeiten kann inzwei verschiedene Modi:

1. Station (STA) Modus- der ESP32 verbindet sich mit Ihrem vorhandenen WLAN-Netzwerk zu Hause.
2. Zugangspunkt (AP) Modus- der ESP32 erstellt sein eigenes Wi-Fi-Netzwerk, wenn das Heim-Wi-Fi nicht verfügbar ist.

Beide Modi verwenden dasselbe Webinterface: eine von dem ESP32 selbst bereitgestellte HTML-Seite, auf der Sie den Text, die Farbe, die Scrollrichtung und die Geschwindigkeit ändern können.:contentReference[oaicite:3]{index=3}

Modus 1 - Mit dem Heim-WLAN verbinden (Station Mode)

Im Stationmodus verbindet sich der ESP32 mit Ihrem WLAN-Netzwerk zu Hause oder im Büro. Dies ist der bevorzugte Modus, wenn Ihr Router verfügbar ist, weil:

• Ihr Telefon und Computer sind bereits mit demselben Wi-Fi-Netzwerk verbunden.
• Sie können Ihren Browser auf die IP-Adresse des ESP32 richten und den Text von jedem Gerät in diesem Netzwerk steuern.

Im Einstellungsbereich des Sketche geben Sie Ihre Wi-Fi-SSID und Ihr Passwort ein:

// Home Wi-Fi credentials (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";
const char* WIFI_PASS = "YourHomePassword";

Nachdem das Board hochgefahren ist, versucht es, sich zu verbinden mitWIFI_SSIDWenn erfolgreich, gibt der Code die zugewiesene IP-Adresse im Serial Monitor aus, zum Beispiel:

Connected to WiFi
IP address: 192.168.1.16

Um den Text zu steuern:

1. Stellen Sie sicher, dass Ihr Telefon oder PC mit demselben Wi-Fi-Netzwerk verbunden ist (zum Beispiel,YourHomeWiFi).
2. Öffnen Sie einen Browser und geben Sie die gedruckte IP-Adresse ein, wie z. B.http://192.168.1.16/. :contentReference[oaicite:4]{index=4}
3. Die Steuerseite wird angezeigt, die es Ihnen ermöglicht, Text einzugeben, Farbe auszuwählen, Richtung zu wählen und die Scrollgeschwindigkeit anzupassen.

Modus 2 - Eigenständiger Zugangspunkt (AP-Modus)

Wenn der ESP32 sich nicht mit Ihrem Heim-WLAN verbinden kann (falsches Passwort, Netzwerk nicht verfügbar oder Sie verwenden das Modul im Freien), wechselt der Sketch automatisch in den Access Point-Modus. Im AP-Modus wird der ESP32 selbst zu einem Wi-Fi-Hotspot mit eigenem Netzwerkname und Passwort.

In diesem Projekt sind die AP-Einstellungen festgelegt auf:

// Access Point (AP) credentials (fallback mode)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

Wenn der Station-Modus fehlschlägt, wechselt das Modul in den AP-Modus und beginnt, ein Wi-Fi-Netzwerk mit dem Namen zu senden.ESP32Um die Matrix zu steuern:

1. Öffnen Sie auf Ihrem Telefon oder Computer die WLAN-Einstellungen und verbinden Sie sich mit dem Netzwerk.ESP32.
2. Geben Sie das Passwort einPasswort(wie im Gesetz definiert).
3. Sobald Sie verbunden sind, öffnen Sie einen Browser und gehen Sie zuhttp://192.168.4.1/(die Standard-IP für den ESP32-AP-Modus).
4. Die gleiche Steuerseite erscheint, die es Ihnen ermöglicht, Text, Farbe, Geschwindigkeit und Richtung zu ändern.

Dieses Fallback-Verhalten macht das Projekt überall nützlich: zu Hause, im Labor oder in einer Demoumgebung, in der kein Router verfügbar ist.

Projekt 3 - Haupteinstellungen im Code

Der vollständige HTTP-Textentwurf ist unter diesem Artikel von der Website geladen. Hier dokumentieren wir nur die wichtigsten Konfigurationsoptionen, die Sie wahrscheinlich bearbeiten werden.

Wi-Fi- und Access Point-Einstellungen

Am oberen Rand der Skizze finden Sie den Bereich für die Wi-Fi-Konfiguration. Ändern Sie nur die Zugangsdaten des Stationsnetzwerks (heimisches Wi-Fi); die AP-Einstellungen bleiben normalerweise auf den Standardwerten:

// ---------- Wi-Fi SETTINGS ----------

// Home Wi-Fi (Station mode)
const char* WIFI_SSID = "YourHomeWiFi";      // put your router SSID here
const char* WIFI_PASS = "YourHomePassword";  // put your router password here

// Fallback Access Point (AP mode)
const char* AP_SSID = "ESP32";               // fixed AP name
const char* AP_PASS = "password";            // fixed AP password

Verhalten:

• WennWIFI_SSIDundWIFI_PASSsind korrekt und das Netzwerk ist verfügbar → ESP32 verbindet sich als normales Wi-Fi-Gerät (Stationmodus).
• Wenn die Verbindung nach einem Timeout fehlschlägt → ESP32 startet sein eigenes AP mitAP_SSIDundAP_PASS.

Matrix-Pin, Größe und Helligkeit

Diese Einstellungen sind die gleichen wie bei den vorherigen Projekten:

// Matrix configuration
const int MATRIX_PIN    = 14;   // RGB matrix data pin
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// Overall display brightness (0–255)
uint8_t matrixBrightness = 40;  // adjust for your environment

BehaltenMATRIX_PINan14für dieses Brett. Sie können erhöhenmatrixBrightnessWenn Sie mehr Licht benötigen, sind jedoch niedrigere Werte angenehmer für das Nahsehen.

Standardtext und Bildlauf-Einstellungen

Wenn das Board startet, wird eine Anfangsnachricht angezeigt, bis Sie die Webseite öffnen und eine neue eingeben. Sie können den Standardtext in der Konfiguration ändern:

// Default message shown at startup
String currentText = "Robojax";   // overwrite from web UI later

Der Rest des Scrollverhaltens wird von einer Reihe von Variablen gesteuert, die über die Webschnittstelle aktualisiert werden:

// Scroll delay in milliseconds (lower = faster)
int scrollDelayMs = 50;

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

Die Webseite sendet neue Werte basierend auf den Slider- und Button-Auswahlen. Von der Arduino-Seite aus müssen Sie nur wissen, dass:

• AbnehmendscrollDelayMslässt den Text schneller bewegen.
• SteigendscrollDelayMsverlangsamt die Bewegung.
• ÄndernscrollDirectionwechseln zwischen links, rechts, oben oder unten Scrollmodi.

Textfarbe (Über die Webseite gesteuert)

Die Farbe des Textes wird durch drei Werte von 0-255 (rot, grün, blau) gesteuert. Sie werden aktualisiert, wann immer Sie eine neue Farbe auf der Webseite wählen.

// Current text color (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

Wenn Sie im Browser eine Farbe auswählen und auf Anwenden klicken, analysiert der ESP32 die RGB-Werte und aktualisiert diese drei Variablen; der Text ändert sich sofort in der Matrix. In dem Video wird dieses Verhalten mit mehreren Farbänderungen demonstriert, einschließlich Beispielen in Rot, Grün und Blau.:contentReference[oaicite:5]{index=5}

Zusammenfassung

Projekt 3 verwandelt Ihre ESP32-S3 RGB-LED-Matrix in ein vollständig kabelloses Textdisplay, das Sie mit jedem Gerät mit einem Webbrowser steuern können. Der Sketch ist darauf ausgelegt, robust zu sein:

• Es versucht zunächst, sich mit Ihrem Heim-Wi-Fi über die SSID und das Passwort zu verbinden, die Sie konfiguriert haben.
• Wenn das fehlschlägt, wird es automatisch zu einem Zugangspunkt mit dem NamenESP32und Passwortpassword.
• In beiden Modi zeigt das Öffnen der korrekten IP-Adresse in einem Browser dieselbe Steuerseite für Text, Farbe, Richtung und Geschwindigkeit an.

Der vollständige HTTP-Textcode ist unter diesem Artikel verfügbar (automatisch auf der Website geladen). Für eine vollständige Schritt-für-Schritt-Anleitung und eine Live-Demonstration, wie sich der Text in Echtzeit aktualisiert, sollten Sie sich den Abschnitt Projekt 3 im Video ansehen. Wenn Sie das Projekt selbst erstellen möchten, können Sie auch das ESP32-S3 RGB LED Matrix-Modul über die unter dem Code aufgeführten Affiliate-Links kaufen.

Bilder

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB Matrix- Mobile Phone Text