M5StickC Đồng hồ trông tuyệt vời với menu và điều khiển độ sáng: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Trong hướng dẫn này, chúng ta sẽ học cách lập trình ESP32 M5Stack StickC với Arduino IDE và Visuino để hiển thị thời gian trên màn hình LCD và cũng có thể đặt thời gian và độ sáng bằng menu và các nút StickC.

Xem video trình diễn.

Bước 1: Những gì bạn sẽ cần

M5StickC ESP32: bạn có thể tải nó ở đây

Chương trình Visuino: Tải xuống Visuino

Lưu ý: Kiểm tra hướng dẫn này ở đây về cách cài đặt bảng StickC ESP32

Bước 2: Khởi động Visuino và chọn loại bảng M5 Stack Stick C

Khởi động Visuino như trong hình đầu tiên Nhấp vào nút "Công cụ" trên thành phần Arduino (Hình 1) trong Visuino Khi hộp thoại xuất hiện, chọn "M5 Stack Stick C" như hiển thị trên Hình 2

Bước 3: Trong Visuino Đặt bảng StickC

1. Nhấp vào Bảng "M5 Stack Stick C" để chọn nó
2. Trong cửa sổ "Thuộc tính", chọn "Mô-đun" và nhấp vào "+" để Mở rộng,
3. Chọn "Display ST7735" và nhấp vào "+" để mở rộng nó,
4. Đặt "Định hướng" thành "goRight"
5. Đặt "Màu nền" thành "ClBlack"
6. Chọn "Phần tử" và nhấp vào nút màu xanh lam có 3 dấu chấm…
7. Hộp thoại Elements sẽ hiển thị
8. Trong Hộp thoại Thành phần, kéo 2X "Trường Văn bản" từ bên phải sang bên trái
9. Nhấp vào "Trường Văn bản1" ở phía bên trái để chọn nó, sau đó trong "Cửa sổ thuộc tính" nhấp vào "Màu" và đặt nó thành "aclOrange" và nhấp vào "Tô màu" và đặt nó thành "aclBlack" (Bạn có thể chơi với các màu nếu bạn muốn) - ngoài ra trong các cửa sổ thuộc tính được đặt X: 10 và Y: 20, đây là nơi bạn muốn hiển thị thời gian trên kích thước cài đặt LCD: 3 (đây là kích thước phông chữ của thời gian)
10. Nhấp vào "Text Field2" ở phía bên trái để chọn nó, sau đó trong "Properties window", nhấp vào "Color" và đặt nó thành "aclAqua" và nhấp vào "Fill Color" và đặt nó thành "aclBlack"

(Bạn có thể chơi với các màu nếu bạn muốn) -đặt "Giá trị ban đầu" thành: Đặt GIỜ

-cũng trong các cửa sổ thuộc tính, đặt X: 10 và Y: 2, đây là nơi bạn muốn hiển thị menu trên màn hình LCD - kích thước thiết lập: 1 (đây là kích thước phông chữ của menu)

Đóng cửa sổ phần tử

1. Nhấp vào Bảng "M5 Stack Stick C" để chọn nó
2. Trong cửa sổ "Thuộc tính", chọn "Mô-đun" và nhấp vào "+" để Mở rộng,
3. Chọn "Hiển thị Đồng hồ Báo thức Thời gian Thực (RTC)" và nhấp vào "+" để mở rộng,
4. Chọn "Phần tử" và nhấp vào nút màu xanh lam có 3 dấu chấm…
5. Trong Hộp thoại Thành phần, kéo "Đặt Giờ" từ bên phải sang bên trái và trong cửa sổ thuộc tính, đặt "Thêm Giá trị" thành: Đúng và "Giá trị" thành: 1
6. Trong Hộp thoại Thành phần, kéo "Đặt phút" từ bên phải sang bên trái và trong cửa sổ thuộc tính, đặt "Thêm giá trị" thành: Đúng và "Giá trị" thành: 1
7. Trong Hộp thoại Thành phần, kéo "Đặt thứ hai" từ bên phải sang bên trái và trong cửa sổ thuộc tính, đặt "Thêm giá trị" thành: Đúng và "Giá trị" thành: 1

Đóng cửa sổ phần tử

Bước 4: Trong Visuino Thêm thành phần

1. Thêm thành phần 2x "Nút Debounce"
2. Thêm thành phần "Nút lặp lại tự động"
3. Thêm thành phần "Mảng văn bản"
4. Thêm thành phần "Mảng tương tự"
5. Thêm thành phần "Bộ đếm" 2x
6. Thêm thành phần "Clock Demux (Công tắc nhiều kênh đầu ra)"
7. Thêm thành phần "Giải mã (Phân tách) Ngày / Giờ"
8. Thêm thành phần "FormattedText1"

Bước 5: Trong Visuino Set Components

