描述

在本教程中，我們將學(xué)習(xí)如何使用 Arduino IDE 和 Visuino 對 ESP32 M5Stack StickC 進(jìn)行編程，以在 LCD 上顯示時(shí)間，并使用StickC按鈕設(shè)置時(shí)間??。

第 1 步：您需要什么

Visuino 程序：下載 Visuino

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

第 2 步：啟動(dòng) Visuino，然后選擇 M5 Stack Stick C 板類型

?

?

?

?

1 / 3

?

啟動(dòng)Visuino，如第一張圖所示點(diǎn)擊Visuino中Arduino組件（圖1）上的“工具”按鈕出現(xiàn)對話框時(shí)，選擇“M5 Stack Stick C”，如圖2所示

第 3 步：在 Visuino 中添加組件

?

?

?

?

1 / 5

?

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

第 4 步：在 Visuino 設(shè)置組件中

?

?

?

?

1 / 5

?

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

解釋：

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

第 5 步：在 Visuino Connect 組件中

?

?

?

?

1 / 2

?

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

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

?

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

第 7 步：播放

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

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

第 8 步：在下一個(gè)教程中..

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