ESP32-S3 • Color Sensor • USB HID • 3D Printing • Maker
Real Life Color Picker: จ่อสีจริงแล้วเปลี่ยนเป็น HEX ด้วย ESP32-S3
เคยเห็นสีบนกำแพง แพ็กเกจ สินค้า หรือป้ายแล้วคิดว่า “สีนี้เอาไปใช้ในงาน Design น่าจะสวย” แต่พอกลับมาทำงานจริงก็ต้องเปิดรูปแล้วพยายาม Sample สีอีกทีไหม? Real Life Color Picker ของ Tech Talkies พยายามแก้ Pain Point นี้ด้วยอุปกรณ์พกพาที่จ่อกับวัตถุจริง แล้วแปลงสีที่ Sensor อ่านได้ให้เป็นค่า RGB และ HEX ทันที
หัวใจของ Project คือ TCS34725 Color Sensor, ESP32-S3 และจอ ST7789 แต่สิ่งที่ทำให้มันใช้งานจริงขึ้นไปอีกคือ สามารถ Save สีไว้ในหน่วยความจำ Browse กลับมาดูภายหลัง และส่งค่า #RRGGBB เข้า PC ผ่าน USB โดยทำตัวเป็น Keyboard ได้
- TCS34725 อ่านค่า Red, Green, Blue และ Clear-light Channel
- ESP32-S3 นำ Raw Reading มาคำนวณเป็น RGB ช่วง 0–255 แล้ว Format เป็น #RRGGBB
- Current Firmware มี Brightness และ Saturation Adjustment เพิ่มจากการ Normalize พื้นฐาน
- ST7789 ขนาด 1.47 นิ้ว ความละเอียด 172×320 ใช้แสดงสีและค่า HEX
- สามารถ Save สีใน ESP32 Preferences และ Browse กลับมาดูได้
- USB HID ทำให้ ESP32-S3 พิมพ์ค่า HEX เข้า PC ได้เหมือน Keyboard
- Documentation ระบุเก็บได้ 20 สี แต่ Current Code กำหนด MAX_SAVED_COLORS เป็น 50
- Project ยังไม่ได้ Claim ว่าเป็น Calibrated Colorimeter และผู้สร้างเองต้องการพัฒนา Calibration ให้ดีขึ้น
- Repository ปัจจุบันระบุ GPIO 4 ทั้ง TFT Reset และ Sensor LED จึงควรตรวจ Hardware Revision ก่อนต่อวงจรตาม
Real Life Color Picker คืออะไร?
Project นี้เริ่มจากปัญหาง่าย ๆ: ผู้สร้างมักเห็นสีในโลกจริงที่อยากเก็บไว้ใช้ในงาน Design แต่ไม่อยากถ่ายรูปแล้วกลับไปลอง Sample สีทีหลัง
เลยเกิดเป็นอุปกรณ์พกพาที่ทำ Flow แบบนี้:
ทำไมไม่ถ่ายรูปแล้ว Sample สีทีหลัง?
กล้องมือถือก็สามารถใช้เป็นวิธีเก็บ Reference สีได้ แต่ Pain Point ของผู้สร้างคือ ต้องถ่ายภาพไว้ก่อน แล้วกลับมาเปิด Software เพื่อ Sample สีอีกขั้น
Color Picker ตัวนี้เปลี่ยน Flow ให้ตรงกว่า: จ่อวัตถุแล้วได้ค่า HEX ทันทีบนอุปกรณ์ และถ้าต้องการใช้ทีหลัง ก็ Save ไว้ในเครื่องได้
Hardware หลักมีอะไร?
| Hardware | หน้าที่ใน Project |
|---|---|
| XIAO ESP32-S3 family | อ่าน Sensor, ประมวลผล RGB/HEX, จัดการ UI, Storage และ USB HID |
| TCS34725 | อ่าน Red, Green, Blue และ Clear-light Channel |
| 1.47" ST7789 Display | จอสี 172×320 สำหรับแสดง Preview และค่า HEX |
| Push Button ×3 | ควบคุม Menu, Scan, Save และ Browse |
| Slide Switch ×1 | อยู่ใน Hackster BOM แต่ Source Code ไม่ได้ระบุหน้าที่ทาง Logic |
| Battery 400 mAh | แหล่งพลังงานตาม Hardware List ของ Hackster |
| 3D Printed Enclosure | รวม Board, Display, Sensor และ Controls เป็นอุปกรณ์พกพา |
XIAO ESP32-S3 หรือ XIAO ESP32S3 Sense?
ตรงนี้ Source ใช้ชื่อไม่ตรงกันเล็กน้อย
- Hackster Hardware List ระบุ Seeed Studio XIAO ESP32S3 Sense
- Official Project README บน GitHub ระบุ Xiao ESP32-S3
Firmware ของ Color Picker ไม่ได้ใช้ Camera หรือ Microphone ซึ่งเป็นความสามารถที่มากับ Sense Expansion Board
TCS34725 อ่านสีอย่างไร?
TCS34725 ไม่ได้ส่งค่า HEX ออกมาโดยตรง
ตาม Project README Sensor ให้ Raw 16-bit Reading ของ:
- Red
- Green
- Blue
- Clear Light
Current Firmware ใช้ Adafruit_TCS34725 และตั้งค่าใน Source Code เป็น:
- Integration Time 154 ms
- Gain 4×
Clear Channel ถูกใช้เป็น Reference ในการ Normalize ค่า RGB ก่อนสร้างสี Final
จาก Raw RGB กลายเป็น RGB 0–255 ยังไง?
README อธิบายหลักการไว้ตรงไปตรงมาว่า นำ R, G, B ไป Normalize เทียบกับ Clear Channel แล้วแปลงเป็นช่วง 0–255
Current Firmware มีขั้นเพิ่มเติมอีกเล็กน้อย:
- Normalize R/G/B ด้วย Clear Channel
- คูณ Brightness Boost
- ปรับ Saturation รอบค่า Luminance
- Clamp ผลให้อยู่ระหว่าง 0–255
const float BRIGHTNESS_BOOST = 1.30f;
const float SATURATION_BOOST = 1.40f;
float normR = ((float)r / (float)c) * 255.0f;
float normG = ((float)g / (float)c) * 255.0f;
float normB = ((float)b / (float)c) * 255.0f;
normR *= BRIGHTNESS_BOOST;
normG *= BRIGHTNESS_BOOST;
normB *= BRIGHTNESS_BOOST;
float lum = 0.299f * normR + 0.587f * normG + 0.114f * normB;
normR = lum + (normR - lum) * SATURATION_BOOST;
normG = lum + (normG - lum) * SATURATION_BOOST;
normB = lum + (normB - lum) * SATURATION_BOOST;จาก RGB กลายเป็น HEX #RRGGBB
หลังได้ค่า RGB ช่วง 0–255 Firmware จะ Format แต่ละ Channel เป็นเลขฐาน 16 สองหลัก แล้วรวมเป็น:
#RRGGBB
ตัวอย่างที่ Project README ให้ไว้:
- R = 255
- G = 64
- B = 32
จะได้:
#FF4020
ทำไมยังไม่ควรเรียกว่า Calibrated Colorimeter?
ผู้สร้างระบุเองว่า RGB Conversion ปัจจุบันถูกออกแบบให้เรียบง่าย และหนึ่งใน Future Improvements คือ:
Better color calibration
อีกเรื่องคือ Ambient Light เพราะ Future Improvement อีกข้อคือ เพิ่ม Physical Enclosure รอบ Sensor เพื่อช่วย Block แสงจากสภาพแวดล้อม และทำ Reading ให้ Consistent มากขึ้น
Sensor LED ช่วยตอน Scan ยังไง?
Main Source ระบุว่า LED สามารถตั้งให้เปิดตอน Scanning ได้
Current Firmware มี 3 Mode:
- AUTO
- ON
- OFF
ใน AUTO Mode Code จะเปิด LED เมื่อ UI อยู่ในสถานะ Live Scan และปิดเมื่อออกจากสถานะนั้น
Scan → Save → Browse ทำงานยังไง?
UI ไม่ได้มีแค่หน้าจอวัดสีหน้าเดียว แต่เป็น State Machine ที่มีทั้ง Main Menu, Live Scan, Result, Browse และ Settings
หน้าจอเปลี่ยนตามสีที่อ่านได้
Save หรือ Discard
เปิดดูสีที่ Save ไว้
Current Code ยังมี Settings สำหรับ:
- Sensor LED Mode
- Auto Overwrite เมื่อ Storage เต็ม
Save ได้ 20 หรือ 50 สี? Source มี Conflict
Hackster Story และ Project README ระบุว่า Current Implementation รองรับ:
สูงสุด 20 สี
แต่ Current Arduino Sketch ที่อยู่ใน Repository กำหนด:
MAX_SAVED_COLORS = 50
Code ปัจจุบันยังมี Auto Overwrite ที่สามารถลบสีเก่าสุด เมื่อ Storage เต็มและเปิด Setting นี้ไว้
สีถูกเก็บแบบไหน?
Project ใช้ ESP32 Arduino Preferences API สำหรับ Non-volatile Storage
แต่ละสีถูก Pack เป็นค่า 24-bit:
0xRRGGBB
แล้วค่อย Unpack กลับเป็น R, G, B เมื่อต้อง Browse หรือส่งค่าไปยัง PC
ส่ง HEX เข้า PC ผ่าน USB Keyboard
Feature ที่ทำให้ Project นี้ใช้งานกับ Workflow ฝั่ง Design ได้สะดวกขึ้นคือ USB HID
Current Firmware ใช้:
USBHIDKeyboard
เมื่อ Browse ไปยังสีที่ Save ไว้ แล้วเลือก Action สำหรับส่งเข้า PC Code จะสร้างข้อความ HEX และพิมพ์ออกผ่าน USB เหมือน Keyboard ปกติ
char hex[10];
uint8_t r, g, b;
unpackColor(savedColors[browseIndex], r, g, b);
snprintf(hex, sizeof(hex), "#%02X%02X%02X", r, g, b);
Keyboard.print(hex);Scan สีจริง → Save → Browse → TYPE → ค่า #RRGGBB ไปโผล่บน PC
FreeRTOS ช่วยจัดการปุ่มยังไง?
Current Project Code ไม่ได้อ่านปุ่มทั้งหมดรวมอยู่ใน UI Loop อย่างเดียว
มี FreeRTOS Task แยก สำหรับ:
- Poll ปุ่มทั้ง 3
- Debounce Input
- ตรวจ Short Press / Long Press
- ส่ง Event เข้า FreeRTOS Queue
Main Loop จึงรับ Button Event จาก Queue แล้วค่อยเปลี่ยน UI State ขณะที่ Sensor Sampling และ Display Rendering ทำงานแยกตาม Flow ของตัวเอง
Warning: GPIO 4 ถูกระบุซ้ำใน Current Source
Current GitHub README และ Arduino Sketch ระบุ Pin Assignment จุดหนึ่งที่ต้องระวัง
| Function | Pin ที่ Current Source ระบุ |
|---|---|
| ST7789 TFT Reset | GPIO 4 |
| TCS34725 Sensor LED | GPIO 4 |
ด้วยเหตุนี้บทความนี้ ไม่สร้าง Wiring Diagram ใหม่ขึ้นเอง เพื่อหลีกเลี่ยงการแก้ Conflict โดยไม่มี Source รองรับ
เคส 3D Print และการประกอบ
Main Source ระบุว่า ทุกอย่างถูกจัดลงใน Compact 3D Printed Case
การยึดชิ้นส่วนใช้หลายแบบ:
- ESP32 และ Buttons ใช้ Snap Fit
- ชิ้นส่วนอื่นบางส่วนใช้ M2 Screws
สิ่งที่ผู้สร้างอยากปรับปรุงต่อ
1. Better Color Calibration
ผู้สร้างระบุว่า RGB Conversion ปัจจุบัน intentionally simple และ Calibration ที่ดีกว่านี้ สามารถช่วยให้ Output มีความน่าเชื่อถือมากขึ้น
2. Better Sensor Enclosure
เป้าหมายคือทำ Housing รอบ Sensor เพื่อช่วย Block Ambient Light และทำ Reading ให้ Consistent ขึ้น
3. More Saved Colors
Main Story และ README พูดถึงการเพิ่มจำนวนสีที่ Save ได้ ขณะที่ Current Code ดูเหมือนขยาย MAX_SAVED_COLORS จาก 20 เป็น 50 แล้ว
ดู Real Life Color Picker ทำงานจริง
Video ต้นฉบับแสดงตั้งแต่แนวคิดของ Project, การประกอบเคส ไปจนถึงการ Scan สี, Save สี และส่งค่า HEX เข้า PC
โปรเจกต์นี้มีหลายขั้น แนะนำอ่านต้นฉบับควบคู่กัน
หากต้องการสร้างตามจริง ควรตรวจ Hackster Project, GitHub Source และไฟล์ 3D รุ่นล่าสุดควบคู่กัน โดยเฉพาะจุด Pin Assignment ที่ Current Source ระบุ GPIO 4 ซ้ำ
FAQ: คำถามที่พบบ่อย
1. Real Life Color Picker ใช้ Sensor อะไร?
ใช้ TCS34725 Color Sensor สำหรับอ่าน Red, Green, Blue และ Clear-light Channel
2. ใช้ ESP32 รุ่นไหน?
Hackster Hardware List ระบุ XIAO ESP32S3 Sense ขณะที่ Official GitHub README ระบุ XIAO ESP32-S3 จึงควรตรวจ Hardware Revision ของ Build ที่ต้องการทำตาม
3. Project ใช้ Camera ของ XIAO ESP32S3 Sense หรือไม่?
Current Firmware ที่ตรวจไม่ได้ใช้ Camera หรือ Microphone ของ Sense Expansion Board
4. สี HEX มาจาก Sensor โดยตรงไหม?
ไม่ Sensor ให้ Raw R/G/B/Clear Reading แล้ว ESP32-S3 นำไปคำนวณ RGB 0–255 ก่อน Format เป็น #RRGGBB
5. ค่า HEX มีรูปแบบอย่างไร?
ใช้รูปแบบ #RRGGBB เช่น R=255, G=64, B=32 จะได้ #FF4020 ตามตัวอย่างใน Project README
6. Project นี้วัดสีแม่นแค่ไหน?
Source ไม่ได้ให้ Accuracy, Delta E หรือ Repeatability Benchmark และผู้สร้างระบุว่า Calibration ยังเป็นจุดที่อยากปรับปรุง
7. Ambient Light มีผลหรือไม่?
ผู้สร้างเสนอ Better Sensor Enclosure เพื่อ Block Ambient Light และทำ Reading ให้ Consistent มากขึ้น จึงเป็นข้อจำกัดที่ Source รับรู้ไว้แล้ว
8. Sensor LED เปิดตลอดหรือไม่?
Current Code มี AUTO, ON และ OFF โดย AUTO จะเปิด LED ระหว่าง Live Scan
9. บันทึกสีได้กี่สี?
Hackster Story และ README ระบุ 20 สี แต่ Current Code กำหนด MAX_SAVED_COLORS เป็น 50 จึงมี Conflict ระหว่าง Documentation กับ Implementation ปัจจุบัน
10. สีหายหลังปิดเครื่องไหม?
Project ใช้ ESP32 Preferences ซึ่งเป็น Non-volatile Storage สำหรับเก็บสีที่ Save ไว้
11. ส่งค่า HEX เข้า PC ได้อย่างไร?
Firmware ใช้ USBHIDKeyboard และพิมพ์ค่า HEX ออกผ่าน USB เหมือน Keyboard
12. จอใช้รุ่นอะไร?
Project README ระบุ ST7789 ขนาด 1.47 นิ้ว ความละเอียด 172×320
13. ปุ่มมีทั้งหมดกี่ปุ่ม?
Project ใช้ Push Button 3 ปุ่ม สำหรับ Navigation และ Action ต่าง ๆ
14. Slide Switch ใช้ทำอะไร?
Hackster BOM ระบุ Slide Switch 1 ตัว แต่ Source Code ที่ตรวจไม่ได้ระบุหน้าที่ทาง Logic จึงไม่ควรเดาว่าใช้ทำอะไร
15. Battery ใช้ได้นานแค่ไหน?
Source ระบุ Battery 400 mAh แต่ไม่ได้ให้ Runtime, Current Draw หรือ Charging Spec จึงคำนวณไม่ได้
16. มีไฟล์ 3D Print หรือไม่?
มี Source ให้ไฟล์ Custom Parts / Enclosure สำหรับดาวน์โหลด
17. ใช้ Material หรือ Print Settings อะไร?
Source ไม่ได้ระบุ Material, Layer Height, Infill, Nozzle, Support หรือ Print Temperature
18. GPIO 4 ต่อกับอะไร?
Current Source ระบุ GPIO 4 ทั้ง TFT Reset และ TCS34725 Sensor LED จึงต้องตรวจ Hardware Revision หรือ Wiring ล่าสุดจากผู้สร้างก่อนต่อจริง
References / แหล่งข้อมูลต้นฉบับ
จาก Sensor Project เล็ก ๆ สู่เครื่องมือที่ใช้ใน Workflow จริง
Real Life Color Picker เป็นตัวอย่างที่ดีของการเอา ESP32-S3, Sensor, Display, Storage และ USB HID มาประกอบเป็นอุปกรณ์ที่มี Use Case ชัดเจน มากกว่าแค่ Demo อ่านค่า Sensor บน Serial Monitor
หากกำลังทำ ESP32, Sensor, Display หรือ Portable Electronics Project สามารถสอบถามทีม Globalbyte เรื่องบอร์ดและอุปกรณ์ที่เหมาะกับ Project ได้
สำหรับเคสของ Project นี้ Source มีไฟล์ 3D ให้แล้ว หากมีไฟล์แต่ไม่มีเครื่องพิมพ์ สามารถส่งไฟล์ให้ทีม Globalbyte ช่วยประเมินบริการพิมพ์ 3D ได้เช่นกัน
