在掌控板上實(shí)現(xiàn)數(shù)據(jù)可視化

牟曉東

在進(jìn)行科創(chuàng)實(shí)驗(yàn)時(shí)，將傳感器數(shù)據(jù)進(jìn)行可視化處理（折線圖、雷達(dá)圖等），既提高數(shù)據(jù)解析的可讀性又讓實(shí)驗(yàn)效果更加美觀。通過(guò)Python 代碼編程實(shí)現(xiàn)數(shù)據(jù)可視化的難度相對(duì)較大，各種函數(shù)參數(shù)的設(shè)置需要根據(jù)所引用庫(kù)模塊的不同以及呈現(xiàn)要求來(lái)進(jìn)行細(xì)致的調(diào)整。借助于Mind+ 圖形化編程中的SIoT（針對(duì)學(xué)校場(chǎng)景的開(kāi)源免費(fèi)MQTT 系統(tǒng)），可一鍵創(chuàng)建本地物聯(lián)網(wǎng)服務(wù)器。我們可以在掌控板上輕松實(shí)現(xiàn)物聯(lián)網(wǎng)數(shù)據(jù)可視化，在此以遠(yuǎn)程監(jiān)測(cè)一個(gè)微型大棚系統(tǒng)的聲音、光線和溫濕度等數(shù)據(jù)為例。

1.實(shí)驗(yàn)器材及連接

掌控板主板（2.1.0 版）及擴(kuò)展板各一塊，DH11 溫濕度傳感器一個(gè)，HCSR04超聲波傳感器一個(gè)，小型面包板一塊，各種顏色的杜邦線若干。

首先，連接掌控板和擴(kuò)展板，通過(guò)紅色和白色杜邦線將擴(kuò)展板的電源正負(fù)極接入面包板；然后，將溫濕度傳感器和超聲波傳感器的引腳插入面包板，通過(guò)兩組紅色和白色杜邦線將電源的正負(fù)極分別接至各自引腳的VCC 和GND端；接著，用一根黃色杜邦線將溫濕度傳感器中間的DAT 信號(hào)輸出端與擴(kuò)展板的P0 引腳連接好，再分別用綠色和藍(lán)色杜邦線將超聲波傳感器的Trig 信號(hào)發(fā)射端、Echo 信號(hào)回聲端與擴(kuò)展板的P1和P2 引腳連接好；最后，通過(guò)數(shù)據(jù)線將掌控板與電腦相連，通電待用（如圖1）。

2.在網(wǎng)頁(yè)中進(jìn)行Topic主題的新建

在Mind+ 官網(wǎng)→教程→ 1.7 數(shù)據(jù)可視化→下載siot-win 壓縮包。解壓后運(yùn)行其中的“start SIoT.bat”啟動(dòng)服務(wù)，然后到瀏覽器中輸入本機(jī)IP 及端口（比如http：//192.168.1.101：8080）訪問(wèn)，在彈出的對(duì)話窗口中填寫(xiě)賬號(hào)（siot）和密碼（dfrobot）等信息進(jìn)行登錄后，點(diǎn)擊“新建主題（Topic）”項(xiàng)，輸入“光線數(shù)據(jù)”“聲音數(shù)據(jù)”“溫度數(shù)據(jù)”“濕度數(shù)據(jù)”和“超聲波數(shù)據(jù)”，建立好五個(gè)主題，分別對(duì)應(yīng)掌控板自帶的光線傳感器、麥克風(fēng)、DH11 溫濕度傳感器以及HC-SR04 超聲波傳感器數(shù)據(jù)主題的訂閱（如圖2）。

3.在Mind+中進(jìn)行圖形化編程

使用Mind+（V1.8.0 RC1.0），新建“微型大棚遠(yuǎn)程監(jiān)測(cè)”項(xiàng)目，開(kāi)始圖形化編程：

在點(diǎn)擊左下角的“擴(kuò)展”按鈕選擇“主控板”下的“掌控板”之后，再將“傳感器”中的“DHT11/22 溫濕度傳感器”和“超聲波測(cè)距傳感器”兩項(xiàng)加載，在“網(wǎng)絡(luò)服務(wù)”中將“MQTT”協(xié)議和“Wi-Fi”項(xiàng)加載；接著，在主界面中就會(huì)出現(xiàn)“ESP32 主程序”模塊，從左側(cè)“網(wǎng)絡(luò)服務(wù)”-“Wi-Fi”中選擇“Wi-Fi 連接到熱點(diǎn)：'' 密碼：‘'”模塊，將當(dāng)前所使用的Wi-Fi 名稱（zyyz108）和密碼（zyyz0108）填寫(xiě)好；再將“Wi-Fi 連接成功？”模塊嵌入至“等待直到”模塊，并且通過(guò)“屏幕顯示文字‘ WiFi連接成功！ ' 在第2 行”模塊，控制掌控板的OLED 顯示屏的文字信息提示；接著， 從“ 網(wǎng)絡(luò)服務(wù)”-“MQTT” 中選擇“MQTT 初始化參數(shù)”模塊，點(diǎn)擊右側(cè)的小齒輪圖標(biāo)進(jìn)行各個(gè)參數(shù)的詳細(xì)設(shè)置——物聯(lián)網(wǎng)平臺(tái)：SIoT，服務(wù)器地址：192.168.1.101（與之前在瀏覽器中的訪問(wèn)IP 地址相同），賬號(hào)和密碼與新建主題時(shí)相同（siot/dfrobot），點(diǎn)擊Topic 主題的加號(hào)直至出現(xiàn)0-4 共五個(gè)主題參數(shù)，分別將“siot/ 光線數(shù)據(jù)”“siot/聲音數(shù)據(jù)”和“siot/ 超聲波數(shù)據(jù)”等依次設(shè)置好。

