使用Visuino DIY如何在M5StickC ESP32上顯示時(shí)間

描述

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

第 1 步：您需要什么

• M5StickC ESP32：你可以在這里買(mǎi)到
• Visuino 程序：下載 Visuino

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

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

?

?

?

?

1 / 2

?

啟動(dòng)Visuino，如第一張圖所示點(diǎn)擊Arduino組件上的“工具”按鈕（圖1）

在 Visuino 出現(xiàn)對(duì)話(huà)框時(shí)，選擇“M5 Stack Stick C”，如圖 2 所示

第 3 步：在 Visuino 中添加和設(shè)置組件

?

?

?

?

1 / 4

?

• 單擊“M5 Stack Stick C”板將其選中
• 在“Properties”窗口中選擇“Modules”并點(diǎn)擊“+”展開(kāi)，選擇“Display ST7735”并點(diǎn)擊“+”展開(kāi)
• 將方向設(shè)置為“goRight” < 這表示 LCD 上的時(shí)間方向
• 選擇“元素”并單擊帶有 3 個(gè)點(diǎn)的藍(lán)色按鈕...
• 元素對(duì)話(huà)框?qū)@示
• 在元素對(duì)話(huà)框中，將“文本字段”從右側(cè)拖到左側(cè)

單擊左側(cè)的“Text Field1”將其選中，然后在“屬性窗口”中單擊顏色并將其設(shè)置為“aclOrange”

-同樣在屬性窗口中設(shè)置 X:10 和 Y:20，這是您要在 LCD 上顯示時(shí)間的位置

-set size:3 這是當(dāng)時(shí)的字體大小

-您可以根據(jù)需要設(shè)置文本大小和顏色

關(guān)閉元素窗口

可選：

單擊“M5 Stack Stick C”板將其選中

在“屬性”窗口中選擇“模塊”并單擊“+”展開(kāi)，選擇“顯示器 ST7735”并單擊“+”展開(kāi)它，您將看到“背景顏色”這是顯示器的默認(rèn)顏色，將其更改為您喜歡的顏色，您也可以設(shè)置顯示亮度，默認(rèn)為 1（最大）您可以將其設(shè)置為 0.5 或其他值以使其更暗

6.添加“解碼（分割）日期/時(shí)間”組件 7.添加“格式化文本”組件

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

?

?

?

?

1 / 2

?

• 選擇“FormattedTxt1”組件并在“屬性”窗口下將“文本”設(shè)置為：%0:%1:%2
• 雙擊“FormattedText1”組件并在“元素”對(duì)話(huà)框中將 3x“文本元素”拖到左側(cè)

第 5 步：在 Visuino Connect 組件中

?

• 將“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]

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

?

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

第 7 步：播放

如果您為 M5Sticks 模塊供電，顯示屏應(yīng)開(kāi)始顯示時(shí)間。

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

您可以在 Visuino 中下載并打開(kāi)它

第8步：額外：簡(jiǎn)單的技巧

您可以使用在 Arduino 中編譯代碼時(shí)計(jì)算機(jī)上的當(dāng)前時(shí)間。

• 為此，只需放下“編譯日期/時(shí)間”組件并將其連接到“M5 Stack Stick C”>“實(shí)時(shí)鬧鐘（RTC）”引腳 [設(shè)置]

您可以在此處下載使用此技巧的項(xiàng)目文件。

第 9 步：在下一個(gè)教程中。

在下一個(gè)教程中，我將向您展示如何制作一款外觀酷炫的手表，您可以在其中使用 StickC 按鈕設(shè)置時(shí)間??！請(qǐng)繼續(xù)關(guān)注并在此處查看我的其他教程。