本文参考官方网站示例
1. 如果什么都不懂,参考我的package.json 。
2. 首先我们必须在 package.json 中添加 node-red 的部分
{ "name": "node-red-lower-case", "version": "1.0.0", "description": "自定义node-red节点 小写转化", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "node-red" : { "nodes": { "lower-case": "lower-case.js" } } }
3. 除了这个,项目中还必须包含一个 js 和html 文件,也就是上面指示的lower-case.js
lower-case.js 文件
module.exports = function(RED) { // RED 可以对node-red 进行访问 function LowerCaseNode(config) { RED.nodes.createNode(this,config); // 节点本身就会对调用该函数,包括节点输入的属性 var node = this; node.on('input', function(msg) { // 对消息进行处理 消息到达节点时,事件侦听就会启动,进行消息转化 msg.payload = msg.payload.toLowerCase(); node.send(msg); // 输出的消息 如果msg为空则不发任何消息 也可以进行多个发送,node.send([msg1,msg2]) }); } RED.nodes.registerType("lower-case",LowerCaseNode); }
lower-case.html 文件
<script type="text/javascript"> RED.nodes.registerType('lower-case',{ // 节点的类型必须和上面注册的类型匹配 RED.nodes.registerType category: 'function', // 节点调色板的类别 color: '#a6bbcf', // 使用的背景颜色 defaults: { // 节点可编辑的属性 name: {value:""} }, inputs:1, // 节点有多少输入 0 或者 1 outputs:1, // 节点有多少输出 0 或者更多 icon: "file.png", // 要使用的图标 label: function() { // 工作空间中要使用的标签 return this.name||"lower-case"; } }); </script> <script type="text/x-red" data-template-name="lower-case"> <!--date-template-name 编辑模板,用户定义节点的编辑对话框内容,值对节点类型进行绑定 和上面的registerType 中类型进行匹配--> <div class="form-row"> <label for="node-input-name"><i class="icon-tag"></i> Name</label> <!--node-input 后面的名字和defaults 中的名字相同--> <input type="text" id="node-input-name" placeholder="Name"> <!--id 值和for 中的值相同--> </div> </script> <script type="text/x-red" data-help-name="lower-case"> <!--对应的帮助文档--> <p>A simple node that converts the message payloads into all lower-case characters</p> <!--姐i单的提示信息--> </script>
上面是最简单的用法,现在我们使用复杂的用法进行升级改造,包括tab 的使用 简单示范本文参考mysql 的使用
<i> 中使用的图标库 https://fontawesome.com/v4.7.0/icons/
其中 RED.nodes.registerType 注册的节点名称不要重名,负责会出现异常情况
重要的就是 节点中,相当于也可以创建节点,但是这个节点也是需要进行注册的,也就是说其实这个节点,仍然是在RED 中,如下图红色部分
js 文件
module.exports = function(RED) { // RED 可以对node-red 进行访问 function LowerCaseNode(config) { RED.nodes.createNode(this,config); // 节点本身就会对调用该函数,包括节点输入的属性 var node = this; node.on('input', function(msg) { // 对消息进行处理 消息到达节点时,事件侦听就会启动,进行消息转化 msg.payload = msg.payload.toLowerCase(); // 获取所有的值 var mydb = RED.nodes.getNode(config.mydb); // 获取节点 也就是这个节点里面包含的节点 msg.payload = "name =" + config.name +"{"+ "host="+ mydb.host +"port="+ mydb.port + "user="+ mydb.credentials.user + "password="+ mydb.credentials.password + "}"; node.send(msg); // 输出的消息 如果msg为空则不发任何消息 也可以进行多个发送,node.send([msg1,msg2]) }); } function MySQLNode(n) { RED.nodes.createNode(this,n); this.host = n.host; this.port = n.port; this.tz = n.tz || "local"; this.connected = false; this.connecting = false; this.dbname = n.db; this.setMaxListeners(0); var node = this; } RED.nodes.registerType("MySQLdatabase1",MySQLNode, { credentials: { user: {type: "text"}, password: {type: "password"} } }); RED.nodes.registerType("lower-case",LowerCaseNode); }
html 文件
<script type="text/javascript"> RED.nodes.registerType('lower-case',{ // 节点的类型必须和上面注册的类型匹配 RED.nodes.registerType category: 'function', // 节点调色板的类别 或者字符串 color: '#a6bbcf', // 使用的背景颜色 defaults: { // 节点可编辑的属性 name: {value:""}, mydb: {type:"MySQLdatabase1",required:true} }, align: 'right', // 对齐方式 inputs:1, // 节点有多少输入 0 或者 1 outputs:1, // 节点有多少输出 0 或者更多 outputLabels: ["1","2","3"], // 输出节点 鼠标放上去之后显示的内容 icon: "file.png", // 要使用的图标 label: function() { // 工作空间中要使用的标签 就是节点的标签 return this.name||"lower-case"; }, oneditprepare: function () { // 创建tab var tabs = RED.tabs.create({ id: "node-input-tabs", <!--绑定tab位置--> onchange: function (tab) { <!--菜单的内容--> $("#node-input--tabs-content").children().hide(); $("#" + tab.id).show(); } }); tabs.addTab({ id: "database-query", label: "SQL query" }); tabs.addTab({ <!--添加菜单--> id: "database-content", <!--绑定的div id--> label: "connection" <!--菜单名称--> }); } }); </script> <script type="text/javascript"> RED.nodes.registerType('MySQLdatabase1',{ category: 'config', defaults: { host: {value:"localhost",required:true}, port: {value:"3306",required:true}, //user: {value:"",required:true}, //pass: {value:"",required:true}, db: {value:"",required:true}, tz: {value:""} }, credentials: { user: {type: "text"}, password: {type: "password"} }, label: function() { return this.db; } }); </script> <script type="text/x-red" data-template-name="lower-case"> <!--模板 就是对应上面注册的节点类型--> <div class="form-row"> <label for="node-input-name"><i class="icon-tag"></i> Name</label> <!--node-input 后面的名字和defaults 中的名字相同--> <input type="text" id="node-input-name" placeholder="Name"> <!--id 值和for 中的值相同--> </div> <br/> <div class="form-row"> <label for="node-input-mydb"><i class="fa fa-database"></i> Database</label> <input type="text" id="node-input-mydb"> </div> <br/> <div class="form-row"> <ul style="background: #fff; min- 600px; margin-bottom: 20px;" id="node-input-tabs"></ul> </div> <div id="node-input--tabs-content" style="min-height: 170px;"> <!--菜单内容--> <div id="database-query" style="display:none"> <div class="form-row"> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label> <input type="text" id="node-input-server"> </div> </div> <div id="database-content" style="display:none"> <div class="form-row"> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label> <input type="text" id="node-input-server"> </div> <br/> <div class="form-row"> <label for="node-input-port"><i class="fa fa-tag"></i> Port</label> <input type="text" id="node-input-port" placeholder="Port"> </div> </div> </div> </script> <script type="text/x-red" data-template-name="MySQLdatabase1"> <!--模板 就是对应上面注册的节点类型--> <div class="form-row"> <label for="node-config-input-host"><i class="fa fa-globe"></i> Host</label> <input type="text" id="node-config-input-host"> </div> <div class="form-row"> <label for="node-config-input-port"><i class="fa fa-random"></i> Port</label> <input type="text" id="node-config-input-port"> </div> <div class="form-row"> <label for="node-config-input-user"><i class="fa fa-user"></i> User</label> <input type="text" id="node-config-input-user"> </div> <div class="form-row"> <label for="node-config-input-pass"><i class="fa fa-lock"></i> Password</label> <input type="password" id="node-config-input-password"> </div> <div class="form-row"> <label for="node-config-input-db"><i class="fa fa-database"></i> Database</label> <input type="text" id="node-config-input-db"> </div> <div class="form-row"> <label for="node-config-input-tz"><i class="fa fa-clock-o"></i> Timezone</label> <input type="text" id="node-config-input-tz"> </div> </script> <script type="text/x-red" data-help-name="lower-case"> <p>A simple node that converts the message payloads into all lower-case characters</p> <!--姐i单的提示信息--> </script>