描述

在本教程中，我們將學習如何使用 Arduino IDE 和 Visuino 對 ESP32 M5Stack StickC 進行編程，以在 LCD 上顯示時間，并使用菜單和 StickC 按鈕設置時間??和亮度。

。

第 1 步：您需要什么

M5StickC ESP32：你可以在這里買到

Visuino 程序：下載 Visuino

注意：在此處查看本教程，了解如何安裝 StickC ESP32 板

第 2 步：啟動 Visuino，然后選擇 M5 Stack Stick C 板類型

?

?

?

?

1 / 3

?

啟動Visuino，如第一張圖所示點擊Visuino中Arduino組件（圖1）上的“工具”按鈕出現對話框時，選擇“M5 Stack Stick C”，如圖2所示

第 3 步：在 Visuino 中設置 StickC 板

?

?

?

?

1 / 7

?

• 點擊“ M5 Stack Stick C ”板選中它
• 在“屬性”窗口中選擇“模塊”并單擊“+”展開，
• 選擇“ Display ST7735 ”，點擊“+”展開，
• 將“方向”設置為“goRight”
• 將“背景顏色”設置為“ClBlack”
• 選擇“元素”并單擊帶有 3 個點的藍色按鈕...
• 元素對話框將顯示
• 在元素對話框中，將2X “文本字段”從右側拖到左側
• 單擊左側的“ Text Field1 ”將其選中，然后在“屬性窗口”中單擊“顏色”并將其設置為“aclOrange”并單擊“填充顏色”并將其設置為“aclBlack”（您可以根據需要使用顏色）-也在屬性窗口中設置X :10 和Y :20 這是您要在 LCD 上顯示時間的位置設置大小：3（這是時間的字體大小）
• 點擊左側的“ Text Field2 ”選中它，然后在“屬性窗口”點擊“顏色”設置為“aclAqua”點擊“填充顏色”設置為“aclBlack”

（如果需要，您可以使用顏色） - 將“初始值”設置為：設置 HOUR

-也在屬性窗口中設置X :10 和Y :2 這是您要在 LCD 上顯示菜單的位置 -設置大小：1（這是菜單的字體大小）

關閉元素窗口

• 點擊“ M5 Stack Stick C ”板選中它
• 在“屬性”窗口中選擇“模塊”并單擊“+”展開，
• 選擇“顯示實時鬧鐘(RTC) ”并點擊“+”展開它，
• 選擇“元素”并單擊帶有 3 個點的藍色按鈕...
• 在元素對話框中，將“設置小時”從右側拖到左側，并在屬性窗口中將“添加值”設置為：True，將“值”設置為：1
• 在元素對話框中，將“ Set Minute ”從右側拖到左側，然后在屬性窗口中將“ Add Value ”設置為：True 并將“Value”設置為：1
• 在元素對話框中，將“ Set Second ”從右側拖到左側，然后在屬性窗口中將“ Add Value ”設置為：True 并將“Value”設置為：1

關閉元素窗口

第 4 步：在 Visuino 中添加組件

?

• 添加 2 個“去抖動按鈕”組件
• 添加“自動重復按鈕”組件
• 添加“文本數組”組件
• 添加“模擬陣列”組件
• 添加 2 個“計數器”組件
• 添加“時鐘解復用器（多輸出通道切換）”組件
• 添加“解碼（拆分）日期/時間”組件
• 添加“FormattedText1”組件

第 5 步：在 Visuino 設置組件中

?

?

?

?

1 / 8

?

選擇“ Counter2 ”組件并在屬性窗口中展開“Min”并將“Value”設置為：0構建菜單：選擇“ Array1 ”組件（文本數組）并雙擊它。-在元素窗口中拖動 4X“Value”到左側-在左側選擇“Item[1]”并在屬性窗口中將“Value”設置為： SET HOURS-在左側選擇“Item[2]”并在屬性窗口中設置“Value”至：SET MINUTES-在左側選擇“Item[3]”并在屬性窗口中將“Value”設置為：SET SECONDS-在左側選擇“Item[4]”并在屬性窗口中設置“Value” to: SET BRIGHTNESSClose the Elements window.SETTING THE VALUES FOR BRIGHTNESS:

