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

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格式输出