描述

在本教程中，我們將學習如何使用 TTGO ESP32 和 Visuino 獲得美元和歐元的當前比特幣價格。

第 1 步：您需要什么

• TTGO ESP32
• 無線網絡連接
• Visuino 程序：下載 Visuino

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

?

?

?

?

1 / 2

?

Visuino：需要安裝https://www.visuino.eu 。啟動Visuino，如第一圖所示點擊Visuino中Arduino組件（圖1）上的“工具”按鈕出現對話框時，選擇“TTGO T-Display ESP32”，如圖2所示

第 3 步：在 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

單擊 Sockets3 Dots 在 Sockets 窗口中將 TCP/IP Secure Client (SSL) 拖到左側

• 在屬性窗口中將主機設置為：blockchain.info
• 關閉套接字窗口

第 4 步：在 Visuino 設置顯示中

?

?

?

?

1 / 9

?

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

將方向設置為：goRight

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

單擊元素 3 點

在 Elements 窗口中，將 Draw Bitmap 拖到左側

在屬性窗口中將 Y 設置為 20，單擊位圖 3 Dots

在位圖編輯器中加載比特幣位圖（圖 6）并關閉位圖編輯器

在 Elements 窗口中，將 Draw Text 拖到左側

在屬性窗口中將顏色設置為 aclOrange，大小設置為 2，文本設置為 USD，X 設置為 150，Y 設置為 10

在 Elements 窗口中，將 Text Field 拖到左側

在屬性窗口中設置 size 為 3，X 為 100，Y 為 35

在 Elements 窗口中，將 Draw Text 拖到左側

在屬性窗口中將顏色設置為 aclOrange，大小設置為 2，文本設置為 EUR，X 設置為 150，Y 設置為 80

在 Elements 窗口中將 Text Field 拖到左側在屬性窗口中設置 size 為 3，X 為 100，Y 為 105

關閉元素窗口

第 5 步：在 Visuino 中添加組件

?

?

?

?

1 / 11

?

選擇并在屬性窗口中將 Host 設置為 api.coindesk.com 點擊 Requests 3 Dots

• 添加“HTTP客戶端”組件
• 在請求窗口中，將“GET”拖到左側
• 在屬性窗口中將 URL 設置為：/v1/bpi/currentprice.json
• 關閉請求窗口
• 添加“HTTP Client”組件“Char To Text”組件
• 選擇“CharToText1”并在屬性窗口中將 Max Length 設置為 2000
• 添加“時鐘發生器”組件
• 選擇“ClockGenerator1”并在屬性窗口中將頻率設置為 0.1
• 添加“延遲”組件
• 選擇“Delay1”并在屬性窗口中將 Interval 設置為 2000000
• 添加“拆分 JSON 對象”組件

第 6 步：在 Visuino 中解析 JSON

?

?

?

?

1 / 2

?

• 用鼠標右鍵單擊“SplitJSON1”并在菜單中單擊“Parse JSON Object..”
• 在“JSON 對象”窗口中粘貼此示例代碼（可在https://www.coindesk.com/coindesk-api上找到：

{"time":{"updated":"Sep 18, 2013 17:27:00 UTC","updatedISO":"2013-09-18T17:27:00+00:00"},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. Non-USD currency data converted using hourly conversion rate from openexchangerates.org","bpi":{"USD":{"code":"USD","symbol":"$","rate":"126.5235","description":"United States Dollar","rate_float":126.5235},"GBP":{"code":"GBP","symbol":"￡","rate":"79.2495","description":"British Pound Sterling","rate_float":79.2495},"EUR":{"code":"EUR","symbol":"€","rate":"94.7398","description":"Euro","rate_float":94.7398}}}

• Close the "JSON Object" window
• "SplitJSON1" component will now create new pins

Step 7: In Visuino Connecting Components

?

?

?

?

1 / 3

?

• Connect "ClockGenerator1" pin Out to "HTTPClient1" pin Clock and "Delay1" pin Start
• Connect "HTTPClient1" pin Content to "CharToText1" pin In
• Connect "HTTPClient1" pin to TTGO T-Display ESP32 > WiFi>TCP Secure Client1 pin In
• Connect "Delay1" pin Out to "CharToText1" pin Clock and TTGO T-Display ESP32 > WiFi>TCP Secure Client1 pin Disconnect
• Connect "CharToText1" pin Out to "SplitJSON1" pin In
• Connect "SplitJSON1>USD>rate_float to TTGO T-Display ESP32>Text Field1 pin In
• Connect "SplitJSON1>EUR>rate_float to TTGO T-Display ESP32>Text Field1 pin In

Note: you can also play with the other pins from "SplitJSON1" component

Step 8: Generate, Compile, and Upload the Code

?

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

Step 9: Play

If you power the TTGO ESP32 module it will connect to the network and display the current Bitcoin price in USD and EUR

Congratulations! You have completed your project with Visuino. Also attached is the Visuino project, that I created for this tutorial, you can download it and open it in Visuino: https://www.visuino.eu