ESP32-S3 RGB LED Matrix projekat 2 - Tekst koji se pomiče

ESP32-S3 RGB LED Matrix projekat 2 - Tekst koji se pomiče

Projekat 2 – Tekst koji se pomiče na ESP32-S3 RGB LED matrici

U ovom projektu pretvaramo ESP32-S3 RGB LED matricu u mali tekstualni banner. Kratka poruka (na primjer Robojax) pomiče se preko 8×8 RGB ekrana, a tekst, boju, svjetlinu i brzinu pomicanja možete lako promijeniti direktno u kodu. Ovo je vrlo korisno za jednostavne obavijesti, imenske pločice ili male statusne poruke.

Svih šest projekata u ovoj seriji prikazano je i objašnjeno u jednom YouTube videu. Isti video ugrađen je na ovoj stranici, tako da možete tačno vidjeti kako izgleda pomicanje teksta u stvarnom vremenu i kako svaka postavka utiče na animaciju. Kompletan kod za ovaj projekt automatski se učitava ispod članka, a modul ESP32-S3 RGB LED matrice možete kupiti iz affiliate prodavnica navedenih ispod sekcije s kodom.

Ovaj projekt nadograđuje osnove Projekta 1 (pokretna tačka i kontrola boja) te dodaje renderiranje teksta i pomicanje pomoću NeoMatrix biblioteke.

Pregled ESP32-S3 RGB LED matrice modula

Hardver je isti u svih šest projekata: ESP32-S3 mikrokontroler s Wi-Fi i Bluetoothom, 8×8 RGB LED matrica (64 adresabilne RGB LED diode), QMI8658C akcelerometar, USB priključak i dostupni IO pinovi.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – glavni CPU s Wi-Fi/BLE za napredne projekte.
• 8×8 RGB matrica – 64 RGB LED diode za ikone, tekst i animacije.
• QMI8658C akcelerometar – koristi se u kasnijim projektima za nagib i orijentaciju.
• USB priključak – koristi se za napajanje i programiranje putem Arduino IDE-a.
• Izloženi pinovi – omogućavaju korištenje ploče kao običnog ESP32-a za druge IO zadatke.
• Boot / Reset dugmad – za upload firmvera i ponovno pokretanje skica.

U Projektu 2 uglavnom se fokusiramo na matricu i NeoMatrix tekstualne funkcije. Akcelerometar se još ne koristi, ali ista ploča će također upravljati svim kasnijim interakcijskim i igračkim projektima.

Projekti prikazani u videu (vremenske oznake)

Video koji ide uz ovaj članak pokriva svih šest projekata. Približne vremenske oznake su:

• 00:00 – Uvod
• 02:01 – Instaliranje ESP32 ploča
• 03:32 – Instaliranje biblioteka
• 05:32 – Projekat 1: Pokretna tačka
• 11:11 – Projekat 2: Pomicanje teksta
• 12:59 – Projekat 3: HTTP tekst
• 16:41 – Projekat 4: Nagib tačke
• 18:55 – Projekat 5: Strelica gore
• 20:02 – Projekat 6: Igra ciljanja

Preporučujemo da gledate video dok čitate ovaj članak. On prikazuje tekst koji se pomiče uživo na LED matrici i vodi vas kroz sve korake u Arduino IDE-u.

Instaliranje ESP32 ploča u Arduino IDE-u

Prije pokretanja koda za pomicanje teksta, provjerite da je ESP32 podrška instalirana u vašem Arduino IDE-u:

1. Otvorite File > Preferences i dodajte ESP32 ploče URL u “Additional Boards Manager URLs”.
2. Idite na Tools > Board > Boards Manager…, potražite ESP32 i instalirajte zvanični ESP32 paket.
3. Odaberite svoju ESP32-S3 RGB LED matricu ploču iz Tools > Board.
4. Povežite modul putem USB-a i odaberite ispravan COM/serijski port pod Tools > Port.

Ako tip ploče ili port nisu ispravni, skica se neće uploadati.

Instaliranje NeoMatrix i potrebnih biblioteka

Pomicanje teksta implementirano je pomoću Adafruit NeoMatrix i njegovih zavisnosti. U videu se instaliraju putem Library Manager-a.

Trebat će vam:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Otvorite Sketch > Include Library > Manage Libraries….
2. Potražite Adafruit NeoMatrix i kliknite Install.
3. Kada se zatraži, dozvolite instalaciju Adafruit GFX i Adafruit NeoPixel kao zavisnosti.

Ako je instalacija uspješna, trebali biste vidjeti primjere skica pod File > Examples > Adafruit NeoMatrix i File > Examples > Adafruit NeoPixel.

Projekat 2 – Postavke koda (Pomicanje teksta)

Kompletna skica za pomicanje teksta automatski se učitava ispod ovog članka na web stranici. Ovdje se fokusiramo samo na konfiguracijske vrijednosti koje ćete vjerovatno željeti mijenjati: pin, veličina matrice, svjetlina, tekstualni niz, boja, brzina pomicanja i opcionalni smjer.

Svi isječci ispod preuzeti su iz konfiguracijske sekcije na vrhu skice, tako da možete brzo prilagoditi ponašanje bez diranja glavne logike.

Pin i veličina matrice

Baš kao u Projektu 1, RGB matrica je povezana na GPIO 14 i sadrži 64 LED diode (8×8). Provjerite da ove dvije linije odgovaraju vašem modulu:

 // Pin povezan na 8×8 RGB matricu 
