描述

在本教程中，我們將學習如何使用 TTGO ESP32 和 Visuino 從互聯網獲取股票數據。

觀看視頻！

第 1 步：您需要什么

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

第 2 步：Alphavantage 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 步：為您的 ESP 獲取服務器 SSL 證書

?

?

?

?

1 / 3

?

• 轉到粘貼到編輯框中，然后單擊“獲取證書”按鈕（圖 1）
• 點擊“Cloudflare Inc ECC CA-3”圖片（圖片2）
• （圖3）在下表“cert:”中選擇證書字段并復制到剪貼板（下一步需要）

第 5 步：在 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)拖到左側
• 在屬性窗口中將主機設置為：alphavantage.co
• 選擇“ CACert ”并單擊 3 個點按鈕，然后在“ CACert 窗口”中粘貼您在上一步中獲得的證書
• 關閉“套接字窗口”

第 6 步：在 Visuino 設置顯示中

?

?

?

?

1 / 18

?

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

將方向設置為：goRight

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

單擊元素3 點

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

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

• 在屬性窗口中將 Set Y設置為 20
• 在Elements 窗口中將Draw Text拖到左側，在屬性窗口中將Text設置為 TSLA，Size設置為 3，X設置為 80，Y設置為 20
• 在Elements 窗口中向左拖動Text Field在屬性窗口中，在屬性窗口中將Size設置為 3，X設置為 80，Y設置為 50

關閉元素窗口

第 7 步：在 Visuino 中添加組件

?

?

?

?

1 / 9

?

• 添加“ HTTP Client ”組件
• 選擇“ HTTPClient1 ”并在屬性窗口中將 Host 設置為 www.alphavantage.co
• 單擊?請求?3 點
• 在“請求窗口”中將“GET”拖到左側
• 在屬性窗口中將?URL?設置為：/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey=123456
• 重要?。涸?URL 中，最后用您的 API 密鑰替換 123456
• 同時?將?“柏林”替換為您所在城市的名稱
• 關閉?請求窗口
• 添加“ Char To Text ”組件
• 選擇“ CharToText1 ”并在屬性窗口中將 Max Length 設置為 2000
• 添加“開始”組件
• 添加“時鐘發生器”組件
• 選擇“ ClockGenerator1 ”并在屬性窗口中將頻率設置為 0.0016
• 這大約是 10 分鐘，因此數據將每 10 分鐘刷新一次，您可以根據需要更改頻率
• 添加“延遲”組件并在屬性窗口中將“間隔（uS）”設置為 2000000
• 添加“ Split JSON Object ”組件

第 8 步：在 Visuino 中解析 JSON

?

?

?

?

1 / 2

?

用鼠標右鍵單擊“SplitJSON1”并在菜單中單擊“Parse JSON Object..”

在“JSON 對象”窗口中粘貼此示例代碼（可在 https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey= YOURAPIKEY

將 YOURAPIKEY 替換為您在帳戶中獲得的 API 密鑰

或復制粘貼以下內容：

{
    "Global Quote": {
        "01. symbol": "TSLA",
        "02. open": "745.8900",
        "03. high": "774.8000",
        "04. low": "744.5600",
        "05. price": "774.3900",
        "06. volume": "21373022",
        "07. latest trading day": "2021-09-24",
        "08. previous close": "753.6400",
        "09. change": "20.7500",
        "10. change percent": "2.7533%"
    }
}

關閉“ JSON 對象”窗口

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

第 9 步：在 Visuino 中連接組件

?

?

?

?

1 / 4

?

• 將“ ClockGenerator1 ”引腳輸出連接到“ HTTPClient1 ”引腳時鐘
• 將“ TTGO T-Display ESP32 ”引腳 [Connected] 連接到“Delay1”引腳開始
• 將“ TTGO T-Display ESP32 ”引腳[Remote Connected]連接到“ HTTPClient1 ”引腳時鐘
• ?

• 將“ 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 >? price連接到?TTGO T-Display ESP32 >Text Field1 pin In

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

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

?

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

第 11 步：播放

?

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

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

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