ESP32-S3 RGB LED матричен проект 2 - Лизгачки текст

ESP32-S3 RGB LED матричен проект 2 - Лизгачки текст

Проект 2 – Скрол на текст на ESP32-S3 RGB LED матрица

Во овој проект ја претвораме ESP32-S3 RGB LED матрицата во мал текстуален банер. Кратка порака (на пример Robojax) се движи преку 8×8 RGB екранот, и можете лесно да ја промените текстуалната содржина, бојата, осветленоста и брзината на движење директно во кодот. Ова е многу корисно за едноставни известувања, именски ознаки или мали статусни пораки.

Сите шест проекти во оваа серија се демонстрирани и објаснети во едно YouTube видео. Истото видео е вградено на оваа страница, за да можете точно да видите како изгледа скролот на текст во реално време и како секоја поставка влијае на анимацијата. Целосниот код за овој проект се вчитува автоматски подолу под статијата, а можете да го купите ESP32-S3 RGB LED матрица модулот од партнерските продавници наведени под делот со код.

Овој проект се надоврзува на основите од Проект 1 (движечка точка и контрола на боја) и додава рендерирање текст и скрол користејќи ја NeoMatrix библиотеката.

Преглед на ESP32-S3 RGB LED матрица модулот

Хардверот е ист кај сите шест проекти: ESP32-S3 микроконтролер со Wi-Fi и Bluetooth, 8×8 RGB LED матрица (64 адресирани RGB LED диоди), QMI8658C акцелерометар, USB порт и достапни IO пинови.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – главен процесор со Wi-Fi/BLE за напредни проекти.
• 8×8 RGB матрица – 64 RGB LED диоди за икони, текст и анимации.
• QMI8658C акцелерометар – се користи во подоцнежните проекти за навалување и ориентација.
• USB порт – се користи за напојување и програмирање преку Arduino IDE.
• Изложени пинови – ви овозможуваат да ја користите плочката како обичен ESP32 за други IO.
• Boot / Reset копчиња – за поставување фирмвер и рестартирање на скици.

Во Проект 2 главно се фокусираме на матрицата и NeoMatrix текстуалните функции. Акцелерометарот сè уште не се користи, но истата плочка ќе ги поддржи сите подоцнежни интерактивни и гејмерски проекти.

Проекти покриени во видеото (Временски ознаки)

Видеото што оди со оваа статија ги покрива сите шест проекти. Приближните временски ознаки се:

• 00:00 – Вовед
• 02:01 – Инсталирање ESP32 плочки
• 03:32 – Инсталирање библиотеки
• 05:32 – Проект 1: Движечка точка
• 11:11 – Проект 2: Скрол на текст
• 12:59 – Проект 3: HTTP текст
• 16:41 – Проект 4: Навалена точка
• 18:55 – Проект 5: Стрелка нагоре
• 20:02 – Проект 6: Игра со цел

Ве охрабруваме да го гледате видеото додека ја читате оваа статија. Тоа го прикажува скролот на текст во живо на LED матрицата и ве води низ сите чекори во Arduino IDE.

Инсталирање ESP32 плочки во Arduino IDE

Пред да го стартувате кодот за скрол на текст, проверете дали поддршката за ESP32 е инсталирана во вашиот Arduino IDE:

1. Отворете File > Preferences и додајте ја ESP32 плочката URL адреса во “Additional Boards Manager URLs”.
2. Одете на Tools > Board > Boards Manager…, пребарајте ESP32 и инсталирајте го официјалниот ESP32 пакет.
3. Изберете ја вашата ESP32-S3 RGB LED матрица плочка од Tools > Board.
4. Поврзете го модулот преку USB и изберете ја точната COM/сериска порта под Tools > Port.

Ако типот на плочката или портата не е точен, скицата нема да се постави.

Инсталирање NeoMatrix и потребни библиотеки

Скролот на текст е имплементиран користејќи Adafruit NeoMatrix и неговите зависности. Во видеото, тие се инсталираат преку Library Manager.

Ќе ви требаат:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Отворете Sketch > Include Library > Manage Libraries….
2. Пребарајте Adafruit NeoMatrix и кликнете Install.
3. Кога ќе биде побарано, дозволете да ги инсталира Adafruit GFX и Adafruit NeoPixel како зависности.

Ако инсталацијата е успешна, треба да видите примероци под File > Examples > Adafruit NeoMatrix и File > Examples > Adafruit NeoPixel.

Проект 2 – Поставки на кодот (Скрол на текст)

Целосната скица за скрол на текст автоматски се вчитува подолу под оваа статија на веб-страницата. Овде се фокусираме само на вредностите за конфигурација што веројатно ќе сакате да ги уредите: пин, големина на матрицата, осветленост, текстуална низа, боја, брзина на скрол и опционална насока.

Сите фрагменти подолу се земени од делот за конфигурација на врвот на скицата за брзо да го прилагодите однесувањето без да ја допирате главната логика.

Пин и големина на матрицата

Исто како Проект 1, RGB матрицата е поврзана на GPIO 14 и содржи 64 LED диоди (8×8). Проверете дали овие две линии одговараат на вашиот модул:

 // Пин поврзан со 8×8 RGB матрица 
