描述

在本教程中，我們將學(xué)習(xí)如何使用 TTGO ESP32 和 Visuino 從互聯(lián)網(wǎng)上獲取基于位置的天氣數(shù)據(jù)。

第 1 步：您需要什么

• TTGO ESP32
• 無線網(wǎng)絡(luò)連接
• openweathermap.org上的免費(fèi) API 帳戶（也在下一步中解釋）
• Visuino 程序：下載 Visuino

第 2 步：OpeanWeatherMap API

?

?

并創(chuàng)建一個(gè)帳戶，然后導(dǎo)航到 API 頁面以復(fù)制 API 密鑰

您可以在此上找到有關(guān) API 的更多文檔

第 3 步：啟動(dòng) Visuino，并選擇 Arduino TTGO T-Display ESP32 Board Type

?

?

?

?

?

1 / 2

?

Visuino：也需要安裝。下載免費(fèi)版本或注冊(cè)免費(fèi)試用。

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

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

?

?

?

?

?

1 / 6

?

選擇 TTGO T-Display ESP32 board 并在屬性窗口中展開“Modules>WiFi>Connect To Access Points

• 單擊連接到接入點(diǎn) 3 點(diǎn)
• 在 AccessPoints 窗口中，將“WiFi Access Point”拖到左側(cè)
• 在屬性窗口中設(shè)置 SSID（您的 WiFi 熱點(diǎn)或路由器的名稱）
• 在屬性窗口中設(shè)置密碼（您的 WiFi 熱點(diǎn)或路由器的密碼）
• 關(guān)閉接入點(diǎn)窗口

選擇TTGO T-Display ESP32 board 并在屬性窗口中展開“ Modules > WiFi > Sockets

• 點(diǎn)擊 Sockets 3 Dots
• 在“套接字窗口”中，將TCP/IP 安全客戶端 (SSL)拖到左側(cè)
• 在屬性窗口中將主機(jī)設(shè)置為：api.openweathermap.org/
• 關(guān)閉“套接字窗口”

第 5 步：在 Visuino 設(shè)置顯示中

?

?

?

?

?

1 / 13

?

選擇TTGO T-Display ESP32板并在屬性窗口中展開“模塊>顯示>方向

將方向設(shè)置為：goRight

選擇TTGO T-Display ESP32 board 并在屬性窗口中展開“ Modules > Display > Elements

單擊元素3 點(diǎn)

• 在Elements 窗口中向左拖動(dòng)Draw Bitmap在屬性窗口中：
• 在位圖編輯器中單擊位圖 3 個(gè)點(diǎn) 加載天氣位圖（圖 6）并關(guān)閉位圖編輯器

您可以在https://iconarchive.com/search?q=weather找到其他位圖

• 在“元素窗口”中將“繪制文本”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 3，將“x”設(shè)置為 80，然后在文本中放置您的位置，在我們的例子中是“柏林”
• 在“元素窗口”中將“文本字段”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 3，將“x”設(shè)置為 80，將“y”設(shè)置為 30
• 在“元素窗口”中將“文本字段”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 2，將“x”設(shè)置為 90，將“y”設(shè)置為 60，將顏色設(shè)置為“aclYellow”
• 在“元素窗口”中將“文本字段”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 2，將“x”設(shè)置為 60，將“y”設(shè)置為 80，將顏色設(shè)置為“aclYellowGreen”
• 在“元素窗口”中將“繪制文本”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 2，將“y”設(shè)置為 80，將文本設(shè)置為“WIND”
• 在“元素窗口”中將“繪制文本”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 2，將“y”設(shè)置為 100，將文本設(shè)置為“濕度”
• 在“元素窗口”中將“文本字段”拖到左側(cè)，在屬性窗口中將大小設(shè)置為 2，將“x”設(shè)置為 110，將“y”設(shè)置為 100，將顏色設(shè)置為“aclTurquoise”

關(guān)閉元素窗口

第 6 步：在 Visuino 添加組件

?

?

?

?

?

1 / 11

?

