สารบัญ:
- ขั้นตอนที่ 1: สิ่งที่คุณต้องการ
- ขั้นตอนที่ 2: เริ่ม Visuino และเลือก M5 Stack Stick C Board Type
- ขั้นตอนที่ 3: ใน Visuino ตั้งค่า StickC Board
- ขั้นตอนที่ 4: ใน Visuino เพิ่มส่วนประกอบ
- ขั้นตอนที่ 5: ในส่วนประกอบชุด Visuino
- ขั้นตอนที่ 6: ในส่วนประกอบ Visuino Connect
- ขั้นตอนที่ 7: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino
- ขั้นตอนที่ 8: เล่น
วีดีโอ: M5StickC นาฬิกาสุดเท่พร้อมเมนูและการควบคุมความสว่าง: 8 ขั้นตอน
2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02
ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีตั้งโปรแกรม 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
- คลิกที่บอร์ด "M5 Stack Stick C" เพื่อเลือก
- ในหน้าต่าง "คุณสมบัติ" เลือก "โมดูล" และคลิก "+" เพื่อขยาย
- เลือก "แสดง ST7735" และคลิก "+" เพื่อขยาย
- ตั้งค่า "การวางแนว" เป็น "goRight"
- ตั้งค่า "สีพื้นหลัง" เป็น "ClBlack"
- เลือก "องค์ประกอบ" และคลิกที่ปุ่มสีน้ำเงินที่มี 3 จุด…
- Elements Dialog จะแสดง
- ในกล่องโต้ตอบ Elements ให้ลาก "ช่องข้อความ" 2X จากด้านขวาไปทางซ้าย
- คลิกที่ "ช่องข้อความ1" ทางด้านซ้ายเพื่อเลือก จากนั้นใน "หน้าต่างคุณสมบัติ" ให้คลิกที่ "สี" และตั้งค่าเป็น "aclOrange" แล้วคลิก "เติมสี" และตั้งค่าเป็น "aclBlack" (คุณ สามารถเล่นกับสีได้หากต้องการ) -ในคุณสมบัติ windows set X:10 และ Y:20 นี่คือตำแหน่งที่คุณต้องการแสดงเวลาบน LCD-set size:3 (นี่คือขนาดตัวอักษรของเวลา)
- คลิกที่ "ฟิลด์ข้อความ2" ทางด้านซ้ายเพื่อเลือก จากนั้นใน "หน้าต่างคุณสมบัติ" คลิกที่ "สี" และตั้งค่าเป็น "aclAqua" และคลิกที่ "เติมสี" และตั้งค่าเป็น "aclBlack"
(คุณสามารถเล่นกับสีได้หากต้องการ) -set "Initial Value" เป็น: Set HOUR
-ยังอยู่ในคุณสมบัติ windows set X:10 และ Y:2 นี่คือตำแหน่งที่คุณต้องการแสดงเมนูบน LCD -set size:1 (นี่คือขนาดตัวอักษรของเมนู)
ปิดหน้าต่างองค์ประกอบ
- คลิกที่บอร์ด "M5 Stack Stick C" เพื่อเลือก
- ในหน้าต่าง "คุณสมบัติ" เลือก "โมดูล" และคลิก "+" เพื่อขยาย
- เลือก "แสดงนาฬิกาปลุกตามเวลาจริง (RTC)" และคลิก "+" เพื่อขยาย
- เลือก "องค์ประกอบ" และคลิกที่ปุ่มสีน้ำเงินที่มี 3 จุด…
- ในไดอะล็อก Elements ให้ลาก "Set Hour" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1
- ในไดอะล็อก Elements ให้ลาก "Set Minute" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1
- ในไดอะล็อก Elements ให้ลาก "Set Second" จากด้านขวาไปทางซ้าย และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "Add Value" เป็น:True และ "Value" เป็น: 1
ปิดหน้าต่างองค์ประกอบ
ขั้นตอนที่ 4: ใน Visuino เพิ่มส่วนประกอบ
- เพิ่ม 2x "ปุ่มดีบัก" ส่วนประกอบ
- เพิ่มองค์ประกอบ "ปุ่มเล่นซ้ำอัตโนมัติ"
- เพิ่มองค์ประกอบ "Text Array"
- เพิ่มองค์ประกอบ "Analog Array"
- เพิ่ม 2x "ตัวนับ" ส่วนประกอบ
- เพิ่มส่วนประกอบ "Clock Demux (สวิตช์ช่องสัญญาณออกหลายช่อง)"
- เพิ่ม "Decode(Split) Date/Time" component
- เพิ่มองค์ประกอบ "FormattedText1"
ขั้นตอนที่ 5: ในส่วนประกอบชุด Visuino
- เลือกองค์ประกอบ "FormattedText1" และภายใต้หน้าต่าง "คุณสมบัติ" ตั้งค่า "ข้อความ" เป็น: %0:%1:%2
- ดับเบิลคลิกที่องค์ประกอบ "FormattedText1" และในกล่องโต้ตอบ Elements ให้ลาก "องค์ประกอบข้อความ" 3x ไปทางซ้าย
- เลือก "TextElement1" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
- เลือก "TextElement2" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
- เลือก "TextElement3" ทางด้านซ้ายและในหน้าต่างคุณสมบัติให้ตั้งค่า "Fill Character" เป็น: 0 และ "Length" เป็น: 2
- เลือกส่วนประกอบ "ClockDemmux1" และในหน้าต่างคุณสมบัติตั้งค่า "Output Pins" เป็น: 5
- เลือกส่วนประกอบ "Counter1" และในหน้าต่างคุณสมบัติขยาย "สูงสุด" และตั้งค่า "ค่า" เป็น: 4
- เลือกส่วนประกอบ "Counter1" และในหน้าต่างคุณสมบัติขยาย "Min" และตั้งค่า "Value" เป็น: 0
- เลือกส่วนประกอบ "Counter2" และในหน้าต่างคุณสมบัติขยาย "สูงสุด" และตั้งค่า "ค่า" เป็น: 6
- เลือกส่วนประกอบ "Counter2" และในหน้าต่างคุณสมบัติขยาย "Min" และตั้งค่า "Value" เป็น: 0การสร้างเมนู:
- เลือกส่วนประกอบ "Array1" (Text Array) และดับเบิลคลิกที่ส่วนประกอบ - ในหน้าต่างองค์ประกอบ ลาก "Value" 4X ไปทางซ้าย - ทางด้านซ้าย เลือก "Item[1]" และในหน้าต่างคุณสมบัติให้ตั้งค่า "Value" ถึง: ตั้งค่าชั่วโมง-ทางด้านซ้าย เลือก "รายการ[2]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: ตั้งค่านาที-ทางด้านซ้าย เลือก "รายการ[3]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" ถึง: SET SECONDS-ทางด้านซ้าย เลือก "Item[4]" และในหน้าต่างคุณสมบัติให้ตั้งค่า "Value" เป็น: SET BRIGHTNESSปิดหน้าต่าง Elements การตั้งค่าสำหรับความสว่าง:
-
เลือกองค์ประกอบ "Array2" (Analog Array) และดับเบิลคลิกที่องค์ประกอบ - ในหน้าต่างองค์ประกอบ ลาก "ค่า" 6X ไปทางซ้าย - ทางด้านซ้าย เลือก "รายการ[0]" และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "ค่า" ถึง: 1
- ทางด้านซ้าย เลือก "รายการ[1]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.9
- ทางด้านซ้าย เลือก "รายการ[2]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.8 - ทางด้านซ้าย เลือก "รายการ[3]" และในหน้าต่างคุณสมบัติ ให้ตั้งค่า "ค่า" เป็น: 0.7-เปิด ด้านซ้าย เลือก "รายการ[4]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.6- ทางด้านซ้าย เลือก "รายการ[5]" และในหน้าต่างคุณสมบัติ ตั้งค่า "ค่า" เป็น: 0.55
ขั้นตอนที่ 6: ในส่วนประกอบ Visuino Connect
- เชื่อมต่อพิน "M5 Stack Stick C" A (M5) กับพิน "Button2" [ใน]
- เชื่อมต่อพิน "M5 Stack Stick C" [B] กับพิน "Button1" [ใน]
- เชื่อมต่อพิน "Button2" [ออก] กับพิน 'Repeat1" [ใน]
- เชื่อมต่อพิน "RepeatButton1" [ออก] กับพิน "ClockDemmux1" [ใน]
- เชื่อมต่อพิน "Button1" [ออก] กับพิน "Counter1" [ใน]
- เชื่อมต่อพิน "M5 Stack Stick C" > พิน "นาฬิกาปลุกตามเวลาจริง (RTC)" [ออก] กับพิน "DecodeDateTime1" [ใน]
- เชื่อมต่อพิน "DecodeDateDateTime1" [ชั่วโมง] กับ "FormattedText1">พิน "TextElement1" [ใน]
- เชื่อมต่อพิน "DecodeDateDateTime1" [นาที] กับ "FormattedText1">พิน "TextElement2" [ใน]
- เชื่อมต่อพิน "DecodeDateDateTime1" [วินาที] กับ "FormattedText1">พิน "TextElement3" [ใน]
- เชื่อมต่อพิน "FormattedText1" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน "Text Field1" [ใน]
- เชื่อมต่อพิน "Counter1" [ออก] กับพิน "ClockDemmux1" [เลือก] และพิน "Array1" [ดัชนี]
- เชื่อมต่อพิน "Counter2" [ออก] กับพิน "Array2" [ดัชนี]
- เชื่อมต่อพิน "Array1" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน "Text Field2" [ใน]
- เชื่อมต่อพิน "Array2" [ออก] กับบอร์ด "M5 Stack Stick C" > "แสดง ST7735" > พิน [ความสว่าง]
- เชื่อมต่อพิน "ClockDemmux1" [1] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "ตั้งชั่วโมง1" [นาฬิกา]
- เชื่อมต่อพิน "ClockDemmux1" [2] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "Set Minute1" [นาฬิกา]
- เชื่อมต่อพิน "ClockDemmux1" [3] กับบอร์ด "M5 Stack Stick C" > "นาฬิกาปลุกตามเวลาจริง (RTC)" > พิน "ตั้งค่า Second1" [นาฬิกา]
- เชื่อมต่อพิน "ClockDemmux1" [4] กับพิน "Counter2" [ใน]
ขั้นตอนที่ 7: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino
ใน Visuino ที่ด้านล่างให้คลิกแท็บ "บิลด์" ตรวจสอบให้แน่ใจว่าได้เลือกพอร์ตที่ถูกต้อง จากนั้นคลิกที่ปุ่ม "รวบรวม/สร้างและอัปโหลด"
ขั้นตอนที่ 8: เล่น
หากคุณจ่ายไฟให้กับโมดูล M5Sticks จอแสดงผลควรเริ่มแสดงเวลา คุณสามารถเปลี่ยนเวลาและความสว่างได้โดยใช้ปุ่ม "B" เพื่อแสดงเมนูและสลับไปมาระหว่าง (ตั้งชั่วโมง ตั้งนาที ตั้งวินาที ตั้งค่าความสว่าง) และใช้ปุ่ม "M5" เพื่อตั้งค่า
ยินดีด้วย! คุณทำโปรเจ็กต์ M5Sticks กับ Visuino เสร็จเรียบร้อยแล้ว สิ่งที่แนบมาด้วยคือโครงการ Visuino ที่ฉันสร้างขึ้นสำหรับคำแนะนำนี้ คุณสามารถดาวน์โหลดได้ที่นี่ ดาวน์โหลดและเปิดได้ใน Visuino:
แนะนำ:
DIY วิธีแสดงเวลาบน M5StickC ESP32 โดยใช้ Visuino - ง่ายต่อการทำ: 9 ขั้นตอน
DIY วิธีแสดงเวลาบน M5StickC ESP32 โดยใช้ Visuino - ง่ายต่อการทำ: ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีตั้งโปรแกรม ESP32 M5Stack StickC ด้วย Arduino IDE และ Visuino เพื่อแสดงเวลาบน LCD
เพลิดเพลินไปกับฤดูร้อนที่เย็นสบายด้วยพัดลม M5StickC ESP32 - ความเร็วที่ปรับได้: 8 ขั้นตอน
เพลิดเพลินไปกับฤดูร้อนที่เย็นสบายของคุณด้วยพัดลม M5StickC ESP32 - ความเร็วที่ปรับได้: ในโครงการนี้ เราจะเรียนรู้วิธีควบคุมความเร็วพัดลมโดยใช้บอร์ด M5StickC ESP32 และโมดูลพัดลม L9110
พัดลม DIY พร้อมปุ่มเปิด-ปิด - M5StickC ESP32: 8 ขั้นตอน
พัดลม DIY พร้อมปุ่มเปิด-ปิด - M5StickC ESP32: ในโครงการนี้ เราจะเรียนรู้วิธีใช้โมดูล FAN L9110 โดยใช้บอร์ด M5StickC ESP32
M5STACK วิธีแสดงอุณหภูมิ ความชื้น และแรงกดบน M5StickC ESP32 โดยใช้ Visuino - ทำได้ง่าย: 6 ขั้นตอน
M5STACK วิธีแสดงอุณหภูมิ ความชื้น และความดันบน M5StickC ESP32 โดยใช้ Visuino - ง่ายต่อการทำ: ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีตั้งโปรแกรม ESP32 M5Stack StickC ด้วย Arduino IDE และ Visuino เพื่อแสดงอุณหภูมิ ความชื้น และความดันโดยใช้เซ็นเซอร์ ENV (DHT12, BMP280, BMM150)
วิธีแสดงข้อความบน M5StickC ESP32 โดยใช้ Visuino: 6 ขั้นตอน
วิธีแสดงข้อความบน M5StickC ESP32 โดยใช้ Visuino: ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีตั้งโปรแกรม ESP32 M5Stack StickC ด้วย Arduino IDE และ Visuino เพื่อแสดงข้อความบน LCD