ESP32-S3 RGB LED 매트릭스 프로젝트 2 - 스크롤 텍스트

This tutorial is part of: ESP32-S3 RGB LED 매트릭스

ESP32-S3 RGB 매트릭스 모듈을 활용한 재미있고 실용적인 프로젝트를 만들어 보세요. 다른 영상 링크는 이 글 아래에 있습니다.

유튜브에서 보기

ESP32-S3 RGB LED 매트릭스 프로젝트 2 - 스크롤 텍스트

프로젝트 2 – ESP32-S3 RGB LED 매트릭스에서 텍스트 스크롤

이 프로젝트에서는 ESP32-S3 RGB LED 매트릭스를 작은 텍스트 배너로 변환합니다. 짧은 메시지(예: Robojax)가 8×8 RGB 디스플레이에 스크롤되며, 코드에서 텍스트, 색상, 밝기 및 스크롤 속도를 쉽게 변경할 수 있습니다. 이는 간단한 알림, 이름표 또는 작은 상태 메시지에 매우 유용합니다.

이 시리즈의 6개 프로젝트 모두 단일 YouTube 비디오에서 시연되고 설명됩니다. 동일한 비디오가 이 페이지에 포함되어 있으므로 텍스트 스크롤이 실시간으로 어떻게 보이는지, 각 설정이 애니메이션에 어떤 영향을 미치는지 정확히 확인할 수 있습니다. 이 프로젝트의 전체 코드는 기사 아래에 자동으로 로드되며, 코드 섹션 아래에 나열된 제휴 스토어에서 ESP32-S3 RGB LED 매트릭스 모듈을 구매할 수 있습니다.

이 프로젝트는 프로젝트 1(이동 점 및 색상 제어)의 기본 사항을 기반으로 하며 NeoMatrix 라이브러리를 사용하여 텍스트 렌더링 및 스크롤을 추가합니다.

ESP32 S3 Matrix

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3 RGB LED 매트릭스 모듈 개요

하드웨어는 6개 프로젝트 모두 동일합니다: Wi-Fi 및 Bluetooth가 있는 ESP32-S3 마이크로컨트롤러, 8×8 RGB LED 매트릭스(64개의 주소 지정 가능한 RGB LED), QMI8658C 가속도계, USB 포트 및 접근 가능한 IO 핀입니다.:contentReference[oaicite:0]{index=0}

ESP32-S3_RGB_8x8_matrix1

ESP32-S3 – 고급 프로젝트용 Wi-Fi/BLE가 있는 메인 CPU.
8×8 RGB 매트릭스 – 아이콘, 텍스트 및 애니메이션용 64개의 RGB LED.
QMI8658C 가속도계 – 이후 프로젝트에서 기울기 및 방향 감지에 사용.
USB 포트 – Arduino IDE를 통한 전원 공급 및 프로그래밍에 사용.
노출된 핀 – 일반 ESP32처럼 보드를 다른 IO에 사용할 수 있게 함.
부팅/리셋 버튼 – 펌웨어 업로드 및 스케치 재시작용.

프로젝트 2에서는 주로 매트릭스와 NeoMatrix 텍스트 기능에 초점을 맞춥니다. 가속도계는 아직 사용되지 않지만, 동일한 보드가 이후의 모든 상호작용 및 게임 프로젝트도 처리합니다.

ESP32 S3 Matrix pin out

비디오에서 다루는 프로젝트(타임스탬프)

이 기사와 함께 제공되는 비디오는 6개 프로젝트를 모두 다룹니다. 대략적인 타임스탬프는 다음과 같습니다:

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의 모든 단계를 안내합니다.

Arduino IDE에 ESP32 보드 설치

텍스트 스크롤 코드를 실행하기 전에 Arduino IDE에 ESP32 지원이 설치되어 있는지 확인하세요:

파일 > 기본 설정을 열고 “추가 보드 매니저 URL”에 ESP32 보드 URL을 추가합니다.
도구 > 보드 > 보드 매니저…로 이동하여 ESP32를 검색하고 공식 ESP32 패키지를 설치합니다.
도구 > 보드에서 ESP32-S3 RGB 매트릭스 보드를 선택합니다.
USB로 모듈을 연결하고 도구 > 포트에서 올바른 COM/시리얼 포트를 선택합니다.

보드 유형이나 포트가 올바르지 않으면 스케치가 업로드되지 않습니다.

NeoMatrix 및 필수 라이브러리 설치

텍스트 스크롤은 Adafruit NeoMatrix 및 해당 종속성을 사용하여 구현됩니다. 비디오에서는 라이브러리 매니저를 통해 설치됩니다.

필요한 항목:

Adafruit NeoMatrix
Adafruit NeoPixel
Adafruit GFX Library

스케치 > 라이브러리 포함 > 라이브러리 관리…를 엽니다.
Adafruit NeoMatrix를 검색하고 설치를 클릭합니다.
메시지가 표시되면 Adafruit GFX 및 Adafruit NeoPixel을 종속성으로 설치하도록 허용합니다.

설치가 성공하면 파일 > 예제 > Adafruit NeoMatrix 및 파일 > 예제 > 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 매트릭스 모듈을 구매할 수도 있습니다.

이미지

ESP32 S3 Matrix

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

ESP32-S3-Mtrix - Alway Up

This tutorial is part of: ESP32-S3 RGB LED 매트릭스

Please view this page in English if the code is not visible. We’re sorry for the inconvenience.

800-ESP32-S3 RGB LED Matrix Project 2 - Scrolling Text

언어: C++

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

필요할 수 있는 것들

아마존
Purchase ESP32-S3 RGB Matrix from Amazon
amzn.to
이베이
Purchase ESP32-S3 RGB Matrix from eBay
ebay.us
알리익스프레스
Purchase ESP32-S3 RGB Matrix from AliExpress
s.click.aliexpress.com
알리익스프레스
Purchase ESP32-S3 RGB Matrix from AliExpress (2)
s.click.aliexpress.com

자원 및 참고자료

내부
🎨 Color picker Tool
robojax.com

파일📁

프리징 파일

esp32-S3-supermini-tht fritzing part
esp32-S3-supermini-tht.fzpz 0.02 MB