Смотрите на YouTube

Проект RGB LED матрицы ESP32-S3 2 - Прокручиваемый текст

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

В этом проекте мы превращаем RGB LED-матрицу ESP32-S3 в маленький текстовый баннер. Короткое сообщение (напримерRobojax) прокручивается по 8×8 RGB-дисплею, и вы можете легко изменить текст, цвет, яркость и скорость прокрутки непосредственно в коде. Это очень полезно для простых уведомлений, бейджей с именами или небольших статусных сообщений.

Все шесть проектов в этой серии демонстрируются и объясняются в одном видео на YouTube. Это же видео встроено на этой странице, поэтому вы можете увидеть, как именно выглядит прокрутка текста в реальном времени, и как каждое изменение настройки влияет на анимацию. Полный код для этого проекта автоматически загружается под статьей, и вы можете приобрести модуль RGB LED Matrix на базе ESP32-S3 в магазинах-партнерах, перечисленных в разделе кода.

Этот проект основывается на основах Проекта 1 (перемещающаяся точка и управление цветом) и добавляет рендеринг текста и прокрутку с использованием библиотеки NeoMatrix.

Обзор модуля RGB LED матрицы ESP32-S3

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

• ESP32-S3- основной ЦП с Wi-Fi/BLE для продвинутых проектов.
• 8×8 RGB матрица- 64 RGB-светодиода для иконок, текста и анимаций.
• QMI8658C акселерометр- использовался в последующих проектах для наклона и ориентации.
• USB-порт- используется для питания и программирования через Arduino IDE.
• Открытые контакты- позволить вам использовать плату как обычный ESP32 для других входов/выходов.
• Кнопки загрузки / сброса- для загрузки прошивки и перезагрузки скетчей.

В Проекте 2 мы в основном сосредоточены на матрицах и текстовых функциях NeoMatrix. Акселлометр пока не используется, но та же плата будет обрабатывать все последующие взаимодействия и игровые проекты.

Проекты, охваченные в видео (временные метки)

Видео, сопутствующее этой статье, охватывает все шесть проектов. Приблизительные временные метки:

• 00:00- Введение
• 02:01- Установка плат ESP32
• 03:32- Установка библиотек
• 05:32- Проект 1: Двигающаяся точка
• 11:11- Проект 2: Прокрутка текста
• 12:59- Проект 3: HTTP Текст
• 16:41- Проект 4: Tilt Dot
• 18:55Проект 5: Стрелка вверх
• 20:02- Проект 6: Игра-цель

Вас призывают смотреть видео во время чтения этой статьи. В нем показывается, как текст прокручивается в реальном времени на светодиодной матрице и подробно описываются все шаги в Arduino IDE.

Установка плат ESP32 в Arduino IDE

Перед запуском кода для прокрутки текста убедитесь, что поддержка ESP32 установлена в вашей Arduino IDE:

1. ОткрытьFile > Preferencesи добавьте URL-адрес плат ESP32 в "Дополнительные URL-адреса менеджера плат".
2. Идти кTools > Board > Boards Manager…, ищите дляESP32, и установите официальный пакет ESP32.
3. Выберите свою плату RGB Matrix ESP32-S3 изTools > Board.
4. Подключите модуль через USB и выберите правильный COM/последовательный порт подTools > Port.

Если тип платы или порт неверны, sketch не загрузится.

Установка NeoMatrix и необходимых библиотек

Текстовый скролл реализован с использованием Adafruit NeoMatrix и его зависимостей. В видео они устанавливаются через Менеджер библиотек.

Вам понадобится:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. ОткрытьSketch > Include Library > Manage Libraries….
2. Поиск заAdafruit NeoMatrixи нажмитеУстановить.
3. Когда появится запрос, разрешите установить.Adafruit GFXиAdafruit NeoPixelкак зависимости.

Если установка прошла успешно, вы должны увидеть примеры эскизов подFile > Examples > Adafruit NeoMatrixиFile > Examples > Adafruit NeoPixel.

Проект 2 - Настройки кода (Прокрутка текста)

Полный текстовой эскиз прокрутки автоматически загружается ниже этой статьи на сайте. Здесь мы сосредоточимся только на значениях конфигурации, которые, вероятно, вы захотите изменить: пин, размер матрицы, яркость, строка текста, цвет, скорость прокрутки и необязательное направление.

Все фрагменты ниже взяты из секции конфигурации вверху эскиза, чтобы вы могли быстро настроить поведение, не трогая основную логику.

Матрица пина и размера

Так же как и в Проекте 1, RGB-матрица подключена к GPIO 14 и содержит 64 светодиода (8×8). Убедитесь, что эти две строки соответствуют вашему модулю:

 // Pin connected to 8×8 RGB matrix 
