两种借助node-red达到数据交互可视化的方法_node-red dashboard

        我们实现了从边缘网关到mqtt broker再通过node-red到时序数据库influxdb，最后通过Grafana进行数据可视化展示。弊端：展示层只是从数据库中查询数据进行展示，是无法来试试控制的。也就是说无法从web页面进行开关灯的控制。但其实node-red作为低代码平台，是可以直接进行web控制的，也可以直接与设备端进行modbus交互。本文介绍这两种方法。

        一、直接使用node-red进行可视化数据显示和控制

和之前一样，创建一个虚拟仿真，并且运行虚拟机。 打开node-red：http://IP:1880，首先在node-red中的节点管理中安装node-red-dashboard。安装好了后在左侧会多出来dashboard的节点。

安装完成之后在左侧会出现新的节点名称：

在左侧dashboard中分别拖拽gauge、char类型节点进来，数据从之前订阅eqmx获得的边缘网关的数据而来。如下图，每个传感器项分别对应一个函数和展示的gauge或者chart。

注意：我们的数据此时依旧走在串口，借助串口转网口软件走在网络上，并且在重新启动虚拟机时与emqx远程链接的时间要修改IP，否则连接失败会导致数据不能接收（看不到数据）。

 

根据不同的传感器修改相应的函数values类型：

这里需要连续点击两次“笔”，进入到最里面，选择新建Tab并自己命名为易于理解的group名。

为不同的传感器节点命名不同的Tab类型以作区分，在最后的视图上可以显示出来不同的布局。

 

仪表盘类型：

 

折线图类型：

 

 

 

 设置完成后部署并点击瓢虫图标可以看到接收到网关上传来的数据（这里为了数据稳定我使用的是定值，折线图为了观看更直观可以将相应的虚拟仿真上的传感器改为随机值）：

右上角找到dashboard图标，点击就可以看到布局结构

 

 边缘网关上、虚拟仿真上的数据一一对应（没有全部列出来）：

 

        二、直接使用node-red与设备进行modbus交互

 这种做法省略了neuron网关这层，其实也就是用node-red来做网关。

新启用一个Modbus-slaver，配置一个二氧化碳的模拟值，配置方案为modbus-TCP，端口号改为5556。

在数据流中建立如下节点，拖拽一个inject节点，设置周期性触发，3秒一次，来进行3秒一次的modbus查询。

 

其函数节点代码如下，这里以485类型的二氧化碳为例，之前分析过，其ID/地址为2，功能码为3，寄存器查询起始地址为0，查询长度为1，这里的js代码就是将这个查询的字节代码进行输出。 

 

将函数节点设定的modbus查询指令的数据送到tcp节点，这里拖拽一个tcp request节点，其设置如下，连接到运行虚拟仿真的ip的电脑上，为了以之前使用neuron获取数据的例子区别，这里使用5556端口。之后运行网口转串口的程序记得用5556端口。 

function函数：数据流得到co2设备的modubs响应后，需要取解析数据，其解析数据的函数节点代码如下，将[3]、[4]的字节组合成两字节数据值。

最后将这个值传递给chart节点，这个节点是ui节点，所以需要设置其group，即新建一个Tab。

这样部署后，在ui界面左上角就可以看点击查看两个垂直的Tab：

切换成直接交互的UI页面：