Projekt 2 s RGB LED maticou ESP32-S3 - Posúvajúci sa text

Projekt 2 s RGB LED maticou ESP32-S3 - Posúvajúci sa text

Projekt 2 – Posúvanie textu na ESP32-S3 RGB LED matici

V tomto projekte premeníme ESP32-S3 RGB LED maticu na malý textový banner. Krátka správa (napríklad Robojax) sa posúva cez 8×8 RGB displej a text, farbu, jas a rýchlosť posúvania môžete jednoducho zmeniť priamo v kóde. Toto je veľmi užitočné pre jednoduché upozornenia, menovky alebo malé stavové správy.

Všetkých šesť projektov v tejto sérii je predvedených a vysvetlených v jednom YouTube videu. Rovnaké video je vložené na tejto stránke, takže môžete presne vidieť, ako posúvanie textu vyzerá v reálnom čase a ako každé nastavenie ovplyvňuje animáciu. Kompletný kód pre tento projekt sa automaticky načíta nižšie pod článkom a modul ESP32-S3 RGB LED Matrix si môžete zakúpiť z affiliate obchodov uvedených v sekcii kódu.

Tento projekt nadväzuje na základy z Projektu 1 (pohybujúca sa bodka a ovládanie farieb) a pridáva vykresľovanie textu a posúvanie pomocou knižnice NeoMatrix.

Prehľad modulu ESP32-S3 RGB LED Matrix

Hardvér je rovnaký vo všetkých šiestich projektoch: mikrokontrolér ESP32-S3 s Wi-Fi a Bluetooth, 8×8 RGB LED matica (64 adresovateľných RGB LED), akcelerometer QMI8658C, USB port a prístupné IO piny.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – hlavný CPU s Wi-Fi/BLE pre pokročilé projekty.
• 8×8 RGB matica – 64 RGB LED pre ikony, text a animácie.
• Akcelerometer QMI8658C – používa sa v neskorších projektoch na náklon a orientáciu.
• USB port – používa sa na napájanie a programovanie cez Arduino IDE.
• Odkryté piny – umožňujú používať dosku ako bežný ESP32 pre iné IO.
• Tlačidlá Boot / Reset – na nahrávanie firmvéru a reštartovanie skíc.

V Projekte 2 sa zameriavame hlavne na maticu a textové funkcie NeoMatrix. Akcelerometer sa zatiaľ nepoužíva, ale rovnaká doska zvládne aj všetky neskoršie interakčné a herné projekty.

Projekty zahrnuté vo videu (Časové značky)

Video, ktoré patrí k tomuto článku, pokrýva všetkých šesť projektov. Približné časové značky sú:

• 00:00 – Úvod
• 02:01 – Inštalácia ESP32 dosiek
• 03:32 – Inštalácia knižníc
• 05:32 – Projekt 1: Pohybujúca sa bodka
• 11:11 – Projekt 2: Posúvanie textu
• 12:59 – Projekt 3: HTTP text
• 16:41 – Projekt 4: Náklon bodky
• 18:55 – Projekt 5: Šípka hore
• 20:02 – Projekt 6: Cieľová hra

Odporúčame vám pozerať video pri čítaní tohto článku. Ukazuje posúvanie textu naživo na LED matici a prechádza všetkými krokmi v Arduino IDE.

Inštalácia ESP32 dosiek v Arduino IDE

Pred spustením kódu na posúvanie textu sa uistite, že je podpora ESP32 nainštalovaná vo vašom Arduino IDE:

1. Otvorte Súbor > Predvoľby a pridajte URL adresu ESP32 dosiek do „Správca ďalších URL adries dosiek“.
2. Prejdite na Nástroje > Doska > Správca dosiek…, vyhľadajte ESP32 a nainštalujte oficiálny balík ESP32.
3. Vyberte svoju ESP32-S3 RGB LED maticu z Nástroje > Doska.
4. Pripojte modul cez USB a vyberte správny COM/sériový port pod Nástroje > Port.

Ak typ dosky alebo port nie je správny, skica sa nenahrá.

Inštalácia NeoMatrix a požadovaných knižníc

Posúvanie textu je implementované pomocou Adafruit NeoMatrix a jeho závislostí. Vo videu sú nainštalované cez Správcu knižníc.

Budete potrebovať:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Otvorte Skica > Zahrnúť knižnicu > Spravovať knižnice….
2. Vyhľadajte Adafruit NeoMatrix a kliknite na Inštalovať.
3. Keď sa zobrazí výzva, povoľte inštaláciu Adafruit GFX a Adafruit NeoPixel ako závislostí.

Ak je inštalácia úspešná, mali by ste vidieť príkladové skice pod Súbor > Príklady > Adafruit NeoMatrix a Súbor > Príklady > Adafruit NeoPixel.

Projekt 2 – Nastavenia kódu (Posúvanie textu)

Kompletná skica na posúvanie textu sa automaticky načíta nižšie pod týmto článkom na webovej stránke. Tu sa zameriavame len na konfiguračné hodnoty, ktoré budete pravdepodobne chcieť upraviť: pin, veľkosť matice, jas, textový reťazec, farba, rýchlosť posúvania a voliteľný smer.

Všetky úryvky nižšie sú prevzaté z konfiguračnej sekcie na začiatku skice, aby ste mohli rýchlo upraviť správanie bez toho, aby ste sa dotkli hlavnej logiky.

Pin a veľkosť matice

