概要

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の内部で制御されていて、右側にボタンを配置した時にしかできないようでした。