基于物聯網開放平臺的設備數據顯示方案

陳文藝, 宋亞紅, 李曉倫

(1.西安郵電大學 物聯網與兩化融合研究院， 陜西 西安 710061; 2.西安郵電大學 通信與信息工程學院， 陜西 西安 710121)

?

基于物聯網開放平臺的設備數據顯示方案

陳文藝1, 宋亞紅2, 李曉倫1

(1.西安郵電大學 物聯網與兩化融合研究院， 陜西 西安 710061; 2.西安郵電大學 通信與信息工程學院， 陜西 西安 710121)

為物聯網開放平臺實時采集的設備數據，設計基于物聯網平臺Web服務器的前端顯示方案，對數值型數據和圖像型數據，分別按照曲線圖的方式和時間軸顯示縮略圖的方式，在瀏覽器上顯示。數值型數據采用曲線圖顯示比采用柱狀圖能詳細展示數據的波動，圖像型數據采用時間軸顯示縮略圖方式比無限加載方式加載時間短。新方案可縮短不同類型設備數據在Web界面的顯示時間。

設備數據；數據顯示；物聯網平臺；MongoDB

把所有的物品通過射頻識別標簽等信息傳感設備與互聯網連接，即可實現物品的智能化識別和管理[1]，這就是物聯網，它已成為信息社會科技發展的趨勢。中國人很早就啟動了傳感網研究[2]，目前，已被廣泛應用于智能家居、智能電網、智能物流、視頻監控、醫療行業、智能交通等領域[3-4]。由于整個市場的碎片化現狀和各行業的獨特需求，各行業所搭建的系統和終端往往彼此獨立，無法實現數據共享[5]。另外，由于終端設備采集數據類型和數量的增多，加之用戶瀏覽量劇增，設備數據的存儲和前端顯示變得尤為重要。

對于物聯網開放平臺而言，設備數據以文檔的形式存儲在MongoDB數據庫中。當文檔較小時，查詢速度較快，但當文檔數量增多時，相應的查詢速度便會降低。設備傳感器采集的數據分為數值型和圖像型兩種。當用戶瀏覽網頁時，如果同一時刻大量讀取數值型和圖像型數據，將會影響網頁的加載速度。為此，本文將設計一種基于物聯網平臺Web服務器的設備數據實時存儲、讀取和前端顯示方案。通過使用曲線圖和時間軸顯示縮略圖的方法來顯示這兩種類型的設備數據。

1 物聯網開放平臺

物聯網平臺使用了基于RESTful架構的開放API體系，通過統一的Web服務展現給用戶。同時將node.js作為運行環境，前端和后端均使用JavaScript作為開發語言，便于整個系統的交互[6]。該平臺在普通互聯網B/S架構軟件的基礎上，增加機器客戶端，建立人和機器為客戶端的實時B/S/M[7]架構。總體結構如圖1所示。其中：R平臺為存取資源數據模型平臺；E平臺為事件操作平臺，接收R平臺觸發的事件，管理事件隊列；M平臺用以實現網關設備物理數據模型與R平臺數據模型的同步，平臺和網關設備的安全認證、數據加密；H平臺用以與瀏覽器和APP通信實現用戶接口；C平臺負責完成數據處理和統計等計算密集任務，可以直接從R平臺獲取數據，處理結果作為系統網關設備的數據寫入數據庫；物聯網關為M平臺服務器的客戶端設備，通過http或socketIO與M平臺通信，完成物理網關設備數據模型建立和維護，并保持與平臺數據模型同步，另外，提供API與設備通信，獲取傳感設備數據，控制執行設備操作；物聯設備為物聯網關TCP服務器的客戶端設備，具體為職能傳感器或執行器，實現對物理世界的感知或操作；系統網關設備是為系統定義的物聯網關和設備，完成系統任務，如微信和短信輸入輸出的系統網關設備。

圖1 物聯網平臺總體架構

2 設備數據管理方式

在物聯網平臺中，每個網關和設備都有唯一的ID號[8]，每個設備都有自己的數據和不同的操控能力。設備的每個數據存儲在一個數據點里邊，這里的設備數據點表示對設備傳感器采集的溫度、濕度、光照、圖像等實時數據的具體描述[9]。物聯網平臺在MongoDB數據庫中定義了用戶、網關、設備和數據[10]等集合。

