มีจอแบบกลมแต่ทำเกจสวยๆ ไม่ได้ก็เสียดายแย่ เลยจัดสเก็ตช์นี้ขึ้นมา เอาไว้วาดเกจได้สามตำแหน่งรอบๆ จอ สเก็ตช์จะวาดเกจวงกลมแบ่งเป็นสามโซนคนละสี พิเศษอีกนิดคือมีตัวอย่างเข็มให้เอาไปปรับใช้กับงานอื่นๆ ได้ด้วย ถ้าอยากได้เลยด่วนๆ ไปเอาในสเก็ตช์ที่แนบมาใช้ได้ทันที แต่ถ้าอยากรู้ว่ามันทำยังไง หรือจะเอาไปปรับปรุง (หรือแก้ไข) สิ่งที่พี่ทำไว้ ก็อ่านต่อด้านล่างเกี่ยวกับ "แนวทางทางทฤษฎี" ที่พี่ใช้เลย
บทความนี้พี่เสนอเป็น วิธีการ นะจ๊ะ ดังนั้นพี่จะไม่เขียนวิธีต่อจอกับ Arduino แบบเจาะจงหรอก เพราะมีแหล่งข้อมูลอื่นๆ เยอะแยะแล้ว พี่แค่ลิสต์ของสองชิ้นที่พี่มีอยู่บนโต๊ะตอนนี้ (จอ 1.28 นิ้ว กับ Arduino MKR1010)
ไลบรารีไหนก็จะมีฟังก์ชันพื้นฐานให้วาดวงกลมกับสามเหลี่ยม แต่จะไม่มี "วงแหวน" (annulus) ให้วาดโดยตรง สิ่งที่เราต้องทำก็คือวาดสามเหลี่ยมหลายๆ อัน แล้วค่อยวาดวงกลมทับลงไปด้วยสีเดียวกับพื้นหลัง
สามเหลี่ยมอันที่สอง (สีเขียว) จะมีจุดยอดหนึ่งอยู่เหนือเส้นกลางแนวนอน และอีกจุดอยู่ใต้ลงมา ดังนั้น:
- 120 ลบด้วย tan(ANGLE_2) และ 120 บวกด้วย tan(ANGLE_3)
สามเหลี่ยมอันที่สาม (สีส้ม) จะอยู่ใต้เส้นกลางทั้งหมด โดยมีพิกัด y เป็น ... 120 + tan(ANGLE_2) และ 120 + tan(ANGLE_1) สุดท้ายเราก็วนกลับมาที่ ANGLE_1 อีกครั้งเพื่อให้เกจสมมาตร ขอบเขตนอกสุด, การแบ่งส่วน และสีต่างๆ ต้องเก็บไว้ในที่ไหนสักแห่ง พี่จึงใช้อาร์เรย์ที่มีข้อมูลแบบนี้:
- ANGLE_1, ANGLE_2, ANGLE_3, COLOR_1, COLOR_2, COLOR_3
เพราะพี่อยากวาดเกจทางซ้าย ล่าง และขวา พี่เลยทำเป็นเมทริกซ์ 3x6 เพื่อให้แต่ละเกจมีขนาดและสีเป็นของตัวเองได้ วาดให้โค้ดน้อยที่สุดโดยใช้ฟังก์ชัน ROTATION แล้วคำนวณแบบเดิมซ้ำทุกครั้งที่ระบบพิกัดหมุนไป
สุดท้าย ต้องลบส่วน "กลาง/จุดยอด" ของสามเหลี่ยมออก โดยการวาดวงกลมรัศมี r = (120 – dial_width) ด้วยสีเดียวกับพื้นหลัง
การใช้เทคนิค "การหมุน" นี้ต้องเข้าใจให้ชัดว่า แต่ละรูปวาดจะมีด้าน "บน" และ "ล่าง" เมื่ออยู่ทาง "ซ้าย" ตามรูปด้านบน ดังนั้นตอนตั้งค่า rotation สุดท้ายสำหรับการทำงาน ต้องประเมินด้านบน-ล่างใหม่ (เช่น ถ้าวาดสามเกจแล้วหยุดที่ rotation = 2 เกจทางขวาจะมีด้านบนชี้ลง – นี่คือสาเหตุที่สีแดงในตัวอย่างดู "กลับด้าน") ต้องคำนึงถึงเรื่องเดียวกันนี้สำหรับเข็มที่ใช้ชี้ค่าบนเกจด้วย
การลงมือทำจริง: พิกเซลกลมๆ กับเกรเดียนต์
โปรเจคนี้จะเผยให้เห็นเลเยอร์ที่ซ่อนอยู่เบื้องหลังการโต้ตอบแบบหมุนๆ เป็นดิจิทัล:
- เลเยอร์อินเทอร์เฟซออปติคอล: จอ TFT ทรงกลม เช่น GC9A01 ทำหน้าที่เป็นดวงตาดิจิทัลความละเอียดสูง ให้กริดพิกเซล 240x240 ที่สว่างชัดในฟอร์มแฟคเตอร์ทรงกลมที่ไม่เหมือนใคร
- เลเยอร์โปรโตคอล: Arduino (หรือ ESP32) ใช้บัส SPI ในการส่งคำสั่งกราฟิกและข้อมูลพิกเซลประสิทธิภาพสูง
- เลเยอร์กลยุทธ์อินพุต: Rotary Encoder ให้อินพุตแบบเพิ่มทีละนิดความแม่นยำสูง สำหรับการเลื่อนเมนูหรือปรับค่า
- เลเยอร์การแปลง: โค้ด Arduino ใช้กลยุทธ์ "sequential decoding" (หรือ quadrant-step): มันตีความการหมุนของลูกบิดและจับคู่กราฟิก "เข็ม" หรือ "แถบ" กับค่าที่กำหนด
- เลเยอร์อินเทอร์เฟซภาพ: องค์ประกอบ UI แบบกำหนดเอง เช่น "เกรเดียนต์" และ "เงา" ประสานงานงานแสดงผลเพื่อให้ความรู้สึกพรีเมียม
โครงสร้างพื้นฐานฮาร์ดแวร์
- Arduino/ESP32: "สมอง" ของโปรเจค จัดการเรนเดอร์กราฟิก SPI ความเร็วสูงและประสานงานงานของเอ็นโค้ดเดอร์
- GC9A01 Circular TFT: ให้ฟีดแบ็คภาพที่ทรงพลังและสวยงามสำหรับอินเทอร์เฟซสมาร์ทไดอัล
- Rotary Encoder: ให้ฟีดแบ็คทางกายภาพแบบสัมผัสได้ทุกครั้งที่เลื่อนเมนู
- TP4056 & Li-Po: สำคัญสำหรับการจ่ายไฟและชาร์จประหยัดพลังงานให้ไดอัลแบบพกพา
- เคสพิมพ์ 3 มิติ: ทำหน้าที่เป็นโครงเครื่องกลประสิทธิภาพสูงสำหรับทุกจุดของลูกบิด
- สาย Micro-USB: ใช้สำหรับโปรแกรมคอนโทรลเลอร์และเป็นแหล่งจ่ายไฟหลักของโปรเจค
ขั้นตอนการนำทางและโต้ตอบแบบทีละสเต็ป
กระบวนการของสมาร์ทไดอัลถูกออกแบบมาให้มีประสิทธิภาพมาก:
- เริ่มต้นฮาร์ดแวร์: วางจอ TFT และเอ็นโค้ดเดอร์ในฐานที่พิมพ์ 3 มิติให้ถูกต้อง และเชื่อมต่อกับพิน SPI ของคอนโทรลเลอร์
- ตั้งค่าซิงค์กราฟิก: ในฟังก์ชัน
setup()ให้เริ่มต้นจอ GC9A01, พอร์ต Serial และบัฟเฟอร์กราฟิก (เช่นArduino_GFX) - ลูปการทำงาน: Arduino รอการเคลื่อนไหวของเอ็นโค้ดเดอร์และอัปเดตกราฟิกบนจอแบบเรียลไทม์ให้ตรงกับลูกบิด
- บูรณาการฟีดแบ็คภาพ: ดู UI แบบกำหนดเองเปลี่ยนเป็นสัญญาณภาพที่มีจังหวะ พัลส์และตามการตั้งค่าบนลูกบิดไปพร้อมกันบนหน้าจอ
แผนขยายในอนาคต
- บูรณาการแดชบอร์ดแสดงข้อมูลด้วย OLED: เพิ่มจอ OLED ขนาดเล็กตัวที่สองในกล่องลูกบิดเพื่อแสดง "ระดับแบตเตอรี่" (%) หรือ "WiFi SSID"
- ซิงค์ข้อมูลสภาพอากาศจากเซ็นเซอร์หลายตัว: เชื่อมต่อเซ็นเซอร์ DHT22 เพื่อแสดง "อุณหภูมิห้อง" หรือ "ความชื้น" ปัจจุบันในรูปแบบมิเตอร์ที่ออกแบบสวยงาม
- ซัพพอร์ตการเชื่อมต่อกับคลาวด์: เพิ่มโมดูล WiFi/BT และลิงก์กับแดชบอร์ดบนสมาร์ทโฟนเพื่อควบคุมเครื่องทำความร้อนกลางหรือไฟผ่านสมาร์ทไดอัล
- ซัพพอร์ตปรับแต่งโปรไฟล์การหมุนขั้นสูง: เพิ่ม "Haptic Feedback" พิเศษ (ใช้มอเตอร์สั่น) เพื่อให้ความรู้สึก "ติ๊ก" ทางกายภาพเมื่อลูกบิดเลื่อนถึงรายการเมนู
สมาร์ทไดอัลสำหรับจอทรงกลมเป็นโปรเจคที่เพอร์เฟกต์สำหรับคนรักอิเล็กทรอนิกส์ที่มองหาเครื่องมือเชื่อมต่อ UI กับฮาร์ดแวร์ที่โต้ตอบได้สนุกและน่าดึงดูดยิ่งขึ้น!
[!NOTE] ตรวจสอบให้แน่ใจว่าจอทรงกลมของคุณอยู่กึ่งกลางในเคสลูกบิด เพื่อหลีกเลี่ยงแสงรอดและข้อผิดพลาดพารัลแลกซ์ระหว่างการนำทางนะน้อง! ห้ามช็อตนะตัวนี้