โปรเจกต์ ESP32-S3 RGB LED Matrix 1- จุดพื้นฐาน

โปรเจกต์ ESP32-S3 RGB LED Matrix 1- จุดพื้นฐาน

โปรเจกต์ 1 – การเคลื่อนที่ของจุดและแอนิเมชันรูปหัวใจบน ESP32-S3 RGB LED Matrix

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

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

หากคุณเพิ่งเริ่มต้นกับบอร์ดนี้ โปรเจกต์นี้เป็นวิธีที่สมบูรณ์แบบในการ:

• ตรวจสอบว่าบอร์ด ESP32-S3 และการเชื่อมต่อ USB ของคุณทำงานถูกต้อง
• ยืนยันว่าเมทริกซ์ RGB ขนาด 8×8 เชื่อมต่อกับพินที่ถูกต้อง
• ทดลองกับจังหวะเวลาแอนิเมชันพื้นฐาน สี และความสว่าง

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

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

คุณสมบัติหลักของโมดูลนี้:

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

ในโปรเจกต์แรกนี้เราใช้เพียงส่วนเมทริกซ์ LED ของบอร์ดเท่านั้น แต่ฮาร์ดแวร์เดียวกันนี้ทรงพลังพอที่จะรันการแสดงข้อความ ข้อความที่ควบคุมผ่านเว็บ เกมที่ควบคุมด้วยการเคลื่อนไหว และอื่นๆ อีกมากมาย — ซึ่งจะกล่าวถึงในโปรเจกต์อื่นๆ ของซีรีส์นี้

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

โปรเจกต์ทั้งหมดหกโปรเจกต์ใช้วิดีโอ YouTube เดียวกัน ช่วงเวลาโดยประมาณคือ:

• 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: เกมเป้า

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

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

ก่อนที่จะอัปโหลดโค้ดใดๆ ไปยัง ESP32-S3 คุณต้องติดตั้งแพ็คเกจรองรับบอร์ด ESP32 ใน Arduino IDE ก่อน ในวิดีโอมีการสาธิตในส่วน “การติดตั้งบอร์ด”

ขั้นตอนทั่วไป:

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

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

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

เมทริกซ์ LED ใช้ไดรเวอร์ Adafruit NeoPixel ภายใน และเพื่อการวาด 2D ที่ง่ายขึ้น เราใช้ไลบรารี Adafruit NeoMatrix การติดตั้ง NeoMatrix จะดึงไลบรารีที่เกี่ยวข้องเข้ามาโดยอัตโนมัติ

NeoMatrix และไลบรารีที่เกี่ยวข้อง

ติดตั้งสิ่งต่อไปนี้จาก Library Manager:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

ใน Library Manager:

1. เปิด Sketch > Include Library > Manage Libraries…
2. ค้นหา Adafruit NeoMatrix และคลิก Install
3. อนุญาตให้ IDE ติดตั้งไลบรารีที่เกี่ยวข้องทั้งหมดที่แนะนำ (Adafruit GFX และ Adafruit NeoPixel)

ไลบรารีเซนเซอร์ตรวจจับการเคลื่อนไหว QMI8658C (สำหรับโปรเจกต์ถัดไป)

โปรเจกต์ 1 ไม่ได้ใช้เซนเซอร์วัดความเร่งโดยตรง แต่เป็นความคิดที่ดีที่จะติดตั้งไลบรารีเซนเซอร์ตรวจจับการเคลื่อนไหวตอนนี้ เพราะจะต้องใช้ในโปรเจกต์ 4, 5 และ 6

จาก Library Manager:

1. ค้นหาไลบรารี QMI8658 ตามชื่อผู้เขียน
2. ติดตั้งไลบรารีเพื่อให้ปรากฏภายใต้ File > Examples สำหรับการทดสอบอย่างรวดเร็ว

โปรเจกต์ 1 – การตั้งค่าโค้ด (จุดเคลื่อนที่และรูปหัวใจ)

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

พิน LED และจำนวนพิกเซล

บนโมดูลนี้ เมทริกซ์ RGB ขนาด 8×8 เชื่อมต่อกับ GPIO 14 ของ ESP32-S3 จำนวนพิกเซลทั้งหมดคือ 64 (8 × 8) ในโค้ดของคุณ คุณควรเห็นบางอย่างคล้ายกับ:

 
// พินที่เชื่อมต่อกับเมทริกซ์ RGB ขนาด 8×8 
const int MATRIX_PIN = 14;
 // ต้องเป็น 14 บนโมดูลนี้ 
// จำนวน LED ทั้งหมด (เมทริกซ์ 8 × 8) 
const int NUMPIXELS = 64; // เปลี่ยนเฉพาะเมื่อใช้ขนาดเมทริกซ์อื่น 

หากคุณเผลอปล่อยให้ NUMPIXELS เป็น 16 (จากตัวอย่าง NeoPixel ดั้งเดิม) จะใช้เพียงหนึ่งในสี่ของเมทริกซ์ และแอนิเมชันจะไม่เต็มหน้าจอ 8×8 ทั้งหมด

ลำดับสีและประเภท LED