2.1 設備數據存儲及讀取方式

在MongoDB數據庫中，采用JSON數據格式來建立數據文檔模型。該平臺中的每個設備只有一個傳感數據點輸入，所有輸入數據存放在MongoDB中。MongoDB數據庫按頁存放設備輸入數據，既可減少文檔文件的存儲數量，也可提高數據的查詢速度。每頁存dmax個數據點，每個數據點存放一組采集的設備輸入數據，共存pmax頁數據文檔，所有數據頁構成一個邏輯上的環形FIFO。

對于不同設備數據類型，存儲的數據形式不同。當設備數據為圖像類型時，每個數據點存入一張縮略圖和對應的大圖ID。當設備數據為數值型時，每個數據點存入一個數值型數據，每頁數據存到一個固定的文檔中。

設備數據的讀取方式分為3種，即單點讀取，連續多點讀取和跳躍多點讀取。

2.2 前端顯示時數據的獲取

對整個物聯網平臺而言，設備數據的獲取必須有先后的順序，如圖2所示。

圖2 數據獲取形式

數值型數據在數據庫中可以按批量讀取的方式，一次讀取一組數據用于輸出顯示。大型網站的后臺部署過程中，都靈活運用了各種緩存，主要有客戶端瀏覽器的緩存、服務器端的Webserver自身緩存、代理緩存、分布式緩存以及數據庫的自身緩存等。當用戶瀏覽某個時間段的圖片數據時，首先判斷瀏覽器端是否有緩存，當瀏覽器端有緩存數據時，便不發送請求到服務器。當瀏覽器端沒有緩存數據時，判斷后端Web服務器緩存中有沒有相應數據，最后到數據庫讀取。這樣，在前端顯示設備數據時，請求Web服務器和訪問數據庫的次數會減少，從而可減緩服務器和數據庫的壓力，提高頁面加載速度。

3 設備數據顯示方法

物聯網平臺前端設計主要使用JavaScript腳本語言以及jQuery框架。JavaScript是一種由Netscape的LiveScript發展而來基于對象的客戶端腳本語言[11]，可解決服務器端速度慢的問題，提高瀏覽器的加載速度，改善網頁的靈活性。jQuery是由John Resig在2006年創建的JavaScript框架[12]，語言簡潔、平臺兼容性好，能遍歷HTML，同時能夠完成網頁動畫控制和網頁事件處理。Ajax的配合使用，更給前端開發人員提供了極大方便。

3.1 數值型數據顯示方法

對于設備數值型數據而言，每個數據值對應一個時間點。從用戶角度看，需要將時間和數值實時地顯示在界面，因此，選擇曲線圖和柱狀圖的方式來實時顯示設備數值型數據。

圖表的制作可以使用Highcharts來完成。Highcharts是一個專門制作圖表的類庫，用戶只需要根據自己的需求來引用。柱形圖和曲線圖的區別只是改變表格類型。柱狀圖為column，曲線圖為spline。使用Highcharts制作圖表有不少好處：

(1) 兼容性好，可以兼容所有的瀏覽器；

(2) 使用純js來進行編程；

(3)支持多圖表類庫，如直線圖、柱狀圖、餅圖、曲線圖等；

(4) 時間軸可以精確到秒級別。

至于設備數據的獲取，須先從nodejs服務器端將數據讀取出來，并傳到界面，其程序為

var qdata = [];