const int MATRIX_PIN = 14; // мора да биде 14 на овој модул // Големина на матрицата (ширина и висина)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Ако копирате пример од NeoMatrix библиотеката, може да користи различен пин или големина; секогаш променете ги за да одговараат на оваа плочка.

Осветленост на текстот

Осветленоста обично се контролира со вредност помеѓу 0 и 255, каде 0 е исклучено, а 255 е максимална осветленост. Умерена вредност обично е доволна:

// Вкупна осветленост на матрицата (0–255) 
uint8_t matrixBrightness = 40; // удобна осветленост во затворен простор // Во 
setup(): 
matrix.setBrightness(matrixBrightness); 

Ако ја користите плочата во светла средина или за кратко време, можете да ја зголемите оваа вредност, но избегнувајте премногу висока вредност ако сте блиску до екранот.

Текст за лизгање

Вистинската порака е зачувана како низа. Во видеото, примерниот текст е Robojax. Можете да го промените во било која кратка ознака или порака што сакате:

 // Текст за лизгање на 8×8 матрицата const char scrollText[] = "Robojax";
 // променете го ова во вашата порака 

Имајте предвид дека ова е само 8×8 матрица, па многу долгите пораки ќе се лизгаат подолго и може да станат тешки за читање.

Боја на текстот (RGB вредности)

Бојата на лизгачкиот текст е поставена со црвени, зелени и сини компоненти (0–255). На пример, чисто црвена е (255, 0, 0), чисто зелена е (0, 255, 0), а чисто сина е (0, 0, 255). Во кодот ќе видите нешто како:

 // Боја на текстот (R, G, B) uint8_t textRed = 255; // црвена компонента uint8_t textGreen = 0; // зелена компонента uint8_t textBlue = 0; // сина компонента 

За да ја промените бојата:

• Жолта: textRed = 255; textGreen = 255; textBlue = 0;
• Цијан: textRed = 0; textGreen = 255; textBlue = 255;
• Бела: textRed = 255; textGreen = 255; textBlue = 255;

Видеото исто така демонстрира користење на онлајн избирач на бои за да ги најдете RGB вредностите и потоа да ги внесете во кодот.:contentReference[oaicite:1]{index=1}

Брзина на лизгање (доцнење помеѓу рамки)

Брзината на лизгање е контролирана со вредност на доцнење во милисекунди помеѓу секој чекор на ажурирање. Помала вредност го прави текстот да се движи побрзо; поголема вредност го забавува. Во кодот, треба да најдете променлива како:

// Доцнење помеѓу чекорите на лизгање (во милисекунди) int scrollDelayMs = 50; 
// помало = побрзо, поголемо = побавно 

Примери:

• scrollDelayMs = 20; → брзо лизгање.
• scrollDelayMs = 50; → средна брзина (слично на видеото).
• scrollDelayMs = 100; или повеќе → бавно, лесно читливо лизгање.

Внатре во loop(), оваа вредност се користи во повик delay(scrollDelayMs); по секое прецртување на позицијата на текстот.

Насока на лизгање (опционално)

Во проектот „основно лизгање на текст“ обично лизгаме налево, но корисно е да се дефинира симболична променлива за насока за да можете да експериментирате со други насоки подоцна (лево, десно, горе, долу).

Еден вообичаен модел е:

 // Селектор на насока на лизгање // 0 = лево, 1 = десно, 2 = горе, 3 = долу 
int scrollDirection = 0; // стандардно: лизгање налево 

Главната јамка потоа проверува scrollDirection и го движи текстот во избраната насока. За Проект 2 можете да го оставите на 0 (лево), но ако го проширите кодот подоцна, можете да додадете услови како:

 if (scrollDirection == 0) { 
// движи текст налево 
} else if (scrollDirection == 1) { 
// движи текст надесно 
} else if (scrollDirection == 2) { 
// движи текст нагоре
 } else if (scrollDirection == 3) { 
// движи текст надолу 
}
 

За овој напис само ја документираме поставката. Целосната имплементација е дел од кодот вчитан под написот.

Резиме

Проект 2 ја претвора вашата ESP32-S3 RGB LED матрица во едноставен, но впечатлив текстуален екран. Со уредување на само неколку променливи на врвот од кодот, можете брзо да промените:

• Која порака се прикажува (scrollText).
• Бојата на текстот (textRed, textGreen, textBlue).
• Осветленоста на матрицата (matrixBrightness).
• Брзината на лизгање (scrollDelayMs).
• Насоката на лизгање (scrollDirection, ако одберете да ја користите).

Целосниот код за овој проект е достапен под овој напис (автоматски вчитан од веб-страницата). За детална конфигурација чекор-по-чекор и жива демонстрација на лизгачкиот текст во акција, задолжително погледнете го соодветниот дел од видеото. Ако ви се допаѓа проектот и сакате сами да го изградите, можете да го купите ESP32-S3 RGB LED Matrix модулот од партнерските линкови наведени под кодот.

Слики

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