所有示例均在gihub(ssh_base)中====>https://github.com/chengyangyang

自定义node-red节点 超级详细示例解读

 

　　本文参考官方网站示例

　　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-width: 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>

 

 

　

posted @ 2019-07-11 11:43  ☞书香门第☜  阅读(6126)  评论(0)  编辑  收藏  举报
http://count.knowsky.com/count1/count.asp?id=434520&sx=1&ys=64"