const int MATRIX_PIN = 14; // mora biti 14 na ovom modulu // Veličina matrice (širina i visina)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Ako kopirate primjer iz NeoMatrix biblioteke, možda koristi drugačiji pin ili veličinu; uvijek ih promijenite da odgovaraju ovoj ploči.

Svjetlina teksta

Svjetlina se obično kontrolira vrijednošću između 0 i 255, gdje je 0 isključeno, a 255 maksimalna svjetlina. Umjerena vrijednost je obično dovoljna:

// Ukupna svjetlina matrice (0–255) 
uint8_t matrixBrightness = 40; // ugodna unutrašnja svjetlina // U 
setup(): 
matrix.setBrightness(matrixBrightness); 

Ako koristite panel u svijetlom okruženju ili na kratko vrijeme, možete povećati ovu vrijednost, ali izbjegavajte previsoke vrijednosti ako ste blizu ekrana.

Tekst za pomicanje

Stvarna poruka je pohranjena kao string. U videu, primjer teksta je Robojax. Možete ga promijeniti u bilo koju kratku oznaku ili poruku koju želite:

 // Tekst za pomicanje na 8×8 matrici const char scrollText[] = "Robojax";
 // promijenite ovo u vašu poruku 

Imajte na umu da je ovo samo 8×8 matrica, pa će vrlo duge poruke trebati više vremena za pomicanje i mogu postati teške za čitanje.

Boja teksta (RGB vrijednosti)

Boja teksta koji se pomiče postavljena je pomoću crvene, zelene i plave komponente (0–255). Na primjer, čisto crvena je (255, 0, 0), čisto zelena je (0, 255, 0), a čisto plava je (0, 0, 255). U skici ćete vidjeti nešto poput:

 // Boja teksta (R, G, B) uint8_t textRed = 255; // crvena komponenta uint8_t textGreen = 0; // zelena komponenta uint8_t textBlue = 0; // plava komponenta 

Za promjenu boje:

• Žuta: textRed = 255; textGreen = 255; textBlue = 0;
• Cijan: textRed = 0; textGreen = 255; textBlue = 255;
• Bijela: textRed = 255; textGreen = 255; textBlue = 255;

Video također demonstrira korištenje online alata za odabir boja kako biste pronašli RGB vrijednosti i zatim ih unijeli u kod.:contentReference[oaicite:1]{index=1}

Brzina pomicanja (kašnjenje između okvira)

Brzina pomicanja kontrolirana je vrijednošću kašnjenja u milisekundama između svakog koraka ažuriranja. Manja vrijednost čini da se tekst kreće brže; veća vrijednost ga usporava. U skici biste trebali pronaći varijablu poput:

// Kašnjenje između koraka pomicanja (u milisekundama) int scrollDelayMs = 50; 
// manje = brže, veće = sporije 

Primjeri:

• scrollDelayMs = 20; → brzo pomicanje.
• scrollDelayMs = 50; → srednja brzina (slično videu).
• scrollDelayMs = 100; ili više → sporo, lako čitljivo pomicanje.

Unutar loop(), ova vrijednost se koristi u pozivu delay(scrollDelayMs); nakon svakog ponovnog crtanja pozicije teksta.

Smjer pomicanja (opcionalno)

U projektu “osnovno pomicanje teksta” obično pomičemo ulijevo, ali je korisno definirati simboličku varijablu smjera kako biste kasnije mogli eksperimentirati s drugim smjerovima (lijevo, desno, gore, dolje).

Jedan uobičajeni obrazac je:

 // Selektori smjera pomicanja // 0 = lijevo, 1 = desno, 2 = gore, 3 = dolje 
int scrollDirection = 0; // podrazumijevano: pomicanje ulijevo 

Glavna petlja zatim provjerava scrollDirection i pomiče tekst u odabranom smjeru. Za Projekat 2 možete ostaviti na 0 (lijevo), ali ako kasnije proširite skicu, možete dodati uslove poput:

 if (scrollDirection == 0) { 
// pomakni tekst lijevo 
} else if (scrollDirection == 1) { 
// pomakni tekst desno 
} else if (scrollDirection == 2) { 
// pomakni tekst gore
 } else if (scrollDirection == 3) { 
// pomakni tekst dolje 
}
 

Za ovaj članak dokumentiramo samo postavku. Potpuna implementacija je dio koda učitanog ispod članka.

Sažetak

Projekat 2 pretvara vašu ESP32-S3 RGB LED matricu u jednostavan, ali upadljiv tekstualni ekran. Uređivanjem samo nekoliko varijabli na vrhu koda, možete brzo promijeniti:

• Koju poruku prikazujete (scrollText).
• Boja teksta (textRed, textGreen, textBlue).
• Svjetlina matrice (matrixBrightness).
• Brzina pomicanja (scrollDelayMs).
• Smjer pomicanja (scrollDirection, ako odlučite da ga koristite).

Potpuna skica za ovaj projekat dostupna je ispod ovog članka (automatski se učitava na web stranici). Za detaljne upute korak po korak i demonstraciju pomicanja teksta uživo, obavezno pogledajte odgovarajući dio videa. Ako vam se sviđa projekat i želite ga sami napraviti, možete kupiti ESP32-S3 RGB LED Matrix modul putem affiliate linkova navedenih ispod koda.

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