Search Code

โปรเจกต์ ESP32-S3 RGB LED Matrix 3 - ข้อความจากโทรศัพท์มือถือ

ดูบน YouTube

โปรเจกต์ ESP32-S3 RGB LED Matrix 3 - ข้อความจากโทรศัพท์มือถือ

โปรเจกต์ 3 – ควบคุมข้อความบนเมทริกซ์จากโทรศัพท์ของคุณ (HTTP Text)

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

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

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

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

ฮาร์ดแวร์จะเหมือนกับโปรเจกต์อื่นๆ ทั้งหมดในซีรีส์นี้: บอร์ดไมโครคอนโทรลเลอร์ ESP32-S3 ที่มีเมทริกซ์ RGB LED ขนาด 8×8 ในตัว และเซนเซอร์ตรวจจับการเคลื่อนไหว QMI8658C อยู่ด้านหลัง พอร์ต USB-C ใช้สำหรับจ่ายไฟและการเขียนโปรแกรม และพินรอบขอบยังคงพร้อมใช้งานสำหรับ IO อื่นๆ

  • ESP32-S3 – ไมโครคอนโทรลเลอร์ที่รองรับ Wi-Fi และบลูทูธ
  • เมทริกซ์ RGB ขนาด 8×8 – หลอดไฟ RGB ที่กำหนดแอดเดรสได้ 64 ดวงสำหรับข้อความและกราฟิก
  • มาตรวัดความเร่ง QMI8658C – ใช้ในโปรเจกต์การเอียงและเกม
  • พอร์ต USB – จ่ายไฟให้บอร์ดและอัปโหลดสเก็ตช์จาก Arduino IDE
  • พินที่เปิดเผย – รองรับเซนเซอร์หรือแอคชูเอเตอร์เพิ่มเติมหากจำเป็น
  • ปุ่ม Boot/Reset – สำหรับอัปโหลดเฟิร์มแวร์และรีสตาร์ท

สำหรับโปรเจกต์ 3 คุณสมบัติที่สำคัญที่สุดคือ Wi-Fi ของ ESP32 ซึ่งช่วยให้บอร์ดทำหน้าที่เป็นเว็บเซิร์ฟเวอร์ขนาดเล็กสำหรับหน้าควบคุมข้อความ

โปรเจกต์ที่ครอบคลุมในวิดีโอ (ไทม์สแตมป์)

วิดีโอหนึ่งรายการสำหรับซีรีส์นี้ครอบคลุมโปรเจกต์ทั้งหมดหกโปรเจกต์ สำหรับการอ้างอิงอย่างรวดเร็ว:

  • 00:00 – บทนำ
  • 02:01 – การติดตั้งบอร์ด ESP32
  • 03:32 – การติดตั้งไลบรารี
  • 05:32 – โปรเจกต์ 1: จุดเคลื่อนที่
  • 11:11 – โปรเจกต์ 2: การเลื่อนข้อความ
  • 12:59 – โปรเจกต์ 3: HTTP Text (โปรเจกต์นี้)
  • 16:41 – โปรเจกต์ 4: จุดเอียง
  • 18:55 – โปรเจกต์ 5: ลูกศรขึ้น
  • 20:02 – โปรเจกต์ 6: เกมเป้า

เราขอแนะนำให้คุณดูส่วน HTTP Text ในวิดีโอขณะทำงานกับบทความนี้ วิดีโอแสดงให้เห็นว่าเว็บเพจถูกสร้างโดย ESP32 อย่างไร และการเปลี่ยนข้อความ สี และความเร็วสะท้อนบนเมทริกซ์ LED ได้ทันทีอย่างไร

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

หากคุณทำโปรเจกต์ 1 หรือ 2 เสร็จสิ้นแล้ว การตั้งค่าบอร์ดก็เสร็จสมบูรณ์ และคุณสามารถข้ามส่วนนี้ได้ มิฉะนั้น ให้ทำตามขั้นตอนเหล่านี้ใน 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 และเลือกพอร์ตอนุกรมที่ถูกต้องภายใต้ Tools > Port

หากไม่มีการรองรับบอร์ด ESP32 ที่เหมาะสมและพอร์ตที่ถูกต้อง สเก็ตช์เว็บเซิร์ฟเวอร์จะไม่สามารถอัปโหลดได้

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

