自定義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>