สร้าง RGB LED Controller ด้วย ESP32-S3-Box-3 และ Touch Screen
ควบคุม RGB LED ด้วย Touch Screen Interface แบบ Real-time
💡🎨📱
ESP32-S3-Box-3 เป็น Development Board ที่มาพร้อมกับ Touch Screen 2.4 นิ้ว ทำให้เหมาะสำหรับสร้าง GUI Application ต่างๆ ในบทความนี้เราจะมาสร้าง RGB LED Controller ที่สามารถควบคุมสี ความสว่าง และโหมดต่างๆ ของ RGB LED ผ่าน Touch Screen Interface ที่สวยงามและใช้งานง่าย พร้อมโค้ดตัวอย่างและคำอธิบายทีละขั้นตอน
รู้จักกับ ESP32-S3-Box-3
ESP32-S3-Box-3 Development Board พร้อม Touch Screen
ESP32-S3-Box-3 เป็น Development Board จาก Espressif ที่ออกแบบมาสำหรับ AIoT Applications โดยมีจุดเด่นคือ Touch Screen ในตัว ทำให้สามารถสร้าง GUI Application ได้ง่ายและสวยงาม
คุณสมบัติหลัก:
- 🎯 ESP32-S3 - Dual-core Xtensa LX7 @ 240 MHz
- 📱 Touch Screen - 2.4" IPS LCD 320x240 pixels
- 🎤 Microphone - Dual microphones สำหรับ Voice Recognition
- 🔊 Speaker - 1W Speaker ในตัว
- 📡 WiFi & Bluetooth - WiFi 802.11 b/g/n + BLE 5.0
- 🔌 GPIO Expansion - Pmod™ compatible connector
- 💾 Memory - 8MB PSRAM + 16MB Flash
- 🔋 USB-C - สำหรับ Programming และจ่ายไฟ
รายละเอียด Hardware ของ ESP32-S3-Box-3
💡 ทำไมต้อง ESP32-S3-Box-3:
- ✅ มี Touch Screen ในตัว - ไม่ต้องซื้อแยก
- ✅ ใช้ LVGL Library - สร้าง GUI สวยงามได้ง่าย
- ✅ มี Example Code มากมาย
- ✅ เหมาะกับ Smart Home, IoT Dashboard
- ✅ ราคาไม่แพง (~1,500-2,000 บาท)
RGB LED Module ที่ใช้ในโปรเจค
RGB LED Module แบบ Common Cathode
ในโปรเจคนี้เราจะใช้ RGB LED Module แบบ Common Cathode ซึ่งเป็น LED ที่รวม LED สี Red, Green, Blue ไว้ในตัวเดียว สามารถผสมสีได้หลากหลาย
ประเภทของ RGB LED:
- 🔴 Common Cathode - ขา GND ร่วมกัน, ขา R/G/B ต่อกับ GPIO (ใช้ในโปรเจคนี้)
- 🔵 Common Anode - ขา VCC ร่วมกัน, ขา R/G/B ต่อกับ GPIO (Logic กลับกัน)
Pinout ของ RGB LED Module
การทำงานของ RGB LED:
- ใช้ PWM (Pulse Width Modulation) ควบคุมความสว่างของแต่ละสี
- PWM Duty Cycle 0-255 (0 = ดับ, 255 = สว่างสุด)
- ผสมสีโดยการปรับ Duty Cycle ของ R, G, B
- ตัวอย่าง: Red(255,0,0), Green(0,255,0), Blue(0,0,255), White(255,255,255)
| สี | Red | Green | Blue | ผลลัพธ์ |
|---|---|---|---|---|
| Red | 255 | 0 | 0 | 🔴 แดง |
| Green | 0 | 255 | 0 | 🟢 เขียว |
| Blue | 0 | 0 | 255 | 🔵 น้ำเงิน |
| Yellow | 255 | 255 | 0 | 🟡 เหลือง |
| Cyan | 0 | 255 | 255 | 🔵 ฟ้า |
| Magenta | 255 | 0 | 255 | 🟣 ม่วง |
| White | 255 | 255 | 255 | ⚪ ขาว |
⚠️ ข้อควรระวัง:
- ต้องใช้ Resistor ต่อกับขา R, G, B (แนะนำ 220Ω - 330Ω)
- ไม่ควรจ่ายไฟเกิน 20mA ต่อสี
- ตรวจสอบว่าเป็น Common Cathode หรือ Common Anode
การต่อวงจร RGB LED กับ ESP32-S3-Box-3
การต่อวงจร RGB LED Module กับ ESP32-S3-Box-3
ESP32-S3-Box-3 มี Pmod™ Connector ที่สามารถต่อกับ External Module ได้ง่าย เราจะใช้ GPIO Pins จาก Connector นี้ในการควบคุม RGB LED
อุปกรณ์ที่ต้องใช้:
- ✅ ESP32-S3-Box-3 (1 ตัว)
- ✅ RGB LED Module Common Cathode (1 ตัว)
- ✅ Resistor 220Ω หรือ 330Ω (3 ตัว - สำหรับ R, G, B)
- ✅ Breadboard
- ✅ Jumper Wires
- ✅ USB-C Cable (สำหรับ Programming และจ่ายไฟ)
ตารางการต่อขา:
| RGB LED Pin | Resistor | ESP32-S3-Box-3 GPIO | หมายเหตุ |
|---|---|---|---|
| R (Red) | 220Ω | GPIO 1 | PWM Channel 0 |
| G (Green) | 220Ω | GPIO 2 | PWM Channel 1 |
| B (Blue) | 220Ω | GPIO 3 | PWM Channel 2 |
| GND | - | GND | Common Cathode |
1
เตรียม Breadboard
วาง RGB LED Module บน Breadboard และต่อ Resistor 220Ω กับขา R, G, B ของ LED
2
ต่อขา GND
ต่อขา GND (Common Cathode) ของ RGB LED เข้ากับ GND ของ ESP32-S3-Box-3
3
ต่อขา R, G, B
ต่อขา R, G, B (ผ่าน Resistor) เข้ากับ GPIO 1, 2, 3 ของ ESP32-S3-Box-3 ตามลำดับ
4
ตรวจสอบการต่อวงจร
ตรวจสอบให้แน่ใจว่าการต่อถูกต้อง และไม่มีขาลัดวงจร
💡 Tips:
- ใช้สาย Jumper สีต่างกันเพื่อง่ายต่อการตรวจสอบ (แดง=R, เขียว=G, น้ำเงิน=B)
- ถ้าใช้ GPIO อื่น ให้แก้ไขในโค้ดด้วย
- ตรวจสอบว่า RGB LED เป็น Common Cathode (ถ้าเป็น Common Anode ต้องแก้โค้ด)
ติดตั้ง Arduino IDE และ ESP32-S3 Board
ก่อนเริ่มเขียนโค้ด เราต้องติดตั้ง Arduino IDE และ ESP32-S3 Board Support ก่อน
1
ดาวน์โหลด Arduino IDE
ดาวน์โหลด Arduino IDE เวอร์ชันล่าสุดจาก arduino.cc
2
เพิ่ม ESP32 Board URL
เปิด Arduino IDE → File → Preferences → Additional Board Manager URLs แล้วเพิ่ม:
https://espressif.github.io/arduino-esp32/package_esp32_index.json
3
ติดตั้ง ESP32 Board
Tools → Board → Boards Manager → ค้นหา "esp32" → ติดตั้ง "esp32 by Espressif Systems"
4
เลือก Board
Tools → Board → esp32 → เลือก "ESP32S3 Dev Module"
5
ตั้งค่า Board Configuration
Board: "ESP32S3 Dev Module" USB CDC On Boot: "Enabled" CPU Frequency: "240MHz (WiFi)" Flash Mode: "QIO 80MHz" Flash Size: "16MB (128Mb)" Partition Scheme: "16M Flash (3MB APP/9.9MB FATFS)" PSRAM: "OPI PSRAM" Upload Mode: "UART0 / Hardware CDC" Upload Speed: "921600"
6
ติดตั้ง Libraries
Sketch → Include Library → Manage Libraries → ติดตั้ง:
- ✅ lvgl (เวอร์ชัน 8.3.x)
- ✅ ESP32_Display_Panel
- ✅ ESP32_IO_Expander
⚠️ สำคัญ:
- ใช้ LVGL เวอร์ชัน 8.3.x (ไม่ใช่ 9.x)
- ตรวจสอบว่า USB CDC On Boot เป็น "Enabled"
- ถ้า Upload ไม่ได้ ให้กดปุ่ม BOOT ค้างไว้ขณะ Upload
เขียนโค้ด RGB LED Controller
Demo การทำงานของ RGB LED Controller
ตอนนี้เรามาเขียนโค้ดสร้าง Touch Screen Interface สำหรับควบคุม RGB LED กัน โค้ดจะแบ่งเป็นส่วนสำคัญดังนี้:
โครงสร้างโค้ด:
- 🎨 LVGL GUI - สร้าง Touch Screen Interface
- ⚡ PWM Control - ควบคุม RGB LED ด้วย PWM
- 🎚️ Sliders - ปรับค่า R, G, B แยกกัน
- 🎨 Color Picker - เลือกสีสำเร็จรูป
- 💡 Brightness Control - ปรับความสว่างรวม
- 🌈 Effect Modes - โหมดเอฟเฟกต์ต่างๆ (Rainbow, Fade, Strobe)
โค้ดหลัก (ส่วนที่ 1 - Setup PWM):
// กำหนด GPIO Pins สำหรับ RGB LED #define RED_PIN 1 #define GREEN_PIN 2 #define BLUE_PIN 3 // PWM Settings #define PWM_FREQ 5000 #define PWM_RES 8 // 8-bit resolution (0-255) #define RED_CHANNEL 0 #define GREEN_CHANNEL 1 #define BLUE_CHANNEL 2 // ตัวแปรเก็บค่าสี int redValue = 0; int greenValue = 0; int blueValue = 0; int brightness = 100; // 0-100% void setupPWM() { // ตั้งค่า PWM Channels ledcSetup(RED_CHANNEL, PWM_FREQ, PWM_RES); ledcSetup(GREEN_CHANNEL, PWM_FREQ, PWM_RES); ledcSetup(BLUE_CHANNEL, PWM_FREQ, PWM_RES); // ผูก GPIO กับ PWM Channels ledcAttachPin(RED_PIN, RED_CHANNEL); ledcAttachPin(GREEN_PIN, GREEN_CHANNEL); ledcAttachPin(BLUE_PIN, BLUE_CHANNEL); Serial.println("PWM Setup Complete!"); } void setRGBColor(int r, int g, int b) { // คำนวณค่าตาม Brightness redValue = (r * brightness) / 100; greenValue = (g * brightness) / 100; blueValue = (b * brightness) / 100; // ส่งค่าไปยัง PWM ledcWrite(RED_CHANNEL, redValue); ledcWrite(GREEN_CHANNEL, greenValue); ledcWrite(BLUE_CHANNEL, blueValue); Serial.printf("RGB: (%d, %d, %d) Brightness: %d%%\n", r, g, b, brightness); }
โค้ดหลัก (ส่วนที่ 2 - LVGL GUI):
// LVGL Objects lv_obj_t *slider_red; lv_obj_t *slider_green; lv_obj_t *slider_blue; lv_obj_t *slider_brightness; lv_obj_t *label_rgb; // Callback เมื่อ Slider เปลี่ยนค่า static void slider_event_cb(lv_event_t *e) { lv_obj_t *slider = lv_event_get_target(e); int value = lv_slider_get_value(slider); if (slider == slider_red) { redValue = value; } else if (slider == slider_green) { greenValue = value; } else if (slider == slider_blue) { blueValue = value; } else if (slider == slider_brightness) { brightness = value; } // อัพเดท RGB LED setRGBColor(redValue, greenValue, blueValue); // อัพเดท Label lv_label_set_text_fmt(label_rgb, "R:%d G:%d B:%d\nBrightness:%d%%", redValue, greenValue, blueValue, brightness); } void createGUI() { // สร้าง Container lv_obj_t *cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(cont, 300, 220); lv_obj_center(cont); // Label แสดงค่า RGB label_rgb = lv_label_create(cont); lv_label_set_text(label_rgb, "R:0 G:0 B:0\nBrightness:100%"); lv_obj_align(label_rgb, LV_ALIGN_TOP_MID, 0, 10); // Slider สำหรับ Red slider_red = lv_slider_create(cont); lv_slider_set_range(slider_red, 0, 255); lv_obj_set_width(slider_red, 250); lv_obj_align(slider_red, LV_ALIGN_TOP_MID, 0, 50); lv_obj_add_event_cb(slider_red, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); lv_obj_set_style_bg_color(slider_red, lv_color_hex(0xFF0000), LV_PART_INDICATOR); // Slider สำหรับ Green slider_green = lv_slider_create(cont); lv_slider_set_range(slider_green, 0, 255); lv_obj_set_width(slider_green, 250); lv_obj_align(slider_green, LV_ALIGN_TOP_MID, 0, 90); lv_obj_add_event_cb(slider_green, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); lv_obj_set_style_bg_color(slider_green, lv_color_hex(0x00FF00), LV_PART_INDICATOR); // Slider สำหรับ Blue slider_blue = lv_slider_create(cont); lv_slider_set_range(slider_blue, 0, 255); lv_obj_set_width(slider_blue, 250); lv_obj_align(slider_blue, LV_ALIGN_TOP_MID, 0, 130); lv_obj_add_event_cb(slider_blue, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); lv_obj_set_style_bg_color(slider_blue, lv_color_hex(0x0000FF), LV_PART_INDICATOR); // Slider สำหรับ Brightness slider_brightness = lv_slider_create(cont); lv_slider_set_range(slider_brightness, 0, 100); lv_slider_set_value(slider_brightness, 100, LV_ANIM_OFF); lv_obj_set_width(slider_brightness, 250); lv_obj_align(slider_brightness, LV_ALIGN_TOP_MID, 0, 170); lv_obj_add_event_cb(slider_brightness, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); }
โค้ดหลัก (ส่วนที่ 3 - Color Presets):
// Preset Colors typedef struct { const char *name; int r, g, b; } ColorPreset; ColorPreset presets[] = { {"Red", 255, 0, 0}, {"Green", 0, 255, 0}, {"Blue", 0, 0, 255}, {"Yellow", 255, 255, 0}, {"Cyan", 0, 255, 255}, {"Magenta", 255, 0, 255}, {"White", 255, 255, 255}, {"Orange", 255, 165, 0} }; // Callback สำหรับปุ่ม Preset static void preset_btn_cb(lv_event_t *e) { ColorPreset *preset = (ColorPreset*)lv_event_get_user_data(e); // ตั้งค่า Sliders lv_slider_set_value(slider_red, preset->r, LV_ANIM_ON); lv_slider_set_value(slider_green, preset->g, LV_ANIM_ON); lv_slider_set_value(slider_blue, preset->b, LV_ANIM_ON); // อัพเดท RGB LED setRGBColor(preset->r, preset->g, preset->b); Serial.printf("Preset: %s\n", preset->name); } void createPresetButtons() { lv_obj_t *btn_cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(btn_cont, 300, 60); lv_obj_align(btn_cont, LV_ALIGN_BOTTOM_MID, 0, -10); lv_obj_set_flex_flow(btn_cont, LV_FLEX_FLOW_ROW); lv_obj_set_flex_align(btn_cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); // สร้างปุ่ม Preset for (int i = 0; i < 8; i++) { lv_obj_t *btn = lv_btn_create(btn_cont); lv_obj_set_size(btn, 35, 35); lv_obj_set_style_bg_color(btn, lv_color_make(presets[i].r, presets[i].g, presets[i].b), LV_PART_MAIN); lv_obj_add_event_cb(btn, preset_btn_cb, LV_EVENT_CLICKED, &presets[i]); } }
🎨 Features ที่มีในโค้ด:
- ✅ Sliders สำหรับปรับ R, G, B แยกกัน (0-255)
- ✅ Brightness Slider ปรับความสว่างรวม (0-100%)
- ✅ Color Preset Buttons - 8 สีสำเร็จรูป
- ✅ Real-time Update - เห็นผลทันทีที่ปรับค่า
- ✅ Label แสดงค่า RGB และ Brightness
เพิ่มฟีเจอร์ขั้นสูง - Effect Modes
นอกจาก Basic Control แล้ว เรายังสามารถเพิ่มโหมดเอฟเฟกต์ต่างๆ ให้กับ RGB LED ได้ เช่น Rainbow, Fade, Strobe
โหมดเอฟเฟกต์ที่น่าสนใจ:
- 🌈 Rainbow - วนสีรุ้งแบบต่อเนื่อง
- ✨ Fade - ค่อยๆ เปลี่ยนสีแบบนุ่มนวล
- ⚡ Strobe - กระพริบเร็ว
- 🔥 Fire - จำลองเปลวไฟ
- 🌊 Wave - คลื่นสี
โค้ด Rainbow Effect:
// Rainbow Effect int rainbowHue = 0; void rainbowEffect() { // แปลง HSV เป็น RGB float h = rainbowHue / 360.0; float s = 1.0; float v = 1.0; int r, g, b; hsvToRgb(h, s, v, &r, &g, &b); setRGBColor(r, g, b); // เพิ่ม Hue rainbowHue = (rainbowHue + 1) % 360; delay(20); } void hsvToRgb(float h, float s, float v, int *r, int *g, int *b) { int i = (int)(h * 6); float f = h * 6 - i; float p = v * (1 - s); float q = v * (1 - f * s); float t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: *r = v*255; *g = t*255; *b = p*255; break; case 1: *r = q*255; *g = v*255; *b = p*255; break; case 2: *r = p*255; *g = v*255; *b = t*255; break; case 3: *r = p*255; *g = q*255; *b = v*255; break; case 4: *r = t*255; *g = p*255; *b = v*255; break; case 5: *r = v*255; *g = p*255; *b = q*255; break; } }
โค้ด Fade Effect:
// Fade Effect int fadeValue = 0; int fadeDirection = 1; void fadeEffect() { fadeValue += fadeDirection * 5; if (fadeValue >= 255) { fadeValue = 255; fadeDirection = -1; } else if (fadeValue <= 0) { fadeValue = 0; fadeDirection = 1; } setRGBColor(fadeValue, fadeValue, fadeValue); delay(30); }
โค้ด Strobe Effect:
// Strobe Effect void strobeEffect() { setRGBColor(255, 255, 255); delay(50); setRGBColor(0, 0, 0); delay(50); }
เพิ่มปุ่มเลือก Effect Mode:
enum EffectMode { MODE_MANUAL, MODE_RAINBOW, MODE_FADE, MODE_STROBE }; EffectMode currentMode = MODE_MANUAL; void loop() { lv_timer_handler(); // LVGL Handler // ทำงานตาม Mode switch (currentMode) { case MODE_RAINBOW: rainbowEffect(); break; case MODE_FADE: fadeEffect(); break; case MODE_STROBE: strobeEffect(); break; case MODE_MANUAL: default: // ใช้ค่าจาก Sliders delay(10); break; } }
🌈
Rainbow Mode
วนสีรุ้งแบบต่อเนื่อง เหมาะกับงานปาร์ตี้
✨
Fade Mode
ค่อยๆ เปลี่ยนสีแบบนุ่มนวล เหมาะกับบรรยากาศผ่อนคลาย
⚡
Strobe Mode
กระพริบเร็ว เหมาะกับงาน Concert
🎨
Manual Mode
ควบคุมด้วยตัวเอง ปรับสีตามใจชอบ
💡 ไอเดียเพิ่มเติม:
- 🎵 Music Reactive - ใช้ Microphone ในตัวรับเสียงเพลง แล้วให้ LED เต้นตามจังหวะ
- 📱 WiFi Control - สร้าง Web Server ควบคุมผ่าน Browser
- ⏰ Schedule - ตั้งเวลาเปิด-ปิด หรือเปลี่ยนสีอัตโนมัติ
- 🌡️ Sensor Integration - เปลี่ยนสีตามอุณหภูมิหรือความชื้น
สรุป
ในบทความนี้เราได้เรียนรู้การสร้าง RGB LED Controller ด้วย ESP32-S3-Box-3 และ Touch Screen Interface ตั้งแต่การต่อวงจร การเขียนโค้ด ไปจนถึงการเพิ่มฟีเจอร์ขั้นสูง
สิ่งที่ได้เรียนรู้:
- ✅ การใช้งาน ESP32-S3-Box-3 และ Touch Screen
- ✅ การควบคุม RGB LED ด้วย PWM
- ✅ การสร้าง GUI ด้วย LVGL Library
- ✅ การทำ Color Picker และ Sliders
- ✅ การสร้าง Effect Modes ต่างๆ
ประโยชน์ที่ได้:
- 🎨 ควบคุม RGB LED ได้ง่ายผ่าน Touch Screen
- 💡 ปรับแสงสีได้ตามต้องการ
- 🌈 มีโหมดเอฟเฟกต์หลากหลาย
- 📱 สามารถนำไปต่อยอดเป็น Smart Home Controller
การต่อยอด:
- 🏠 ใช้ควบคุมไฟในบ้าน (Smart Home Lighting)
- 🎮 สร้าง Gaming Setup RGB Controller
- 🎨 ทำ Mood Lighting สำหรับห้องนอน
- 📸 ใช้เป็น Photography Light Controller
🎯 Next Steps:
- ลองเพิ่ม WS2812B LED Strip แทน RGB LED Module
- เพิ่ม WiFi Control ผ่าน Mobile App
- ทำ Voice Control ด้วย Microphone ในตัว
- เชื่อมต่อกับ Home Assistant หรือ Google Home
🎉
ช้อปอุปกรณ์ / เข้าร่วม Community
หากคุณสนใจ ESP32-S3-Box-3, RGB LED Module หรืออุปกรณ์สำหรับโปรเจค IoT และ Smart Home สามารถกดปุ่มด้านล่างนี้ได้เลย หรืออยากพูดคุยแลกเปลี่ยนความรู้เกี่ยวกับ Maker Projects ก็เข้าร่วม Community ของเราได้
