Timer ตัวนี้ไม่ต้องกด +/− แค่หมุนวงแหวน ESP32 ก็ปรับเวลาให้ทันที
Timer ทั่วไปมักให้เรากดปุ่มเพิ่มเวลา ลดเวลา หรือไล่แตะตัวเลขบนหน้าจอ แต่โปรเจกต์ Universal Timer ของ mircemk เลือกใช้วิธีที่เข้ากับจอกลมมากกว่า: หมุนวงแหวนรอบหน้าจอเพื่อเลือกเวลา
Hardware หลักคือ CrowPanel 2.1-inch HMI ESP32 Rotary Display ซึ่งรวม ESP32-S3, จอกลมสีแบบ Touchscreen และ Rotary Encoder พร้อมปุ่มกดไว้ในตัวเดียว จากนั้นผู้สร้างเพิ่ม PCF8574 I2C I/O Expander ภายนอก กับ Active Buzzer เพื่อให้มีเสียงแจ้งเตือนเมื่อ Countdown จบ
ผลลัพธ์จึงคล้าย Kitchen Timer แบบหมุนในเวอร์ชันดิจิทัล: หมุนเพื่อ Set เวลา, กดเพื่อ Start หรือ Pause และดูเวลาที่เหลือจาก Graphic วงกลมได้จากระยะหนึ่ง
- ใช้ CrowPanel 2.1-inch HMI ESP32 Rotary Display ที่มี ESP32-S3
- หน้าจอกลม IPS ความละเอียด 480×480 พร้อม Capacitive Touch
- หมุน Rotary Encoder เพื่อกำหนดเวลา
- กดสั้นเพื่อ Start / Pause / Resume
- กดยาวประมาณ 1.2 วินาทีเพื่อ Reset เป็น 00:00
- แตะด้านล่างของหน้าจอเพื่อสลับ Range 1 / 10 / 30 / 60 นาที
- เพิ่ม External PCF8574 ที่ Address 0x20 สำหรับควบคุม Active Buzzer
- เมื่อหมดเวลา จอ Flash สีแดงและ Buzzer ดัง 3 รอบ
Universal Timer นี้คืออะไร?
Universal Timer เป็นโปรเจกต์ที่นำ CrowPanel 2.1-inch ซึ่งเดิมเป็น HMI Module แบบจอกลม มาเขียน Firmware ใหม่ให้ทำหน้าที่เป็น Countdown Timer
สิ่งที่ทำให้ Project นี้น่าสนใจ ไม่ใช่แค่มีจอสี แต่เป็นวิธี Interaction: การตั้งเวลาหลักทำผ่าน Rotary Encoder รอบตัวจอ ขณะที่ Touchscreen ถูกใช้กับ Function ที่เหมาะกับการแตะมากกว่า เช่นเปลี่ยน Timer Range
เลือกเวลาที่ต้องการ
เริ่ม Countdown
พื้นที่บนจอแสดงสัดส่วนเวลาที่เหลือ
จอ Flash แดงและ Buzzer แจ้งเตือน
CrowPanel 2.1" มีอะไรอยู่ในตัว?
| ส่วนประกอบ | ข้อมูลที่ยืนยันได้ |
|---|---|
| Main MCU | ESP32-S3 |
| Display | 2.1-inch IPS Round Display |
| Resolution | 480 × 480 |
| Touch | Capacitive Touch |
| Physical Input | Rotary Encoder พร้อม Push Button |
| Expansion | I2C สำหรับเชื่อมอุปกรณ์ภายนอก |
| Additional Hardware ใน Project | External PCF8574 + Active Buzzer |
ESP32-S3, Display, Touch และ Rotary Encoder อยู่ใน Module เดียว ส่วน PCF8574 ภายนอกกับ Buzzer ถูกเพิ่มเพื่อสร้าง Audible Feedback
Architecture ของระบบ
Functional Architecture
+ Touch
Timer Logic
Display
I2C
0x20
Buzzer
Diagram นี้เป็น Functional Architecture ที่สรุปจาก Project Source ไม่ได้ใช้แทน Schematic ต้นฉบับ
ทำไม Rotary Encoder ถึงเหมาะกับ Timer?
Timer แบบ Mechanical รุ่นเก่า มี Interaction ที่คนคุ้นเคยอยู่แล้ว: หมุนเพื่อกำหนดเวลา
Project นี้นำ Idea เดียวกัน มาใช้กับ HMI สมัยใหม่ โดยวงแหวนรอบจอทำหน้าที่เป็น Rotary Encoder เมื่อหมุน วง Graphic และค่าบนหน้าจอ จะเปลี่ยนตามเวลาที่ผู้ใช้กำหนด
วิธีนี้ลดการพึ่งปุ่ม เพิ่มเวลา / ลดเวลา และยังใช้ Display ตรงกลาง สำหรับ Feedback ได้พร้อมกัน
หมุน กดสั้น กดยาว ทำอะไรบ้าง?
| Input | Function ตาม Source |
|---|---|
| หมุน Encoder | กำหนดเวลาที่ต้องการ |
| Short Click | Start / Pause / Resume |
| Long Click ประมาณ 1.2 วินาที | Reset Timer เป็น 00:00 |
| Touch Lower-center | เปลี่ยน Timer Range ก่อนเริ่ม Countdown |
Source Code ระบุว่าเมื่อกดยาว Timer จะกลับเป็น 00:00 แต่ Range ที่เลือกอยู่ยังคงเดิม
Timer 4 Range และสีแต่ละช่วง
Timer ไม่ได้มี Scale เดียวสำหรับทุกค่า แต่แบ่งออกเป็น 4 Range เพื่อให้ Graphic รอบวง อ่านง่ายขึ้นตามช่วงเวลาที่ต้องการ
การเปลี่ยน Range ทำโดยแตะบริเวณด้านล่างของหน้าจอ และระบบจะวน:
1 → 10 → 30 → 60 → 1 นาที
Touch สำหรับเปลี่ยนช่วงเวลา ถูกใช้ก่อนเริ่ม Timer เพื่อหลีกเลี่ยงการเปลี่ยน Scale ระหว่าง Countdown
Circular Graphic แสดงเวลาที่เหลืออย่างไร?
ผู้สร้างใช้พื้นที่วงกลม เป็น Visual Indicator ของเวลา แทนการแสดงตัวเลขอย่างเดียว
ในคำอธิบาย Project:
- พื้นที่สีแดงแทนเวลาที่ตั้งไว้หรือเวลาที่เหลือ
- พื้นที่สีขาวค่อย ๆ เพิ่มขึ้นเมื่อ Countdown เดินหน้า
- วง Scale ด้านนอกเปลี่ยนสีตาม Range ที่เลือก
- ตัวเลขเวลาอยู่ตรงกลางสำหรับอ่านค่าแบบตรง ๆ
ผู้สร้างยังระบุว่า ใช้ Framebuffer-based Drawing เพื่อให้การเปลี่ยน Graphic ดู Smooth และลดอาการ Flicker
สี Scale หลักเปลี่ยนตาม Range ส่วนเมื่อ Timer จบ จอจึง Flash สีแดงเป็น Alarm ดังนั้นบทความนี้จะไม่ตีความว่า สีทั้งหมดค่อย ๆ เปลี่ยนตามเวลาแบบ Gradient
CrowPanel มี PCF8574 อยู่แล้ว ทำไมต้องเพิ่มอีกตัว?
จุดนี้อาจทำให้สับสนได้ง่าย เพราะ CrowPanel 2.1" เอง มี PCF8574 อยู่บน Hardware แล้วหนึ่งตัว
Source Code แยก Address ชัดเจน:
| I2C Device | Address | บทบาทใน Project |
|---|---|---|
| Internal PCF8574 | 0x21 | ใช้กับ Function ภายใน CrowPanel เช่น Encoder Button และ Touch Reset ตาม Code |
| External PCF8574 | 0x20 | เพิ่มภายนอกเพื่อควบคุม Buzzer |
| Touch Controller | 0x15 | Capacitive Touch Interface ตาม Source Code |
ทั้งสองตัวอยู่บน I2C Bus เดียวกัน แต่ใช้ Address คนละค่า และรับผิดชอบคนละ Function
External PCF8574 + Buzzer ต่ออย่างไร?
Source Code และ Project ระบุ Connection ของ Buzzer ไว้ดังนี้:
| Connection | ค่าตาม Source |
|---|---|
| External PCF8574 Address | 0x20 |
| PCF8574 P0 | Buzzer (-) |
| Buzzer (+) | 3.3V |
| P0 LOW | Buzzer ON |
| P0 HIGH | Buzzer OFF |
อย่าใช้ Wiring นี้กับ Buzzer Module ที่มีวงจรหรือ Pinout ต่างกัน โดยไม่ตรวจ Datasheet ของชิ้นส่วนจริงก่อน
I2C Address และ GPIO ที่ Source ใช้
Source Code ระบุ Pin Mapping สำหรับ CrowPanel Hardware และ Firmware ชุดนี้ดังนี้:
| Function | Source Value |
|---|---|
| Encoder CLK | GPIO4 |
| Encoder DT | GPIO42 |
| I2C SDA | GPIO38 |
| I2C SCL | GPIO39 |
| Internal PCF8574 | 0x21 |
| External PCF8574 | 0x20 |
| Touch Controller | 0x15 |
ไม่ควรนำไปใช้เป็น Pinout มาตรฐาน ของ ESP32-S3 Board รุ่นอื่น
เมื่อ Countdown ถึง 00:00 เกิดอะไรขึ้น?
Alarm ของ Project ใช้ทั้ง Visual และ Audible Feedback พร้อมกัน
- จอแดง + Buzzer ON = 500 ms
- จอขาว + Buzzer OFF = 500 ms
- ทำซ้ำทั้งหมด 3 รอบ
หลังจบ Alarm Firmware สั่งให้ Buzzer กลับสู่สถานะ Off และ Reset State ที่เกี่ยวข้องกับ Input ก่อนรอการใช้งานครั้งถัดไป
Arduino Setup ที่ผู้สร้างแนะนำ
ผู้สร้างระบุ Configuration ที่ใช้กับ Project นี้เพื่อหลีกเลี่ยง Black Screen หรือ Display Flashing
| Setting | ค่าที่ Project แนะนำ |
|---|---|
| ESP32 Core | 2.0.17 |
| Flash Size | 16MB |
| Partition Scheme | Huge APP |
| PSRAM | OPI PSRAM |
| Arduino_GFX | มี Version Conflict ใน Source — ดูหัวข้อถัดไป |
ค่าเหล่านี้เป็น Project-specific Setup จากผู้สร้าง ไม่ได้หมายความว่าเป็น Configuration บังคับสำหรับ CrowPanel Project ทุกตัว
Arduino_GFX 1.4.4 vs 1.6.1: Source ขัดกันตรงไหน?
นี่เป็น Caveat ที่ควรรู้ก่อน Compile เพราะข้อมูลจากผู้สร้างมี Version ไม่ตรงกันสองจุด
| Source | Arduino_GFX Version |
|---|---|
| Project Narrative / Installation Recommendation | 1.6.1 |
| Header ของ Source Code ที่เผยแพร่ | 1.4.4 |
หากนำ Project ไป Compile ควรตรวจไฟล์ Code และ Description เวอร์ชันล่าสุดจากหน้า Project ก่อน โดยเฉพาะหากเจอ Black Screen หรือ Flickering
นอกจากนี้ชื่อไฟล์บน Hackaday.io ระบุ Code V 0.9 Final แต่ Header ใน Code ที่เผยแพร่อีก Source ระบุ TIMER V1.0 FINAL จึงไม่ควรฟันธง Firmware Version จากชื่อไฟล์เพียงจุดเดียว
Code Architecture
Source Code มีทั้งส่วน Display, Touch, Rotary Encoder, Timer State และ Buzzer Control แต่เพื่อให้อ่านง่าย ตัวอย่างด้านล่างแสดงเฉพาะ Pin และ Address หลักที่ Source กำหนดไว้
#define ENCODER_CLK 4
#define ENCODER_DT 42
#define I2C_SDA 38
#define I2C_SCL 39
#define INTERNAL_PCF_ADDR 0x21
#define EXTERNAL_PCF_ADDR 0x20
#define TOUCH_ADDR 0x15
#define BUZZER_BIT 0Firmware หลักวนตรวจ:
- Rotary Encoder
- Encoder Button
- Touchscreen
- Countdown Timer
Display Initialization, Touch Handling, Encoder Filtering, Graphic Rendering, Timer State และ Alarm Logic อยู่ใน Source Code เต็มของผู้สร้าง
อะไรใน Code ที่ผู้สร้างบอกว่าปรับได้?
ผู้สร้างระบุว่าพารามิเตอร์หลายส่วน ถูกกำหนดไว้ช่วงต้นของ Code เพื่อให้แก้ไขได้ง่าย
ตัวอย่างที่ Source กล่าวถึงโดยตรง:
- สีของ Interface
- Geometry ของ Graphic
Source Code ยังแยกค่าของ Range Color และ Timer Geometry เป็น Constant หลายตัว ทำให้ Project เหมาะกับคนที่อยากศึกษา การวาด Circular UI บน ESP32-S3
หากต้องการปรับ UI ควรเริ่มจาก Source Code ต้นฉบับ และทดสอบบน Hardware จริง
เอา Timer แบบนี้ไปใช้กับอะไรได้บ้าง?
ผู้สร้างยกตัวอย่าง Use Case ที่ต้องการ Visual Countdown แบบง่าย เช่น:
- Workshop
- Kitchen
- Laboratory
- Photography
- Electronics Experiments
- งานทั่วไปที่ต้องการ Countdown Timer
จึงไม่ควรนำไปตีความว่า เหมาะสำหรับ Process ที่การจับเวลาผิดพลาด อาจก่อให้เกิดอันตราย โดยไม่มีการออกแบบและ Validation เพิ่มเติม
ดู Universal Timer ทำงานจริง
วิดีโอของ Project แสดงการหมุนวงแหวน, การเลือกเวลา, Countdown และ Visual Feedback บนจอกลม
Schematic / Code / Documentation
เนื่องจาก Direct Download URL ของไฟล์ไม่ได้ถูกยืนยันจาก Source ที่ดึงมาในรอบนี้ ปุ่มด้านบนจึงพาไปหน้า Project Files แทนการสร้าง Direct URL ขึ้นเอง
FAQ: ESP32 Universal Timer + CrowPanel
1. Universal Timer นี้ใช้บอร์ดอะไร?
ใช้ CrowPanel 2.1-inch HMI ESP32 Rotary Display ที่มี ESP32-S3 เป็น Main Controller
2. หน้าจอมีความละเอียดเท่าไร?
480 × 480 พิกเซล เป็นจอกลม IPS พร้อม Capacitive Touch
3. ตั้งเวลาด้วยอะไร?
หมุน Rotary Encoder รอบตัว Display เพื่อเลือกเวลา
4. กด Rotary หนึ่งครั้งทำอะไร?
Short Click ใช้ Start, Pause หรือ Resume Countdown ตาม State ของ Timer
5. กดยาวทำอะไร?
Source Code ระบุ Long Click ประมาณ 1.2 วินาที ใช้ Reset Timer กลับเป็น 00:00
6. Reset แล้ว Range เปลี่ยนหรือไม่?
ไม่ Current Timer Range ยังคงถูกเลือกอยู่
7. มี Timer Range อะไรบ้าง?
1 นาที, 10 นาที, 30 นาที และ 60 นาที
8. เปลี่ยน Range ยังไง?
แตะ Lower-center Zone ของ Touchscreen ก่อนเริ่ม Countdown
9. สีของแต่ละ Range คืออะไร?
1 นาที = Yellow, 10 นาที = Turquoise, 30 นาที = Orange และ 60 นาที = Magenta
10. CrowPanel มี PCF8574 อยู่แล้วหรือไม่?
มี Source Code และ Official Elecrow Documentation ระบุ Internal PCF8574 ที่ Address 0x21
11. แล้วทำไม Project เพิ่ม PCF8574 อีกตัว?
External PCF8574 ที่ Address 0x20 ใช้ควบคุม Active Buzzer
12. Buzzer ต่อกับ GPIO ของ ESP32 โดยตรงหรือไม่?
ไม่ใน Project นี้ Source ต่อ Buzzer ผ่าน External PCF8574 P0
13. เมื่อหมดเวลา Timer แจ้งเตือนอย่างไร?
Display Flash สีแดง พร้อม Buzzer Beep จำนวน 3 รอบ
14. Arduino_GFX ต้องใช้ Version ไหน?
Source ขัดกัน: Narrative แนะนำ 1.6.1 แต่ Code Header ระบุ 1.4.4 จึงควรตรวจ Project Version ล่าสุดก่อน Compile
15. ESP32 Core ที่ผู้สร้างแนะนำคือ Version ไหน?
Project ระบุ ESP32 Core 2.0.17
16. Code กับ Schematic เปิดให้ดาวน์โหลดหรือไม่?
Hackaday.io Project มี Schematic.jpg และ Code File ให้ดาวน์โหลด
17. Timer แม่นแค่ไหนในระยะยาว?
Source ไม่ได้ให้ Accuracy Benchmark หรือ Long-term Timing Drift
18. ใช้ Battery ได้นานเท่าไร?
Source ไม่ได้ระบุ Battery Runtime สำหรับ Universal Timer Build นี้
จากจอกลม ESP32 กลายเป็น Timer ที่ Interaction ลงตัวกับ Hardware
จุดเด่นของ Project นี้ ไม่ใช่การสร้าง Countdown Timer ที่มี Function ซับซ้อน แต่เป็นการเลือกใช้ Hardware ให้สัมพันธ์กับหน้าที่ของมัน
CrowPanel มีทั้งจอกลม, Touchscreen และ Rotary Encoder อยู่แล้ว ผู้สร้างจึงใช้ Rotary เป็น Input หลัก สำหรับการตั้งเวลา ใช้ Touch สำหรับเปลี่ยน Range และให้ Display แสดงสัดส่วนเวลาที่เหลือ แบบ Visual
ส่วน External PCF8574 + Active Buzzer เติม Audible Feedback เข้าไป โดยไม่ต้องเปลี่ยนแนวทาง Interaction หลัก ของตัว Timer
สำหรับ Maker Project นี้ยังน่าสนใจในมุม Circular UI, Rotary Input, Touch Handling, I2C Expansion และ Framebuffer Drawing บน ESP32-S3 โดยมี Code และ Schematic จากผู้สร้างให้ศึกษาเพิ่มเติม
โปรเจกต์นี้มีหลายขั้น แนะนำอ่านต้นฉบับควบคู่กัน
References / แหล่งข้อมูลต้นฉบับ
- Hackaday — ESP32 Rotary Display Makes Ideal Timer
- Hackaday.io — DIY ESP32 Universal Timer with Touchscreen
- PCBWay Open Source Project — DIY ESP32 Universal Timer
- Elecrow — CrowPanel 2.1-inch HMI ESP32 Rotary Display
- Elecrow Wiki — CrowPanel 2.1-inch Rotary Display
- YouTube — DIY ESP32 Universal Timer with Touchscreen & Rotary Encoder
กำลังทำ ESP32, HMI หรือ Touchscreen Project?
Universal Timer ตัวนี้เป็นตัวอย่างที่ดี ของการรวม ESP32-S3, Rotary Encoder, Touchscreen, I2C Expansion และ Visual Interface ไว้ใน Project เดียว
หากกำลังเลือก ESP32, Development Board, Display, Sensor หรือ Module สามารถสอบถามทีม GlobalByte เรื่องบอร์ดหรืออุปกรณ์ ที่เหมาะกับ Project ได้
