今回はNode-Red Dashboardテンプレートの使用方法について紹介します。
Node-Red Dashboardテンプレートを使用すると標準で用意されているUIよりもリッチで多彩なUIを実現することができます。
テンプレートはAngularJSベースで実装されているため、Angularのスクリプトやhtml記述を利用することができます。
Node-Red上でmsg.payloadの値を受けて表示を変えたり、ボタンを押してmsg.payloadへ値を渡すこともできます。
■要素紹介
・ボタン
<md-button ng-click="send({payload: {index_name:model_name}})" layout-align="start center" >
登録
</md-button>
登録
</md-button>
model_nameには送りたい情報のモデルを入れて使用する
・トグルボタン
<md-switch ng-model="model_enable" ng-change="send({payload: {enable:model_enable}})" layout-align="start center" >
トグルボタン1
</md-switch >
ng-changeを指定することでボタン操作でmsg.payloadに情報が渡される
・数字入力
<input type="number" ng-model="model_id" />
・テキスト入力
<input type="text" ng-model="model_name" />
・日付選択
<input type="date" ng-model="mydate" ng-change="send({payload: mydate})">
■msg.payload受け取り方
・手前のfunctionノード
var nowDate=new Date();
msg.payload=nowDate.toLocaleString("ja-JP",{hour12:false});
return msg;
msg.payload=nowDate.toLocaleString("ja-JP",{hour12:false});
return msg;
・テンプレートノード
<div>
更新日時:{{msg.payload}}
</div>
更新日時:{{msg.payload}}
</div>
timestampボタンを押すと更新日時が表示されます。
■mas.payload送り方
・テンプレートノード
<body>
<input type="number" ng-model="model_id" />
<input type="text" ng-model="model_name" />
<md-button ng-click="send({payload: {index_id:model_id, index_name: model_name}})" layout-align="start center" >
登録
</md-button>
登録
</md-button>
</body>
登録ボタンの際に、数字入力と文字入力のモデルから情報を受け取ってpayloadに格納しています。
■応用編
・表に要素を並べる例
・手前のfunctionノード
var source_array = new Array();
source_array.push({ enable:true, id:1, name:"Name1"});
source_array.push({ enable:false, id:2, name:"Name2"});
msg.payload = source_array;
return msg;
source_array.push({ enable:false, id:2, name:"Name2"});
msg.payload = source_array;
return msg;
・テンプレートノード
<table id="table" border="1" align="center">
<tr>
<th>無効/有効</th>
<th>番号</th>
<th>名</th>
<th>テキスト</th>
<td align="center" colspan="2">
ボタン
</td>
</tr>
<tbody>
<tr ng-repeat="row in msg.payload" align="center">
<td align="center">
<md-switch tr ng-model="row.enable" ng-change="send({payload: {row}})">
</md-switch>
</td>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>
<input tr type="text" ng-model="row.text1" />
</td>
<td>
<md-button tr ng-click="send({payload:[{row},{update:1,delete:0}]})">更新
</md-button>
</td>
<td>
<md-button tr ng-click="send({payload:[{row},{update:0,delete:1}]})">削除
</md-button>
</td>
</tr>
</tbody>
</table>
<tr>
<th>無効/有効</th>
<th>番号</th>
<th>名</th>
<th>テキスト</th>
<td align="center" colspan="2">
ボタン
</td>
</tr>
<tbody>
<tr ng-repeat="row in msg.payload" align="center">
<td align="center">
<md-switch tr ng-model="row.enable" ng-change="send({payload: {row}})">
</md-switch>
</td>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>
<input tr type="text" ng-model="row.text1" />
</td>
<td>
<md-button tr ng-click="send({payload:[{row},{update:1,delete:0}]})">更新
</md-button>
</td>
<td>
<md-button tr ng-click="send({payload:[{row},{update:0,delete:1}]})">削除
</md-button>
</td>
</tr>
</tbody>
</table>
受け取った配列を表として表示することができます。
配列の数に応じて表の行が自動的に変化します。
例えば、データベースやセンサから受け取った情報を並べて表示するといったことができます。
また、表の中のボタンを押すことでボタンを押した行の情報をmsg.payloadとして次のノードに渡すことができます。
Node-Red Dashboardテンプレートを使用するとこのように動的なUIを実現することができます。
今回紹介したNode-Redのフローをこちらから利用できます。