แถบ LED และเมทริกซ์แต่ละแบบอาจใช้ลำดับสีที่แตกต่างกัน (เช่น GRB แทน RGB) เมทริกซ์บนบอร์ดนี้ต้องการลำดับแบบ RGB ในคอนสตรักเตอร์ของ NeoPixel หรือ NeoMatrix ตรวจสอบให้แน่ใจว่าประเภทสีถูกตั้งค่าอย่างถูกต้อง:

 // ตัวอย่างสำหรับออบเจกต์แบบ NeoPixel: 
Adafruit_NeoPixel pixels( NUMPIXELS, MATRIX_PIN, NEO_RGB + NEO_KHZ800 // ตรวจสอบให้ตรงกับลำดับสีของเมทริกซ์ ); 

หากคุณสังเกตว่าสีแดงและสีเขียวสลับกันบนจอแสดงผล ให้ตรวจสอบบรรทัดนี้ก่อนและแก้ไขลำดับสี

ความเร็วแอนิเมชัน (ดีเลย์ระหว่างขั้นตอน)

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

 
// ดีเลย์ระหว่างการเคลื่อนที่ของจุด (ในหน่วยมิลลิวินาที)
 int dotDelayMs = 50; // 50 มิลลิวินาทีค่อนข้างเร็ว 

การปรับทั่วไป:

• ตั้งค่า dotDelayMs = 20; สำหรับจุดที่เคลื่อนที่เร็วมาก
• ตั้งค่า dotDelayMs = 100; หรือมากกว่าสำหรับแอนิเมชันที่ช้าและสงบ

ในฟังก์ชัน loop() ค่านี้มักถูกส่งไปยัง delay(dotDelayMs); หลังจากการอัปเดตแต่ละเฟรม

สีจุดและความสว่าง

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

 
// สีจุด (R, G, B) จาก 0–255 uint8_t dotRed = 255; // แดงเต็มที่ 
uint8_t dotGreen = 0; // ไม่มีเขียว 
uint8_t dotBlue = 0; // ไม่มีน้ำเงิน 

สิ่งนี้จะสร้างจุดสีแดงสว่าง ชุดค่าผสมที่มีประโยชน์บางอย่าง:

• แดงล้วน: (255, 0, 0)
• เขียวล้วน: (0, 255, 0)
• น้ำเงินล้วน: (0, 0, 255)
• เหลือง: (255, 255, 0)
• ขาว: (255, 255, 255)

ความสว่างโดยรวมมักถูกควบคุมด้วยฟังก์ชันความสว่างแยกต่างหาก:

 
// ความสว่างโดยรวมของเมทริกซ์ (0–255) 
uint8_t matrixBrightness = 40; // ตั้งให้ต่ำเพื่อหลีกเลี่ยงแสงจ้าเกินไป // ใน setup(): matrix.setBrightness(matrixBrightness); 

ค่าประมาณ 30–60 มักจะสบายตาสำหรับการใช้งานในร่ม

การตั้งค่ารูปหัวใจ

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

 
// สีหัวใจ (หัวใจทึบ) 
uint8_t heartRed = 255; 
uint8_t heartGreen = 0; 
uint8_t heartBlue = 0; 
// ไม่บังคับ: โหมดรุ้งหรือโครงร่าง 
bool showOutlinedHeart = false; 
// true = โครงร่างเท่านั้น 
bool useRainbowHeart = false; 
// true = หมุนสีตามเวลา 

การใช้งานทั่วไป:

• ตั้งค่า showOutlinedHeart = false; และ useRainbowHeart = false; สำหรับหัวใจสีแดงทึบ
• ตั้งค่า showOutlinedHeart = true; เพื่อแสดงเฉพาะโครงร่างหัวใจ
• ตั้งค่า useRainbowHeart = true; เพื่อหมุนสีหัวใจผ่านเอฟเฟกต์รุ้งอย่างต่อเนื่อง

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

สรุป

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

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

ภาพ

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

/* 
  Project 1: the Dot – ESP32-S3 RGB LED Matrix (Waveshare)

  dialysis a dot on scree and moves it
  
  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📚⬇️ Resources & Code Page:
  https://robojax.com/RJT829

  QMI8658_RGB_2
*/

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif

// Which pin on the Arduino is connected to the NeoPixels?
#define PIN        14 // On Trinket or Gemma, suggest changing this to 1

// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS 64 // Popular NeoPixel ring size

// When setting up the NeoPixel library, we tell it how many pixels,
// and which pin to use to send signals. Note that for older NeoPixel
// strips you might need to change the third parameter -- see the
// strandtest example for more information on possible values.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_RGB + NEO_KHZ800);

#define DELAYVAL 50 // Time (in milliseconds) to pause between pixels

void setup() {
  // These lines are specifically to support the Adafruit Trinket 5V 16 MHz.
  // Any other board, you can remove this part (but no harm leaving it):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
#endif
  // END of Trinket-specific code.

  pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
}

void loop() {
  pixels.clear(); // Set all pixel colors to 'off'

  // The first NeoPixel in a strand is #0, second is 1, all the way up
  // to the count of pixels minus one.
  for(int i=0; i<NUMPIXELS; i++) { // For each pixel...

    // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
    // Here we're using a moderately bright green color:
    pixels.setPixelColor(i, pixels.Color(255, 255, 0));

    pixels.show();   // Send the updated pixel colors to the hardware.

    delay(DELAYVAL); // Pause before next pass through loop
    pixels.clear();
  }



}