4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-01

こんなのを作ります

このスクショはsafariからですが、iPhoneでは画面幅いっぱいに表示されます。
家人が寝ててalexaにお願いできる時ばかりではない。とか、寝起きで発音がイマイチな時に、リモコンがあったらいいなぁ。と。
いや、それぞれの機器のリモコンを使えばいい話なんですけどね。
スクリーンショット 2018-08-01 22.56.25.png
ボタンは縦に並ぶようです。順番の並べ替えは自由です。ダッシュボードタブで「三」をドラグすると並び順を変更できます。
オンオフは横に並べたいところですが、できるだけコードは書きたくないコードが書けないのでこれを許容します。
基本、
Amazon Echoから家電を制御 2 ~テレビを我が手中に収めてやった 基本操作編~

Amazon Echoから家電を制御 3 ~テレビを我が手中に収めてやった ch操作編~
でやったことにボタンを追加しただけです。

追記した後のフロー

基本的な制御をするフロー
スクリーンショット 2018-08-01 22.55.31.png
チャンネルや特別な機能を制御するフロー
ちゃくちゃくと要塞化してます。
スクリーンショット 2018-08-01 22.55.48.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!

基本的な制御をするフロー

[{"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}]

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

[{"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.5hで構築するraspberry pi + node-red + samba

Amazon Echoから家電を制御シリーズ

Amazon Echoから家電を制御 0 ~RMmini3 + python-broadlinkで学習~
Amazon Echoから家電を制御 1 ~node-red-contrib-alexa-local~
Amazon Echoから家電を制御 2 ~テレビを我が手中に収めてやった 基本操作編~
Amazon Echoから家電を制御 3 ~テレビを我が手中に収めてやった ch操作編~

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?