描述

在本教程中，我們將學習如何使用 TTGO ESP32 和 Visuino 從互聯網上獲取基于位置的天氣數據。

第 1 步：您需要什么

• TTGO ESP32
• 無線網絡連接
• openweathermap.org上的免費 API 帳戶（也在下一步中解釋）
• Visuino 程序：下載 Visuino

第 2 步：OpeanWeatherMap API

?

?

并創建一個帳戶，然后導航到 API 頁面以復制 API 密鑰

您可以在此上找到有關 API 的更多文檔

第 3 步：啟動 Visuino，并選擇 Arduino TTGO T-Display ESP32 Board Type

?

?

?

?

?

1 / 2

?

Visuino：也需要安裝。下載免費版本或注冊免費試用。

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

第 4 步：在 Visuino 中設置 WiFi

?

?

?

?

?

1 / 6

?

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

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

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

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

第 5 步：在 Visuino 設置顯示中

?

?

?

?

?

1 / 13

?

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

將方向設置為：goRight

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

單擊元素3 點

• 在Elements 窗口中向左拖動Draw Bitmap在屬性窗口中：
• 在位圖編輯器中單擊位圖 3 個點 加載天氣位圖（圖 6）并關閉位圖編輯器

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

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

關閉元素窗口

第 6 步：在 Visuino 添加組件

?

?

?

?

?

1 / 11

?

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

第 7 步：在 Visuino 中解析 JSON

?

?

?

?

?

1 / 3

?

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

{"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，“風”：{“速度”：1.79，“度”：303，“陣風”：7.15}，“云”：{“所有”：0}， "dt":1624722776,"sys":{"type":2,"id":2011538,"country":"DE","sunrise":1624675484,"sunset":1624736011},"timezone":7200, "id":2950159,"name":"柏林",“鱈魚”：200}

關閉“ JSON 對象”窗口

“ SplitJSON1 ”組件現在將創建新引腳

第 8 步：在 Visuino 中連接組件

?

?

?

?

?

1 / 3

?

• 將“ ClockGenerator1 ”引腳輸出連接到“ HTTPClient1 ”引腳時鐘和“Delay1”引腳啟動
• 將“ Start1 ”引腳 [Out] 連接到“ HTTPClient1 ”引腳時鐘和“Delay1”引腳 Start
• 將“ HTTPClient1 ”引腳內容連接到“ CharToText1 ”引腳輸入
• 將“ HTTPClient1 ”引腳連接到TTGO T-Display ESP32 > WiFi>TCP Secure Client1 pin In
• 將“ Delay1 ”引腳輸出連接到“ CharToText1 ”引腳時鐘和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 中，在底部單擊“構建”選項卡，確保選擇了正確的端口，然后單擊“編譯/構建和上傳”按鈕。

第 10 步：播放

?

?

如果您為 TTGO ESP32 模塊供電，它將連接到網絡并顯示當前天氣數據。

恭喜！您已經使用 Visuino 完成了您的項目。還附上了我為本教程創建的 Visuino 項目，

注意：在 Visuino 中打開文件項目時，將 WiFi 設置（接入點和密碼）更改為您的設置并在 URL 末尾添加 API KEY