M5StickC นาฬิกาสุดเท่พร้อมเมนูและการควบคุมความสว่าง: 8 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีตั้งโปรแกรม ESP32 M5Stack StickC ด้วย Arduino IDE และ Visuino เพื่อแสดงเวลาบน LCD และยังตั้งเวลาและความสว่างโดยใช้เมนูและปุ่ม StickC

ดูวิดีโอสาธิต

ขั้นตอนที่ 1: สิ่งที่คุณต้องการ

M5StickC ESP32: คุณสามารถรับได้ที่นี่

โปรแกรม Visuino: ดาวน์โหลด Visuino

หมายเหตุ: ตรวจสอบบทช่วยสอนนี้ที่นี่เกี่ยวกับวิธีติดตั้งบอร์ด StickC ESP32

ขั้นตอนที่ 2: เริ่ม Visuino และเลือก M5 Stack Stick C Board Type

เริ่ม Visuino ดังรูปแรก คลิกที่ปุ่ม "Tools" บนส่วนประกอบ Arduino (ภาพที่ 1) ใน Visuino เมื่อกล่องโต้ตอบปรากฏขึ้น ให้เลือก "M5 Stack Stick C" ดังแสดงในภาพที่ 2

ขั้นตอนที่ 3: ใน Visuino ตั้งค่า StickC Board

1. คลิกที่บอร์ด "M5 Stack Stick C" เพื่อเลือก
2. ในหน้าต่าง "คุณสมบัติ" เลือก "โมดูล" และคลิก "+" เพื่อขยาย
3. เลือก "แสดง ST7735" และคลิก "+" เพื่อขยาย
4. ตั้งค่า "การวางแนว" เป็น "goRight"
5. ตั้งค่า "สีพื้นหลัง" เป็น "ClBlack"
6. เลือก "องค์ประกอบ" และคลิกที่ปุ่มสีน้ำเงินที่มี 3 จุด…
7. Elements Dialog จะแสดง
8. ในกล่องโต้ตอบ Elements ให้ลาก "ช่องข้อความ" 2X จากด้านขวาไปทางซ้าย
9. คลิกที่ "ช่องข้อความ1" ทางด้านซ้ายเพื่อเลือก จากนั้นใน "หน้าต่างคุณสมบัติ" ให้คลิกที่ "สี" และตั้งค่าเป็น "aclOrange" แล้วคลิก "เติมสี" และตั้งค่าเป็น "aclBlack" (คุณ สามารถเล่นกับสีได้หากต้องการ) -ในคุณสมบัติ windows set X:10 และ Y:20 นี่คือตำแหน่งที่คุณต้องการแสดงเวลาบน LCD-set size:3 (นี่คือขนาดตัวอักษรของเวลา)
10. คลิกที่ "ฟิลด์ข้อความ2" ทางด้านซ้ายเพื่อเลือก จากนั้นใน "หน้าต่างคุณสมบัติ" คลิกที่ "สี" และตั้งค่าเป็น "aclAqua" และคลิกที่ "เติมสี" และตั้งค่าเป็น "aclBlack"

(คุณสามารถเล่นกับสีได้หากต้องการ) -set "Initial Value" เป็น: Set HOUR

-ยังอยู่ในคุณสมบัติ windows set X:10 และ Y:2 นี่คือตำแหน่งที่คุณต้องการแสดงเมนูบน LCD -set size:1 (นี่คือขนาดตัวอักษรของเมนู)

ปิดหน้าต่างองค์ประกอบ

1. คลิกที่บอร์ด "M5 Stack Stick C" เพื่อเลือก
2. ในหน้าต่าง "คุณสมบัติ" เลือก "โมดูล" และคลิก "+" เพื่อขยาย
3. เลือก "แสดงนาฬิกาปลุกตามเวลาจริง (RTC)" และคลิก "+" เพื่อขยาย
4. เลือก "องค์ประกอบ" และคลิกที่ปุ่มสีน้ำเงินที่มี 3 จุด…
5. ในไดอะล็อก Elements ให้ลาก "Set Hour" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1
6. ในไดอะล็อก Elements ให้ลาก "Set Minute" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1
7. ในไดอะล็อก Elements ให้ลาก "Set Second" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1

ปิดหน้าต่างองค์ประกอบ

ขั้นตอนที่ 4: ใน Visuino เพิ่มส่วนประกอบ

1. เพิ่ม 2x "ปุ่มดีบัก" ส่วนประกอบ
2. เพิ่มองค์ประกอบ "ปุ่มเล่นซ้ำอัตโนมัติ"
3. เพิ่มองค์ประกอบ "Text Array"
4. เพิ่มองค์ประกอบ "Analog Array"
5. เพิ่ม 2x "ตัวนับ" ส่วนประกอบ
6. เพิ่มส่วนประกอบ "Clock Demux (สวิตช์ช่องสัญญาณออกหลายช่อง)"
7. เพิ่ม "Decode(Split) Date/Time" component
8. เพิ่มองค์ประกอบ "FormattedText1"

ขั้นตอนที่ 5: ในส่วนประกอบชุด Visuino