• 添加“ HTTP Client ”組件
• 選擇“ HTTPClient1 ”并在屬性窗口中將 Host 設(shè)置為 api.openweathermap.org
• 單擊請(qǐng)求3 點(diǎn)
• 在“請(qǐng)求窗口”中將“GET”拖到左側(cè)
• 在屬性窗口中，將URL設(shè)置為：/data/2.5/weather ?q=Berlin&units=metric&APPID=123456重要提示?。涸?URL 中將末尾的 123456 替換為您的 API 密鑰也將“Berlin”替換為您所在城市的名稱
• 關(guān)閉請(qǐng)求窗口
• 添加“ Char To Text ”組件
• 選擇“ CharToText1 ”并在屬性窗口中將 Max Length 設(shè)置為 2000
• 添加“開始”組件
• 添加“時(shí)鐘發(fā)生器”組件
• 選擇“ ClockGenerator1 ”，在屬性窗口中設(shè)置頻率為0.0016，這是10分鐘左右，所以數(shù)據(jù)每10分鐘刷新一次，你可以根據(jù)需要改變頻率
• 添加“延遲”組件并在屬性窗口中將“間隔（uS）”設(shè)置為 2000000

第 7 步：在 Visuino 中解析 JSON

?

?

?

?

?

1 / 3

?

用鼠標(biāo)右鍵單擊“SplitJSON1”并在菜單中單擊“解析 JSON 對(duì)象..”在“JSON 對(duì)象”窗口中粘貼此示例代碼（將YOURAPIKEY 替換為您在帳戶中獲得的 API 密鑰或復(fù)制粘貼以下內(nèi)容：

{"coord":{"lon":13.4105,"lat":52.5244},"weather":[{"id":800,"main":"Clear","description":"晴空","icon ":"01d"}],"base":"stations","main":{"temp":25.91,"feels_like":25.5,"temp_min":24.99,"temp_max":27.16,"pressure":1010 “濕度”：36}，“能見度”：10000，“風(fēng)”：{“速度”：1.79，“度”：303，“陣風(fēng)”：7.15}，“云”：{“所有”：0}， "dt":1624722776,"sys":{"type":2,"id":2011538,"country":"DE","sunrise":1624675484,"sunset":1624736011},"timezone":7200, "id":2950159,"name":"柏林",“鱈魚”：200}

關(guān)閉“ JSON 對(duì)象”窗口

“ SplitJSON1 ”組件現(xiàn)在將創(chuàng)建新引腳

第 8 步：在 Visuino 中連接組件

?

?

?

?

?

1 / 3

?

• 將“ ClockGenerator1 ”引腳輸出連接到“ HTTPClient1 ”引腳時(shí)鐘和“Delay1”引腳啟動(dòng)
• 將“ Start1 ”引腳 [Out] 連接到“ HTTPClient1 ”引腳時(shí)鐘和“Delay1”引腳 Start
• 將“ HTTPClient1 ”引腳內(nèi)容連接到“ CharToText1 ”引腳輸入
• 將“ HTTPClient1 ”引腳連接到TTGO T-Display ESP32 > WiFi>TCP Secure Client1 pin In
• 將“ Delay1 ”引腳輸出連接到“ CharToText1 ”引腳時(shí)鐘和TTGO T-Display ESP32 > WiFi>TCP Secure Client1 引腳斷開連接
• 將“ CharToText1 ”引腳輸出連接到“ SplitJSON1 ”引腳輸入
• 將“ SplitJSON1 > temp連接到TTGO T-Display ESP32 >Text Field1 pin In
• 將“ SplitJSON1 >描述連接到TTGO T-Display ESP32 >Text Field2 pin In
• 將“ SplitJSON1 > speed連接到TTGO T-Display ESP32 >Text Field3 pin In
• 將“ SplitJSON1 >濕度連接到TTGO T-Display ESP32 >Text Field4 pin In

注意：您也可以使用“SplitJSON1”組件中的其他引腳

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

?

?

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

第 10 步：播放

?

?

如果您為 TTGO ESP32 模塊供電，它將連接到網(wǎng)絡(luò)并顯示當(dāng)前天氣數(shù)據(jù)。

恭喜！您已經(jīng)使用 Visuino 完成了您的項(xiàng)目。還附上了我為本教程創(chuàng)建的 Visuino 項(xiàng)目，

注意：在 Visuino 中打開文件項(xiàng)目時(shí)，將 WiFi 設(shè)置（接入點(diǎn)和密碼）更改為您的設(shè)置并在 URL 末尾添加 API KEY