Proyek Matriks LED RGB ESP32-S3 2 - Teks Berjalan

Proyek Matriks LED RGB ESP32-S3 2 - Teks Berjalan

Proyek 2 – Teks Berjalan pada Matriks LED RGB ESP32-S3

Pada proyek ini kita mengubah Matriks LED RGB ESP32-S3 menjadi papan teks kecil. Pesan singkat (misalnya Robojax) berjalan melintasi layar RGB 8×8, dan Anda dapat dengan mudah mengubah teks, warna, kecerahan, dan kecepatan gulir langsung di dalam kode. Ini sangat berguna untuk notifikasi sederhana, papan nama, atau pesan status kecil.

Semua enam proyek dalam seri ini didemonstrasikan dan dijelaskan dalam satu video YouTube. Video yang sama disematkan di halaman ini, sehingga Anda dapat melihat dengan tepat bagaimana gulir teks terlihat secara real-time dan bagaimana setiap pengaturan memengaruhi animasi. Kode lengkap untuk proyek ini dimuat secara otomatis di bawah artikel, dan Anda dapat membeli modul Matriks LED RGB ESP32-S3 dari toko afiliasi yang tercantum di bawah bagian kode.

Proyek ini dibangun di atas dasar Proyek 1 (titik bergerak dan kontrol warna) dan menambahkan rendering teks serta pengguliran menggunakan pustaka NeoMatrix.

Ikhtisar Modul Matriks LED RGB ESP32-S3

Perangkat kerasnya sama untuk keenam proyek: mikrokontroler ESP32-S3 dengan Wi-Fi dan Bluetooth, matriks LED RGB 8×8 (64 LED RGB yang dapat dialamatkan), akselerometer QMI8658C, port USB, dan pin IO yang dapat diakses.:contentReference[oaicite:0]{index=0}

• ESP32-S3 – CPU utama dengan Wi-Fi/BLE untuk proyek lanjutan.
• Matriks RGB 8×8 – 64 LED RGB untuk ikon, teks, dan animasi.
• Akselerometer QMI8658C – digunakan di proyek selanjutnya untuk kemiringan dan orientasi.
• Port USB – digunakan untuk daya dan pemrograman melalui Arduino IDE.
• Pin yang terekspos – memungkinkan Anda menggunakan papan seperti ESP32 normal untuk IO lainnya.
• Tombol Boot / Reset – untuk unggahan firmware dan memulai ulang sketsa.

Pada Proyek 2 kami terutama berfokus pada matriks dan fungsi teks NeoMatrix. Akselerometer belum digunakan, tetapi papan yang sama akan menangani semua proyek interaksi dan permainan selanjutnya juga.

Proyek yang Dicakup dalam Video (Stempel Waktu)

Video yang menyertai artikel ini mencakup keenam proyek. Perkiraan stempel waktunya adalah:

• 00:00 – Pendahuluan
• 02:01 – Menginstal papan ESP32
• 03:32 – Menginstal pustaka
• 05:32 – Proyek 1: Titik Bergerak
• 11:11 – Proyek 2: Teks Berjalan
• 12:59 – Proyek 3: Teks HTTP
• 16:41 – Proyek 4: Titik Miring
• 18:55 – Proyek 5: Panah ke Atas
• 20:02 – Proyek 6: Permainan Target

Anda disarankan untuk menonton video sambil membaca artikel ini. Video tersebut menunjukkan teks yang berjalan secara langsung di matriks LED dan memandu semua langkah di Arduino IDE.

Menginstal Papan ESP32 di Arduino IDE

Sebelum menjalankan kode teks berjalan, pastikan dukungan ESP32 telah diinstal di Arduino IDE Anda:

1. Buka File > Preferences dan tambahkan URL papan ESP32 ke “Additional Boards Manager URLs”.
2. Buka Tools > Board > Boards Manager…, cari ESP32, dan instal paket ESP32 resmi.
3. Pilih papan Matriks LED RGB ESP32-S3 Anda dari Tools > Board.
4. Hubungkan modul melalui USB dan pilih port COM/serial yang benar di bawah Tools > Port.

Jika jenis papan atau port tidak benar, sketsa tidak akan terunggah.

Menginstal NeoMatrix dan Pustaka yang Diperlukan

Teks berjalan diimplementasikan menggunakan Adafruit NeoMatrix dan dependensinya. Dalam video, pustaka tersebut diinstal melalui Library Manager.

Anda akan memerlukan:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. Buka Sketch > Include Library > Manage Libraries….
2. Cari Adafruit NeoMatrix dan klik Install.
3. Saat diminta, izinkan untuk menginstal Adafruit GFX dan Adafruit NeoPixel sebagai dependensi.

Jika instalasi berhasil, Anda akan melihat contoh sketsa di bawah File > Examples > Adafruit NeoMatrix dan File > Examples > Adafruit NeoPixel.

Proyek 2 – Pengaturan Kode (Teks Berjalan)

Sketsa teks berjalan lengkap dimuat secara otomatis di bawah artikel ini di situs web. Di sini kami hanya berfokus pada nilai konfigurasi yang mungkin ingin Anda edit: pin, ukuran matriks, kecerahan, string teks, warna, kecepatan gulir, dan arah opsional.

Semua cuplikan di bawah diambil dari bagian konfigurasi di bagian atas sketsa sehingga Anda dapat dengan cepat menyesuaikan perilaku tanpa menyentuh logika utama.

Pin dan Ukuran Matriks

Sama seperti Proyek 1, matriks RGB terhubung ke GPIO 14 dan berisi 64 LED (8×8). Pastikan dua baris ini sesuai dengan modul Anda:

 // Pin terhubung ke matriks RGB 8×8 