โปรเจกต์นี้ใช้ไลบรารีเดียวกันกับโปรเจกต์การเลื่อนข้อความก่อนหน้านี้:

  • Adafruit NeoMatrix
  • Adafruit NeoPixel
  • Adafruit GFX Library

ติดตั้งผ่าน Library Manager:

  1. เปิด Sketch > Include Library > Manage Libraries…
  2. ค้นหา Adafruit NeoMatrix และคลิก Install
  3. ยอมรับการติดตั้ง dependencies (Adafruit GFX และ Adafruit NeoPixel)

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

โหมด Wi-Fi สองโหมดในโปรเจกต์ 3

แนวคิดที่สำคัญที่สุดในโปรเจกต์นี้คือ ESP32 สามารถทำงานใน สองโหมดที่แตกต่างกัน:

  1. โหมด Station (STA) – ESP32 เชื่อมต่อกับเครือข่าย Wi-Fi ที่บ้านที่มีอยู่ของคุณ
  2. โหมด Access Point (AP) – ESP32 สร้างเครือข่าย Wi-Fi ของตัวเองหากไม่มี Wi-Fi ที่บ้าน

ทั้งสองโหมดใช้อินเทอร์เฟซเว็บเดียวกัน: หน้า HTML ที่ให้บริการจาก ESP32 เอง ซึ่งคุณสามารถเปลี่ยนข้อความ สี ทิศทางการเลื่อน และความเร็วได้

โหมด 1 – เชื่อมต่อกับ Wi-Fi ที่บ้าน (โหมด Station)

ในโหมด Station ESP32 จะเข้าร่วมเครือข่าย Wi-Fi ที่บ้านหรือที่ทำงานของคุณ นี่คือโหมดที่ต้องการเมื่อเราเตอร์ของคุณพร้อมใช้งาน เนื่องจาก:

  • โทรศัพท์และคอมพิวเตอร์ของคุณเชื่อมต่อกับเครือข่าย Wi-Fi เดียวกันอยู่แล้ว
  • คุณสามารถเปิดเบราว์เซอร์ไปยังที่อยู่ IP ของ ESP32 และควบคุมข้อความจากอุปกรณ์ใดก็ได้บนเครือข่ายนั้น

ในส่วนการตั้งค่าของสเก็ตช์ คุณระบุ SSID และรหัสผ่าน Wi-Fi ของคุณ:

// ข้อมูล Wi-Fi ที่บ้าน (โหมด Station) const char* WIFI_SSID = "YourHomeWiFi"; const char* WIFI_PASS = "YourHomePassword";

หลังจากที่บอร์ดบูตขึ้นมา มันจะพยายามเชื่อมต่อกับ WIFI_SSID หากสำเร็จ โค้ดจะพิมพ์ที่อยู่ IP ที่ได้รับไปยัง Serial Monitor เช่น:


Connected to WiFi
IP address: 192.168.1.16

เพื่อควบคุมข้อความ:

  1. ตรวจสอบให้แน่ใจว่าโทรศัพท์หรือพีซีของคุณเชื่อมต่อกับเครือข่าย Wi-Fi เดียวกัน (เช่น YourHomeWiFi)
  2. เปิดเบราว์เซอร์และป้อนที่อยู่ IP ที่พิมพ์ออกมา เช่น http://192.168.1.16/
  3. หน้าเว็บควบคุมจะปรากฏขึ้น ให้คุณพิมพ์ข้อความ เลือกสี เลือกทิศทาง และปรับความเร็วการเลื่อนได้

โหมด 2 – จุดเชื่อมต่อแบบสแตนด์อโลน (โหมด AP)

หาก ESP32 ไม่สามารถเชื่อมต่อกับ Wi-Fi ที่บ้านของคุณได้ (รหัสผ่านผิด เครือข่ายไม่พร้อมใช้งาน หรือคุณใช้โมดูลนอกสถานที่) สเก็ตช์จะสลับไปใช้โหมด Access Point โดยอัตโนมัติ ในโหมด AP ESP32 เองจะกลายเป็นฮอตสปอต Wi-Fi ที่มีชื่อเครือข่ายและรหัสผ่านของตัวเอง

