Node-REDの秘密(1) ラジオボタン編

Node-RED の WebGUI 作成には、node-red-dashboard モジュールが便利です。
しかし node-red-dashboard には、ラジオボタン部品がありません。
そこで、ラジオボタンの作成方法を調べてみました。

つぎのGUI画面の最後にあるのは「画像ラジオボタン」の例です。
４番目の画像を選択して、その下にある text3 に選択した「４」を表示しています。

フロー画面はつぎのようになります。

はじめに

Node-REDはIoT向けのビジュアルなフロー記述言語です。

Node-REDとnode-red-dashboardの簡単な紹介は、以前に作成した次の資料を参照ください。
Node-RED紹介（インストールからWebGUI作成）

紹介するラジオボタンの種類　

ラジオボタン作成には、node-red-dashboard の、「template ノード」を使います。

つぎのラジオボタンの作りかたを紹介します。
- ラジオボタン：　（１）単純なラジオボタン、（２）送信ボタン有り、初期値有りのラジオボタン
- 画像ラジオボタン：　複数画像から選択するラジオボタン

ラジオボタン

GUI画面

作成したGUIイメージをつぎに示します。
上側は、ラジオボタンを押すとすぐにフローが流れます。
下段は、ラジオボタンを押したときは何もせずに、送信ボタンを押すと、フローが流れます。

フローとプロパティ

templateノードのtemplate欄

<div>
   <label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_a" value="1" /> 1 </label>
   <label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_a" value="2" /> 2 </label>
   <label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_a" value="3" /> 3 </label>
</div>

templateノードのtemplate欄（送信ボタン有り、初期値有り）

<div ng-init="model_b=2">
   <label> <input type="radio" ng-model="model_b" name="model_b" value="1" /> 1 </label>
   <label> <input type="radio" ng-model="model_b" name="model_b" value="2" /> 2 </label>
   <label> <input type="radio" ng-model="model_b" name="model_b" value="3" /> 3 </label>
   <md-button ng-click="send({payload:model_b})"> 送信 {{model_b}}</md-button>
</div>

画像ラジオボタン

画像ファイルの格納場所

画像ファイルの格納場所は、「ホームディレクトリ/.node-red/node_modules/node-red-dashboard/dist/」です。
「node-red -u 作業ディレクトリ」でnode-red を起動した場合は、「作業ディレクトリ/node_modules/node-red-dashboard/dist/」です。

GUI画面

フロー画面

templateノードのプロパティ

templateノードの template欄

画像ラジオボタンtemplateノードのtemplate欄

<style type="text/css">
<!--
.radio1  {  display: none; }
.radio1 + .radio_image {
    border: 3px #ffffff solid;
    background-color: #ffffff;
}
.radio1:checked + .radio_image {
    border: 3px #ff0000 solid;
    background-color: #ffeeee;
}
-->
</style>
<div>
　　<label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_c" value="1" class="radio1">
       <img src="pict\a.png" class="radio_image" width="100" height="100">
    </label>
    <label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_c" value="2" class="radio1">
       <img src="pict\b.png" class="radio_image" width="100" height="100">
    </label>
    <br> 
　　<label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_c" value="3" class="radio1">
       <img src="pict\c.png" class="radio_image" width="100" height="100">
    </label>
    <label> <input ng-click="send({payload:model_a})" type="radio" ng-model="model_a" name="model_c" value="4" class="radio1">
       <img src="pict\d.png" class="radio_image" width="100" height="100">
    </label>
</div>

Node-RED プログラム

本資料で説明した、３つのラジオボタンを含む Node-RED プログラムを次に示します。Node-RED に読み込んでご利用ください。画像ラジオボタン用の画像は別途用意してください。

[{"id":"2a42b4f0.eed9ac","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"5ad55145.5d088","type":"ui_template","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","name":"","order":1,"width":"0","height":"0","format":"<div>\n   <label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_a\" value=\"1\" /> 1 </label>\n   <label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_a\" value=\"2\" /> 2 </label>\n   <label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_a\" value=\"3\" /> 3 </label>\n</div>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":140,"y":60,"wires":[["5578141a.5bdb4c"]]},{"id":"5578141a.5bdb4c","type":"ui_text","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","order":2,"width":0,"height":0,"name":"","label":"text1","format":"{{msg.payload}}","layout":"row-spread","x":330,"y":60,"wires":[]},{"id":"95c1caf7.0656a8","type":"ui_template","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","name":"","order":3,"width":"6","height":"1","format":"<div ng-init=\"model_b=2\">\n   <label> <input type=\"radio\" ng-model=\"model_b\" name=\"model_b\" value=\"1\" /> 1 </label>\n   <label> <input type=\"radio\" ng-model=\"model_b\" name=\"model_b\" value=\"2\" /> 2 </label>\n   <label> <input type=\"radio\" ng-model=\"model_b\" name=\"model_b\" value=\"3\" /> 3 </label>\n   <md-button ng-click=\"send({payload:model_b})\"> 送信 {{model_b}}</md-button>\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":140,"y":120,"wires":[["2840f611.879bda"]]},{"id":"2840f611.879bda","type":"ui_text","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","order":4,"width":0,"height":0,"name":"","label":"text2","format":"{{msg.payload}}","layout":"row-spread","x":330,"y":120,"wires":[]},{"id":"75a25e7a.12344","type":"ui_template","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","name":"","order":5,"width":"6","height":"5","format":"<style type=\"text/css\">\n<!--\n.radio1  {  display: none; }\n.radio1 + .radio_image {\n    border: 3px #ffffff solid;\n    background-color: #ffffff;\n}\n.radio1:checked + .radio_image {\n    border: 3px #ff0000 solid;\n    background-color: #ffeeee;\n}\n-->\n</style>\n<div>\n　　<label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_c\" value=\"1\" class=\"radio1\">\n       <img src=\"pict\\a.png\" class=\"radio_image\" width=\"100\" height=\"100\">\n    </label>\n    <label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_c\" value=\"2\" class=\"radio1\">\n       <img src=\"pict\\b.png\" class=\"radio_image\" width=\"100\" height=\"100\">\n    </label>\n    <br> \n　　<label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_c\" value=\"3\" class=\"radio1\">\n       <img src=\"pict\\c.png\" class=\"radio_image\" width=\"100\" height=\"100\">\n    </label>\n    <label> <input ng-click=\"send({payload:model_a})\" type=\"radio\" ng-model=\"model_a\" name=\"model_c\" value=\"4\" class=\"radio1\">\n       <img src=\"pict\\d.png\" class=\"radio_image\" width=\"100\" height=\"100\">\n    </label>\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":140,"y":200,"wires":[["fdf03961.362508"]]},{"id":"fdf03961.362508","type":"ui_text","z":"2a42b4f0.eed9ac","group":"6194ff2d.d4e2b","order":6,"width":0,"height":0,"name":"","label":"text3","format":"{{msg.payload}}","layout":"row-spread","x":330,"y":200,"wires":[]},{"id":"6194ff2d.d4e2b","type":"ui_group","z":"","name":"Group 1","tab":"91daea48.f23478","order":1,"disp":true,"width":"6","collapse":false},{"id":"91daea48.f23478","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

　参考情報

Node-RED紹介（インストールからWebGUI作成）

HTMLフォームで任意の画像をラジオボタンとして使用する方法