描述

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

。

第 1 步：您需要什么

M5StickC ESP32：你可以在這里買到

Visuino 程序：下載 Visuino

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

第 2 步：?jiǎn)?dòng) Visuino，然后選擇 M5 Stack Stick C 板類型

?

?

?

?

1 / 3

?

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

第 3 步：在 Visuino 中設(shè)置 StickC 板

?

?

?

?

1 / 7

?

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

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

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

關(guān)閉元素窗口

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

關(guān)閉元素窗口

第 4 步：在 Visuino 中添加組件

?

• 添加 2 個(gè)“去抖動(dòng)按鈕”組件
• 添加“自動(dòng)重復(fù)按鈕”組件
• 添加“文本數(shù)組”組件
• 添加“模擬陣列”組件
• 添加 2 個(gè)“計(jì)數(shù)器”組件
• 添加“時(shí)鐘解復(fù)用器（多輸出通道切換）”組件
• 添加“解碼（拆分）日期/時(shí)間”組件
• 添加“FormattedText1”組件

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

?

?

?

?

1 / 8

?

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

• 選擇“ FormattedText1 ”組件并在“屬性”窗口下將“文本”設(shè)置為：%0:%1:%2
• 雙擊“ FormattedText1 ”組件并在“元素”對(duì)話框中將 3x“文本元素”拖到左側(cè)
• 選擇左側(cè)的“ TextElement1 ”并在屬性窗口中將“填充字符”設(shè)置為：0，將“長(zhǎng)度”設(shè)置為：2
• 選擇左側(cè)的“ TextElement2 ”并在屬性窗口中將“填充字符”設(shè)置為：0，將“長(zhǎng)度”設(shè)置為：2
• 選擇左側(cè)的“ TextElement3 ”并在屬性窗口中將“填充字符”設(shè)置為：0，將“長(zhǎng)度”設(shè)置為：2
• 選擇“ ClockDemmux1 ”組件并在屬性窗口中將“Output Pins”設(shè)置為：5
• 選擇“ Counter1 ”組件并在屬性窗口中展開(kāi)“Max”并將“Value”設(shè)置為：4
• 選擇“ Counter1 ”組件并在屬性窗口中展開(kāi)“Min”并將“Value”設(shè)置為：0
• 選擇“ Counter2 ”組件并在屬性窗口中展開(kāi)“Max”并將“Value”設(shè)置為：6
• 選擇“ Array2 ”組件（Analog Array）并雙擊它。-在元素窗口中將6X“Value”拖到左側(cè)-在左側(cè)選擇“Item[0]”并在屬性窗口中設(shè)置“Value”至：1
• - 在左側(cè)選擇“Item[1]”并在屬性窗口中將“Value”設(shè)置為：0.9
• -在左側(cè)選擇“Item[2]”并在屬性窗口中將“Value”設(shè)置為：0.8 -在左側(cè)選擇“Item[3]”并在屬性窗口中將“Value”設(shè)置為：0.7-On左側(cè)選擇“Item[4]”并在屬性窗口中將“Value”設(shè)置為：0.6-左側(cè)選擇“Item[5]”并在屬性窗口中將“Value”設(shè)置為：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”>“實(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]
• 將“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”板>“實(shí)時(shí)鬧鐘（RTC）”>“設(shè)置小時(shí)1”引腳[時(shí)鐘]
• 將“ClockDemmux1”引腳 [2] 連接到“M5 Stack Stick C”板 >“實(shí)時(shí)鬧鐘（RTC）”>“設(shè)置 Minute1”引腳 [時(shí)鐘]
• 將“ClockDemmux1”引腳[3]連接到“M5 Stack Stick C”板>“實(shí)時(shí)鬧鐘（RTC）”>“設(shè)置 Second1”引腳 [時(shí)鐘]
• 將“ClockDemmux1”引腳 [4] 連接到“Counter2”引腳 [In]

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

?

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

第 8 步：播放

如果您為 M5Sticks 模塊供電，顯示屏應(yīng)開(kāi)始顯示時(shí)間。您可以使用按鈕“B”更改時(shí)間和亮度以顯示菜單并在（設(shè)置小時(shí)、設(shè)置分鐘、設(shè)置秒、設(shè)置亮度）之間切換，并使用按鈕“M5”進(jìn)行設(shè)置。

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