用Node-RED讓物聯(lián)網(wǎng)數(shù)據(jù)可視化

謝作如 林淼焱

在本欄目上一期的文章中，我們利用SIoT軟件建立了物聯(lián)網(wǎng)（MQTT）服務(wù)器，結(jié)合開源硬件掌控板實(shí)時(shí)采集溫濕度的數(shù)據(jù)，然后對(duì)采集到的數(shù)據(jù)進(jìn)行相關(guān)分析。但是，這些不斷變換的實(shí)時(shí)數(shù)據(jù)，在普通人眼里看起來可能枯燥無味，很難吸引學(xué)生的注意力。

要讓物聯(lián)網(wǎng)數(shù)據(jù)有趣一些，就自然要研究數(shù)據(jù)可視化技術(shù)。數(shù)據(jù)可視化的主要目的是通過圖形化手段進(jìn)行生動(dòng)形象的信息傳遞。數(shù)據(jù)可視化將數(shù)據(jù)設(shè)計(jì)成炫目華麗的畫面并不是僅僅為了追求“美”，而是為了有效地傳達(dá)信息。不同方式呈現(xiàn)的數(shù)據(jù)，往往會(huì)給用戶帶來完全不同的感知體驗(yàn)。因而常常有人說，我們現(xiàn)在已經(jīng)進(jìn)入了一個(gè)“讀圖”的時(shí)代，用“圖”來呈現(xiàn)“數(shù)”，是很有價(jià)值的研究。

● 物聯(lián)網(wǎng)數(shù)據(jù)可視化的幾種方式

數(shù)據(jù)可視化與信息圖形、信息可視化、科學(xué)可視化和統(tǒng)計(jì)圖形有密切的關(guān)系。數(shù)據(jù)形象化呈現(xiàn)的方式多種多樣，工具也很多，用Excel畫出圖表就是其中最常見的一種。但物聯(lián)網(wǎng)數(shù)據(jù)是動(dòng)態(tài)變化的，用Excel做的圖表則是靜態(tài)不變的，肯定不合適。為此，我們研究了多種方式來做物聯(lián)網(wǎng)數(shù)據(jù)的可視化。

1.利用物聯(lián)網(wǎng)平臺(tái)的自帶圖表功能

絕大多數(shù)的物聯(lián)網(wǎng)平臺(tái)都提供了簡(jiǎn)單的圖表功能，能將服務(wù)器上的數(shù)據(jù)顯示在圖表中，可以根據(jù)時(shí)間查詢具體時(shí)段的數(shù)據(jù)，以折線圖的方式顯示在網(wǎng)頁(yè)上（如圖1）。SIoT軟件雖然功能很簡(jiǎn)潔，也提供了類似的圖表來呈現(xiàn)動(dòng)態(tài)數(shù)據(jù)，但是這種方法只能為用戶提供最基礎(chǔ)的功能，不能對(duì)數(shù)據(jù)進(jìn)行個(gè)性化呈現(xiàn)。

2.用編程的方式繪制動(dòng)態(tài)圖表

Python有一個(gè)專門用于圖像繪制的庫(kù)叫做Matplotlib，能夠完成常見的繪圖功能（如圖2）。結(jié)合MQTT庫(kù)，用Python代碼可以畫出實(shí)時(shí)變化的圖表。以繪畫為特色的編程語(yǔ)言Processing，也有團(tuán)隊(duì)為其提供了相應(yīng)的庫(kù)文件，二者結(jié)合可以畫出特別酷炫的可視化效果。但是，編程畫圖表的方式對(duì)沒有代碼基礎(chǔ)的初學(xué)者來說門檻較高。

3.利用Node-RED繪制個(gè)性化圖表

使用Node-RED軟件獲取MQTT服務(wù)器的數(shù)據(jù)，然后結(jié)合圖形化模塊Dashboard對(duì)數(shù)據(jù)進(jìn)行可視化呈現(xiàn)（如圖3）。Node-RED具備簡(jiǎn)單的圖形化編程和豐富的功能節(jié)點(diǎn)，不僅能夠完成數(shù)據(jù)可視化，還能夠?qū)崟r(shí)對(duì)數(shù)據(jù)進(jìn)行相應(yīng)的處理。相對(duì)來說，Node-RED的門檻較低。

● Node-RED軟件簡(jiǎn)介和安裝

Node-RED是IBM開發(fā)的一個(gè)開源項(xiàng)目，本來是為了滿足工程師快速連接硬件和設(shè)備到Web服務(wù)和其他軟件的需求。Node-RED因?yàn)榫幊毯?jiǎn)單、流程清晰得到好評(píng)，并很快發(fā)展成為一種通用的物聯(lián)網(wǎng)編程工具。它與Scratch的編程思想相近，通過節(jié)點(diǎn)塊（Node）完成基礎(chǔ)代碼的編寫，而節(jié)點(diǎn)間數(shù)據(jù)的傳遞則通過連線來創(chuàng)建數(shù)據(jù)流（Flows）。

Node-RED提供了一系列支持服務(wù)器及物聯(lián)網(wǎng)的接口，能在傳感器、服務(wù)器、路由器等設(shè)備間建模大量應(yīng)用程序功能，簡(jiǎn)化了整體項(xiàng)目的開發(fā)。只需要簡(jiǎn)單修改節(jié)點(diǎn)中的參數(shù)，就能夠讓學(xué)生搭建出一個(gè)小有規(guī)模的客戶端。

1.Node-RED的安裝

Node-RED是基于Node開發(fā)的，所以要先安裝Node環(huán)境，再通過命令安裝Node-RED。詳細(xì)的安裝過程可以參考一些網(wǎng)絡(luò)教程，或者“虛谷物聯(lián)”項(xiàng)目的官方文檔（地址：https：//github.com/vvlink/SIoT）。