const int MATRIX_PIN = 14; // harus 14 pada modul ini // Ukuran matriks (lebar dan tinggi)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Jika Anda menyalin contoh dari pustaka NeoMatrix, mungkin menggunakan pin atau ukuran yang berbeda; selalu ubah agar sesuai dengan papan ini.

Kecerahan Teks

Kecerahan biasanya dikontrol dengan nilai antara 0 dan 255, di mana 0 adalah mati dan 255 adalah kecerahan maksimum. Nilai sedang biasanya sudah cukup:

// Kecerahan keseluruhan matriks (0–255) 
uint8_t matrixBrightness = 40; // kecerahan dalam ruangan yang nyaman // Di 
setup(): 
matrix.setBrightness(matrixBrightness); 

Jika Anda menggunakan panel di lingkungan yang terang atau untuk waktu singkat, Anda dapat meningkatkan nilai ini, tetapi hindari terlalu tinggi jika Anda dekat dengan layar.

Teks untuk Digulir

Pesan sebenarnya disimpan sebagai string. Dalam video, contoh teksnya adalah Robojax. Anda dapat mengubahnya menjadi label atau pesan pendek apa pun yang Anda suka:

 // Teks untuk digulir pada matriks 8×8 const char scrollText[] = "Robojax";
 // ubah ini menjadi pesan Anda 

Perlu diingat bahwa ini hanya matriks 8×8, jadi pesan yang sangat panjang akan membutuhkan waktu lebih lama untuk digulir dan mungkin sulit dibaca.

Warna Teks (Nilai RGB)

Warna teks yang digulir diatur oleh komponen merah, hijau, dan biru (0–255). Misalnya, merah murni adalah (255, 0, 0), hijau murni adalah (0, 255, 0), dan biru murni adalah (0, 0, 255). Dalam sketsa, Anda akan melihat sesuatu seperti:

 // Warna teks (R, G, B) uint8_t textRed = 255; // komponen merah uint8_t textGreen = 0; // komponen hijau uint8_t textBlue = 0; // komponen biru 

Untuk mengubah warna:

• Kuning: textRed = 255; textGreen = 255; textBlue = 0;
• Cyan: textRed = 0; textGreen = 255; textBlue = 255;
• Putih: textRed = 255; textGreen = 255; textBlue = 255;

Video juga menunjukkan penggunaan pemilih warna online untuk menemukan nilai RGB dan kemudian memasukkannya ke dalam kode.:contentReference[oaicite:1]{index=1}

Kecepatan Gulir (Penundaan Antar Bingkai)

Kecepatan gulir dikendalikan oleh nilai penundaan dalam milidetik antara setiap langkah pembaruan. Nilai yang lebih kecil membuat teks bergerak lebih cepat; nilai yang lebih besar memperlambatnya. Dalam sketsa, Anda akan menemukan variabel seperti:

// Penundaan antara langkah gulir (dalam milidetik) int scrollDelayMs = 50; 
// lebih kecil = lebih cepat, lebih besar = lebih lambat 

Contoh:

• scrollDelayMs = 20; → gulir cepat.
• scrollDelayMs = 50; → kecepatan sedang (mirip dengan video).
• scrollDelayMs = 100; atau lebih → gulir lambat dan mudah dibaca.

Di dalam loop(), nilai ini digunakan dalam panggilan delay(scrollDelayMs); setelah setiap penggambaran ulang posisi teks.

Arah Gulir (Opsional)

Dalam proyek “gulir teks dasar”, kami biasanya menggulir ke kiri, tetapi berguna untuk mendefinisikan variabel arah simbolis sehingga Anda dapat bereksperimen dengan arah lain nanti (kiri, kanan, atas, bawah).

Salah satu pola umum adalah:

 // Pemilih arah gulir // 0 = kiri, 1 = kanan, 2 = atas, 3 = bawah 
int scrollDirection = 0; // default: gulir ke kiri 

Loop utama kemudian memeriksa scrollDirection dan menggerakkan teks ke arah yang dipilih. Untuk Proyek 2, Anda dapat membiarkannya di 0 (kiri), tetapi jika Anda memperluas sketsa nanti, Anda dapat menambahkan kondisi seperti:

 if (scrollDirection == 0) { 
// gerakkan teks ke kiri 
} else if (scrollDirection == 1) { 
// gerakkan teks ke kanan 
} else if (scrollDirection == 2) { 
// gerakkan teks ke atas
 } else if (scrollDirection == 3) { 
// gerakkan teks ke bawah 
}
 

Untuk artikel ini, kami hanya mendokumentasikan pengaturannya. Implementasi lengkapnya adalah bagian dari kode yang dimuat di bawah artikel.

Ringkasan

Proyek 2 mengubah ESP32-S3 RGB LED Matrix Anda menjadi tampilan teks yang sederhana namun menarik. Dengan mengedit hanya beberapa variabel di bagian atas kode, Anda dapat dengan cepat mengubah:

• Pesan apa yang ditampilkan (scrollText).
• Warna teks (textRed, textGreen, textBlue).
• Kecerahan matriks (matrixBrightness).
• Kecepatan gulir (scrollDelayMs).
• Arah gulir (scrollDirection, jika Anda memilih untuk menggunakannya).

Sketsa lengkap untuk proyek ini tersedia di bawah artikel ini (dimuat secara otomatis oleh situs web). Untuk konfigurasi langkah demi langkah yang terperinci dan demonstrasi langsung dari teks yang digulir, pastikan untuk menonton bagian video yang sesuai. Jika Anda menyukai proyek ini dan ingin membuatnya sendiri, Anda juga dapat membeli modul ESP32-S3 RGB LED Matrix dari tautan afiliasi yang tercantum di bawah kode.

Gambar

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