描述

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

第 1 步：您需要什么

Visuino 程序：下載 Visuino

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

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

?

?

?

?

1 / 3

?

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

第 3 步：在 Visuino 中添加組件

?

?

?

?

1 / 5

?

• 單擊“M5 Stack Stick C”板將其選中
• 在“屬性”窗口中選擇“模塊”并單擊“+”展開，
• 選擇“Display ST7735”，點擊“+”展開，
• 將“方向”設置為“goRight”
• 將“背景顏色”設置為“ClBlack”
• 選擇“元素”并單擊帶有 3 個點的藍色按鈕...
• 元素對話框將顯示
• 在元素對話框中，將“文本字段”從右側拖到左側
• 單擊左側的“Text Field1”將其選中，然后在“屬性窗口”中單擊“顏色”并將其設置為“aclWhite”并單擊“填充顏色”并將其設置為“aclBlack”（您如果你愿意，可以玩顏色）
• -也在屬性窗口中設置 X:10 和 Y:20，這是您要在 LCD 上顯示時間的位置 -設置大小：3（這是時間的字體大小）關閉元素窗口
• 添加“解碼（拆分）日期/時間”組件
• 添加“格式化文本”組件

第 4 步：在 Visuino 設置組件中

?

?

?

?

1 / 5

?

• 選擇“FormattedTxt1”組件并在“屬性”窗口下將“文本”設置為：%0:%1:%2
• 雙擊“FormattedText1”組件并在“元素”對話框中將 3x“文本元素”拖到左側
• 選擇“M5 Stack Stick C”板并在“屬性”窗口中選擇“模塊”>“實時鬧鐘（RTC）”>“元素”
• 單擊帶有 3 個點的藍色按鈕，然后在“元素”對話框中將“設置小時”、“設置分鐘”和“設置秒”拖到左側
• 選擇左側的“Set Hour1”元素并在“Properties”窗口下將“Add Value”設置為“True”，將“Value”設置為“1”
• 選擇左側的“Set Minute1”元素并在“Properties”窗口下將“Add Value”設置為“True”，將“Value”設置為“1”
• 選擇左側的“Set Second1”元素并在“Properties”窗口下將“Add Value”設置為“True”，將“Value”設置為“1”

解釋：

“值”表示每次單擊按鈕時我們希望將多少添加到現有時間（小時、分鐘或秒）“添加值”表示我們希望將值添加到現有時間

第 5 步：在 Visuino Connect 組件中

?

?

?

?

1 / 2

?

• 將“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]
• 連接“M5 Stack Stick C”>按鈕“A（M5）”到“M5 Stack Stick C”>實時鬧鐘（RTC）>“設置小時1”引腳[時鐘]
• 連接“M5 Stack Stick C”>按鈕“B”到“M5 Stack Stick C”>實時鬧鐘（RTC）>“設置分鐘1”引腳[時鐘]

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

?

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

第 7 步：播放

如果您為 M5Sticks 模塊供電，顯示屏應開始顯示時間。您可以使用按鈕“M5”（小時）和“B”（分鐘）更改時間

恭喜！您已使用 Visuino 完成了 M5Sticks 項目。還附上了我為本教程創建的 Visuino 項目，您可以在此處下載。

第 8 步：在下一個教程中..

在下一個教程中，我將向您展示如何制作一款外觀酷炫的手表，您可以在其中使用 StickC 按鈕設置時間??（小時、分鐘和秒）并創建一個簡單的菜單！敬請期待，并在此處查看我的其他教程。