Proiect ESP32-S3 cu Matrice LED RGB 2 - Text Derulant

Proiect ESP32-S3 cu Matrice LED RGB 2 - Text Derulant

Proiectul 2 – Derulare text pe matricea LED RGB ESP32-S3

În acest proiect transformăm matricea LED RGB ESP32-S3 într-un banner text minuscul. Un mesaj scurt (de exemplu Robojax) se derulează pe afișajul RGB 8×8, iar tu poți schimba cu ușurință textul, culoarea, luminozitatea și viteza de derulare direct în cod. Acest lucru este foarte util pentru notificări simple, ecusoane cu nume sau mesaje de stare mici.

Toate cele șase proiecte din această serie sunt demonstrate și explicate într-un singur videoclip YouTube. Același videoclip este încorporat pe această pagină, astfel încât poți vedea exact cum arată derularea textului în timp real și cum afectează fiecare setare animația. Codul complet pentru acest proiect este încărcat automat mai jos, după articol, iar tu poți achiziționa modulul matrice LED RGB ESP32-S3 din magazinele afiliate listate sub secțiunea de cod.

Acest proiect se bazează pe elementele de bază din Proiectul 1 (punct în mișcare și controlul culorii) și adaugă redarea textului și derularea folosind biblioteca NeoMatrix.

Prezentare generală a modulului matrice LED RGB ESP32-S3

Hardware-ul este același în toate cele șase proiecte: un microcontroler ESP32-S3 cu Wi-Fi și Bluetooth, o matrice LED RGB 8×8 (64 LED-uri RGB adresabile), un accelerometru QMI8658C, port USB și pini IO accesibili.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – CPU principal cu Wi-Fi/BLE pentru proiecte avansate.
• Matrice RGB 8×8 – 64 LED-uri RGB pentru pictograme, text și animații.
• Accelerometru QMI8658C – folosit în proiectele ulterioare pentru înclinare și orientare.
• Port USB – folosit pentru alimentare și programare prin Arduino IDE.
• Pini expuși – îți permit să folosești placa ca un ESP32 normal pentru alte IO-uri.
• Butoane Boot / Reset – pentru încărcarea firmware-ului și repornirea schițelor.

În Proiectul 2 ne concentrăm în principal pe matrice și pe funcțiile de text NeoMatrix. Accelerometrul nu este încă folosit, dar aceeași placă va gestiona și toate proiectele ulterioare de interacțiune și jocuri.

Proiecte acoperite în videoclip (Marcaje de timp)

Videoclipul care însoțește acest articol acoperă toate cele șase proiecte. Marcajele de timp aproximative sunt:

• 00:00 – Introducere
• 02:01 – Instalarea plăcilor ESP32
• 03:32 – Instalarea bibliotecilor
• 05:32 – Proiectul 1: Punct în mișcare
• 11:11 – Proiectul 2: Derulare text
• 12:59 – Proiectul 3: Text HTTP
• 16:41 – Proiectul 4: Punct de înclinare
• 18:55 – Proiectul 5: Săgeată în sus
• 20:02 – Proiectul 6: Jocul țintă

Te încurajăm să urmărești videoclipul în timp ce citești acest articol. Acesta arată derularea textului live pe matricea LED și parcurge toți pașii din Arduino IDE.

Instalarea plăcilor ESP32 în Arduino IDE

Înainte de a rula codul de derulare a textului, asigură-te că suportul ESP32 este instalat în Arduino IDE:

1. Deschide Fișier > Preferințe și adaugă URL-ul plăcilor ESP32 la „URL-uri suplimentare pentru Managerul de plăci”.
2. Mergi la Instrumente > Placă > Manager de plăci…, caută ESP32 și instalează pachetul oficial ESP32.
3. Selectează placa ta matrice LED RGB ESP32-S3 din Instrumente > Placă.
4. Conectează modulul prin USB și alege portul COM/serial corect sub Instrumente > Port.

Dacă tipul plăcii sau portul nu este corect, schița nu se va încărca.

Instalarea NeoMatrix și a bibliotecilor necesare

Derularea textului este implementată folosind Adafruit NeoMatrix și dependențele sale. În videoclip, acestea sunt instalate prin Managerul de biblioteci.

Vei avea nevoie de:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Deschide Schiță > Include bibliotecă > Gestionează bibliotecile….
2. Caută Adafruit NeoMatrix și dă clic pe Instalează.
3. Când ți se solicită, permite instalarea Adafruit GFX și Adafruit NeoPixel ca dependențe.

Dacă instalarea are succes, ar trebui să vezi schițe de exemplu sub Fișier > Exemple > Adafruit NeoMatrix și Fișier > Exemple > Adafruit NeoPixel.

Proiectul 2 – Setări cod (Derulare text)

Schița completă de derulare a textului este încărcată automat mai jos, după acest articol pe site. Aici ne concentrăm doar pe valorile de configurare pe care probabil vei dori să le editezi: pin, dimensiunea matricei, luminozitate, șir de text, culoare, viteză de derulare și direcție opțională.

Toate fragmentele de mai jos sunt preluate din secțiunea de configurare din partea de sus a schiței, astfel încât să poți ajusta rapid comportamentul fără să atingi logica principală.

Pinul și dimensiunea matricei

La fel ca în Proiectul 1, matricea RGB este conectată la GPIO 14 și conține 64 LED-uri (8×8). Asigură-te că aceste două linii se potrivesc cu modulul tău:

 // Pin conectat la matricea RGB 8×8 
const int MATRIX_PIN = 14; // trebuie să fie 14 pe acest modul // Dimensiunea matricei (lățime și înălțime)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Dacă copiezi un exemplu din biblioteca NeoMatrix, acesta ar putea folosi un pin sau o dimensiune diferită; schimbă-le întotdeauna pentru a se potrivi cu această placă.

Luminozitatea textului

Luminozitatea este controlată de obicei cu o valoare între 0 și 255, unde 0 înseamnă oprit și 255 luminozitate maximă. O valoare moderată este de obicei suficientă:

// Luminozitatea generală a matricei (0–255) 
uint8_t matrixBrightness = 40; // luminozitate confortabilă pentru interior // În 
setup(): 
matrix.setBrightness(matrixBrightness); 

Dacă folosești panoul într-un mediu luminos sau pentru o perioadă scurtă, poți crește această valoare, dar evită să o setezi prea mare dacă ești aproape de afișaj.

Text de Derulat

Mesajul real este stocat ca un șir de caractere. În videoclip, textul exemplu este Robojax. Îl poți schimba în orice etichetă sau mesaj scurt dorești:

 // Text de derulat pe matricea 8×8 const char scrollText[] = "Robojax";
 // schimbă acest text cu mesajul tău 

Ține minte că aceasta este doar o matrice 8×8, deci mesajele foarte lungi vor dura mai mult la derulare și pot deveni greu de citit.

Culoarea Textului (Valori RGB)

Culoarea textului derulant este setată prin componentele roșu, verde și albastru (0–255). De exemplu, roșu pur este (255, 0, 0), verde pur este (0, 255, 0), iar albastru pur este (0, 0, 255). În schiță vei vedea ceva de genul:

 // Culoarea textului (R, G, B) uint8_t textRed = 255; // componenta roșie uint8_t textGreen = 0; // componenta verde uint8_t textBlue = 0; // componenta albastră 

Pentru a schimba culoarea:

• Galben: textRed = 255; textGreen = 255; textBlue = 0;
• Cyan: textRed = 0; textGreen = 255; textBlue = 255;
• Alb: textRed = 255; textGreen = 255; textBlue = 255;

Videoclipul demonstrează și utilizarea unui selector de culori online pentru a găsi valorile RGB și apoi introducerea lor în cod.:contentReference[oaicite:1]{index=1}

Viteza de Derulare (Întârziere între Cadre)

Viteza de derulare este controlată de o valoare de întârziere în milisecunde între fiecare pas de actualizare. O valoare mai mică face textul să se miște mai repede; o valoare mai mare îl încetinește. În schiță, ar trebui să găsești o variabilă ca:

// Întârziere între pașii de derulare (în milisecunde) int scrollDelayMs = 50; 
// mai mic = mai rapid, mai mare = mai lent 

Exemple:

• scrollDelayMs = 20; → derulare rapidă.
• scrollDelayMs = 50; → viteză medie (similară cu videoclipul).
• scrollDelayMs = 100; sau mai mult → derulare lentă, ușor de citit.

În interiorul loop(), această valoare este folosită într-un apel delay(scrollDelayMs); după fiecare redesenare a poziției textului.

Direcția de Derulare (Opțional)

În proiectul “derulare text de bază”, de obicei derulăm spre stânga, dar este util să definim o variabilă simbolică de direcție, astfel încât să poți experimenta cu alte direcții mai târziu (stânga, dreapta, sus, jos).

Un model comun este:

 // Selector de direcție de derulare // 0 = stânga, 1 = dreapta, 2 = sus, 3 = jos 
int scrollDirection = 0; // implicit: derulare spre stânga 

Bucla principală verifică apoi scrollDirection și mută textul în direcția aleasă. Pentru Proiectul 2, îl poți lăsa la 0 (stânga), dar dacă extinzi schița mai târziu, poți adăuga condiții precum:

 if (scrollDirection == 0) { 
// mută textul la stânga 
} else if (scrollDirection == 1) { 
// mută textul la dreapta 
} else if (scrollDirection == 2) { 
// mută textul în sus
 } else if (scrollDirection == 3) { 
// mută textul în jos 
}
 

Pentru acest articol documentăm doar setarea. Implementarea completă face parte din codul încărcat sub articol.

Rezumat

Proiectul 2 transformă matricea ta LED RGB ESP32-S3 într-un afișaj text simplu, dar atrăgător. Editând doar câteva variabile la începutul codului, poți schimba rapid:

• Ce mesaj este afișat (scrollText).
• Culoarea textului (textRed, textGreen, textBlue).
• Luminozitatea matricei (matrixBrightness).
• Viteza de derulare (scrollDelayMs).
• Direcția de derulare (scrollDirection, dacă alegi să o folosești).

Schița completă pentru acest proiect este disponibilă mai jos, sub acest articol (încărcată automat de site). Pentru configurare detaliată pas cu pas și o demonstrație live a textului derulant în acțiune, asigură-te că urmărești secțiunea corespunzătoare din videoclip. Dacă îți place proiectul și vrei să îl construiești singur, poți achiziționa și modulul matrice LED RGB ESP32-S3 de la linkurile afiliate listate sub cod.

Imagini

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