首页|资源下载
登录|注册

您现在的位置是:首页 > 技术阅读 >  可视化界面开发Node-RED【03】——框架介绍及数据流部署

可视化界面开发Node-RED【03】——框架介绍及数据流部署

时间:2022-09-27

Node-RED框架介绍及数据流部署

Node-RED介绍与登入功能等基础内容在前面已经介绍过了,今天我们就来学习开源可视化开发工具Node-RED具体框架介绍以及第一条数据流的部署。


1


界面框架介绍

数据流的编辑界面由四部分组成。最左边是已定义的各种node的列表,我们称之为控件区。中间是一个工作区,用户可以拖放node到工作区来创建node的实例,Node-Red为每个node实例赋予了唯一的ID,通过双击node实例来编辑单个实例,通过连接node的in和out创建数据流,node实例会记录out口连线的信息,每条线会记录目标node实例的信息最右边是debug node的输出区及node的帮助信息显示区。右上角有“部署”按钮,用来把编写的程序保存到本地并执行。


2


第一条数据流的部署

基本上所有与编程相关的教程总是喜欢从hello world开始,所以node-red第一条数据流的部署也从此开始。

(1)拖拽输入与输出节点:

进入Node-RED后将控件区内的输入节点“inject”与输出节点“debug”,使用鼠标左键拖入工作区内。拖入以后发现“inject”变成了“时间戳”,“debug”变成了“msg.payload”,这是正常现象。如果你的计算机或是树莓派运行在英文环境下,理所当然,工作区内的节点的名字会变成英文。

(2)更改节点配置:

双击时间戳节点,进入节点配置界面

点击内容选项后的下拉菜单(小三角形),在菜单中选择文字列,并在输入框中输入“hello world”。

可以看到此时“时间戳”节点名字显示成“hello world”。

(3)连接输入节点与输出节点:

在node-red中用“flow”来表示数据的流向,中文意思是“数据流”,即为数据从输入节点流向输出节点。使用鼠标按住左键,从上图接口1连接到接口2,即可完成输入输出的节点连接。用一条线连接输入输出节点,大概是最简单最直观的构建数据流的方式了。

(4)节点部署:
部署按钮位于界面右上角,下拉菜单有如下几项:

单击部署后,显示部署成功

(5)调试:
时间戳节点左侧有一个小按钮,点击按钮可以手动注入消息,注入的消息为输入节点的文字列。在点击时间戳节点的按钮之前,必须确保debug节点是可用的,即按钮必须是“伸出来”的,如蓝框2,而不是像蓝框3一样“缩回去”,按钮“缩回去”的debug节点不工作。点击按钮可以切换节点是否工作。

点击时间戳节点左侧按钮发送消息,点击右上角调试窗口,即小爬虫按钮查看输出的消息。




3


手动编辑JSON格式输出

在时间戳节点中,输入的内容不仅可以选择输入文本列、数字等,还能以JSON格式输出,手动编辑JSON格式的代码即可通过JSON格式输出消息。

点击图中内容行蓝色框标出的三个点处,进入JSON编辑器。输入JSON格式代码:

输入后,点击格式化JSON可检测是否输入有误。完成后点击部署。点击时间戳左侧按钮,发送JSON格式消息,会在调试窗口显示图中消息。


往期回顾