Node-REDのボタンを使用した自作ノードのサンプル

概要

Node-REDでInjectionノードやdebugノードに使用されているボタン搭載したシンプルなボタンのノードを作成しました。

初めてノードを作る場合は、こちらのサイトを参照してください。
Nod-RED日本ユーザ会: https://nodered.jp/docs/creating-nodes/
Node-REDのノードをつくる手順: http://qiita.com/zuhito/items/1c65fdbb3743d9f87edd

このページは、作成したノードにボタンを付けたい時の説明になります。

基本情報

パッケージの名前: node-red-contrib-helloworld-button
github: https://github.com/NaotakaSaito/node-red-contrib-helloworld-button
npm: https://www.npmjs.com/package/node-red-contrib-helloworld-button

インストール方法

npm install node-red-contrib-helloworld-button

解説

ノードの説明

node-red-contrib-helloworld-buttonには２つのノードが含まれています。

ノード	機能
helloworld-button	ボタンを押すと"hello world"と出力します。
helloworld-button2	ボタンを押すとenable/disableが切り替わります。enableの時は、"hello world2"と1秒間隔に出力されて、disableの時は何も出力されません。

helloword-buttonの説明

HTML側からボタンを押すとREST APIでJavaScriptにトリガーが送信されます。
$.ajaxのあたりです。

html側

helloworld-button.html

<script type="text/javascript">
    RED.nodes.registerType('helloworld-button',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:""}
        },
        inputs:0,
        outputs:1,
        icon: "arrow-in.png",
        label: function() {
            return this.name||"helloworld-button";
        },
        button: {
            enabled: function() {
                return !this.changed
            },
            onclick: function() {
                if (this.changed) {
                    return RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.undeployedChanges")}),"warning");
                }
                var label = (this.name||"helloworld-button");
                var node = this;
                $.ajax({
                    url: "helloworld-button/"+this.id,
                    type:"POST",
                    success: function(resp) {
                        RED.notify(node._("helloworld-button.success",{label:label}),"success");
                    },
                    error: function(jqXHR,textStatus,errorThrown) {
                        if (jqXHR.status == 404) {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.not-deployed")}),"error");
                        } else if (jqXHR.status == 500) {
                            RED.notify(node._("common.notification.error",{message:node._("inject.errors.failed")}),"error");
                        } else if (jqXHR.status == 0) {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.no-response")}),"error");
                        } else {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.unexpected",{status:jqXHR.status,message:textStatus})}),"error");
                        }
                    }
                });
            }
        }
    });
</script>

<script type="text/x-red" data-template-name="helloworld-button">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="helloworld-button">
    <p>helloworld-button node is simple node with button that just say "helo world".</p>
</script>

JavaScript側

JavaScript側はHTMLからのトリガーを受けて、"hello world"を出力します。
RED.httpAdmin.post...のあたりが、HTMLからトリガーを受けるコードになっています。

helloworld-button.js

module.exports = function(RED) {
    var node;
    function HelloWorldButton(config) {
        RED.nodes.createNode(this,config);
        node = this;

    }
    RED.nodes.registerType("helloworld-button",HelloWorldButton);

    RED.httpAdmin.post("/helloworld-button/:id", RED.auth.needsPermission("helloworld-button.write"), function(req,res) {
        var addminNode = RED.nodes.getNode(req.params.id);
        if (addminNode != null) {
            try {
                addminNode.receive();
                node.send({payload:"hello world"});
                res.sendStatus(200);
            } catch(err) {
                res.sendStatus(500);
                addminNode.error(RED._("helloworld-button.failed",{error:err.toString()}));
            }
        } else {
            res.sendStatus(404);
        }
    });
}

helloword-button2の説明

helloworld-button2は、このように、REST APIでenable, disableの状態をJavaScript側に送信しています。

helloworld-button2.html

    $.ajax({
    url: "debug/"+this.id+"/"+(this.active?"enable":"disable"),
    type: "POST",

RESTされたenable/disableの状態を受け取って、node.js側のnode.activeの値を変更しています。

helloworld-button2.js

RED.httpAdmin.post("/helloworld-button2/:id/:state", RED.auth.needsPermission("helloworld-button2.write"), function(req,res) {
    var node = RED.nodes.getNode(req.params.id);
    var state = req.params.state;
    if (node !== null && typeof node !== "undefined" ) {
        if (state === "enable") {
            node.active = true;
            res.sendStatus(200);
        } else if (state === "disable") {
            node.active = false;
            res.sendStatus(201);
        } else {
            res.sendStatus(404);
        }
    } else {
        res.sendStatus(404);
    }
});

おまけ

debugノードのボタンは、OFFの時に半分隠れたり、ONの時はすべて表示されたりしますが、この機能はNode-REDの内部で制御されていて、右側にボタンを配置した時にしかできないようでした。