Node-RED安裝成功后，在CMD窗口中輸入node-red即可啟動(dòng)服務(wù)器（如圖4）。在瀏覽器中輸入“http：//127.0.0.1：1880/”，就能進(jìn)入編程環(huán)境。

需要強(qiáng)調(diào)的是，在使用Node-RED的過程中不能關(guān)閉命令窗口。可以通過IP地址加端口號(hào)的形式，通過其他的計(jì)算機(jī)瀏覽器來訪問Node-RED，如“http：// 192.168.102.101：1880”。

2.用Node-RED連接MQTT服務(wù)器

Node-RED的主界面共有三個(gè)部分，從左到右分別為擁有各種功能的節(jié)點(diǎn)欄、放置各種編程節(jié)點(diǎn)的流程欄、用于提供節(jié)點(diǎn)幫助和調(diào)試信息的信息欄（如圖5）。

在Node-RED中簡(jiǎn)單地輸出一串字符，需要用到左側(cè)的inject節(jié)點(diǎn)和debug節(jié)點(diǎn)，按住鼠標(biāo)左鍵將節(jié)點(diǎn)拖至流程圖中，發(fā)現(xiàn)節(jié)點(diǎn)的名字發(fā)生了改變，這是由于節(jié)點(diǎn)被實(shí)例化，代表了某個(gè)具體的數(shù)值。我們可以通過修改節(jié)點(diǎn)的名稱屬性來改變其在流程圖中的名字，并不影響整個(gè)流程中的其他數(shù)據(jù)。

MQTT是物聯(lián)網(wǎng)應(yīng)用的核心協(xié)議，EasyIoT、SIoT都是一個(gè)典型的MQTT服務(wù)器。在Node-RED中，我們只需要將MQTT輸入節(jié)點(diǎn)拖出，雙擊修改其中參數(shù)（如圖6），設(shè)置好IP地址、用戶名密碼和Topic等信息，就可以接收到從MQTT服務(wù)器傳來的數(shù)據(jù)了。

完成節(jié)點(diǎn)的拖動(dòng)與信息的修改后，點(diǎn)擊右上方的“部署”，就可以在右側(cè)的調(diào)試窗口中看到信息了（如上頁(yè)圖7）。

● 利用Dashboard模塊呈現(xiàn)MQTT數(shù)據(jù)

在Node-RED中，有許多的第三方控件可以供我們使用。如果需要圖表功能，則要使用Dashboard控件。通過右上角設(shè)置菜單的“節(jié)點(diǎn)管理”，輸入Dashboard即可安裝。成功安裝后會(huì)看到左側(cè)的列表中出現(xiàn)了新的節(jié)點(diǎn)。

將已經(jīng)設(shè)置好參數(shù)的MQTT輸入與折線圖控件連接起來，點(diǎn)擊右上角的部署，保存當(dāng)前節(jié)點(diǎn)，在瀏覽器中輸入地址http：//localhost：1880/u，或點(diǎn)擊圖中右上角框選部分（如上頁(yè)圖8），就能得到一張圖表（如圖9）。

想要完成圖表的個(gè)性化顯示也十分簡(jiǎn)單，當(dāng)我們想要顯示圖表中每個(gè)系列的對(duì)應(yīng)名稱，或修改其線條顏色時(shí)，只需要設(shè)置節(jié)點(diǎn)中的Legend參數(shù)，以及選擇相應(yīng)的色塊即可修改（如圖10）。

在整個(gè)程序中，儀表盤的布局主要取決于Tab和Group參數(shù)。每個(gè)Tab都是獨(dú)立的區(qū)域，可以供用戶自行切換。當(dāng)我們要在頁(yè)面中添加多個(gè)圖表時(shí)，可以調(diào)整每張圖表的大小，其思路類似于Html語(yǔ)言中div的放置——提供一個(gè)大的方框（Tab），再根據(jù)其中方塊（group）的大小進(jìn)行排列，最后在每個(gè)方塊中放置不同大小的圖表。

我們?cè)趯W(xué)校創(chuàng)客空間外面，利用掌控板和SIoT搭建了一個(gè)溫濕度采集系統(tǒng)。通過上述的操作，很快就設(shè)計(jì)出一個(gè)數(shù)據(jù)可視化的頁(yè)面（如圖11）。用各種儀表盤顯示溫度和濕度，加上實(shí)時(shí)更新的折線圖，是不是比單一的數(shù)據(jù)要生動(dòng)得多？

● Node-RED的拓展應(yīng)用

當(dāng)然，用Dashboard呈現(xiàn)物聯(lián)網(wǎng)數(shù)據(jù)，僅僅是Node-RED的眾多功能之一。作為物聯(lián)網(wǎng)的一種粘合劑，Node-RED能夠完成很多工作。例如，可以利用Node-RED監(jiān)控物聯(lián)網(wǎng)數(shù)據(jù)的傳輸情況，當(dāng)傳感器出現(xiàn)故障或者某個(gè)傳感器數(shù)據(jù)達(dá)到閾值后，發(fā)送郵件提醒用戶;可以使用簡(jiǎn)單的代碼，按照既定的條件篩選比較數(shù)據(jù)，收集每日的溫濕度峰值等;也可以根據(jù)數(shù)據(jù)的閾值，實(shí)時(shí)給某個(gè)Topic發(fā)送信息，實(shí)現(xiàn)物聯(lián)網(wǎng)控制的功能。簡(jiǎn)而言之，Node-RED是一款值得學(xué)習(xí)的物聯(lián)網(wǎng)工具，入門簡(jiǎn)單而功能強(qiáng)大，期待和更多的老師一起研究。