node-red创建节点
- 1.1JavaScript file
- 1.1.1 节点构造函数
- 1.1.2 接收消息
- 处理错误
- 1.1.2 发送消息
- 多个输出
- 多条消息
- 超时行为
- 1.1.3 记录事件
- 1.1.4 设置状态
- 1.1.5 自定义节点设置
- 向编辑器公开设置
- 1.2HTML File
- 1.2.1 简介
- 1.2.2 定义节点
- 1.2.3 节点定义
- 1.2.4 编辑对话框
- 1.2.5 帮助文本
- 1.3Packaging
- 1.3.1 命名
- 1.3.2 目录结构
- 1.3.3 在本地测试节点模块
- 1.3.4 package.json
- 1.3.5 添加到 flow.nodered.org
- 1.4节点的属性
- 1.4.1 属性定义
- 1.4.2 保留的属性名称
- 1.4.3属性验证
- 1.4.4 属性编辑对话框
- 1.4.5 自定义编辑行为
- 1.5节点的凭据
- 1.5.1:添加一个新credentials条目
- 1.5.2 访问凭据
- 运行时使用凭证
- 编辑器内的凭证
- 1.6节点的外观
- 1.6.1 图标
- 自定义图标
- 1.6.2 背景色
- 1.6.3 标签
- 节点标签
- 调色板标签
- 标签样式
- 1.6.4 节点
- 1.6.5 端口标签
- 1.6.6 按钮
- 1.7配置节点
- 1.7.1 定义配置节点
- remote-server.html
- remote-server.js
- 1.7.2 使用配置节点
- 1.8节点编辑对话框
- 1.8.1 按钮
- 普通按钮
- 小按钮
- 组合按钮
- 1.9节点上下文
- 1.9.1 创建:
- 流
- 全局
- 节点
- 1.10示例流程
1.1JavaScript file
.js文件定义节点的运行时行为
1.1.1 节点构造函数
RED.nodes.createNode函数用来初始化所有节点共享的特征。之后,特定于节点的代码就存在了。
function SampleNode(config) {
RED.nodes.createNode(this,config);
// node-specific code goes here
}
RED.nodes.registerType("sample",SampleNode);
1.1.2 接收消息
节点在事件上注册一个侦听input器以接收来自流中上游节点的消息,在 Node-RED 1.0 中,允许节点在处理完消息后通知运行。这为侦听器函数添加了两个新参数。
需要注意确保节点仍然可以安装在不使用这种新样式的侦听器的 Node-RED 0.x 中。
处理错误
当节点在处理消息时遇到错误,会将错误的信息传送给done函数,同样,如果节点安装在不提供该done功能的 Node-RED 0.x 中,需要注意。在这种情况下,它应该使用node.error:
1.1.2 发送消息
如果节点位于流程的开始并生成消息以响应外部事件,则它应该使用sendNode 对象上的函数:
var msg = { payload:"hi" }
this.send(msg);
如果节点想要从input事件侦听器内部发送,为了响应接收消息,它应该使用send传递给侦听器函数的函数:
send = send || function() { node.send.apply(node,arguments) }
如果msg为空,则不发送消息。
多个输出
如果节点有多个输出,则可以将一组消息传递给send,每个消息都发送到相应的输出。
this.send([ msg1 , msg2 ])
多条消息
通过在此数组中传递消息数组,可以将多条消息发送到特定输出:
this.send([ [msgA1 , msgA2 , msgA3] , msg2 ]);
超时行为
如果运行时间超过 15 秒,则运行时将使节点超时。错误将被记录,运行时将继续操作。
1.1.3 记录事件
如果节点需要将某些内容记录到控制台,它可以使用以下功能之一:
warn和error消息也被发送到流编辑器debug选项卡。
1.1.4 设置状态
在运行时,节点能够与编辑器UI共享状态信息。这可以通过调用status函数来实现:
this.status({fill:"red",shape:"ring",text:"disconnected"});
1.1.5 自定义节点设置
节点可能希望在用户settings.js文件中公开配置选项。
任何设置的名称必须遵循以下要求:
- 该名称必须以相应的节点类型为前缀。
- 设置必须使用驼峰式 - 更多信息见下文。
- 节点不能要求用户设置它——它应该有一个合理的默认值。
例如,如果节点类型sample-node想要公开一个名为 colour的设置,则设置名称应该是sampleNodeColour。在运行时中,节点可以将设置引用为 RED.settings.sampleNodeColour。
向编辑器公开设置
在某些情况下,节点可能希望将设置的值公开给编辑器。如果是这样,该节点必须注册该设置作为其调用的一部分registerType:
1.2HTML File
1.2.1 简介
.html文件定义节点在编辑器中的显示方式。它包含三个不同的部分,每个部分都包含在自己的<script>标签中:
- 向编辑器注册的主节点定义。这定义了诸如调色板类别、可编辑属性 ( defaults) 和要使用的图标等内容。它位于常规的 javascript 脚本标记中
- 定义节点编辑对话框内容的编辑模板。它在 type 的脚本中定义,text/html并data-template-name设置为node 的类型。
- 信息侧边栏选项卡中显示的帮助文本。它在 type 的脚本中定义,text/html并data-help-name设置为 node 的类型。
1.2.2 定义节点
.使用该RED.nodes.registerType 功能向编辑器注册节点。这个函数有两个参数;节点的类型及其定义:
节点类型
节点类型在整个编辑器中用于标识节点。
1.2.3 节点定义
节点定义包含编辑器所需的有关节点的所有信息。它是一个具有以下属性的对象:
- category: (string) 节点出现的调色板类别
- defaults: (object) 节点的可编辑属性。
- credentials: (object) 节点的凭证属性。
- inputs: (number) 节点有多少输入,要么0要么1。
- outputs: (number) 节点有多少个输出。可以0或更多。
- color: (string) 要使用的背景颜色。
- paletteLabel: (string|function)调色板中使用的标签。
- label: (string|function) 在工作区中使用的标签。
- labelStyle: (string|function)应用于标签的样式。
- inputLabels: (string|function)在悬停时添加到节点输入端口的可选标签。
- outputLabels: (string|function)在悬停时添加到节点输出端口的可选标签。
- icon:(字符串)要使用的图标。
- align:(字符串)图标和标签的对齐方式。
- button: (object)在节点的边缘添加一个按钮。
- oneditprepare: (函数)在构建编辑对话框时调用。
- oneditsave: (函数)在编辑对话框正常时调用。
- oneditcancel: (函数)在取消编辑对话框时调用。
- oneditdelete: (函数)在配置节点的编辑对话框中的删除按钮被按下时调用。
- oneditresize: (函数)在调整编辑对话框大小时调用。
- onpaletteadd: (函数)在将节点类型添加到调色板时调用。
- onpaletteremove: (函数)从调色板中删除节点类型时调用。
1.2.4 编辑对话框
1.2.5 帮助文本
1.3Packaging
1.3.1 命名
如果您要分叉现有包以提供修复,您可以保留相同的名称,但在您自己的范围内发布。但是请记住,如果原始维护者对您的贡献没有响应,分叉应该始终是最后的手段。
1.3.2 目录结构
对包中使用的目录结构没有严格的要求,比如在新建节点中只用到了图中红框三个文件,但要是以后用的多了,就必须严格按照这个流程来。
如果一个包包含多个节点,它们可以都存在于同一个目录中,或者它们可以各自放置在它们自己的子目录中。示例文件夹必须位于包的根目录中。
1.3.3 在本地测试节点模块
这和刚开始创建新的文件有所不同,是每次在新建大目录中都要重新测试一次。在您的 node-red 用户目录中,通常~/.node-red运行。
npm install <path to location of node module>
1.3.4 package.json
1:除了通常的条目外,该package.json文件还必须包含一个node-red 条目,该条目列出了.js包含要加载的运行时节点的文件。
2:如果单个文件中有多个节点,则只需列出该文件一次。
3:如果任何节点依赖于其他 npm 模块,则它们必须包含在dependencies属性中。类似于之前创建新节点的时候,在package.json中所添加的:
4:为了帮助在 npm 存储库中发现节点,该文件应包含node-red在其keywords属性中。这将确保包在按关键字搜索时出现。
当你要发布的时候,就要添加node-red程序。
"keywords": [ "node-red" ],
1.3.5 添加到 flow.nodered.org
自 2020 年 4 月起,Node-RED 流库 不再能够使用node-red关键字自动索引和更新在 npm 上发布的节点。相反,必须手动提交提交请求。
为此,请确保满足所有打包请求。要将新节点添加到库中,请单击库页面+顶部的按钮 ,然后选择“节点”选项。该按钮将您带到 “添加节点”页面。此处重复了需求列表并描述了将其添加到库中的步骤。
1.4节点的属性
节点的属性defaults由其 html 定义中的对象定义。这些是在运行时创建节点实例时传递给节点构造函数的属性。在创建第一个节点部分的示例中,节点有一个名为name.
在本节中,我们将添加一个名为prefix节点的新属性:
1:向对象添加新条目defaults:
2:向节点的编辑模板添加条目
模板应该包含一个元素,其id设置为node-input-。
3:使用节点中的属性
使用此节点的属性,并不是在一开始创建的新节点中的.htlm文件中,而是在lower-case.js文件中。
1.4.1 属性定义
对象中的条目defaults必须是对象,并且可以具有以下属性:
- value:(任何类型)属性采用的默认值
- required: (boolean)可选属性是否是必需的。如果设置为 true,则如果其值为 null 或空字符串,则该属性将无效。
- validate: (function) optional可用于验证属性值的函数。
- type: (string)可选,如果此属性是指向 配置节点的指针,则它标识节点的类型。
这些属性在如下显示:
1.4.2 保留的属性名称
有一些不能使用的属性的保留名称。这些是:
- 任何单个字符 - x, y, z, d, g,l都已使用。其他保留以供将来使用。
- id, type, wires, inputs,outputs
1.4.3属性验证
如果给出了无效值,编辑器会尝试验证所有属性以警告用户。
该required属性可用于指示属性必须为非空且非空白。
如果需要更具体的验证,该validate属性可用于提供一个检查值是否有效的函数。该函数被传递了值,并且应该返回 true 或 false。它在节点的上下文中被调用,这意味着this可以用来访问节点的其他属性。这允许验证依赖于其他属性值。编辑节点时,this对象反映节点的当前配置,而不是当前表单元素值。验证器函数应尝试访问属性配置元素并将this对象作为后备以实现正确的用户体验。
提供了一组常见的验证功能。
- RED.validators.number()- 检查值是一个数字
- RED.validators.regex(re)- 检查值是否与提供的正则表达式匹配
两种方法 -required属性和validate属性 - 都以相同的方式由 UI 反映。当值无效或缺失时,节点上的缺失配置标记被触发,相应的输入被红色包围。
以下示例显示了如何应用这些验证器:
请注意,该custom属性仅在其长度大于minimumLength属性的当前值或 minimumLength 表单元素的值时才有效。
1.4.4 属性编辑对话框
打开编辑对话框时,编辑器会使用节点的编辑模板填充对话框。
对于默认数组中的每个属性,它将查找一个元素,其id设置为node-input-,或者在配置节点中设置为node-config-input-。然后,该输入将自动填充该属性的当前值。当编辑对话框关闭时,该属性接受输入中的任何值。
1.4.5 自定义编辑行为
默认行为在许多情况下都有效,但有时需要定义一些特定于节点的行为。例如,如果无法将属性正确地编辑为简单的or ,或者编辑对话框内容本身需要根据选择的选项具有某些行为。
一个节点定义可以包括两个自定义编辑行为的函数。
- oneditprepare在显示对话框之前立即调用。
- oneditsave当编辑对话框被确定时被调用。
- oneditcancel在取消编辑对话框时调用。
- oneditdelete当按下配置节点的编辑对话框中的删除按钮时调用。
- oneditresize在调整编辑对话框的大小时调用。
其中第一个oneditprepare比较常用。
1.5节点的凭据
节点凭据类似于安全访问,在做完以下操作的时候,会出现以下弹窗:
1.5.1:添加一个新credentials条目
在节点的定义中添加一个新credentials条目:
2:将合适的条目添加到节点的编辑模板
3:在节点的文件中,必须更新对 .js的调用以包含凭据:RED.nodes.registerType
其中因为username和password没有在function下用到,所以以下两个关键字为灰色。
1.5.2 访问凭据
运行时使用凭证
在运行时中,节点可以使用以下credentials 属性访问其凭据:
其中因为username和password没有在function下用到,所以以下两个关键字为灰色。
编辑器内的凭证
在编辑器中,节点对其凭证的访问受到限制。任何类型text的都在属性下可用credentials- 就像它们在运行时一样。但类型的凭据password不可用。取而代之的是,存在一个相应的布尔属性has_<property-name>,用于指示凭证是否具有分配给它的非空白值。
这个类似于上个节点属性中的:
1.6节点的外观
1.6.1 图标
节点的图标icon由其定义中的属性指定。属性的值可以是字符串或函数。如果值为字符串,则将其用作图标。如果该值是一个函数,它将在第一次加载节点时进行评估,或者在它被编辑之后。该函数应返回用作图标的值。
icon: "file.png",
如果想改图片的类型,可以尝试以下的:
其改变的就是图中红框的图标;
自定义图标
icons节点可以在与其.js 和.html文件一起调用的目录中提供自己的图标。当编辑器查找给定的图标文件名时,这些目录会被添加到搜索路径中。因此,图标文件名必须是唯一的。
图标应为透明背景上的白色,纵横比为 2:3,尺寸至少为 40 x 60。
1.6.2 背景色
color: "#a6bbcf",
如果想改变,可以尝试以下这些常用的颜色;
1.6.3 标签
一个节点有四个标签属性;label, paletteLabel,outputLabel和inputLabel。
节点标签
调色板标签
就是标签的名字
标签样式
1.6.4 节点
align: 'right',
用来看图中红框在左边还是右边。
1.6.5 端口标签
节点可以在其输入和输出端口上提供标签,通过将鼠标悬停在端口上可以看到这些标签。
1:这些可以由节点的 html 文件静态设置:
但是要记得把outputs改成3
2:或由函数生成,传递一个索引以指示输出引脚(从 0 开始)。
当执行完成以后,节点如图所示:
1.6.6 按钮
其定义中的button属性用于描述按钮的行为。它必须至少提供一个onclick在单击按钮时将调用的函数。
1:
2:该属性还可以定义一个enabled函数来根据节点的当前配置动态启用和禁用按钮。类似地,它可以定义一个visible函数来确定是否应该显示按钮。
其中红框为禁用的语句,在第一步骤中不需要加红色的语句,但是如果想禁用就可以用,但是需要加自己的语句,图中黄框就是。
在没加之前,如下图所示,在加了以后,如图红色消失。
3:也可以将button其配置为切换按钮 - 如 Debug 节点所示。这是通过添加一个名为的属性来完成的,该属性toggle标识节点defaults对象中的一个属性,该属性应用于存储一个布尔值,该值在按下按钮时切换。
1.7配置节点
配置节点的常见用途是表示与远程系统的共享连接。
1.7.1 定义配置节点
配置节点的定义方式与其他节点相同。有两个关键区别:
- 它的category属性设置为config
- 编辑模板元素的 ID 为node-config-input-<propertyname>
新建两个文件:remote-server.html和remote-server.js
remote-server.html
remote-server.js
在执行这步操作的时候,还需要在第二个script中添加以下代码:
<div class="form-row node-input-server">
<label for="node-input-server"><i class="fa fa-random"></i> <span data-i18n="server.label">配置</span></label>
<input type="text" id="node-input-server" placeholder="">
</div>
1.7.2 使用配置节点
节点通过向defaults 数组添加属性来注册它们对配置节点的使用,并将type属性设置为配置节点的类型。
此处的使用是在我建的节点中使用,并不是在刚刚新建的两个文件中复制粘贴。
然后该节点可以使用此属性来访问运行时中的配置节点.这并不是在新建的文件中复制以下文件,而是在我之前的节点中加:
这些都做完以后,并不会出现想要的效果(黄框的图标),还要在以下文件中添加此代码;
"remote-server":"remote-server.js"
1.8节点编辑对话框
节点的编辑对话框是用户可以配置节点以执行他们想要的操作的主要方式。与其他节点相比,对话框应该使用直观,并且在设计和外观上保持一致。编辑对话框在节点的 HTML 文件中提供,位于 <script>标签内:
- <script>标签应该有一个type-这text/html将帮助大多数文本编辑器提供正确的语法突出显示。当节点加载到编辑器中时,它还可以防止浏览器将其视为正常的 HTML 内容。
- 标签的data-template-name应该设置为编辑对话框所对应的节点的类型。这就是编辑器如何知道在编辑特定节点时要显示什么内容。
编辑对话框通常由一系列行组成 - 每行包含一个标签和不同属性的输入: - 每行由一个<div>with 类创建form-row
- 一个典型的行将有一个包含一个图标和属性名称,后跟一个<input>。该图标是使用一个元素创建的,该元素的类取自Font Awesome 4.7中可用的类。
- 包含该属性的表单元素的 id 必须为node-input-<propertyname>。在配置节点的情况下,id 必须是node-config-input-<property-name>。
- 该<input>类型可以是text字符串/数字属性,也 可以checkbox是布尔属性。或者,如果有一组受限的选择,则可以使用一个元素。
1.8.1 按钮
普通按钮
小按钮
组合按钮
以下语句是用来填写水印的
1.9节点上下文
节点可以在其上下文对象中存储数据。一个节点可以使用三个上下文范围:
- 节点 - 仅对设置值的节点可见
- 流 - 对同一流上的所有节点可见(或编辑器中的选项卡)
- 全局 - 对所有节点可见
与提供预定义变量来访问这些上下文的 Function 节点不同,自定义节点必须自己访问这些上下文:
1.9.1 创建:
流
传建一个如图所示得流:
两个函数的节点如图所示:
上边函数:
下边函数:
这两个函数就是实现的流之间的节点上下文------对同一流上的所有节点可见(或编辑器中的选项卡)。
ps:以下图片中也是实现对流中节点的上下文:
例如两个红色的节点可以设置相应的函数,实现流的上下文。
全局
对于全局的上下文,也是可以通过上边的方法进行设置的,这需要在建一个流程二,然后在流程2中重新建一个流,按照流的一样操作,只需要将书写函数中的flow变成global即可。
节点
红色是第一步,先进行红色 变量,然后进行绿色把运行频率改成设置的变量abc,最后出现黄色结果。
注意:后期可以看看节点上下文最后的函数编写指南,学习更深入的知识。
1.10示例流程
示例流程就相当于复制粘贴,只不过是复制粘贴了整个流程图。
首先要在新建文件夹里,创建个examples文件夹,然后在examples文件夹里创建一个My Great Example.json文件夹。
在打开node,然后在node-red界面中进行如下操作;
点击导入,然后在按123步骤走。这样就把导出的文件导出到了我们刚刚创建的json文件夹中。
随后我们导出,就是将这些在复制粘贴出来!