Rovnako ako v Projekte 1 je RGB matica pripojená na GPIO 14 a obsahuje 64 LED (8×8). Uistite sa, že tieto dva riadky zodpovedajú vášmu modulu:

 // Pin pripojený k 8×8 RGB matici 
const int MATRIX_PIN = 14; // musí byť 14 na tomto module // Veľkosť matice (šírka a výška)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Ak kopírujete príklad z knižnice NeoMatrix, môže používať iný pin alebo veľkosť; vždy ich zmeňte tak, aby zodpovedali tejto doske.

Jas textu

Jas sa zvyčajne ovláda hodnotou medzi 0 a 255, kde 0 znamená vypnuté a 255 maximálny jas. Mierna hodnota je zvyčajne dostatočná:

// Celkový jas matice (0–255) 
uint8_t matrixBrightness = 40; // pohodlný vnútorný jas // V 
setup(): 
matrix.setBrightness(matrixBrightness); 

Ak používate panel v jasnom prostredí alebo na krátky čas, môžete túto hodnotu zvýšiť, ale vyhnite sa príliš vysokej hodnote, ak ste blízko displeja.

Text na posúvanie

Skutočná správa je uložená ako reťazec. Vo videu je príklad textu Robojax. Môžete ho zmeniť na akýkoľvek krátky názov alebo správu, ktorú chcete:

 // Text na posúvanie na 8×8 matici const char scrollText[] = "Robojax";
 // zmeňte to na vašu správu 

Majte na pamäti, že toto je iba 8×8 matica, takže veľmi dlhé správy sa budú posúvať dlhšie a môžu byť ťažko čitateľné.

Farba textu (hodnoty RGB)

Farba posúvaného textu je nastavená červenou, zelenou a modrou zložkou (0–255). Napríklad čisto červená je (255, 0, 0), čisto zelená je (0, 255, 0) a čisto modrá je (0, 0, 255). V náčrte uvidíte niečo ako:

 // Farba textu (R, G, B) uint8_t textRed = 255; // červená zložka uint8_t textGreen = 0; // zelená zložka uint8_t textBlue = 0; // modrá zložka 

Ak chcete zmeniť farbu:

• Žltá: textRed = 255; textGreen = 255; textBlue = 0;
• Tyrkysová: textRed = 0; textGreen = 255; textBlue = 255;
• Biela: textRed = 255; textGreen = 255; textBlue = 255;

Video tiež ukazuje použitie online výberu farieb na nájdenie hodnôt RGB a ich zadanie do kódu.:contentReference[oaicite:1]{index=1}

Rýchlosť posúvania (oneskorenie medzi snímkami)

Rýchlosť posúvania je riadená hodnotou oneskorenia v milisekundách medzi každým krokom aktualizácie. Menšia hodnota spôsobí rýchlejší pohyb textu; väčšia hodnota ho spomalí. V náčrte by ste mali nájsť premennú ako:

// Oneskorenie medzi krokmi posúvania (v milisekundách) int scrollDelayMs = 50; 
// menšie = rýchlejšie, väčšie = pomalšie 

Príklady:

• scrollDelayMs = 20; → rýchle posúvanie.
• scrollDelayMs = 50; → stredná rýchlosť (podobne ako vo videu).
• scrollDelayMs = 100; alebo viac → pomalé, ľahko čitateľné posúvanie.

Vnútri loop() sa táto hodnota používa vo volaní delay(scrollDelayMs); po každom prekreslení pozície textu.

Smer posúvania (voliteľné)

V projekte „základné posúvanie textu“ zvyčajne posúvame doľava, ale je užitočné definovať symbolickú premennú smeru, aby ste mohli neskôr experimentovať s inými smermi (doľava, doprava, hore, dole).

Bežný vzor je:

 // Výber smeru posúvania // 0 = doľava, 1 = doprava, 2 = hore, 3 = dole 
int scrollDirection = 0; // predvolené: posúvanie doľava 

Hlavná slučka potom kontroluje scrollDirection a pohybuje textom vo zvolenom smere. Pre Projekt 2 ho môžete nechať na 0 (doľava), ale ak neskôr rozšírite náčrt, môžete pridať podmienky ako:

 if (scrollDirection == 0) { 
// pohyb textu doľava 
} else if (scrollDirection == 1) { 
// pohyb textu doprava 
} else if (scrollDirection == 2) { 
// pohyb textu hore
 } else if (scrollDirection == 3) { 
// pohyb textu dole 
}
 

Pre tento článok dokumentujeme iba nastavenie. Úplná implementácia je súčasťou kódu načítaného pod článkom.

Zhrnutie

Projekt 2 premení vašu ESP32-S3 RGB LED maticu na jednoduchý, ale pútavý textový displej. Úpravou len niekoľkých premenných na začiatku kódu môžete rýchlo zmeniť:

• Ktorá správa sa zobrazuje (scrollText).
• Farbu textu (textRed, textGreen, textBlue).
• Jas matice (matrixBrightness).
• Rýchlosť posúvania (scrollDelayMs).
• Smer posúvania (scrollDirection, ak sa ho rozhodnete použiť).

Úplný náčrt pre tento projekt je dostupný nižšie pod týmto článkom (automaticky načítaný webovou stránkou). Pre podrobné kroky konfigurácie a živú ukážku posúvania textu v akcii si pozrite príslušnú časť videa. Ak sa vám projekt páči a chcete si ho postaviť sami, môžete si tiež zakúpiť modul ESP32-S3 RGB LED Matrix z affiliate odkazov uvedených pod kódom.

Images

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