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

浙江省温州中学 谢作如

温州大学教师教育学院 林淼焱

涉及学科：数学、技术、艺术

在上一篇文章《用物联网技术探究一天中什么时候最热》中，我们利用SIoT软件建立了物联网（MQTT）服务器，结合开源硬件掌控板实时采集温湿度的数据，然后对采集到的数据进行相关分析。但是，这些不断变换的实时数据，在普通人眼里看起来可能是枯燥无味，很难吸引学生的注意力。

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

各种形象的图表

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

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

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

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

easyiot图表

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

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

Matplotlib图表

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

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

Node-RED图表

二、Node-RED软件简介和安装

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

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

1. Node-RED的安装

Node-RED是基于Node开发的，所以要先安装Node环境，再通过命令后安装Node-RED。详细的安装过程可以参考一些网络教程，或者“虚谷物联”项目的官方文档。

“虚谷物联”项目的官方文档地址：https://github.com/vvlink/SIoT

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

需要强调的是，在使用Node-RED的过程中不能关闭命令窗口。

在CMD窗口中启动Node-RED

可以通过IP地址加端口号的形式，通过其他的计算机浏览器来访问Node-RED，如“http:// 192.168.102.101:1880”。

Node-RED界面

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

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

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

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

MQTT输入端参数

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

Node-RED接收到MQTT信息

三、利用Dashboard模块呈现MQTT数据

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

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

图表连线

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

Chart参数设置

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

图表的排列

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

图表运行效果

四、Node-RED的拓展应用

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

本文为2018 年度温州市中小学校科技创新项目《<物联网与科学探究创意实验>课程的开发》的阶段性成果，项目编号：2018ZXX01。