1. Chọn thành phần "FormattedText1" và trong cửa sổ "Thuộc tính", đặt "Văn bản" thành:% 0:% 1:% 2
2. Nhấp đúp vào thành phần "FormattedText1" và trong hộp thoại Elements, kéo 3 lần "Phần tử văn bản" sang trái
3. Chọn "TextElement1" ở phía bên trái và trong cửa sổ thuộc tính, đặt "Fill Character" thành: 0 và "Length" thành: 2
4. Chọn "TextElement2" ở phía bên trái và trong cửa sổ thuộc tính, đặt "Fill Character" thành: 0 và "Length" thành: 2
5. Chọn "TextElement3" ở phía bên trái và trong cửa sổ thuộc tính, đặt "Fill Character" thành: 0 và "Length" thành: 2
6. Chọn thành phần "ClockDemmux1" và trong cửa sổ thuộc tính, đặt "Ghim đầu ra" thành: 5
7. Chọn thành phần "Counter1" và trong cửa sổ thuộc tính, hãy mở rộng "Max" và đặt "Value" thành: 4
8. Chọn thành phần "Counter1" và trong cửa sổ thuộc tính, hãy mở rộng "Min" và đặt "Value" thành: 0
9. Chọn thành phần "Counter2" và trong cửa sổ thuộc tính, hãy mở rộng "Max" và đặt "Value" thành: 6
10. Chọn thành phần "Counter2" và trong cửa sổ thuộc tính, mở rộng "Min" và đặt "Value" thành: 0 XÂY DỰNG MENU:
11. Chọn thành phần "Array1" (Mảng văn bản) và nhấp đúp vào nó.-Trong cửa sổ phần tử kéo 4X "Giá trị" sang phía bên trái-Ở phía bên trái Chọn "Mục [1]" và trong cửa sổ thuộc tính đặt "Giá trị" sang: ĐẶT GIỜ-Ở phía bên trái Chọn "Mục [2]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: ĐẶT PHÚT-Ở phía bên trái Chọn "Mục [3]" và trong cửa sổ thuộc tính, đặt "Giá trị" to: SET SECONDS-Ở phía bên trái Chọn "Item [4]" và trong cửa sổ thuộc tính, đặt "Value" thành: SET BRIGHTNESĐóng cửa sổ Elements. ĐẶT GIÁ TRỊ CHO BRIGHTNESS:

12. Chọn thành phần "Array2" (Mảng tương tự) và nhấp đúp vào nó.-Trong cửa sổ phần tử, kéo 6X "Giá trị" sang phía bên trái-Ở phía bên trái Chọn "Mục [0]" và trong cửa sổ thuộc tính đặt "Giá trị" đến 1

    -Ở phía bên trái Chọn "Mục [1]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: 0.9

    -Ở phía bên trái Chọn "Mục [2]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: 0.8-Ở phía bên trái Chọn "Mục [3]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: 0,7-Bật phía bên trái Chọn "Mục [4]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: 0,6-Ở phía bên trái Chọn "Mục [5]" và trong cửa sổ thuộc tính đặt "Giá trị" thành: 0,55

Bước 6: Trong các thành phần kết nối Visuino

1. Kết nối "M5 Stack Stick C" chân A (M5) với chân "Button2" [In]
2. Kết nối chân "M5 Stack Stick C" [B] với chân "Button1" [In]
3. Kết nối pin "Button2" [Out] với "RepeatButton1" pin [In]
4. Kết nối pin "RepeatButton1" [Out] với "ClockDemmux1" pin [In]
5. Kết nối chân "Button1" [Ra] với chân "Bộ đếm1" [Vào]
6. Kết nối chân "M5 Stack Stick C"> "Đồng hồ báo thức thời gian thực (RTC)" [Ra] với chân "DecodeDateTime1" [Trong]
7. Kết nối "DecodeDateTime1" pin [Giờ] với "FormattedText1"> "TextElement1" pin [In]
8. Kết nối "DecodeDateTime1" pin [Minute] với "FormattedText1"> "TextElement2" pin [In]
9. Kết nối "DecodeDateTime1" pin [Second] với "FormattedText1"> "TextElement3" pin [In]
10. Kết nối chân "FormattedText1" [Out] với bảng "M5 Stack Stick C"> "Display ST7735"> chân "Text Field1" [In]
11. Kết nối chân "Bộ đếm1" [Ra] với chân "ClockDemmux1" [Chọn] và với chân "Mảng1" [Chỉ mục]
12. Kết nối chân "Counter2" [Out] với "Array2" pin [Index]
13. Kết nối chân "Array1" [Out] với bảng "M5 Stack Stick C"> chân "Display ST7735"> "Text Field2" [In]
14. Kết nối chân "Array2" [Out] với bảng "M5 Stack Stick C"> "Display ST7735"> pin [Độ sáng]
15. Kết nối chân "ClockDemmux1" [1] với bảng "M5 Stack Stick C"> "Đồng hồ báo thức thời gian thực (RTC)"> chân "Đặt giờ 1" [Đồng hồ]
16. Kết nối chân "ClockDemmux1" [2] với bảng "M5 Stack Stick C"> "Đồng hồ báo thức thời gian thực (RTC)"> chân "Đặt phút1" [Đồng hồ]
17. Kết nối chân "ClockDemmux1" [3] với bảng "M5 Stack Stick C"> "Đồng hồ báo thức thời gian thực (RTC)"> chân "Đặt giây1" [Đồng hồ]
18. Kết nối chân "ClockDemmux1" [4] với chân "Counter2" [In]

Bước 7: Tạo, biên dịch và tải lên mã Arduino

Trong Visuino, ở dưới cùng nhấp vào Tab "Xây dựng", đảm bảo rằng cổng chính xác được chọn, sau đó nhấp vào nút "Biên dịch / Xây dựng và Tải lên".

Bước 8: Chơi

Nếu bạn cấp nguồn cho mô-đun M5Sticks, màn hình sẽ bắt đầu hiển thị thời gian. Bạn có thể thay đổi thời gian và độ sáng bằng cách sử dụng các nút "B" để hiển thị Menu và chuyển đổi giữa (Đặt Giờ, Đặt Phút, Đặt Giây, Đặt Độ sáng) và sử dụng nút "M5" để cài đặt.

Xin chúc mừng! Bạn đã hoàn thành dự án M5Sticks của mình với Visuino. Ngoài ra đính kèm là dự án Visuino, mà tôi đã tạo cho Có thể hướng dẫn này, bạn có thể tải xuống tại đây. Bạn có thể tải xuống và mở nó trong Visuino: