用Node-RED让物联网数据可视化

2019-06-25 01:50谢作如林淼焱
中国信息技术教育 2019年11期
关键词:控件图表编程

谢作如 林淼焱

在本栏目上一期的文章中,我们利用SIoT软件建立了物联网(MQTT)服务器,结合开源硬件掌控板实时采集温湿度的数据,然后对采集到的数据进行相关分析。但是,这些不断变换的实时数据,在普通人眼里看起来可能枯燥无味,很难吸引学生的注意力。

要让物联网数据有趣一些,就自然要研究数据可视化技术。数据可视化的主要目的是通过图形化手段进行生动形象的信息传递。数据可视化将数据设计成炫目华丽的画面并不是仅仅为了追求“美”,而是为了有效地传达信息。不同方式呈现的数据,往往会给用户带来完全不同的感知体验。因而常常有人说,我们现在已经进入了一个“读图”的时代,用“图”来呈现“数”,是很有价值的研究。

● 物联网数据可视化的几种方式

数据可视化与信息图形、信息可视化、科学可视化和统计图形有密切的关系。数据形象化呈现的方式多种多样,工具也很多,用Excel画出图表就是其中最常见的一种。但物联网数据是动态变化的,用Excel做的图表则是静态不变的,肯定不合适。为此,我们研究了多种方式来做物联网数据的可视化。

1.利用物联网平台的自带图表功能

绝大多数的物联网平台都提供了简单的图表功能,能将服务器上的数据显示在图表中,可以根据时间查询具体时段的数据,以折线图的方式显示在网页上(如图1)。SIoT软件虽然功能很简洁,也提供了类似的图表来呈现动态数据,但是这种方法只能为用户提供最基础的功能,不能对数据进行个性化呈现。

2.用编程的方式绘制动态图表

Python有一个专门用于图像绘制的库叫做Matplotlib,能够完成常见的绘图功能(如图2)。结合MQTT库,用Python代码可以画出实时变化的图表。以绘画为特色的编程语言Processing,也有团队为其提供了相应的库文件,二者结合可以画出特别酷炫的可视化效果。但是,编程画图表的方式对没有代码基础的初学者来说门槛较高。

3.利用Node-RED繪制个性化图表

使用Node-RED软件获取MQTT服务器的数据,然后结合图形化模块Dashboard对数据进行可视化呈现(如图3)。Node-RED具备简单的图形化编程和丰富的功能节点,不仅能够完成数据可视化,还能够实时对数据进行相应的处理。相对来说,Node-RED的门槛较低。

● Node-RED软件简介和安装

Node-RED是IBM开发的一个开源项目,本来是为了满足工程师快速连接硬件和设备到Web服务和其他软件的需求。Node-RED因为编程简单、流程清晰得到好评,并很快发展成为一种通用的物联网编程工具。它与Scratch的编程思想相近,通过节点块(Node)完成基础代码的编写,而节点间数据的传递则通过连线来创建数据流(Flows)。

Node-RED提供了一系列支持服务器及物联网的接口,能在传感器、服务器、路由器等设备间建模大量应用程序功能,简化了整体项目的开发。只需要简单修改节点中的参数,就能够让学生搭建出一个小有规模的客户端。

1.Node-RED的安装

Node-RED是基于Node开发的,所以要先安装Node环境,再通过命令安装Node-RED。详细的安装过程可以参考一些网络教程,或者“虚谷物联”项目的官方文档(地址:https://github.com/vvlink/SIoT)。

Node-RED安装成功后,在CMD窗口中输入node-red即可启动服务器(如图4)。在浏览器中输入“http://127.0.0.1:1880/”,就能进入编程环境。

需要强调的是,在使用Node-RED的过程中不能关闭命令窗口。可以通过IP地址加端口号的形式,通过其他的计算机浏览器来访问Node-RED,如“http:// 192.168.102.101:1880”。

2.用Node-RED连接MQTT服务器

Node-RED的主界面共有三个部分,从左到右分别为拥有各种功能的节点栏、放置各种编程节点的流程栏、用于提供节点帮助和调试信息的信息栏(如图5)。

在Node-RED中简单地输出一串字符,需要用到左侧的inject节点和debug节点,按住鼠标左键将节点拖至流程图中,发现节点的名字发生了改变,这是由于节点被实例化,代表了某个具体的数值。我们可以通过修改节点的名称属性来改变其在流程图中的名字,并不影响整个流程中的其他数据。

MQTT是物联网应用的核心协议,EasyIoT、SIoT都是一个典型的MQTT服务器。在Node-RED中,我们只需要将MQTT输入节点拖出,双击修改其中参数(如图6),设置好IP地址、用户名密码和Topic等信息,就可以接收到从MQTT服务器传来的数据了。

完成节点的拖动与信息的修改后,点击右上方的“部署”,就可以在右侧的调试窗口中看到信息了(如上页图7)。

● 利用Dashboard模块呈现MQTT数据

在Node-RED中,有许多的第三方控件可以供我们使用。如果需要图表功能,则要使用Dashboard控件。通过右上角设置菜单的“节点管理”,输入Dashboard即可安装。成功安装后会看到左侧的列表中出现了新的节点。

将已经设置好参数的MQTT输入与折线图控件连接起来,点击右上角的部署,保存当前节点,在浏览器中输入地址http://localhost:1880/u,或点击图中右上角框选部分(如上页图8),就能得到一张图表(如图9)。

想要完成图表的个性化显示也十分简单,当我们想要显示图表中每个系列的对应名称,或修改其线条颜色时,只需要设置节点中的Legend参数,以及选择相应的色块即可修改(如图10)。

在整个程序中,仪表盘的布局主要取决于Tab和Group参数。每个Tab都是独立的区域,可以供用户自行切换。当我们要在页面中添加多个图表时,可以调整每张图表的大小,其思路类似于Html语言中div的放置——提供一个大的方框(Tab),再根据其中方块(group)的大小进行排列,最后在每个方块中放置不同大小的图表。

我们在学校创客空间外面,利用掌控板和SIoT搭建了一个温湿度采集系统。通过上述的操作,很快就设计出一个数据可视化的页面(如图11)。用各种仪表盘显示温度和湿度,加上实时更新的折线图,是不是比单一的数据要生动得多?

● Node-RED的拓展应用

当然,用Dashboard呈现物联网数据,仅仅是Node-RED的众多功能之一。作为物联网的一种粘合剂,Node-RED能够完成很多工作。例如,可以利用Node-RED监控物联网数据的传输情况,当传感器出现故障或者某个传感器数据达到阈值后,发送邮件提醒用户;可以使用简单的代码,按照既定的条件筛选比较数据,收集每日的温湿度峰值等;也可以根据数据的阈值,实时给某个Topic发送信息,实现物联网控制的功能。简而言之,Node-RED是一款值得学习的物联网工具,入门简单而功能强大,期待和更多的老师一起研究。

猜你喜欢
控件图表编程
使用“填表单”微信小程序 统计信息很方便
基于.net的用户定义验证控件的应用分析
玩游戏学编程,Blockly Games上手玩
纺织机上诞生的编程
编程屋完成数百元万天使轮融资
学编程,先画画
双周图表
双周图表
双周图表
图表