ESP32-S3 RGB LED-matrixproject 2 - Scrollende tekst

ESP32-S3 RGB LED-matrixproject 2 - Scrollende tekst

Project 2 – Tekstscrollen op ESP32-S3 RGB LED-matrix

In dit project veranderen we de ESP32-S3 RGB LED-matrix in een klein tekstbanner. Een kort bericht (bijvoorbeeld Robojax) scrollt over het 8×8 RGB-display, en je kunt eenvoudig de tekst, kleur, helderheid en scrollsnelheid rechtstreeks in de code wijzigen. Dit is erg handig voor eenvoudige meldingen, naamkaartjes of kleine statusberichten.

Alle zes projecten in deze serie worden gedemonstreerd en uitgelegd in één YouTube-video. Dezelfde video is op deze pagina ingesloten, zodat je precies kunt zien hoe het tekstscrollen er in realtime uitziet en hoe elke instelling de animatie beïnvloedt. De volledige code voor dit project wordt automatisch onder het artikel geladen, en je kunt de ESP32-S3 RGB LED-matrixmodule kopen bij aangesloten winkels die onder de codesectie worden vermeld.

Dit project bouwt voort op de basis van Project 1 (bewegende stip en kleurbesturing) en voegt tekstweergave en scrollen toe met behulp van de NeoMatrix-bibliotheek.

Overzicht van de ESP32-S3 RGB LED-matrixmodule