ในโปรเจกต์นี้ การตั้งค่า AP ถูกกำหนดไว้คงที่ดังนี้:


// ข้อมูลประจำตัว Access Point (AP) (โหมดสำรอง)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

เมื่อโหมด Station ล้มเหลว โมดูลจะสลับไปใช้โหมด AP และเริ่มกระจายเครือข่าย Wi-Fi ที่ชื่อ ESP32 เพื่อควบคุมเมทริกซ์:

  1. บนโทรศัพท์หรือคอมพิวเตอร์ของคุณ เปิดการตั้งค่า Wi-Fi และเชื่อมต่อกับเครือข่าย ESP32
  2. ป้อนรหัสผ่าน password (ตามที่กำหนดในโค้ด)
  3. เมื่อเชื่อมต่อแล้ว เปิดเบราว์เซอร์และไปที่ http://192.168.4.1/ (IP เริ่มต้นสำหรับโหมด AP ของ ESP32)
  4. หน้าเว็บควบคุมเดียวกันจะปรากฏขึ้น ให้คุณเปลี่ยนข้อความ สี ความเร็ว และทิศทางได้

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

โปรเจกต์ 3 – การตั้งค่าหลักในโค้ด

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

การตั้งค่า Wi-Fi และ Access Point

ที่ด้านบนของสเก็ตช์ คุณจะพบส่วนการกำหนดค่า Wi-Fi เปลี่ยนเฉพาะข้อมูลประจำตัว Station (Wi-Fi ที่บ้าน) เท่านั้น การตั้งค่า AP ปกติจะคงค่าเริ่มต้นไว้:


// ---------- การตั้งค่า Wi-Fi ----------

// Wi-Fi ที่บ้าน (โหมด Station)
const char* WIFI_SSID = "YourHomeWiFi";      // ใส่ SSID ของเราเตอร์ที่นี่
const char* WIFI_PASS = "YourHomePassword";  // ใส่รหัสผ่านของเราเตอร์ที่นี่

// Access Point สำรอง (โหมด AP)
const char* AP_SSID = "ESP32";               // ชื่อ AP คงที่
const char* AP_PASS = "password";            // รหัสผ่าน AP คงที่

พฤติกรรม:

  • หาก WIFI_SSID และ WIFI_PASS ถูกต้องและเครือข่ายพร้อมใช้งาน → ESP32 เชื่อมต่อเป็นอุปกรณ์ Wi-Fi ปกติ (โหมด Station)
  • หากการเชื่อมต่อล้มเหลวหลังจากหมดเวลา → ESP32 เริ่ม AP ของตัวเองโดยใช้ AP_SSID และ AP_PASS

พินเมทริกซ์ ขนาด และความสว่าง

การตั้งค่าเหล่านี้เหมือนกับโปรเจกต์ก่อนหน้า:


// การกำหนดค่าเมทริกซ์
const int MATRIX_PIN    = 14;   // พินข้อมูล RGB matrix
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// ความสว่างโดยรวมของจอแสดงผล (0–255)
uint8_t matrixBrightness = 40;  // ปรับตามสภาพแวดล้อมของคุณ

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

ข้อความเริ่มต้นและการตั้งค่าการเลื่อน

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


// ข้อความเริ่มต้นที่แสดงเมื่อเริ่มระบบ
String currentText = "Robojax";   // จะถูกเขียนทับจากเว็บ UI ในภายหลัง

พฤติกรรมการเลื่อนที่เหลือถูกควบคุมโดยชุดตัวแปรที่อัปเดตโดยอินเทอร์เฟซเว็บ:


// หน่วงเวลาการเลื่อนในหน่วยมิลลิวินาที (ต่ำกว่า = เร็วขึ้น)
int scrollDelayMs = 50;

// ทิศทางการเลื่อน: 0=ซ้าย, 1=ขวา, 2=ขึ้น, 3=ลง
int scrollDirection = 0;   // ค่าเริ่มต้น: เลื่อนซ้าย

