Projekt matrycy LED RGB ESP32-S3 2 - Przewijany tekst

Projekt matrycy LED RGB ESP32-S3 2 - Przewijany tekst

Projekt 2 – Przewijanie tekstu na ESP32-S3 RGB LED Matrix

W tym projekcie zamieniamy ESP32-S3 RGB LED Matrix w mały baner tekstowy. Krótka wiadomość (na przykład Robojax) przewija się po 8×8 wyświetlaczu RGB, a tekst, kolor, jasność i prędkość przewijania można łatwo zmienić bezpośrednio w kodzie. Jest to bardzo przydatne do prostych powiadomień, identyfikatorów lub małych komunikatów statusu.

Wszystkie sześć projektów z tej serii jest zaprezentowanych i wyjaśnionych w jednym filmie na YouTube. Ten sam film jest osadzony na tej stronie, więc możesz dokładnie zobaczyć, jak wygląda przewijanie tekstu w czasie rzeczywistym i jak każde ustawienie wpływa na animację. Kompletny kod tego projektu jest ładowany automatycznie poniżej artykułu, a moduł ESP32-S3 RGB LED Matrix można kupić w sklepach partnerskich wymienionych pod sekcją z kodem.

Ten projekt opiera się na podstawach z Projektu 1 (ruchoma kropka i sterowanie kolorami) i dodaje renderowanie tekstu oraz przewijanie przy użyciu biblioteki NeoMatrix.

Przegląd modułu ESP32-S3 RGB LED Matrix

Sprzęt jest taki sam we wszystkich sześciu projektach: mikrokontroler ESP32-S3 z Wi-Fi i Bluetooth, matryca LED RGB 8×8 (64 adresowalne diody RGB), akcelerometr QMI8658C, port USB i dostępne piny IO.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – główny procesor z Wi-Fi/BLE do zaawansowanych projektów.
• Matryca RGB 8×8 – 64 diody RGB do ikon, tekstu i animacji.
• Akcelerometr QMI8658C – używany w późniejszych projektach do wykrywania pochylenia i orientacji.
• Port USB – używany do zasilania i programowania przez Arduino IDE.
• Wyprowadzone piny – pozwalają używać płytki jak zwykłego ESP32 do innych operacji wejścia/wyjścia.
• Przyciski Boot / Reset – do wgrywania firmware i restartowania szkiców.

W Projekcie 2 skupiamy się głównie na matrycy i funkcjach tekstowych NeoMatrix. Akcelerometr nie jest jeszcze używany, ale ta sama płytka obsłuży również wszystkie późniejsze projekty interaktywne i gry.

Projekty omówione w filmie (znaczniki czasu)

Film towarzyszący temu artykułowi obejmuje wszystkie sześć projektów. Przybliżone znaczniki czasu to:

• 00:00 – Wprowadzenie
• 02:01 – Instalacja płytek ESP32
• 03:32 – Instalacja bibliotek
• 05:32 – Projekt 1: Ruchoma kropka
• 11:11 – Projekt 2: Przewijanie tekstu
• 12:59 – Projekt 3: Tekst HTTP
• 16:41 – Projekt 4: Kropka przechylana
• 18:55 – Projekt 5: Strzałka w górę
• 20:02 – Projekt 6: Gra w cel

Zachęcamy do oglądania filmu podczas czytania tego artykułu. Pokazuje on przewijanie tekstu na żywo na matrycy LED i przeprowadza przez wszystkie kroki w Arduino IDE.

Instalacja płytek ESP32 w Arduino IDE

Przed uruchomieniem kodu przewijania tekstu upewnij się, że obsługa ESP32 jest zainstalowana w Arduino IDE:

1. Otwórz Plik > Preferencje i dodaj adres URL płytek ESP32 do „Dodatkowe menedżery płytek URL”.
2. Przejdź do Narzędzia > Płytka > Menedżer płytek…, wyszukaj ESP32 i zainstaluj oficjalny pakiet ESP32.
3. Wybierz swoją płytkę ESP32-S3 RGB Matrix z Narzędzia > Płytka.
4. Podłącz moduł przez USB i wybierz właściwy port COM/szeregowy w Narzędzia > Port.

Jeśli typ płytki lub port nie są poprawne, szkic nie zostanie wgrany.

Instalacja NeoMatrix i wymaganych bibliotek

Przewijanie tekstu jest zaimplementowane przy użyciu Adafruit NeoMatrix i jego zależności. W filmie są one instalowane przez Menedżera bibliotek.

Będziesz potrzebować:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Otwórz Szkic > Dołącz bibliotekę > Zarządzaj bibliotekami….
2. Wyszukaj Adafruit NeoMatrix i kliknij Zainstaluj.
3. Gdy pojawi się monit, zezwól na instalację Adafruit GFX i Adafruit NeoPixel jako zależności.

Jeśli instalacja się powiedzie, powinieneś zobaczyć przykładowe szkice w Plik > Przykłady > Adafruit NeoMatrix i Plik > Przykłady > Adafruit NeoPixel.

Projekt 2 – Ustawienia kodu (przewijanie tekstu)

Pełny szkic przewijania tekstu jest ładowany automatycznie poniżej tego artykułu na stronie internetowej. Tutaj skupiamy się tylko na wartościach konfiguracyjnych, które prawdopodobnie będziesz chciał edytować: pin, rozmiar matrycy, jasność, ciąg tekstowy, kolor, prędkość przewijania i opcjonalny kierunek.

Wszystkie fragmenty poniżej pochodzą z sekcji konfiguracyjnej na górze szkicu, abyś mógł szybko dostosować zachowanie bez dotykania głównej logiki.

Pin i rozmiar matrycy

