โปรเจกต์ ESP32-S3 RGB LED Matrix 2 - ข้อความเลื่อน

โปรเจกต์ ESP32-S3 RGB LED Matrix 2 - ข้อความเลื่อน

โปรเจกต์ 2 – การเลื่อนข้อความบน ESP32-S3 RGB LED Matrix

ในโปรเจกต์นี้ เราจะเปลี่ยน ESP32-S3 RGB LED Matrix ให้เป็นป้ายข้อความขนาดเล็ก ข้อความสั้นๆ (เช่น Robojax) จะเลื่อนผ่านจอแสดงผล RGB ขนาด 8×8 และคุณสามารถเปลี่ยนข้อความ สี ความสว่าง และความเร็วในการเลื่อนได้โดยตรงในโค้ด สิ่งนี้มีประโยชน์มากสำหรับการแจ้งเตือนง่ายๆ ป้ายชื่อ หรือข้อความสถานะขนาดเล็ก

โปรเจกต์ทั้งหกในชุดนี้ได้รับการสาธิตและอธิบายในวิดีโอ YouTube เดียว วิดีโอเดียวกันนี้ถูกฝังอยู่ในหน้านี้ เพื่อให้คุณเห็นได้อย่างชัดเจนว่าการเลื่อนข้อความมีลักษณะอย่างไรแบบเรียลไทม์ และการตั้งค่าแต่ละอย่างส่งผลต่อแอนิเมชันอย่างไร โค้ดที่สมบูรณ์สำหรับโปรเจกต์นี้จะถูกโหลดโดยอัตโนมัติด้านล่างบทความ และคุณสามารถซื้อโมดูล ESP32-S3 RGB LED Matrix ได้จากร้านค้าในเครือที่ระบุไว้ใต้ส่วนโค้ด

โปรเจกต์นี้ต่อยอดจากพื้นฐานของโปรเจกต์ 1 (จุดเคลื่อนที่และการควบคุมสี) และเพิ่มการแสดงผลข้อความและการเลื่อนโดยใช้ไลบรารี NeoMatrix

ภาพรวมโมดูล ESP32-S3 RGB LED Matrix

ฮาร์ดแวร์จะเหมือนกันในทั้งหกโปรเจกต์: ไมโครคอนโทรลเลอร์ ESP32-S3 พร้อม Wi-Fi และบลูทูธ, เมทริกซ์ LED RGB ขนาด 8×8 (LED RGB ที่ระบุแอดเดรสได้ 64 ดวง), มาตรวัดความเร่ง QMI8658C, พอร์ต USB และพิน IO ที่เข้าถึงได้

• ESP32-S3 – CPU หลักพร้อม Wi-Fi/BLE สำหรับโปรเจกต์ขั้นสูง
• เมทริกซ์ RGB ขนาด 8×8 – LED RGB 64 ดวงสำหรับไอคอน ข้อความ และแอนิเมชัน
• มาตรวัดความเร่ง 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 matrix และอธิบายขั้นตอนทั้งหมดใน Arduino IDE

การติดตั้งบอร์ด ESP32 ใน Arduino IDE

ก่อนรันโค้ดการเลื่อนข้อความ ตรวจสอบให้แน่ใจว่าได้ติดตั้งการรองรับ ESP32 ใน Arduino IDE ของคุณแล้ว:

1. เปิด File > Preferences และเพิ่ม URL ของบอร์ด ESP32 ใน “Additional Boards Manager URLs”
2. ไปที่ Tools > Board > Boards Manager… ค้นหา ESP32 และติดตั้งแพ็กเกจ ESP32 อย่างเป็นทางการ
3. เลือกบอร์ด ESP32-S3 RGB Matrix ของคุณจาก Tools > Board
4. เชื่อมต่อโมดูลผ่าน USB และเลือกพอร์ต COM/ซีเรียลที่ถูกต้องภายใต้ Tools > Port

หากประเภทบอร์ดหรือพอร์ตไม่ถูกต้อง สเก็ตช์จะไม่สามารถอัปโหลดได้

การติดตั้ง NeoMatrix และไลบรารีที่จำเป็น

การเลื่อนข้อความถูก implement โดยใช้ Adafruit NeoMatrix และ dependencies ของมัน ในวิดีโอ มีการติดตั้งผ่าน Library Manager

คุณจะต้องมี:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. เปิด Sketch > Include Library > Manage Libraries…
2. ค้นหา Adafruit NeoMatrix และคลิก Install
3. เมื่อได้รับแจ้ง อนุญาตให้ติดตั้ง Adafruit GFX และ Adafruit NeoPixel เป็น dependencies

หากการติดตั้งสำเร็จ คุณควรเห็นตัวอย่างสเก็ตช์ภายใต้ File > Examples > Adafruit NeoMatrix และ File > Examples > Adafruit NeoPixel

โปรเจกต์ 2 – การตั้งค่าโค้ด (การเลื่อนข้อความ)

สเก็ตช์การเลื่อนข้อความแบบเต็มจะถูกโหลดโดยอัตโนมัติด้านล่างบทความนี้บนเว็บไซต์ ที่นี่เราจะเน้นเฉพาะค่าการกำหนดค่าที่คุณอาจต้องการแก้ไข: พิน ขนาดเมทริกซ์ ความสว่าง สตริงข้อความ สี ความเร็วในการเลื่อน และทิศทางเสริม

ตัวอย่างโค้ดทั้งหมดด้านล่างนำมาจากส่วนการกำหนดค่าที่ด้านบนของสเก็ตช์ เพื่อให้คุณสามารถปรับเปลี่ยนพฤติกรรมได้อย่างรวดเร็วโดยไม่ต้องแตะตรรกะหลัก

พินและขนาดเมทริกซ์

เช่นเดียวกับโปรเจกต์ 1 เมทริกซ์ RGB เชื่อมต่อกับ GPIO 14 และมี LED 64 ดวง (8×8) ตรวจสอบให้แน่ใจว่าสองบรรทัดนี้ตรงกับโมดูลของคุณ:

 // พินที่เชื่อมต่อกับเมทริกซ์ RGB ขนาด 8×8 
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 แล้วป้อนลงในโค้ด

ความเร็วในการเลื่อน (ดีเลย์ระหว่างเฟรม)

ความเร็วในการเลื่อนถูกควบคุมโดยค่าดีเลย์ในหน่วยมิลลิวินาทีระหว่างแต่ละขั้นตอนการอัปเดต ค่าที่น้อยกว่าทำให้ข้อความเคลื่อนที่เร็วขึ้น ค่าที่มากกว่าจะทำให้ช้าลง ในโค้ด คุณควรพบตัวแปรเช่น:

// ดีเลย์ระหว่างขั้นตอนการเลื่อน (ในหน่วยมิลลิวินาที) 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 Matrix ของคุณให้เป็นจอแสดงข้อความที่เรียบง่ายแต่สะดุดตา โดยการแก้ไขตัวแปรเพียงไม่กี่ตัวที่ด้านบนของโค้ด คุณสามารถเปลี่ยนได้อย่างรวดเร็ว:

• ข้อความที่แสดง (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();
  }
}