然后，選擇“MQTT 發(fā)起連接”模塊，同樣再通過(guò)“屏幕顯示文字' MQTT 連接成功！ ' 在第3 行”模塊，控制掌控板OLED 顯示屏的文字信息提示；建立“循環(huán)執(zhí)行”結(jié)構(gòu)，通過(guò)左側(cè)的“變量”-“新建字符串類型變量”建立“光線值”“聲音值”“溫度值”“濕度值”和“超聲波值”五個(gè)變量，并且分別將其值設(shè)置為：“讀取環(huán)境光強(qiáng)度”“讀取麥克風(fēng)聲音強(qiáng)度”“讀取引腳P0 DHT11 溫度（℃）”“讀取引腳P0 DHT11濕度（%rh）”和“讀取超聲波傳感器距離單位（厘米）trig 為P1 echo 為P2”； 等待1 秒鐘之后，執(zhí)行一組消息發(fā)送操作，均是通過(guò)MQTT 發(fā)送消息，分別將這五個(gè)變量所獲取的數(shù)據(jù)（字符串型）發(fā)送至Topic_0-Topic_4，并保存至數(shù)據(jù)庫(kù)。

保存好程序后，點(diǎn)擊左上角的“連接設(shè)備”項(xiàng)，再點(diǎn)擊右上角的“上傳至設(shè)備”項(xiàng)將程序上傳至掌控板（如圖3）。

4. 在Mind+ 中進(jìn)行數(shù)據(jù)可視化

此時(shí)，雖然掌控板已經(jīng)開(kāi)始監(jiān)測(cè)產(chǎn)生并有數(shù)據(jù)發(fā)送，但還未進(jìn)行可視化處理。點(diǎn)擊“可視化面板”項(xiàng)，在彈出的“Mind+ 數(shù)據(jù)可視化”窗口中進(jìn)行基礎(chǔ)組件、顯示組件以及圖表組件等的設(shè)置：

選擇“文字”組件，將“組件標(biāo)題”設(shè)置為“微型大棚遠(yuǎn)程監(jiān)測(cè)”，再將“內(nèi)容”設(shè)置為“光線數(shù)據(jù)、溫度數(shù)據(jù)、濕度數(shù)據(jù)、聲音數(shù)據(jù)、超聲波數(shù)據(jù)”，字號(hào)和顏色均可自定義；再選擇“進(jìn)度儀表盤(pán)”，將“組件標(biāo)題”設(shè)置為“超聲波數(shù)據(jù)”，主題Topic 選擇對(duì)應(yīng)的“siot/ 超聲波數(shù)據(jù)”，“組件單位”設(shè)置為“厘米”；其余四個(gè)主題分別選擇設(shè)置為：濕度數(shù)據(jù)“水波圖”、溫度數(shù)據(jù)“等級(jí)儀表盤(pán)”、光線數(shù)據(jù)“迷你面積圖”、聲音數(shù)據(jù)“折線圖”，并且分別將對(duì)應(yīng)的主題Topic、數(shù)據(jù)單位、組件的寬度與高度以及當(dāng)前顯示數(shù)據(jù)的數(shù)量等設(shè)置好，展示出數(shù)據(jù)可視化的實(shí)時(shí)效果（如圖4）。

此時(shí)，不管是掌控板的板載光線與麥克風(fēng)傳感器，還是通過(guò)擴(kuò)展板連接的溫濕度傳感器與超聲波傳感器，它們監(jiān)測(cè)獲取的數(shù)據(jù)通過(guò)綁定的對(duì)應(yīng)Topic 主題進(jìn)行發(fā)送與接收，最終在Mind+ 的可視化面板上動(dòng)態(tài)呈現(xiàn)出來(lái)。在掌控板的OLED 顯示屏有“Wi-Fi 連接成功！”“MQTT 連接成功！”的實(shí)時(shí)工作提示信息；同時(shí)在瀏覽器的“數(shù)據(jù)管理”頁(yè)面中，五個(gè)訂閱的主題也分別顯示有接收和發(fā)送的數(shù)據(jù)總數(shù)、最新數(shù)據(jù)以及對(duì)應(yīng)的時(shí)間，可根據(jù)情況點(diǎn)擊“查看詳情”“清空數(shù)據(jù)”或“刪除”項(xiàng)進(jìn)行對(duì)應(yīng)的操作（如圖5）。