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}]
# 参考情報