• 選擇“ FormattedText1 ”組件并在“屬性”窗口下將“文本”設置為：%0:%1:%2
• 雙擊“ FormattedText1 ”組件并在“元素”對話框中將 3x“文本元素”拖到左側
• 選擇左側的“ TextElement1 ”并在屬性窗口中將“填充字符”設置為：0，將“長度”設置為：2
• 選擇左側的“ TextElement2 ”并在屬性窗口中將“填充字符”設置為：0，將“長度”設置為：2
• 選擇左側的“ TextElement3 ”并在屬性窗口中將“填充字符”設置為：0，將“長度”設置為：2
• 選擇“ ClockDemmux1 ”組件并在屬性窗口中將“Output Pins”設置為：5
• 選擇“ Counter1 ”組件并在屬性窗口中展開“Max”并將“Value”設置為：4
• 選擇“ Counter1 ”組件并在屬性窗口中展開“Min”并將“Value”設置為：0
• 選擇“ Counter2 ”組件并在屬性窗口中展開“Max”并將“Value”設置為：6
• 選擇“ Array2 ”組件（Analog Array）并雙擊它。-在元素窗口中將6X“Value”拖到左側-在左側選擇“Item[0]”并在屬性窗口中設置“Value”至：1
• - 在左側選擇“Item[1]”并在屬性窗口中將“Value”設置為：0.9
• -在左側選擇“Item[2]”并在屬性窗口中將“Value”設置為：0.8 -在左側選擇“Item[3]”并在屬性窗口中將“Value”設置為：0.7-On左側選擇“Item[4]”并在屬性窗口中將“Value”設置為：0.6-左側選擇“Item[5]”并在屬性窗口中將“Value”設置為：0.55

第 6 步：在 Visuino Connect 組件中

?

?

?

?

1 / 4

?

• 將“M5 Stack Stick C”針 A(M5) 連接到“Button2”針 [In]
• 將“M5 Stack Stick C”引腳 [B] 連接到“Button1”引腳 [In]
• 將“Bu??tton2”引腳 [Out] 連接到“RepeatButton1”引腳 [In]
• 將“RepeatButton1”引腳 [Out] 連接到“ClockDemmux1”引腳 [In]
• 將“Bu??tton1”引腳 [Out] 連接到“Counter1”引腳 [In]
• 將“M5 Stack Stick C”>“實時鬧鐘（RTC）”引腳 [Out] 連接到“DecodeDateTime1”引腳 [In]
• 將“DecodeDateTime1”引腳[Hour] 連接到“FormattedText1”>“TextElement1”引腳[In]
• 將“DecodeDateTime1”引腳[Minute] 連接到“FormattedText1”>“TextElement2”引腳[In]
• 將“DecodeDateTime1”引腳[Second] 連接到“FormattedText1”>“TextElement3”引腳[In]
• 將“FormattedText1”引腳[Out]連接到“M5 Stack Stick C”板>“Display ST7735”>“Text Field1”引腳[In]
• 將“Counter1”引腳[Out]連接到“ClockDemmux1”引腳[Select]和“Array1”引腳[Index]
• 將“Counter2”引腳[Out]連接到“Array2”引腳[Index]
• 將“Array1”引腳 [Out] 連接到“M5 Stack Stick C”板 >“Display ST7735”>“Text Field2”引腳 [In]
• 將“Array2”引腳[Out]連接到“M5 Stack Stick C”板>“Display ST7735”>引腳[Brightness]
• 將“ClockDemmux1”引腳[1]連接到“M5 Stack Stick C”板>“實時鬧鐘（RTC）”>“設置小時1”引腳[時鐘]
• 將“ClockDemmux1”引腳 [2] 連接到“M5 Stack Stick C”板 >“實時鬧鐘（RTC）”>“設置 Minute1”引腳 [時鐘]
• 將“ClockDemmux1”引腳[3]連接到“M5 Stack Stick C”板>“實時鬧鐘（RTC）”>“設置 Second1”引腳 [時鐘]
• 將“ClockDemmux1”引腳 [4] 連接到“Counter2”引腳 [In]

第 7 步：生成、編譯和上傳 Arduino 代碼

?

• 在 Visuino 中，在底部單擊“構建”選項卡，確保選擇了正確的端口，然后單擊“編譯/構建和上傳”按鈕。

第 8 步：播放

如果您為 M5Sticks 模塊供電，顯示屏應開始顯示時間。您可以使用按鈕“B”更改時間和亮度以顯示菜單并在（設置小時、設置分鐘、設置秒、設置亮度）之間切換，并使用按鈕“M5”進行設置。

恭喜！您已使用 Visuino 完成了 M5Sticks 項目。還附上了我為本教程創建的 Visuino 項目，您可以在此處下載。您可以在 Visuino 中下載并打開它：https ://www.visuino.com