Dự án Ma trận LED RGB ESP32-S3 2 - Văn bản cuộn

Dự án Ma trận LED RGB ESP32-S3 2 - Văn bản cuộn

Dự án 2 – Cuộn chữ trên Ma trận LED RGB ESP32-S3

Trong dự án này, chúng ta biến Ma trận LED RGB ESP32-S3 thành một bảng chữ nhỏ. Một thông điệp ngắn (ví dụ Robojax) cuộn ngang qua màn hình RGB 8×8 và bạn có thể dễ dàng thay đổi văn bản, màu sắc, độ sáng và tốc độ cuộn trực tiếp trong mã. Điều này rất hữu ích cho các thông báo đơn giản, thẻ tên hoặc tin nhắn trạng thái nhỏ.

Tất cả sáu dự án trong loạt bài này được trình diễn và giải thích trong một video YouTube duy nhất. Video tương tự được nhúng trên trang này, vì vậy bạn có thể thấy chính xác cách cuộn chữ trông như thế nào trong thời gian thực và cách mỗi cài đặt ảnh hưởng đến hoạt ảnh. Mã hoàn chỉnh cho dự án này được tải tự động bên dưới bài viết và bạn có thể mua mô-đun Ma trận LED RGB ESP32-S3 từ các cửa hàng liên kết được liệt kê trong phần mã.

Dự án này xây dựng dựa trên những kiến thức cơ bản của Dự án 1 (chấm di chuyển và điều khiển màu sắc) và thêm khả năng hiển thị văn bản và cuộn bằng thư viện NeoMatrix.

Tổng quan về Mô-đun Ma trận LED RGB ESP32-S3

Phần cứng giống nhau cho cả sáu dự án: vi điều khiển ESP32-S3 với Wi-Fi và Bluetooth, ma trận LED RGB 8×8 (64 đèn LED RGB có thể định địa chỉ), gia tốc kế QMI8658C, cổng USB và các chân IO có thể truy cập.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – CPU chính với Wi-Fi/BLE cho các dự án nâng cao.
• Ma trận RGB 8×8 – 64 đèn LED RGB cho biểu tượng, văn bản và hoạt ảnh.
• Gia tốc kế QMI8658C – được sử dụng trong các dự án sau cho độ nghiêng và hướng.
• Cổng USB – được sử dụng để cấp nguồn và lập trình qua Arduino IDE.
• Các chân tiếp xúc – cho phép bạn sử dụng bo mạch như một ESP32 thông thường cho các IO khác.
• Nút Boot / Reset – để tải firmware và khởi động lại sketch.

Trong Dự án 2, chúng tôi chủ yếu tập trung vào ma trận và các chức năng văn bản NeoMatrix. Gia tốc kế chưa được sử dụng, nhưng cùng một bo mạch sẽ xử lý tất cả các dự án tương tác và trò chơi sau này.

Các dự án được trình bày trong video (Dấu thời gian)

Video đi kèm với bài viết này bao gồm tất cả sáu dự án. Các dấu thời gian gần đúng là:

• 00:00 – Giới thiệu
• 02:01 – Cài đặt bo mạch ESP32
• 03:32 – Cài đặt thư viện
• 05:32 – Dự án 1: Chấm di chuyển
• 11:11 – Dự án 2: Cuộn chữ
• 12:59 – Dự án 3: Văn bản HTTP
• 16:41 – Dự án 4: Chấm nghiêng
• 18:55 – Dự án 5: Mũi tên lên
• 20:02 – Dự án 6: Trò chơi bắn mục tiêu

Bạn nên xem video trong khi đọc bài viết này. Video cho thấy văn bản cuộn trực tiếp trên ma trận LED và hướng dẫn từng bước trong Arduino IDE.

Cài đặt bo mạch ESP32 trong Arduino IDE

Trước khi chạy mã cuộn chữ, hãy đảm bảo hỗ trợ ESP32 đã được cài đặt trong Arduino IDE của bạn:

1. Mở File > Preferences và thêm URL bo mạch ESP32 vào “Additional Boards Manager URLs”.
2. Đi tới Tools > Board > Boards Manager…, tìm kiếm ESP32 và cài đặt gói ESP32 chính thức.
3. Chọn bo mạch Ma trận LED RGB ESP32-S3 của bạn từ Tools > Board.
4. Kết nối mô-đun qua USB và chọn cổng COM/serial chính xác trong Tools > Port.

Nếu loại bo mạch hoặc cổng không chính xác, sketch sẽ không tải lên được.

Cài đặt NeoMatrix và các thư viện cần thiết

Cuộn chữ được triển khai bằng Adafruit NeoMatrix và các phần phụ thuộc của nó. Trong video, chúng được cài đặt qua Library Manager.

Bạn sẽ cần:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Mở Sketch > Include Library > Manage Libraries….
2. Tìm kiếm Adafruit NeoMatrix và nhấp vào Install.
3. Khi được nhắc, cho phép cài đặt Adafruit GFX và Adafruit NeoPixel làm phần phụ thuộc.

Nếu cài đặt thành công, bạn sẽ thấy các sketch ví dụ trong File > Examples > Adafruit NeoMatrix và File > Examples > Adafruit NeoPixel.

Dự án 2 – Cài đặt mã (Cuộn chữ)

Sketch cuộn chữ đầy đủ được tải tự động bên dưới bài viết này trên trang web. Ở đây chúng tôi chỉ tập trung vào các giá trị cấu hình mà bạn có thể muốn chỉnh sửa: chân, kích thước ma trận, độ sáng, chuỗi văn bản, màu sắc, tốc độ cuộn và hướng tùy chọn.

Tất cả các đoạn mã dưới đây được lấy từ phần cấu hình ở đầu sketch để bạn có thể nhanh chóng điều chỉnh hành vi mà không cần chạm vào logic chính.

Chân và kích thước ma trận

Giống như Dự án 1, ma trận RGB được kết nối với GPIO 14 và chứa 64 đèn LED (8×8). Đảm bảo hai dòng này khớp với mô-đun của bạn:

 // Chân kết nối với ma trận RGB 8×8 
const int MATRIX_PIN = 14; // phải là 14 trên mô-đun này // Kích thước ma trận (chiều rộng và chiều cao)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Nếu bạn sao chép một ví dụ từ thư viện NeoMatrix, nó có thể sử dụng chân hoặc kích thước khác; luôn thay đổi chúng để khớp với bo mạch này.

Độ sáng của văn bản

Độ sáng thường được điều khiển bằng giá trị từ 0 đến 255, trong đó 0 là tắt và 255 là độ sáng tối đa. Một giá trị vừa phải thường là đủ:

// Độ sáng tổng thể của ma trận (0–255) 
uint8_t matrixBrightness = 40; // độ sáng trong nhà thoải mái // Trong 
setup(): 
matrix.setBrightness(matrixBrightness); 

Nếu bạn sử dụng bảng trong môi trường sáng hoặc trong thời gian ngắn, bạn có thể tăng giá trị này, nhưng tránh tăng quá cao nếu bạn ở gần màn hình.

Văn bản cuộn

Thông điệp thực tế được lưu dưới dạng chuỗi. Trong video, văn bản ví dụ là Robojax. Bạn có thể thay đổi nó thành bất kỳ nhãn hoặc thông điệp ngắn nào bạn muốn:

 // Văn bản để cuộn trên ma trận 8×8 const char scrollText[] = "Robojax";
 // thay đổi cái này thành thông điệp của bạn 

Hãy nhớ rằng đây chỉ là ma trận 8×8, vì vậy các thông điệp rất dài sẽ mất nhiều thời gian hơn để cuộn và có thể khó đọc.

Màu văn bản (Giá trị RGB)

Màu của văn bản cuộn được đặt bởi các thành phần đỏ, lục và lam (0–255). Ví dụ, màu đỏ thuần là (255, 0, 0), màu lục thuần là (0, 255, 0), và màu lam thuần là (0, 0, 255). Trong bản phác thảo, bạn sẽ thấy một cái gì đó như:

 // Màu văn bản (R, G, B) uint8_t textRed = 255; // thành phần đỏ uint8_t textGreen = 0; // thành phần lục uint8_t textBlue = 0; // thành phần lam 

Để thay đổi màu:

• Vàng: textRed = 255; textGreen = 255; textBlue = 0;
• Xanh lơ: textRed = 0; textGreen = 255; textBlue = 255;
• Trắng: textRed = 255; textGreen = 255; textBlue = 255;

Video cũng trình bày cách sử dụng công cụ chọn màu trực tuyến để tìm giá trị RGB và sau đó nhập chúng vào mã.:contentReference[oaicite:1]{index=1}

Tốc độ cuộn (Độ trễ giữa các khung hình)

Tốc độ cuộn được điều khiển bởi giá trị độ trễ tính bằng mili giây giữa mỗi bước cập nhật. Giá trị nhỏ hơn làm văn bản di chuyển nhanh hơn; giá trị lớn hơn làm chậm lại. Trong bản phác thảo, bạn nên tìm một biến như:

// Độ trễ giữa các bước cuộn (tính bằng mili giây) int scrollDelayMs = 50; 
// nhỏ hơn = nhanh hơn, lớn hơn = chậm hơn 

Ví dụ:

• scrollDelayMs = 20; → cuộn nhanh.
• scrollDelayMs = 50; → tốc độ trung bình (tương tự như video).
• scrollDelayMs = 100; hoặc nhiều hơn → cuộn chậm, dễ đọc.

Bên trong loop(), giá trị này được sử dụng trong lệnh gọi delay(scrollDelayMs); sau mỗi lần vẽ lại vị trí văn bản.

Hướng cuộn (Tùy chọn)

Trong dự án “cuộn văn bản cơ bản”, chúng ta thường cuộn sang trái, nhưng việc xác định một biến hướng tượng trưng là hữu ích để bạn có thể thử nghiệm với các hướng khác sau này (trái, phải, lên, xuống).

Một mẫu phổ biến là:

 // Bộ chọn hướng cuộn // 0 = trái, 1 = phải, 2 = lên, 3 = xuống 
int scrollDirection = 0; // mặc định: cuộn sang trái 

Vòng lặp chính sau đó kiểm tra scrollDirection và di chuyển văn bản theo hướng đã chọn. Đối với Dự án 2, bạn có thể để nó ở 0 (trái), nhưng nếu bạn mở rộng bản phác thảo sau này, bạn có thể thêm các điều kiện như:

 if (scrollDirection == 0) { 
// di chuyển văn bản sang trái 
} else if (scrollDirection == 1) { 
// di chuyển văn bản sang phải 
} else if (scrollDirection == 2) { 
// di chuyển văn bản lên
 } else if (scrollDirection == 3) { 
// di chuyển văn bản xuống 
}
 

Đối với bài viết này, chúng tôi chỉ ghi lại cài đặt. Việc triển khai đầy đủ là một phần của mã được tải bên dưới bài viết.

Tóm tắt

Dự án 2 biến ESP32-S3 RGB LED Matrix của bạn thành một màn hình hiển thị văn bản đơn giản nhưng bắt mắt. Bằng cách chỉnh sửa một vài biến ở đầu mã, bạn có thể nhanh chóng thay đổi:

• Thông điệp nào được hiển thị (scrollText).
• Màu của văn bản (textRed, textGreen, textBlue).
• Độ sáng của ma trận (matrixBrightness).
• Tốc độ cuộn (scrollDelayMs).
• Hướng cuộn (scrollDirection, nếu bạn chọn sử dụng nó).

Bản phác thảo đầy đủ cho dự án này có sẵn bên dưới bài viết này (được tải tự động bởi trang web). Để biết cấu hình chi tiết từng bước và trình diễn trực tiếp về văn bản cuộn hoạt động, hãy đảm bảo xem phần tương ứng của video. Nếu bạn thích dự án này và muốn tự xây dựng nó, bạn cũng có thể mua mô-đun ESP32-S3 RGB LED Matrix từ các liên kết liên kết được liệt kê bên dưới mã.

Hình ảnh

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