หน้าเว็บส่งค่าใหม่ตามการเลือกแถบเลื่อนและปุ่ม จากฝั่ง Arduino คุณเพียงแค่ต้องรู้ว่า:

  • การลด scrollDelayMs ทำให้ข้อความเคลื่อนที่เร็วขึ้น
  • การเพิ่ม scrollDelayMs ทำให้เคลื่อนที่ช้าลง
  • การเปลี่ยน scrollDirection สลับระหว่างโหมดเลื่อนซ้าย ขวา ขึ้น หรือลง

สีข้อความ (ควบคุมจากหน้าเว็บ)

สีของข้อความถูกควบคุมโดยค่าสามค่า 0–255 (แดง เขียว น้ำเงิน) ค่าเหล่านี้จะถูกอัปเดตทุกครั้งที่คุณเลือกสีใหม่บนหน้าเว็บ:


// สีข้อความปัจจุบัน (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

เมื่อคุณเลือกสีในเบราว์เซอร์และคลิก Apply ESP32 จะแยกค่า RGB และอัปเดตตัวแปรทั้งสามนี้ ข้อความจะเปลี่ยนสีบนเมทริกซ์ทันที ในวิดีโอ พฤติกรรมนี้ถูกสาธิตด้วยการเปลี่ยนสีหลายครั้ง รวมถึงตัวอย่างสีแดง เขียว และน้ำเงิน

สรุป

โปรเจกต์ 3 เปลี่ยน ESP32-S3 RGB LED Matrix ของคุณให้เป็นจอแสดงข้อความไร้สายเต็มรูปแบบที่คุณสามารถควบคุมได้ด้วยอุปกรณ์ใดก็ได้ที่มีเว็บเบราว์เซอร์ สเก็ตช์ถูกออกแบบให้มีความทนทาน:

  • ขั้นแรก它会尝试使用您配置的SSID和密码连接到您的家庭Wi-Fi。
  • 如果连接失败，它会自动变成一个名为ESP32、密码为password的接入点。
  • 在两种模式下，在浏览器中打开正确的IP地址都会显示相同的控制页面，用于控制文本、颜色、方向和速度。

完整的HTTP文本代码位于本文下方（网站会自动加载）。如需完整的分步讲解以及文本如何实时更新的现场演示，请务必观看视频中的Project 3部分。如果您想自己动手构建该项目，也可以使用代码下方列出的联盟链接购买ESP32-S3 RGB LED矩阵模块。

ภาพ

ESP32 S3 Matrix
ESP32 S3 Matrix
ESP32 S3 Matrix pin out
ESP32 S3 Matrix pin out
ESP32-S3_RGB_8x8_matrix-3
ESP32-S3_RGB_8x8_matrix-3
ESP32 S3 Matrix displaying rainbow heart
ESP32 S3 Matrix displaying rainbow heart
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3 RGB Matrix- Mobile Phone Text
ESP32-S3 RGB Matrix- Mobile Phone Text

This tutorial is part of: ESP32-S3 RGB LED Matrix

Please view this page in English if the code is not visible. We’re sorry for the inconvenience.
801-ESP32-S3 RGB LED Matrix Project 3 - Text from mobile phone
ภาษา: C++
/*
  Project 4: HTTP Text Scroll – ESP32-S3 RGB LED Matrix (Waveshare)

  - Connects to your home WiFi (station mode, with AP fallback).
  - Serves a web page where you can set:
      * Text
      * Color
      * Display ON/OFF
      * Scroll direction (Left / Right / Up / Down)
      * Scroll delay (speed)
  - Supports 8×8 RGB LED matrix using Adafruit_NeoMatrix.

  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📄 Resources & Code Page:
  https://robojax.com/your-resources-page-here

  HTTP_Text_Scroll
*/

#include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>

#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

// ======================= WIFI SETTINGS =========================
// Home WiFi (change these to your router credentials)
const char* WIFI_SSID = "Biseem";
const char* WIFI_PASS = "wan9&Jang~";

// Fallback Access Point
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

// ======================= MATRIX SETTINGS =======================

#define MATRIX_PIN    14
#define MATRIX_WIDTH  8
#define MATRIX_HEIGHT 8

// 0, 1, 2, or 3 – adjust if text orientation is wrong with USB up
#define MATRIX_ROTATION 0
#define BRIGHTNESS 15

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