const int MATRIX_PIN = 14; // must be 14 on this module // Matrix size (width and height)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Если вы скопируете пример из библиотеки NeoMatrix, он может использовать другой контакт или размер; всегда изменяйте их, чтобы они соответствовали этой плате.

Яркость текста

Яркость обычно регулируется значением от 0 до 255, где 0 — это выключено, а 255 — максимальная яркость. Обычно достаточно умеренного значения:

// Overall matrix brightness (0–255) 
uint8_t matrixBrightness = 40; // comfortable indoor brightness // In 
setup(): 
matrix.setBrightness(matrixBrightness); 

Если вы используете панель в яркой обстановке или в течение короткого времени, вы можете увеличить это значение, но старайтесь не подниматься слишком высоко, если вы близко к экрану.

Текст для прокрутки

Фактическое сообщение хранится в виде строки. В видео пример текста -RobojaxВы можете изменить это на любую короткую метку или сообщение, которое вам нравится:

 // Text to scroll on the 8×8 matrix const char scrollText[] = "Robojax";
 // change this to your message 

Имейте в виду, что это всего лишь матрица 8×8, поэтому очень длинные сообщения будут прокручиваться дольше и могут стать трудными для чтения.

Цвет текста (значения RGB)

Цвет прокручиваемого текста задается с помощью красного, зеленого и синего компонентов (0-255). Например, чистый красный - это(255, 0, 0), чистый зеленый — это(0, 255, 0), и чистый голубой это(0, 0, 255). На эскизе вы увидите нечто подобное:

 // Text color (R, G, B) uint8_t textRed = 255; // red component uint8_t textGreen = 0; // green component uint8_t textBlue = 0; // blue component 

Чтобы изменить цвет:

• Жёлтый:textRed = 255; textGreen = 255; textBlue = 0;
• Циан:textRed = 0; textGreen = 255; textBlue = 255;
• Белый:textRed = 255; textGreen = 255; textBlue = 255;

В видео также демонстрируется использование онлайн-выборщика цветов для поиска значений RGB, а затем их ввода в код.:contentReference[oaicite:1]{index=1}

Скорость прокрутки (Задержка между кадрами)

Скорость прокрутки контролируется значением задержки в миллисекундах между каждым шагом обновления. Более маленькое значение делает текст быстрее; более большое значение замедляет его. В эскизе вы должны найти переменную, подобную:

// Delay between scroll steps (in milliseconds) int scrollDelayMs = 50; 
// smaller = faster, larger = slower 

Примеры:

• scrollDelayMs = 20;→ быстрый прокрутка.
• scrollDelayMs = 50;→ средняя скорость (аналогично видео).
• scrollDelayMs = 100;или больше → медленный, легкий для чтения прокрутка.

Внутриloop(), это значение используется в аdelay(scrollDelayMs);вызывайте после каждого перерисовки позиции текста.

Направление прокрутки (необязательно)

В проекте "основной текстовый скролл" мы обычно прокручиваем влево, но полезно определить символическую переменную направления, чтобы вы могли позже экспериментировать с другими направлениями (влево, вправо, вверх, вниз).

Один общий шаблон:

 // Scroll direction selector // 0 = left, 1 = right, 2 = up, 3 = down 
int scrollDirection = 0; // default: scroll to the left 

Главный цикл затем проверяетscrollDirectionи перемещает текст в выбранном направлении. Для Проекта 2 вы можете оставить это на0(слева), но если позже вы расширите эскиз, вы сможете добавить такие условия, как:

 if (scrollDirection == 0) { 
// move text left 
} else if (scrollDirection == 1) { 
// move text right 
} else if (scrollDirection == 2) { 
// move text up
 } else if (scrollDirection == 3) { 
// move text down 
}
 

В этой статье мы документируем только настройки. Полная реализация является частью кода, загруженного под статьей.

Резюме

Проект 2 превращает вашу RGB-матрицу LED ESP32-S3 в простой, но привлекательный дисплей текста. Изменив всего лишь несколько переменных в начале кода, вы можете быстро изменить:

• Какое сообщение отображается (scrollText).
• Цвет текста (textRed,textGreen,textBlue).
• Яркость матрицыmatrixBrightness).
• Скорость прокрутки (scrollDelayMs).
• Направление прокруткиscrollDirection, если вы решите использовать его).

Полная схема для этого проекта доступна ниже этой статьи (загружена автоматически сайтом). Для подробной пошаговой настройки и живой демонстрации действия прокручивающегося текста обязательно посмотрите соответствующий раздел видео. Если вам нравится проект и вы хотите собрать его самостоятельно, вы также можете приобрести модуль RGB LED матрицы ESP32-S3 по партнерским ссылкам, указанным под кодом.

Изображения

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