描述

在本教程中，我們將學(xué)習(xí)如何使用 TTGO ESP32 和 Visuino 獲得美元和歐元的當(dāng)前比特幣價格。

第 1 步：您需要什么

• TTGO ESP32
• 無線網(wǎng)絡(luò)連接
• Visuino 程序：下載 Visuino

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

?

?

?

?

1 / 2

?

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

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

?

?

?

?

1 / 6

?

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

單擊連接到接入點 3 點

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

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

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

• 在屬性窗口中將主機(jī)設(shè)置為：blockchain.info
• 關(guān)閉套接字窗口

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

?

?

?

?

1 / 9

?

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

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

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

單擊元素 3 點

在 Elements 窗口中，將 Draw Bitmap 拖到左側(cè)

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

在位圖編輯器中加載比特幣位圖（圖 6）并關(guān)閉位圖編輯器

在 Elements 窗口中，將 Draw Text 拖到左側(cè)

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

在 Elements 窗口中，將 Text Field 拖到左側(cè)

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

在 Elements 窗口中，將 Draw Text 拖到左側(cè)

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

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

關(guān)閉元素窗口

第 5 步：在 Visuino 中添加組件

?

?

?

?

1 / 11

?

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

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

第 6 步：在 Visuino 中解析 JSON

?

?

?

?

1 / 2

?

• 用鼠標(biāo)右鍵單擊“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