Podobnie jak w Projekcie 1, matryca RGB jest podłączona do GPIO 14 i zawiera 64 diody LED (8×8). Upewnij się, że te dwie linie odpowiadają Twojemu modułowi:

 // Pin podłączony do matrycy RGB 8×8 
const int MATRIX_PIN = 14; // musi być 14 na tym module // Rozmiar matrycy (szerokość i wysokość)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Jeśli kopiujesz przykład z biblioteki NeoMatrix, może on używać innego pinu lub rozmiaru; zawsze zmieniaj je, aby pasowały do tej płytki.

Jasność tekstu

Jasność jest zwykle kontrolowana wartością od 0 do 255, gdzie 0 oznacza wyłączone, a 255 maksymalną jasność. Umiarkowana wartość zwykle wystarcza:

// Ogólna jasność matrycy (0–255) 
uint8_t matrixBrightness = 40; // komfortowa jasność wewnątrz pomieszczenia // W 
setup(): 
matrix.setBrightness(matrixBrightness); 

Jeśli używasz panelu w jasnym otoczeniu lub przez krótki czas, możesz zwiększyć tę wartość, ale unikaj zbyt wysokich wartości, jeśli jesteś blisko wyświetlacza.

Tekst do przewijania

Rzeczywista wiadomość jest przechowywana jako ciąg znaków. W filmie przykładowy tekst to Robojax. Możesz go zmienić na dowolną krótką etykietę lub wiadomość:

 // Tekst do przewijania na matrycy 8×8 const char scrollText[] = "Robojax";
 // zmień to na swoją wiadomość 

Pamiętaj, że to tylko matryca 8×8, więc bardzo długie wiadomości będą przewijać się dłużej i mogą stać się trudne do odczytania.

Kolor tekstu (wartości RGB)

Kolor przewijanego tekstu jest ustawiany przez składowe czerwoną, zieloną i niebieską (0–255). Na przykład czysty czerwony to (255, 0, 0), czysty zielony to (0, 255, 0), a czysty niebieski to (0, 0, 255). W szkicu zobaczysz coś takiego:

 // Kolor tekstu (R, G, B) uint8_t textRed = 255; // składowa czerwona uint8_t textGreen = 0; // składowa zielona uint8_t textBlue = 0; // składowa niebieska 

Aby zmienić kolor:

• Żółty: textRed = 255; textGreen = 255; textBlue = 0;
• Cyjan: textRed = 0; textGreen = 255; textBlue = 255;
• Biały: textRed = 255; textGreen = 255; textBlue = 255;

Film pokazuje również użycie internetowego selektora kolorów do znalezienia wartości RGB, a następnie wprowadzenie ich do kodu.

Prędkość przewijania (opóźnienie między klatkami)

Prędkość przewijania jest kontrolowana przez wartość opóźnienia w milisekundach między każdym krokiem aktualizacji. Mniejsza wartość sprawia, że tekst porusza się szybciej; większa wartość go spowalnia. W szkicu powinieneś znaleźć zmienną taką jak:

// Opóźnienie między krokami przewijania (w milisekundach) int scrollDelayMs = 50; 
// mniejsze = szybciej, większe = wolniej 

Przykłady:

• scrollDelayMs = 20; → szybkie przewijanie.
• scrollDelayMs = 50; → średnia prędkość (podobnie jak w filmie).
• scrollDelayMs = 100; lub więcej → wolne, łatwe do odczytania przewijanie.

Wewnątrz loop() ta wartość jest używana w wywołaniu delay(scrollDelayMs); po każdym przerysowaniu pozycji tekstu.

Kierunek przewijania (opcjonalnie)

W projekcie „podstawowe przewijanie tekstu” zwykle przewijamy w lewo, ale warto zdefiniować symboliczną zmienną kierunku, abyś mógł później eksperymentować z innymi kierunkami (lewo, prawo, góra, dół).

Typowy wzorzec to:

 // Selektor kierunku przewijania // 0 = lewo, 1 = prawo, 2 = góra, 3 = dół 
int scrollDirection = 0; // domyślnie: przewijanie w lewo 

Główna pętla sprawdza następnie scrollDirection i przesuwa tekst w wybranym kierunku. Dla Projektu 2 możesz zostawić wartość 0 (lewo), ale jeśli później rozszerzysz szkic, możesz dodać warunki takie jak:

 if (scrollDirection == 0) { 
// przesuń tekst w lewo 
} else if (scrollDirection == 1) { 
// przesuń tekst w prawo 
} else if (scrollDirection == 2) { 
// przesuń tekst w górę
 } else if (scrollDirection == 3) { 
// przesuń tekst w dół 
}
 

W tym artykule dokumentujemy tylko ustawienie. Pełna implementacja jest częścią kodu załadowanego pod artykułem.

Podsumowanie

Projekt 2 zamienia Twoją matrycę LED RGB ESP32-S3 w prosty, ale efektowny wyświetlacz tekstowy. Edytując tylko kilka zmiennych na początku kodu, możesz szybko zmienić:

• Która wiadomość jest wyświetlana (scrollText).
• Kolor tekstu (textRed, textGreen, textBlue).
• Jasność matrycy (matrixBrightness).
• Prędkość przewijania (scrollDelayMs).
• Kierunek przewijania (scrollDirection, jeśli zdecydujesz się go użyć).

Pełny szkic tego projektu jest dostępny poniżej tego artykułu (załadowany automatycznie przez stronę internetową). Aby uzyskać szczegółową konfigurację krok po kroku i praktyczną demonstrację przewijanego tekstu w akcji, obejrzyj odpowiednią sekcję filmu. Jeśli podoba Ci się projekt i chcesz go zbudować samodzielnie, możesz również kupić moduł matrycy LED RGB ESP32-S3 z linków partnerskich wymienionych pod kodem.

Obrazy

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();
  }
}