// ======================= SCROLL STATE ==========================

enum ScrollDir {
  DIR_LEFT = 0,
  DIR_RIGHT,
  DIR_UP,
  DIR_DOWN
};

String   scrollText  = "Robojax";
uint16_t textColor   = 0xFFFF;  // default white
bool     displayOn   = true;
ScrollDir currentDir = DIR_LEFT;

// 1 step every this many ms (lower = faster)
unsigned long scrollInterval = 80;
unsigned long lastScrollTime = 0;

// Horizontal scroll position
int scrollX = MATRIX_WIDTH;
int scrollY = 0;              // top row

// State for vertical per-letter scroll
int vertCharIndex = 0;        // which character of the string
int vertY         = MATRIX_HEIGHT;    // vertical position of that character

// ======================= WEB SERVER ============================

WebServer server(80);

// ======================= HTML PAGE ============================

const char MAIN_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESP32 Text Scroll</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #111;
    color: #eee;
    text-align: center;
    margin: 0;
    padding: 10px;
  }
  .container {
    max-width: 360px;
    width: 100%%;
    margin: 0 auto;
    background: #222;
    padding: 12px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  input[type="text"] {
    width: 100%%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #444;
    background: #111;
    color: #eee;
    margin-bottom: 10px;
  }
  .row {
    margin: 10px 0;
  }
  .label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
  }
  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .arrow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 50px);
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }
  .arrow-btn {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%%;
    height: 100%%;
  }
  .arrow-btn.active {
    background: #0a84ff;
  }
  .arrow-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }
  button#applyBtn {
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #0a84ff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  button#applyBtn:active {
    transform: scale(0.97);
  }
</style>
</head>
<body>
  <div class="container">
    <h2>Robojax ESP32-S3 Matrix Text Scroll</h2>

    <div class="row">
      <span class="label">Text to scroll:</span>
      <input type="text" id="text" value="Hello" />
    </div>

    <div class="row">
      <span class="label">Color:</span>
      <input type="color" id="color" value="#ffffff" />
    </div>

    <div class="row">
      <span class="label">Scroll Delay (fast → slow):</span>
      <input
        type="range"
        id="speed"
        min="20"
        max="300"
        value="80"
        oninput="document.getElementById('speedVal').innerText = this.value + ' ms';"
      />
      <div id="speedVal" style="text-align:right;font-size:12px;margin-top:4px;">
        80 ms
      </div>
    </div>

    <div class="row">
      <label class="toggle">
        <input type="checkbox" id="power" checked />
        <span>Display ON</span>
      </label>
    </div>

    <div class="row">
      <span class="label">Scroll Direction:</span>
      <div class="arrow-grid">
        <div></div>
        <button class="arrow-btn" id="btnUp" onclick="setDir('up')">&#9650;</button>
        <div></div>

        <button class="arrow-btn" id="btnLeft" onclick="setDir('left')">&#9664;</button>
        <div></div>
        <button class="arrow-btn" id="btnRight" onclick="setDir('right')">&#9654;</button>

        <div></div>
        <button class="arrow-btn" id="btnDown" onclick="setDir('down')">&#9660;</button>
        <div></div>
      </div>
    </div>

    <button id="applyBtn" onclick="sendUpdate()">Apply</button>
    <p id="status"></p>
  </div>

<script>
  let currentDir = 'left';

  function setDir(dir) {
    currentDir = dir;
    document.querySelectorAll('.arrow-btn').forEach(b => b.classList.remove('active'));
    if (dir === 'up')    document.getElementById('btnUp').classList.add('active');
    if (dir === 'down')  document.getElementById('btnDown').classList.add('active');
    if (dir === 'left')  document.getElementById('btnLeft').classList.add('active');
    if (dir === 'right') document.getElementById('btnRight').classList.add('active');
    sendUpdate();
  }

  function sendUpdate() {
    const text  = document.getElementById('text').value;
    const color = document.getElementById('color').value;
    const power = document.getElementById('power').checked ? '1' : '0';
    const speed = document.getElementById('speed').value;

    const url = `/update?text=${encodeURIComponent(text)}&color=${encodeURIComponent(color)}&power=${power}&dir=${currentDir}&speed=${speed}`;

    fetch(url)
      .then(r => r.text())
      .then(t => {
        document.getElementById('status').innerText = t;
      })
      .catch(err => {
        document.getElementById('status').innerText = 'Error sending update';
      });
  }

  // Set default active
  setDir('left');
