node-red-dashboardでwebリモコンを作ってみた

# こんなのを作ります
このスクショはsafariからですが、iPhoneでは画面幅いっぱいに表示されます。
家人が寝ててalexaにお願いできる時ばかりではない。とか、寝起きで発音がイマイチな時に、リモコンがあったらいいなぁ。と。
いや、それぞれの機器のリモコンを使えばいい話なんですけどね。
<img width="821" alt="スクリーンショット 2018-08-01 22.56.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/231763/8c6774e3-3af2-5826-fb58-e55b3bc3f571.png">
ボタンは縦に並ぶようです。順番の並べ替えは自由です。ダッシュボードタブで「三」をドラグすると並び順を変更できます。
オンオフは横に並べたいところですが、~~できるだけコードは書きたくない~~コードが書けないのでこれを許容します。
基本、
[Amazon Echoから家電を制御 2 ~テレビを我が手中に収めてやった 基本操作編~](https://qiita.com/tstkkmd/items/75771caeac9f00f3b668)
や
[Amazon Echoから家電を制御 3 ~テレビを我が手中に収めてやった ch操作編~](https://qiita.com/tstkkmd/items/a8c7a5ab001d6e299366)
でやったことにボタンを追加しただけです。


# 追記した後のフロー
基本的な制御をするフロー
<img width="1137" alt="スクリーンショット 2018-08-01 22.55.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/231763/bebcdfb8-67b8-fae2-4cd4-bdb94fa12a2b.png">
チャンネルや特別な機能を制御するフロー
ちゃくちゃくと要塞化してます。
<img width="1085" alt="スクリーンショット 2018-08-01 22.55.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/231763/16ff5173-f7ab-c315-e9ae-8be918b66bbf.png">


# node-red-dashboardのインストール
右上の「三」をクリックし、「パレットの追加」からnode-red-dashboardを検索、追加します。
左のパレット下部にnode-red-dashboardのノードが追加されているはずです。


# 追加したノード
### butonノード
onやoff、その他のボタンを置いていきます。
元々のフローが`*.sh`にmsg.payloadで引数を渡して各機能を発射しているので、msg.payloadに適切な値を入力し、いい感じに接続します。

#### 新規に ui_group を追加...
##### tab
タブを家電毎に設定します。
デバッグタブの右にダッシュボードタブが現れます。確か、このタイミングだったはず。
##### ui_group
今回は特に意識しませんでした。
ボタンなどのウィジェットを配置または管理するグループのようです。


### sliderノード
チャンネルボタンに合わせ、範囲を1〜12にしています。
スライダーを動かすとmsg.payloadに数値を乗せます。

### gaugeノード
sliderノードで変化した値を表示させます。
デフォルトの色が緑、黄、赤でやたらと警告色が強いので灰色にしました。
色指定は#ffffffのように16進数で指定します。


# webリモコンのアクセス先
`http://{raspberry piのアドレス}:1880/ui/#/0/`だそうです。
`/dashboard/`とかの方がわかりやすいと思うんだけどなぁ。


# I have!
基本的な制御をするフロー

```json
[{"id":"d1282316.7ea6","type":"tab","label":"TV","disabled":false,"info":""},{"id":"2409d274.be2e0e","type":"alexa-local","z":"d1282316.7ea6","devicename":"テレビ","inputtrigger":false,"x":130,"y":260,"wires":[["43a02821.004c6"]]},{"id":"de708dcf.653d3","type":"exec","z":"d1282316.7ea6","command":"/home/hoge/python-broadlink/cli/tv.sh","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"tv.sh","x":770,"y":260,"wires":[["1269d67c.8bd222"],[],[]]},{"id":"4e6d9d71.94566c","type":"switch","z":"d1282316.7ea6","name":"on_off_command","property":"on_off_command","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":510,"y":200,"wires":[["de708dcf.653d3"],["6d87a273.ebb5bc"]]},{"id":"68e68646.22a8f","type":"switch","z":"d1282316.7ea6","name":"change_direction","property":"change_direction","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":870,"y":440,"wires":[["d2da2aea.e0d198"],["fa4c93dd.5650b8"]]},{"id":"37e0d436.fd85d4","type":"switch","z":"d1282316.7ea6","name":"i<5","property":"i","propertyType":"msg","rules":[{"t":"lt","v":"5","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":690,"y":440,"wires":[["68e68646.22a8f"],[]]},{"id":"b2dc766e.a0bfd8","type":"template","z":"d1282316.7ea6","name":"i=0","field":"i","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"0","output":"str","x":530,"y":480,"wires":[["37e0d436.fd85d4"]]},{"id":"1269d67c.8bd222","type":"function","z":"d1282316.7ea6","name":"i++","func":"msg.i++;\n\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":400,"wires":[["37e0d436.fd85d4"]]},{"id":"d2da2aea.e0d198","type":"change","z":"d1282316.7ea6","name":"volup","rules":[{"t":"set","p":"payload","pt":"msg","to":"volup","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1050,"y":400,"wires":[["de708dcf.653d3"]]},{"id":"fa4c93dd.5650b8","type":"change","z":"d1282316.7ea6","name":"voldown","rules":[{"t":"set","p":"payload","pt":"msg","to":"voldown","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1060,"y":480,"wires":[["de708dcf.653d3"]]},{"id":"6d87a273.ebb5bc","type":"switch","z":"d1282316.7ea6","name":"bri","property":"bri","propertyType":"msg","rules":[{"t":"else"},{"t":"eq","v":"74","vt":"num"},{"t":"eq","v":"39","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":350,"y":420,"wires":[["a80096a5.8428a8"],["b2dc766e.a0bfd8"],["b2dc766e.a0bfd8"]]},{"id":"a80096a5.8428a8","type":"link out","z":"d1282316.7ea6","name":"->CH","links":["470b1eb8.4d67e"],"x":495,"y":340,"wires":[]},{"id":"43a02821.004c6","type":"switch","z":"d1282316.7ea6","name":"on","property":"on","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":270,"y":260,"wires":[["4e6d9d71.94566c"],["de708dcf.653d3"]]},{"id":"c2aec70c.45ec08","type":"ui_button","z":"d1282316.7ea6","name":"","group":"ebdf4025.6ac128","order":11,"width":0,"height":0,"passthru":false,"label":"音量 5UP","color":"","bgcolor":"","icon":"","payload":"74","payloadType":"num","topic":"","x":120,"y":620,"wires":[["1fdc0d03.d4897b"]]},{"id":"164c3d0e.b4026b","type":"ui_button","z":"d1282316.7ea6","name":"","group":"ebdf4025.6ac128","order":12,"width":0,"height":0,"passthru":false,"label":"音量 5DOWN","color":"","bgcolor":"","icon":"","payload":"39","payloadType":"num","topic":"","x":110,"y":660,"wires":[["54a0db68.161494"]]},{"id":"3396c5e.440de3a","type":"ui_button","z":"d1282316.7ea6","name":"","group":"ebdf4025.6ac128","order":1,"width":0,"height":0,"passthru":false,"label":"on","color":"","bgcolor":"","icon":"","payload":"on","payloadType":"str","topic":"","x":570,"y":60,"wires":[["de708dcf.653d3"]]},{"id":"ec99663f.2aa6c","type":"ui_button","z":"d1282316.7ea6","name":"","group":"ebdf4025.6ac128","order":2,"width":0,"height":0,"passthru":false,"label":"off","color":"","bgcolor":"","icon":"","payload":"off","payloadType":"str","topic":"","x":570,"y":100,"wires":[["de708dcf.653d3"]]},{"id":"4c6aed54.ea190c","type":"change","z":"d1282316.7ea6","name":"payloadをbriに移動","rules":[{"t":"move","p":"payload","pt":"msg","to":"bri","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":640,"wires":[["6d87a273.ebb5bc"]]},{"id":"1fdc0d03.d4897b","type":"change","z":"d1282316.7ea6","name":"change_direction=1","rules":[{"t":"set","p":"change_direction","pt":"msg","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":600,"wires":[["4c6aed54.ea190c"]]},{"id":"54a0db68.161494","type":"change","z":"d1282316.7ea6","name":"change_direction=0","rules":[{"t":"set","p":"change_direction","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":680,"wires":[["4c6aed54.ea190c"]]},{"id":"ebdf4025.6ac128","type":"ui_group","z":"","name":"テレビ","tab":"3a4f2cef.3fa114","order":1,"disp":false,"width":"6","collapse":false},{"id":"3a4f2cef.3fa114","type":"ui_tab","z":"","name":"テレビ","icon":"dashboard","order":2}]
```

チャンネルや特別な機能を制御するフロー


```json
[{"id":"21599434.1f0c7c","type":"tab","label":"ch","disabled":false,"info":""},{"id":"b1c2727e.40586","type":"delay","z":"21599434.1f0c7c","name":"1.25s","pauseType":"delay","timeout":"1250","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":810,"y":220,"wires":[["c1ba7d99.f39e"]]},{"id":"f9d41b9.c297e68","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/tv.sh","addpay":false,"append":"mute","useSpawn":"false","timer":"","oldrc":false,"name":"mute","x":1010,"y":60,"wires":[[],[],[]]},{"id":"1cffb144.49b167","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/tv.sh","addpay":false,"append":"ok","useSpawn":"false","timer":"","oldrc":false,"name":"ok","x":810,"y":60,"wires":[["f9d41b9.c297e68"],[],[]]},{"id":"cbf101b2.562e88","type":"change","z":"21599434.1f0c7c","name":"briをpayloadに移動","rules":[{"t":"move","p":"bri","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":190,"y":300,"wires":[["f4c233fe.2d3cf"]]},{"id":"c1ba7d99.f39e","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"ch.sh","x":1010,"y":260,"wires":[[],[],[]]},{"id":"a1ad9cd8.d4e52","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/tv.sh","addpay":false,"append":"chidegi","useSpawn":"false","timer":"","oldrc":false,"name":"地デジ","x":810,"y":140,"wires":[[],[],[]]},{"id":"f4c233fe.2d3cf","type":"switch","z":"21599434.1f0c7c","name":"1-100","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"100","vt":"num"},{"t":"btwn","v":"1","vt":"num","v2":"12","v2t":"num"},{"t":"btwn","v":"13","vt":"num","v2":"97","v2t":"num"},{"t":"eq","v":"99","vt":"num"},{"t":"eq","v":"98","vt":"num"}],"checkall":"true","repair":false,"outputs":5,"x":450,"y":300,"wires":[["1cffb144.49b167"],["a1ad9cd8.d4e52","b1c2727e.40586"],["c1ba7d99.f39e"],["c1ba7d99.f39e"],["65a5ace5.5019a4"]]},{"id":"65a5ace5.5019a4","type":"template","z":"21599434.1f0c7c","name":"i=0","field":"i","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"0","output":"str","x":630,"y":380,"wires":[["86b78717.a5174"]]},{"id":"9f5722a1.c5d6d8","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"1","useSpawn":"false","timer":"","oldrc":false,"name":"1","x":630,"y":520,"wires":[["cf0a4d4f.152fd8"],[],[]]},{"id":"86b78717.a5174","type":"switch","z":"21599434.1f0c7c","name":"i<2","property":"i","propertyType":"msg","rules":[{"t":"else"},{"t":"lt","v":"2","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":810,"y":380,"wires":[["96ca31ef.b22d5"],["2a29632.b04709c"]]},{"id":"985d1544.e938a8","type":"function","z":"21599434.1f0c7c","name":"i++","func":"msg.i++;\n\nreturn msg;","outputs":1,"noerr":0,"x":630,"y":440,"wires":[["86b78717.a5174"]]},{"id":"96ca31ef.b22d5","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/tv.sh","addpay":false,"append":"epg","useSpawn":"false","timer":"","oldrc":false,"name":"番組表","x":1010,"y":380,"wires":[[],[],[]]},{"id":"673e65d1.b6f32c","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"2","useSpawn":"false","timer":"","oldrc":false,"name":"2","x":1010,"y":520,"wires":[["b8a265c8.6bab3"],[],[]]},{"id":"d196266d.94bf18","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"4","useSpawn":"false","timer":"","oldrc":false,"name":"4","x":1010,"y":640,"wires":[["53744e6.1c21eb"],[],[]]},{"id":"5741e0b9.3426e8","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"5","useSpawn":"false","timer":"","oldrc":false,"name":"5","x":1010,"y":760,"wires":[["985d1544.e938a8"],[],[]]},{"id":"5f29dc7d.557ab4","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"6","useSpawn":"false","timer":"","oldrc":false,"name":"6","x":630,"y":640,"wires":[["408b8f3f.073c9"],[],[]]},{"id":"6b2bba4a.a23134","type":"exec","z":"21599434.1f0c7c","command":"/home/hoge/python-broadlink/cli/ch.sh","addpay":false,"append":"8","useSpawn":"false","timer":"","oldrc":false,"name":"8","x":630,"y":760,"wires":[["9b2ea04d.7a38c"],[],[]]},{"id":"cf0a4d4f.152fd8","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":520,"wires":[["673e65d1.b6f32c"]]},{"id":"b8a265c8.6bab3","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":580,"wires":[["5f29dc7d.557ab4"]]},{"id":"408b8f3f.073c9","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":640,"wires":[["d196266d.94bf18"]]},{"id":"53744e6.1c21eb","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":700,"wires":[["6b2bba4a.a23134"]]},{"id":"9b2ea04d.7a38c","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":760,"wires":[["5741e0b9.3426e8"]]},{"id":"2a29632.b04709c","type":"delay","z":"21599434.1f0c7c","name":"","pauseType":"delay","timeout":"6","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":820,"y":460,"wires":[["9f5722a1.c5d6d8"]]},{"id":"470b1eb8.4d67e","type":"link in","z":"21599434.1f0c7c","name":"TV->","links":["a80096a5.8428a8"],"x":55,"y":300,"wires":[["cbf101b2.562e88"]]},{"id":"c2d4d2cc.622c6","type":"ui_slider","z":"21599434.1f0c7c","name":"","label":"チャンネル","group":"ebdf4025.6ac128","order":3,"width":0,"height":0,"passthru":true,"topic":"","min":"1","max":"12","step":1,"x":170,"y":640,"wires":[["76210d81.7fdc74","f4c233fe.2d3cf"]]},{"id":"76210d81.7fdc74","type":"ui_gauge","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":5,"width":0,"height":0,"gtype":"donut","title":"","label":"ch","format":"{{value}}","min":"1","max":"12","colors":["#a9a9a9","#dcdcdc","#808080"],"seg1":"","seg2":"","x":350,"y":640,"wires":[]},{"id":"7e7264ec.4c21f4","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":6,"width":0,"height":0,"passthru":false,"label":"HDMI 1","color":"","bgcolor":"","icon":"","payload":"91","payloadType":"num","topic":"","x":180,"y":360,"wires":[["f4c233fe.2d3cf"]]},{"id":"aabfd5e1.51136","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":7,"width":0,"height":0,"passthru":false,"label":"HDMI 2","color":"","bgcolor":"","icon":"","payload":"92","payloadType":"num","topic":"","x":180,"y":400,"wires":[["f4c233fe.2d3cf"]]},{"id":"ba8b3d21.14337","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":8,"width":0,"height":0,"passthru":false,"label":"番組表","color":"","bgcolor":"","icon":"","payload":"99","payloadType":"num","topic":"","x":190,"y":440,"wires":[["f4c233fe.2d3cf"]]},{"id":"a3cf9158.7a6438","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":10,"width":0,"height":0,"passthru":false,"label":"ミュート","color":"","bgcolor":"","icon":"","payload":"100","payloadType":"num","topic":"","x":180,"y":520,"wires":[["f4c233fe.2d3cf"]]},{"id":"c9a87d3e.e791d","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":13,"width":0,"height":0,"passthru":false,"label":"2画面","color":"","bgcolor":"","icon":"","payload":"20","payloadType":"num","topic":"","x":190,"y":560,"wires":[["f4c233fe.2d3cf"]]},{"id":"d250bf6b.9f89","type":"ui_text_input","z":"21599434.1f0c7c","name":"","label":"直接入力","group":"ebdf4025.6ac128","order":14,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","x":180,"y":600,"wires":[["f4c233fe.2d3cf"]]},{"id":"2b2153cd.744274","type":"ui_button","z":"21599434.1f0c7c","name":"","group":"ebdf4025.6ac128","order":9,"width":0,"height":0,"passthru":false,"label":"ザッピング","color":"","bgcolor":"","icon":"","payload":"98","payloadType":"num","topic":"","x":170,"y":480,"wires":[["f4c233fe.2d3cf"]]},{"id":"ebdf4025.6ac128","type":"ui_group","z":"","name":"テレビ","tab":"3a4f2cef.3fa114","order":1,"disp":false,"width":"6","collapse":false},{"id":"3a4f2cef.3fa114","type":"ui_tab","z":"","name":"テレビ","icon":"dashboard","order":2}]
```

# もはや
要塞化の加速待った無し。
要塞の増築も楽しいからいいんですけどね。


# Amazon Echoで遊ぼう
### 前提環境
[大凡1.5ｈで構築するraspberry pi + node-red + samba](https://qiita.com/tstkkmd/items/2c6dfde68ebbc90b0bb1)
### Amazon Echoから家電を制御シリーズ
[Amazon Echoから家電を制御 0 ~RMmini3 + python-broadlinkで学習~](https://qiita.com/tstkkmd/items/71db748dc75127a84fe8)
[Amazon Echoから家電を制御 1 ~node-red-contrib-alexa-local~](https://qiita.com/tstkkmd/items/10fb586be83de96bfe24)
[Amazon Echoから家電を制御 2 ~テレビを我が手中に収めてやった 基本操作編~](https://qiita.com/tstkkmd/items/75771caeac9f00f3b668)
[Amazon Echoから家電を制御 3 ~テレビを我が手中に収めてやった ch操作編~](https://qiita.com/tstkkmd/items/a8c7a5ab001d6e299366)