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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/40cff0a4-0e94-d285-2442-059e6295eb34.png)

フロー画面はつぎのようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/540c9c7a-abb5-6ac2-47d6-b9edc307f05a.png)


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

Node-REDとnode-red-dashboardの簡単な紹介は、以前に作成した次の資料を参照ください。
[Node-RED紹介（インストールからWebGUI作成）](https://qiita.com/tshimizu8/items/f71c1a5209cb3a19ce51)

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

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

# ラジオボタン

## GUI画面

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/0e13e705-b339-9f42-648e-fd756895a146.png)






## フローとプロパティ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/f6414644-77dc-ffbc-de52-43bf4341d01c.png)


```html: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>
```

```html: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画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/4a4bb084-9437-9b2f-abc0-df4e147582ee.png)

## フロー画面 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/42cd12e1-89d2-e1c5-ed0e-470da2ce2a0d.png)


## templateノードのプロパティ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78212/6a88d448-3181-1572-b4c7-f7f333462702.png)

## templateノードの template欄

```html:画像ラジオボタン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 に読み込んでご利用ください。画像ラジオボタン用の画像は別途用意してください。

```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作成）](https://qiita.com/tshimizu8/items/f71c1a5209cb3a19ce51)

[HTMLフォームで任意の画像をラジオボタンとして使用する方法](https://monotone.jp/archives/12936)