</script>
</body>
</html>
)rawliteral";

// ======================= HELPERS ===============================

bool isHexChar(char c) {
  return (c >= '0' && c <= '9') ||
         (c >= 'a' && c <= 'f') ||
         (c >= 'A' && c <= 'F');
}

String urlDecode(const String &src) {
  String result;
  result.reserve(src.length());
  for (size_t i = 0; i < src.length(); i++) {
    char c = src[i];
    if (c == '+') {
      result += ' ';
    } else if (c == '%' && i + 2 < src.length()) {
      char h1 = src[i + 1];
      char h2 = src[i + 2];
      if (isHexChar(h1) && isHexChar(h2)) {
        char hex[3] = {h1, h2, 0};
        int val = (int)strtol(hex, nullptr, 16);
        result += (char)val;
        i += 2;
      } else {
        result += c;
      }
    } else {
      result += c;
    }
  }
  return result;
}

uint16_t colorFromHex(const String &hex) {
  // Expect "#RRGGBB" or "RRGGBB"
  String c = hex;
  if (c.startsWith("#")) c.remove(0, 1);
  if (c.length() != 6) {
    // default white
    return matrix.Color(255, 255, 255);
  }
  long value = strtol(c.c_str(), NULL, 16);
  uint8_t r = (value >> 16) & 0xFF;
  uint8_t g = (value >> 8) & 0xFF;
  uint8_t b = (value) & 0xFF;
  return matrix.Color(r, g, b);
}

void resetScrollPosition() {
  int textWidth  = scrollText.length() * 6;  // default font ~6 px per char
  int textHeight = 8;                        // 5x7 font fits in 8

  switch (currentDir) {
    case DIR_LEFT:
      // Start from just outside the right edge
      scrollX = MATRIX_WIDTH;
      scrollY = 0;
      break;

    case DIR_RIGHT:
      // Start from just outside the left edge
      scrollX = -textWidth;
      scrollY = 0;
      break;

    case DIR_UP:
      // Per-letter vertical scroll, starting with first character below matrix
      vertCharIndex = 0;
      vertY = MATRIX_HEIGHT;   // 8 → enters from bottom
      break;

    case DIR_DOWN:
      // Per-letter vertical scroll, starting with first character above matrix
      vertCharIndex = 0;
      vertY = -textHeight;     // -8 → enters from top
      break;
  }
}

// ======================= HTTP HANDLERS =========================

void handleRoot() {
  server.send_P(200, "text/html", MAIN_page);
}

void handleUpdate() {
  if (server.hasArg("text")) {
    String txt = urlDecode(server.arg("text"));
    if (txt.length() == 0) {
      scrollText = " ";
    } else {
      scrollText = txt;
    }
  }

  if (server.hasArg("color")) {
    String hex = server.arg("color");
    textColor = colorFromHex(hex);
  }

  if (server.hasArg("power")) {
    String p = server.arg("power");
    displayOn = (p == "1");
  }

  if (server.hasArg("dir")) {
    String d = server.arg("dir");
    if (d == "left")      currentDir = DIR_LEFT;
    else if (d == "right") currentDir = DIR_RIGHT;
    else if (d == "up")    currentDir = DIR_UP;
    else if (d == "down")  currentDir = DIR_DOWN;
  }

  if (server.hasArg("speed")) {
    String s = server.arg("speed");
    int val = s.toInt();

    // simple safety clamp
    if (val < 10)   val = 10;    // very fast
    if (val > 1000) val = 1000;  // 1 second max

    scrollInterval = (unsigned long)val;
    // Serial.print("Scroll interval set to ");
    // Serial.print(scrollInterval);
    // Serial.println(" ms");
  }

  resetScrollPosition();
  server.send(200, "text/plain", "Updated");
}

// ======================= SCROLL LOGIC ==========================