<%for(var i=0, len=pic_data2 . length ;i

{%>

var newdata={

x: <%= pic_data2[i]['x']%>,

y: <%= pic_data2[i]['y']%>

}

qdata. push(newdata);

<%}%>：

然后，引用highcharts.js配置數據列，其程序為

series: [{

name: '溫度',

data: qdata

}]

3.2 圖像型數據顯示方法

在網頁設計過程中，當圖像數據增多時，會影響網頁的瀏覽速度，用戶往往等不到數據加載完成便將網頁關閉。從平臺的需求和用戶的瀏覽角度分析，采用縮略圖方式顯示設備數據較為合適，用戶在需要時，可以通過點擊縮略圖方式讀取對應大圖。為此，在前端使用谷歌圖片無限加載和時間坐標軸的方式來顯示設備圖像數據。

(1) 無限加載方式

無限加載方式即滑動鼠標可以實時加載下一組圖像數據。使用JavaScript腳本語言來實現。加載圖像方式的程序為

(2) 時間坐標軸方式

時間坐標軸方式即通過時間軸來顯示每一幅圖像，時間軸可以自由的縮放，還可以將時間顯示到秒級別。同時用戶可以通過移動鼠標進行時間的加載。鼠標移動加載時使用google.jsapi.js。Google的JSAPI既可以加載自身提供的API，也可以加載各種js庫。時間軸的顯示使用timeline.js插件。獲取數據的程序為

function drawVisualization(){

data = new google . visualization . DataTable();

data.addColumn('string', 'image_url');

data.addRows([

]);

var options = {

width: "100%",

height: "300px",

editable: true,

style: "box"

};

timeline = new links.Timeline(document.getElementById('mytimeline'), options);

timeline.draw(data);

onrangechange();

}

4 顯示效果及測試分析

4.1 數值型數據顯示效果

使用曲線圖或者柱狀圖可以展示設備數值型數據的具體變化，同時可以實時加載數據。當用戶在查看數據時，鼠標放在坐標點上，即可顯示設備的具體信息。固定的時間段內，設備數據刷新一次。顯示的信息可以下載成圖片格式進行保存，也可以直接進行打印操作。界面顯示效果如圖3所示。

從用戶體驗角度出發，曲線圖比柱狀圖更能詳細展示數據的波動情況。用戶大多希望設備數據的顯示首先可以直接展示數值大小，其次能夠展示數據的具體變化特性。因此，設計以曲線圖方式顯示設備數值型數據。

圖3 數值型數據顯示效果

4.2 圖像型數據的界面展示效果

(1) 無限加載方式

平臺中設備數據的讀取方式是批量讀取，數據先從前端瀏覽器緩存區讀取，再從Web server后端靜態文件夾的緩存中讀取，最后從數據庫中讀取。界面先顯示一定數量的縮略圖，通過滑動鼠標，圖像數據進行相應的加載。在每個縮略圖下面顯示圖像數據的詳細信息，點擊縮略圖顯示對應的大圖。展示效果如圖4所示。

以無限加載方式顯示，數據加載時間長，當用戶想要查看歷史圖片時，必須一直進行加載， 給用戶操作帶來不便。另外，數據時間顯示不明顯。

圖4 無限加載顯示

(2) 時間坐標軸方式

平臺中每個設備采集的圖像都有與之相對應的時間點。時間軸可以根據鼠標的左右移動來進行加載，時間可以精確到秒，時間軸可以實現縮放效果。當用戶想要查看某時間段的設備數據時，直接點擊鼠標進行拉伸，具體的縮略圖可以清楚展現，此時點擊縮略圖，即可在頁面下方顯示對應大圖。當用戶不想拉動鼠標時，在頁面輸入具體的開始時間和結束時間，也可顯示設備數據的具體變化。效果展示如圖5所示。

圖5 時間軸顯示縮略圖

時間軸顯示方式可以通過時間軸展示出某時間段設備數據的具體變化，用戶可以通過拖拽鼠標來實現歷史數據的查詢。另外，從用戶體驗角度，此顯示方式還可以展示數據的具體信息。

4.3 圖像型數據加載測試

判斷一個界面的顯示效果，不僅要看外觀和展示效果，也要看整個系統瀏覽界面的流暢度，即加載速度。圖像型數據兩種顯示方式的速度對比結果如表1和表2所示。由此可見，采用時間坐標軸方式時，頁面的加載時間更短，故對于設備圖像型數據，應選取時間坐標軸方式來展示設備數據信息。

表1 無限加載方式

表2 時間軸方式

5 結語

設計并實現了物聯網Web服務器設備數據的顯示方案，并對兩種顯示效果進行了對比，選擇出一種適合物聯網平臺設備數據顯示的最佳方式。對于數值型數據而言，曲線圖顯示能夠展示設備數據的波動情況，而對于圖像型數據而言，設備圖像的占用空間比較大，當數據量增加時，用戶瀏覽速度受阻。因此，縮略圖顯示的方式既可以減少內存，又可以一次在界面顯示更多的數據。通過對比測試表明，設備圖像型數據的顯示使用時間軸方式加載時間短。

[1] 陳文藝.物聯網技術的現狀及其在工業信息化中的作用[J/OL].西安郵電大學學報,2010,15(6):73-76[2016-04-05].http://dx.chinadoi.cn/10.3969/j.issn.1007-3264.2010.06.018.

[2] 甘志祥.物聯網發展中問題的初析[J/OL].中國科技信息,2010(5):94-96[2016-04-05].http://dx.chinadoi.cn/10.3969/j.issn.1001-8972.2010.05.033.

[3] 葉高揚,畢冉.基于物聯網的智能家居系統設計與實現[J/OL].計算機應用,2014(S1):318-319[2016-04-04].http://www.cnki.com.cn/Article/CJFDTotal-JSJY2014S1091.htm.

[4] CASTRO M, JARA A J, SKARMETA A F. An Analysis of M2M platforms: challenges and opportunities for the Internet of Things[C/OL]//2012 Sixth International Conference on Innovative Mobile and Internet Services in Ubiquitous Computing (IMIS). Palermo:IEEE,2012:757-762[2016-03-05].http://dx.doi.org/10.1109/IMIS.2012.184.

[5] 沈姝.NoSQL數據庫技術及其應用研究[D/OL].南京:南京信息工程大學,2012:8-65[2016-04-21].http://cdmd.cnki.com.cn/Article/CDMD-10300-1012369137.htm.

[6] 彭娜.基于node.js博客系統的設計與實現[D/OL].大連:大連理工大學,2012:18-19[2016-04-10].http://cdmd.cnki.com.cn/Article/CDMD-10141-1013198191.htm.

[7] 董紀國.基于B/S架構的物聯網應用組態平臺研發[D/OL].南京:南京大學,2015:9-21[2016-04-12].http://cdmd.cnki.com.cn/Article/CDMD-10284-1015313481.htm.

[8] 陳文藝,王知明.基于MATLAB的物聯網網關Web發布系統設計[J/OL].西安郵電大學學報,2013,18(2):57-61[2016-05-08].http://dx.chinadoi.cn/10.3969/j.issn.1007-3264.2013.02.011.

[9] 張為.李亮.多傳感器數據采集技術在物聯網的應用研究[J/OL].廣州大學學報(自然科學版),2012,11(3):75-80[2015-06-08].http://dx.chinadoi.cn/10.3969/j.issn.1671-4229.2012.03.016.

[10] 紅丸.MongoDB管理與開發精要[M/OL〗. 北京:機械工業出版社,2011:46[2016-04-22].http://www.bookask.com/book/1107725.html.

[11] 徐青.JavaScript惡意代碼檢測技術研究[D/OL].成都:西南交通大學,2014:9-10[2016-04-26].http://cdmd.cnki.com.cn/Article/CDMD-10613-1014254677.htm.

[12] 黃競.基于jQuery框架的Web前端系統構建方法的研究與應用[D/OL].北京:北京郵電大學,2012:16[2016-05-05].http://cdmd.cnki.com.cn/Article/CDMD-10013-1013241806.htm.

[責任編輯:陳文學]

A device data display scheme based on the Internet of things open platform

CHEN Wenyi1, SONG Yahong2, LI Xiaolun1

(1. Internet of Things and Integration of IT Application and Industrialization Institute,Xi’an University of Posts and Telecommunications, Xi’an 710061,China;2. School of Communication and Information Engineering, Xi’an University of Posts and Telecommunications, Xi’an 710121, China)

For the device data collected on the Internet of things open platform, A novel front display scheme based on Internet of things open platform of Web server is designed. The new scheme uses graph method to display numerical device data and timeline thumbnail to show the image data on the browser resprectively. As using graph to display the numerical data is more detailed, while using timeline thumbnail to show the image data is faster than the infinite loading way, the new scheme can shorten the waiting time to display different types of device data at the Web interface.

equipment data, data display, Internet of things platform, MongoDB

10.13682/j.issn.2095-6533.2016.06.021

2016-06-07

陳文藝(1964-)，男，博士，教授，從事數字圖像處理及傳輸研究。E-mail:chenwy@xupt.edu.cn 宋亞紅(1990-)，女，碩士研究生，研究方向為物聯網技術及應用。E-mail:1030469399@qq.com

TP311.133.1

A

2095-6533(2016)06-0108-06