謝作如 林淼焱

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

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

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

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

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

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

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

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

3.利用Node-RED繪制個性化圖表

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

● Node-RED軟件簡介和安裝

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

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

1.Node-RED的安裝

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

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

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

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

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

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

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

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

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

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

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

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

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

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

● Node-RED的拓展應(yī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ù)的傳輸情況，當傳感器出現(xiàn)故障或者某個傳感器數(shù)據(jù)達到閾值后，發(fā)送郵件提醒用戶;可以使用簡單的代碼，按照既定的條件篩選比較數(shù)據(jù)，收集每日的溫濕度峰值等;也可以根據(jù)數(shù)據(jù)的閾值，實時給某個Topic發(fā)送信息，實現(xiàn)物聯(lián)網(wǎng)控制的功能。簡而言之，Node-RED是一款值得學(xué)習的物聯(lián)網(wǎng)工具，入門簡單而功能強大，期待和更多的老師一起研究。