De hardware is hetzelfde voor alle zes projecten: een ESP32-S3-microcontroller met Wi-Fi en Bluetooth, een 8×8 RGB-LED-matrix (64 adresseerbare RGB-LED's), een QMI8658C-versnellingsmeter, USB-poort en toegankelijke IO-pinnen.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – hoofd-CPU met Wi-Fi/BLE voor geavanceerde projecten.
• 8×8 RGB-matrix – 64 RGB-LED's voor pictogrammen, tekst en animaties.
• QMI8658C-versnellingsmeter – gebruikt in latere projecten voor kanteling en oriëntatie.
• USB-poort – gebruikt voor voeding en programmering via Arduino IDE.
• Blootliggende pinnen – laten je het bord gebruiken als een normale ESP32 voor andere IO.
• Boot-/resetknoppen – voor firmware-upload en het opnieuw starten van sketches.

In Project 2 richten we ons voornamelijk op de matrix en de NeoMatrix-tekstfuncties. De versnellingsmeter wordt nog niet gebruikt, maar hetzelfde bord zal ook alle latere interactie- en gameprojecten aan kunnen.

Projecten behandeld in de video (tijdstempels)

De video die bij dit artikel hoort, behandelt alle zes projecten. De geschatte tijdstempels zijn:

• 00:00 – Inleiding
• 02:01 – ESP32-borden installeren
• 03:32 – Bibliotheken installeren
• 05:32 – Project 1: Bewegende stip
• 11:11 – Project 2: Tekstscrollen
• 12:59 – Project 3: HTTP-tekst
• 16:41 – Project 4: Kantelstip
• 18:55 – Project 5: Pijl omhoog
• 20:02 – Project 6: Doelspel

Je wordt aangemoedigd om de video te bekijken terwijl je dit artikel leest. Het laat het tekstscrollen live op de LED-matrix zien en doorloopt alle stappen in de Arduino IDE.

ESP32-borden installeren in Arduino IDE

Voordat je de tekstscrollcode uitvoert, moet je ervoor zorgen dat de ESP32-ondersteuning is geïnstalleerd in je Arduino IDE:

1. Open Bestand > Voorkeuren en voeg de ESP32-borden-URL toe aan “Extra boards manager-URL's”.
2. Ga naar Extra > Bord > Boards manager…, zoek naar ESP32 en installeer het officiële ESP32-pakket.
3. Selecteer je ESP32-S3 RGB-matrixbord onder Extra > Bord.
4. Verbind de module via USB en kies de juiste COM-/seriële poort onder Extra > Poort.

Als het bordtype of de poort niet correct is, zal de sketch niet uploaden.

NeoMatrix en vereiste bibliotheken installeren

Het tekstscrollen wordt geïmplementeerd met Adafruit NeoMatrix en de bijbehorende afhankelijkheden. In de video worden ze geïnstalleerd via Bibliotheekbeheer.

Je hebt nodig:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX-bibliotheek

1. Open Sketch > Bibliotheek gebruiken > Bibliotheken beheren….
2. Zoek naar Adafruit NeoMatrix en klik op Installeren.
3. Wanneer daarom wordt gevraagd, sta toe dat Adafruit GFX en Adafruit NeoPixel als afhankelijkheden worden geïnstalleerd.

Als de installatie succesvol is, zou je voorbeeldsketches moeten zien onder Bestand > Voorbeelden > Adafruit NeoMatrix en Bestand > Voorbeelden > Adafruit NeoPixel.

Project 2 – Code-instellingen (tekstscrollen)

De volledige tekstscrollsketch wordt automatisch onder dit artikel op de website geladen. Hier richten we ons alleen op de configuratiewaarden die je waarschijnlijk wilt bewerken: pin, matrixgrootte, helderheid, tekstreeks, kleur, scrollsnelheid en optionele richting.

Alle onderstaande fragmenten zijn afkomstig uit de configuratiesectie bovenaan de sketch, zodat je het gedrag snel kunt aanpassen zonder de hoofdlogica aan te raken.

Matrixpin en -grootte

Net als in Project 1 is de RGB-matrix verbonden met GPIO 14 en bevat deze 64 LED's (8×8). Zorg ervoor dat deze twee regels overeenkomen met je module:

 // Pin verbonden met 8×8 RGB-matrix 
const int MATRIX_PIN = 14; // moet 14 zijn op deze module // Matrixgrootte (breedte en hoogte)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Als je een voorbeeld uit de NeoMatrix-bibliotheek kopieert, kan deze een andere pin of grootte gebruiken; verander deze altijd zodat ze overeenkomen met dit bord.

Helderheid van de tekst

Helderheid wordt meestal geregeld met een waarde tussen 0 en 255, waarbij 0 uit is en 255 maximale helderheid. Een gemiddelde waarde is meestal voldoende:

// Algemene matrixhelderheid (0–255) 
uint8_t matrixBrightness = 40; // comfortabele helderheid binnenshuis // In 
setup(): 
matrix.setBrightness(matrixBrightness); 

Als u het paneel in een heldere omgeving of voor een korte tijd gebruikt, kunt u deze waarde verhogen, maar vermijd deze te hoog in te stellen als u dicht bij het display bent.

Tekst om te laten scrollen

Het daadwerkelijke bericht wordt opgeslagen als een string. In de video is de voorbeeldtekst Robojax. U kunt dit wijzigen naar elk kort label of bericht dat u wilt:

 // Tekst om te scrollen op de 8×8 matrix const char scrollText[] = "Robojax";
 // wijzig dit naar uw bericht 

Houd er rekening mee dat dit slechts een 8×8 matrix is, dus zeer lange berichten zullen langer duren om te scrollen en kunnen moeilijk leesbaar worden.

Tekstkleur (RGB-waarden)

De kleur van de scrollende tekst wordt ingesteld door rode, groene en blauwe componenten (0–255). Bijvoorbeeld, puur rood is (255, 0, 0), puur groen is (0, 255, 0), en puur blauw is (0, 0, 255). In de sketch ziet u iets als:

 // Tekstkleur (R, G, B) uint8_t textRed = 255; // rode component uint8_t textGreen = 0; // groene component uint8_t textBlue = 0; // blauwe component 

Om de kleur te wijzigen:

• Geel: textRed = 255; textGreen = 255; textBlue = 0;
• Cyaan: textRed = 0; textGreen = 255; textBlue = 255;
• Wit: textRed = 255; textGreen = 255; textBlue = 255;

De video demonstreert ook het gebruik van een online kleurkiezer om de RGB-waarden te vinden en deze vervolgens in de code in te voeren.:contentReference[oaicite:1]{index=1}

Scrollsnelheid (vertraging tussen frames)

De scrollsnelheid wordt geregeld door een vertragingswaarde in milliseconden tussen elke update-stap. Een kleinere waarde laat de tekst sneller bewegen; een grotere waarde vertraagt het. In de sketch vindt u een variabele zoals:

// Vertraging tussen scrollstappen (in milliseconden) int scrollDelayMs = 50; 
// kleiner = sneller, groter = langzamer 

Voorbeelden:

• scrollDelayMs = 20; → snel scrollen.
• scrollDelayMs = 50; → gemiddelde snelheid (vergelijkbaar met de video).
• scrollDelayMs = 100; of meer → langzaam, gemakkelijk leesbaar scrollen.

Binnen de loop() wordt deze waarde gebruikt in een delay(scrollDelayMs);-aanroep na elke hertekening van de tekstpositie.

Scrollrichting (optioneel)

In het “basis tekst scroll”-project scrollen we meestal naar links, maar het is nuttig om een symbolische richtingsvariabele te definiëren zodat u later met andere richtingen kunt experimenteren (links, rechts, omhoog, omlaag).

Een veelvoorkomend patroon is:

 // Scrollrichting selectie // 0 = links, 1 = rechts, 2 = omhoog, 3 = omlaag 
int scrollDirection = 0; // standaard: scroll naar links 

De hoofdloop controleert vervolgens scrollDirection en beweegt de tekst in de gekozen richting. Voor Project 2 kunt u het op 0 (links) laten, maar als u de sketch later uitbreidt, kunt u voorwaarden toevoegen zoals:

 if (scrollDirection == 0) { 
// beweeg tekst naar links 
} else if (scrollDirection == 1) { 
// beweeg tekst naar rechts 
} else if (scrollDirection == 2) { 
// beweeg tekst omhoog
 } else if (scrollDirection == 3) { 
// beweeg tekst omlaag 
}
 

Voor dit artikel documenteren we alleen de instelling. De volledige implementatie maakt deel uit van de code die onder het artikel is geladen.

Samenvatting

Project 2 verandert uw ESP32-S3 RGB LED Matrix in een eenvoudige maar opvallende tekstweergave. Door slechts een paar variabelen bovenaan de code te bewerken, kunt u snel wijzigen:

• Welk bericht wordt weergegeven (scrollText).
• De kleur van de tekst (textRed, textGreen, textBlue).
• De helderheid van de matrix (matrixBrightness).
• De snelheid van het scrollen (scrollDelayMs).
• De richting van het scrollen (scrollDirection, als u ervoor kiest om dit te gebruiken).

De volledige sketch voor dit project is beschikbaar onder dit artikel (automatisch geladen door de website). Voor gedetailleerde stapsgewijze configuratie en een live demonstratie van de scrollende tekst in actie, zorg ervoor dat u het bijbehorende gedeelte van de video bekijkt. Als u het project leuk vindt en het zelf wilt bouwen, kunt u ook de ESP32-S3 RGB LED Matrix-module kopen via de affiliate-links die onder de code staan vermeld.

Afbeeldingen

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

/* 
  Project 2: Text scroll – ESP32-S3 RGB LED Matrix (Waveshare)

  This sketch displays the scrolling text on 8x8 matrix

  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📚⬇️ Resources & Code Page:
  https://robojax.com/RJT829

  QMI8658_RGB_2
*/
#include <Arduino.h>
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

// -------- LED MATRIX SETUP --------
#define MATRIX_PIN    14
#define MATRIX_WIDTH  8
#define MATRIX_HEIGHT 8

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(
  MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
  NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB + NEO_KHZ800
);

// =========================
// USER SETTINGS
// =========================

// Text to scroll
const char* MESSAGE = "ROBOJAX ";

// Brightness (0–255)
uint8_t BRIGHTNESS = 10;

// Scroll speed (milliseconds between steps)
// Smaller = faster
uint16_t SCROLL_DELAY = 80;

// Scroll direction
enum ScrollDir {
  SCROLL_LEFT,
  SCROLL_RIGHT,
  SCROLL_UP,
  SCROLL_DOWN
};

// Change this to set direction
ScrollDir DIRECTION = SCROLL_LEFT;

// Text color (set RGB here)
uint8_t COLOR_R = 255; 
uint8_t COLOR_G = 0;
uint8_t COLOR_B = 0;

// =========================
// INTERNAL STATE
// =========================
uint16_t textColor;
int16_t posX, posY;
int16_t textWidth, textHeight;
uint32_t lastStepTime = 0;

// Compute text size in pixels for default 5x7 font
void computeTextSize() {
  int16_t x1, y1;
  uint16_t w, h;
  matrix.getTextBounds((char*)MESSAGE, 0, 0, &x1, &y1, &w, &h);
  textWidth  = (int16_t)w;
  textHeight = (int16_t)h;
}

// Initialize starting position based on direction
void resetScrollPosition() {
  switch (DIRECTION) {
    case SCROLL_LEFT:
      // Start just off the right edge
      posX = matrix.width();
      posY = 0; // top row for 8x8
      break;

    case SCROLL_RIGHT:
      // Start just off the left edge
      posX = -textWidth;
      posY = 0;
      break;

    case SCROLL_UP:
      posX = 0;
      posY = matrix.height(); // start below bottom
      break;

    case SCROLL_DOWN:
      posX = 0;
      posY = -textHeight; // start above top
      break;
  }
}

// One scroll step
void stepScroll() {
  // Move position
  switch (DIRECTION) {
    case SCROLL_LEFT:
      posX--;
      if (posX < -textWidth) {
        posX = matrix.width();
      }
      break;

    case SCROLL_RIGHT:
      posX++;
      if (posX > matrix.width()) {
        posX = -textWidth;
      }
      break;

    case SCROLL_UP:
      posY--;
      if (posY < -textHeight) {
        posY = matrix.height();
      }
      break;

    case SCROLL_DOWN:
      posY++;
      if (posY > matrix.height()) {
        posY = -textHeight;
      }
      break;
  }

  // Draw frame
  matrix.fillScreen(0);
  matrix.setCursor(posX, posY);
  matrix.print(MESSAGE);
  matrix.show();
}

void setup() {
  matrix.begin();
  matrix.setBrightness(BRIGHTNESS);
  matrix.setTextWrap(false);       // No automatic wrapping
  matrix.setTextSize(1);           // Default 5x7 font
  textColor = matrix.Color(COLOR_R, COLOR_G, COLOR_B);
  matrix.setTextColor(textColor);

  computeTextSize();
  resetScrollPosition();

  matrix.fillScreen(0);
  matrix.show();
}

void loop() {
  uint32_t now = millis();
  if (now - lastStepTime >= SCROLL_DELAY) {
    lastStepTime = now;
    stepScroll();
  }
}