void drawScroll() {
  if (!displayOn) {
    matrix.fillScreen(0);
    matrix.show();
    return;
  }

  int textWidth  = scrollText.length() * 6;
  int textHeight = 8;

  matrix.fillScreen(0);
  matrix.setTextSize(1);
  matrix.setTextWrap(false);
  matrix.setTextColor(textColor);

  // -------- HORIZONTAL SCROLL (LEFT / RIGHT) --------
  if (currentDir == DIR_LEFT || currentDir == DIR_RIGHT) {
    matrix.setCursor(scrollX, 0);
    matrix.print(scrollText);
    matrix.show();

    if (currentDir == DIR_LEFT) {
      scrollX--;
      if (scrollX < -textWidth) {
        scrollX = MATRIX_WIDTH;
      }
    } else { // DIR_RIGHT
      scrollX++;
      if (scrollX > MATRIX_WIDTH) {
        scrollX = -textWidth;
      }
    }
    return;
  }

  // -------- VERTICAL SCROLL (UP / DOWN) – PER LETTER --------

  if (scrollText.length() == 0) {
    matrix.show();
    return;
  }

  // Current character
  char c = scrollText[vertCharIndex];

  int charWidth  = 6;
  int baseX = (MATRIX_WIDTH - charWidth) / 2;  // center horizontally

  matrix.setCursor(baseX, vertY);
  matrix.print(c);
  matrix.show();

  if (currentDir == DIR_UP) {
    // Move character upwards
    vertY--;
    if (vertY < -textHeight) {
      // This character is fully passed, go to next
      vertY = MATRIX_HEIGHT;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // loop back to first character
      }
    }
  } else if (currentDir == DIR_DOWN) {
    // Move character downwards
    vertY++;
    if (vertY > MATRIX_HEIGHT) {
      // This character is fully passed, go to next
      vertY = -textHeight;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // loop back
      }
    }
  }
}

// ======================= WIFI INIT =============================

void startAPFallback() {
  Serial.println("Starting AP fallback...");
  WiFi.mode(WIFI_AP);
  bool apOk = WiFi.softAP(AP_SSID, AP_PASS);
  if (apOk) {
    Serial.print("AP started. SSID: ");
    Serial.print(AP_SSID);
    Serial.print("  IP: ");
    Serial.println(WiFi.softAPIP());
  } else {
    Serial.println("Failed to start AP.");
  }
}

void connectWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASS);

  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);

  unsigned long startAttempt = millis();
  const unsigned long timeout = 10000; // 10s

  while (WiFi.status() != WL_CONNECTED && (millis() - startAttempt) < timeout) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {
    Serial.print("Connected. IP address: ");
    Serial.println(WiFi.localIP());
  } else {
    Serial.println("WiFi connect failed, starting AP fallback.");
    startAPFallback();
  }
}

// ======================= SETUP & LOOP ==========================

void setup() {
  Serial.begin(115200);
  delay(500);

  // Matrix init
  matrix.begin();
  matrix.setRotation(MATRIX_ROTATION);
  matrix.setBrightness(BRIGHTNESS);
  matrix.fillScreen(0);
  matrix.show();

  // WiFi
  connectWiFi();

  // Web server routes
  server.on("/", handleRoot);
  server.on("/update", handleUpdate);
  server.onNotFound([]() {
    server.send(404, "text/plain", "Not found");
  });
  server.begin();
  Serial.println("HTTP server started.");

  resetScrollPosition();
}

void loop() {
  server.handleClient();

  unsigned long now = millis();
  if (now - lastScrollTime >= scrollInterval) {
    lastScrollTime = now;
    drawScroll();
  }
}

สิ่งที่คุณอาจต้องการ

แหล่งข้อมูลและเอกสารอ้างอิง

ไฟล์📁

ไฟล์ Fritzing

ผลิตภัณฑ์ที่เกี่ยวข้องจาก Amazon

รายการที่เกี่ยวข้องบน eBay

ผลิตภัณฑ์ที่เกี่ยวข้องจาก AliExpress

แท็ก

ESP32-S3 MatrixESP32-S3 RGB LED Matrix
Search Code

บทเรียนล่าสุด

ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ภาพขนาดย่อของ YouTube
ดูเพิ่มเติม