1. เลือกองค์ประกอบ "FormattedText1" และภายใต้หน้าต่าง "คุณสมบัติ" ตั้งค่า "ข้อความ" เป็น: %0:%1:%2
2. ดับเบิลคลิกที่องค์ประกอบ "FormattedText1" และในกล่องโต้ตอบ Elements ให้ลาก "องค์ประกอบข้อความ" 3x ไปทางซ้าย
3. เลือก "TextElement1" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
4. เลือก "TextElement2" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
5. เลือก "TextElement3" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
6. เลือกส่วนประกอบ "ClockDemmux1" และในหน้าต่างคุณสมบัติตั้งค่า "Output Pins" เป็น: 5
7. เลือกส่วนประกอบ "Counter1" และในหน้าต่างคุณสมบัติขยาย "สูงสุด" และตั้งค่า "ค่า" เป็น: 4
8. เลือกส่วนประกอบ "Counter1" และในหน้าต่างคุณสมบัติขยาย "Min" และตั้งค่า "Value" เป็น: 0
9. เลือกส่วนประกอบ "Counter2" และในหน้าต่างคุณสมบัติขยาย "สูงสุด" และตั้งค่า "ค่า" เป็น: 6
10. เลือกส่วนประกอบ "Counter2" และในหน้าต่างคุณสมบัติขยาย "Min" และตั้งค่า "Value" เป็น: 0การสร้างเมนู:
11. เลือกส่วนประกอบ "Array1" (Text Array) และดับเบิลคลิกที่ส่วนประกอบ - ในหน้าต่างองค์ประกอบ ลาก "Value" 4X ไปทางซ้าย - ทางด้านซ้าย เลือก "Item[1]" และในหน้าต่างคุณสมบัติให้ตั้งค่า "Value" ถึง: ตั้งค่าชั่วโมง-ทางด้านซ้าย เลือก "รายการ[2]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: ตั้งค่านาที-ทางด้านซ้าย เลือก "รายการ[3]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" ถึง: SET SECONDS-ทางด้านซ้าย เลือก "Item[4]" และในหน้าต่างคุณสมบัติให้ตั้งค่า "Value" เป็น: SET BRIGHTNESSปิดหน้าต่าง Elements การตั้งค่าสำหรับความสว่าง:

12. เลือกองค์ประกอบ "Array2" (Analog Array) และดับเบิลคลิกที่องค์ประกอบ - ในหน้าต่างองค์ประกอบ ลาก "ค่า" 6X ไปทางซ้าย - ทางด้านซ้าย เลือก "รายการ[0]" และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "ค่า" ถึง: 1

    - ทางด้านซ้าย เลือก "รายการ[1]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.9

    - ทางด้านซ้าย เลือก "รายการ[2]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.8 - ทางด้านซ้าย เลือก "รายการ[3]" และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "ค่า" เป็น: 0.7-เปิด ด้านซ้าย เลือก "รายการ[4]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.6- ทางด้านซ้าย เลือก "รายการ[5]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.55

ขั้นตอนที่ 6: ในส่วนประกอบ Visuino Connect

1. เชื่อมต่อพิน "M5 Stack Stick C" A (M5) กับพิน "Button2" [ใน]
2. เชื่อมต่อพิน "M5 Stack Stick C" [B] กับพิน "Button1" [ใน]
3. เชื่อมต่อพิน "Button2" [ออก] กับพิน 'Repeat1" [ใน]
4. เชื่อมต่อพิน "RepeatButton1" [ออก] กับพิน "ClockDemmux1" [ใน]
5. เชื่อมต่อพิน "Button1" [ออก] กับพิน "Counter1" [ใน]
6. เชื่อมต่อพิน "M5 Stack Stick C" > พิน "นาฬิกาปลุกตามเวลาจริง (RTC)" [ออก] กับพิน "DecodeDateTime1" [ใน]
7. เชื่อมต่อพิน "DecodeDateDateTime1" [ชั่วโมง] กับ "FormattedText1">พิน "TextElement1" [ใน]
8. เชื่อมต่อพิน "DecodeDateDateTime1" [นาที] กับ "FormattedText1">พิน "TextElement2" [ใน]
9. เชื่อมต่อพิน "DecodeDateDateTime1" [วินาที] กับ "FormattedText1">พิน "TextElement3" [ใน]
10. เชื่อมต่อพิน "FormattedText1" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน "Text Field1" [ใน]
11. เชื่อมต่อพิน "Counter1" [ออก] กับพิน "ClockDemmux1" [เลือก] และพิน "Array1" [ดัชนี]
12. เชื่อมต่อพิน "Counter2" [ออก] กับพิน "Array2" [ดัชนี]
13. เชื่อมต่อพิน "Array1" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน "Text Field2" [ใน]
14. เชื่อมต่อพิน "Array2" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน [ความสว่าง]
15. เชื่อมต่อพิน "ClockDemmux1" [1] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "ตั้งชั่วโมง1" [นาฬิกา]
16. เชื่อมต่อพิน "ClockDemmux1" [2] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "Set Minute1" [นาฬิกา]
17. เชื่อมต่อพิน "ClockDemmux1" [3] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "ตั้งค่า Second1" [นาฬิกา]
18. เชื่อมต่อพิน "ClockDemmux1" [4] กับพิน "Counter2" [ใน]

ขั้นตอนที่ 7: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino

ใน Visuino ที่ด้านล่างให้คลิกแท็บ "บิลด์" ตรวจสอบให้แน่ใจว่าได้เลือกพอร์ตที่ถูกต้อง จากนั้นคลิกที่ปุ่ม "รวบรวม/สร้างและอัปโหลด"

ขั้นตอนที่ 8: เล่น

หากคุณจ่ายไฟให้กับโมดูล M5Sticks จอแสดงผลควรเริ่มแสดงเวลา คุณสามารถเปลี่ยนเวลาและความสว่างได้โดยใช้ปุ่ม "B" เพื่อแสดงเมนูและสลับไปมาระหว่าง (ตั้งชั่วโมง ตั้งนาที ตั้งวินาที ตั้งค่าความสว่าง) และใช้ปุ่ม "M5" เพื่อตั้งค่า

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