Node-REDのダッシュボードを使いこなして、様々なチャートと「なんちゃってログイン」を実装する

# はじめに

Node-REDのダッシュボード(node-red-dashboard)を使うと、センサーデータの数値などの可視化を簡単に実現できます。ダッシュボードには表示するためのノードの他に、さまざまな操作のためのノードが用意されています。数値などを表示するためのダッシュボードの利用例は色々見かけるのですが、操作での使用例をあまり見かけないような気がします。実際自分でも今までは表示するノードしか試してませんでした。

そんな経緯もあって、操作のノードを活用するとどんなことができるのかを確認するために作ってみたNode-REDダッシュボードの習作プログラムを紹介します。

# デモサイト

インタラクティブな操作が行えますが、設定しないと試せないのではめんちゃいですよね。「論よりRUN！」というわけでデモサイトを用意しました。この記事で紹介するフローは以下のサイトで動いています。

　　 https://iot-test.plathome.co.jp/nr1/ui

ここをアクセスすると、次のようなログインダイアログが表示されます。
![login dialog.png](https://qiita-image-store.s3.amazonaws.com/0/130638/569a16f5-3650-4f49-c3da-445fccd5ff41.png)
ユーザ名に "user" パスワードに "pass" を入力してログインボタンを押します。なお、ユーザー名とパスワードを間違えた時のダイアログも実装してありますので、興味のある方はユーザー名またはパスワードを間違えてお試しください(笑)。

ログインすると、次のようなパネルが表示されます。
![2018-12-10 (1).png](https://qiita-image-store.s3.amazonaws.com/0/130638/9ff5501e-6f18-ef25-11b8-8e2f7316501b.png)
Node-REDダッシュボードでは、ブラウザの表示幅によってレイアウトが変わるので、この図とはすこし違った形で表示されるかもしれません。

このデモでは、温度計測を仮定して内部で1分間隔で24℃を生成し、それを各チャートやグラフなどで表示しています。操作パネルではその24℃を変更して、温度を上下できます。左上に表示されている以下の部分が操作パネルです。
![ui-manage.png](https://qiita-image-store.s3.amazonaws.com/0/130638/4b6a8925-2045-c83d-8484-37000d528481.png)
操作パネルの各機能は次の通りです。
<dl>
<dt>ログアウト</dt>
<dd>ログアウトして最初のログインダイアログに戻ります。</dd>
<dt>20度に設定</dt>
<dd>温度を20度に変更します。</dd>
<dt>温度調整(スライド)</dt>
<dd>連続で温度を変更します。1度ステップとなっています</dd>
<dt>温度調整(ステップ)</dt>
<dd>2度単位で温度を変更します</dd>
<dt>チャート1 表示</dt>
<dd>チャート1のグループの表示をオフ/オンします</dd>
<dt>チャート2 表示</dt>
<dd>チャート2のグループの表示をオフ/オンします</dd>
<dt>のおどれっど 表示</dt>
<dd>「のおどれっど」の図の表示をオフ/オンします</dd>
</dl>
それぞれ適当に操作してみてください。表示の「オン/オフ」スイッチを3つともオフにすると、操作パネルとグラフの部分だけになります。
![all off.png](https://qiita-image-store.s3.amazonaws.com/0/130638/43425342-42f0-1580-5e0f-a05a4c78d853.png)
温度を変えてもすこし(最大で1分)待てば24度に戻ります。ぜひ40℃まで温度を上げてみてください。

# なんちゃって？

さて、このプログラムは「**なんちゃって**ログイン」です。なぜ「なんちゃって」なのか？

実はNode-REDダッシュボードにはセッションを管理する機能がありません。当初自分でも、複数人がログインできるデモを作ろうと色々試しました。しかしながら、どうもセッション管理ができるような制御が無いことに気づいてドキュメントを確認したところ、 **node-red-dashboard ではセッション管理機能が無い** ことがはっきりしました。

プログラムではログイン中かどうかをコンテキストを使って管理していますが、セッションとして管理できているのはそれだけです。ログアウト状態で表示パネルのURLに直接アクセスすると、ログインパネルに切り替えるような仕組みは入れてありますが、すでにログイン状態であれば、表示パネルのURLを直接アクセスすると内容が見えてしまいます。

ログインパネルのURL
　　 https://iot-test.plathome.co.jp/nr1/ui/#/0
表示パネルのURL
　　 https://iot-test.plathome.co.jp/nr1/ui/#/1

WEBブラウザを2種類用意して、一方でログインしてから他方で表示パネルのURLを直接アクセスすると、アクセスできてしまうのがわかります。また表示する内容はまったく同一で、片方で温度を変化させたりすると、もう一方にも同じ変化が表示されます。さらに一方でログアウトすると、他方もログアウトしてしまいます。

もちろん **デモサイトも同時に複数人がアクセスすると、だれかの操作結果が全員に反映されることになります。**

つまり見かけ上ログインの機能は実現できているものの、実際にはちゃんとしたセッション管理ができていないので「なんちゃってログイン」と名付けています。


# プログラム

フローはこんな感じです。
![node-red flow.png](https://qiita-image-store.s3.amazonaws.com/0/130638/9278cc29-d045-0d4e-91cf-99e41fbab153.png)
ログインパネルと表示パネルは、Node-REDダッシュボードとしてはタブの切り替えを行うことで実装しています。

フローのソースは以下になります。もちろん「node-red-dashboard」必須なので、まだ使っていない場合は、このフローを読み込む前に node-red-dashboard のパレットを登録してください。

```
[{"id":"55c2e8cd.69d9b8","type":"tab","label":"ログイン","disabled":false,"info":""},{"id":"9ac4cb4.5c46438","type":"subflow","name":"Subflow 1","info":"","in":[],"out":[]},{"id":"b24e964e.e118c8","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":false},"page-titlebar-backgroundColor":{"value":"#097479","edited":false},"page-backgroundColor":{"value":"#111111","edited":false},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#0eb8c0","edited":false},"group-borderColor":{"value":"#555555","edited":false},"group-backgroundColor":{"value":"#333333","edited":false},"widget-textColor":{"value":"#eeeeee","edited":false},"widget-backgroundColor":{"value":"#097479","edited":false},"widget-borderColor":{"value":"#333333","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"なんちゃってログイン","hideToolbar":"true","allowSwipe":"false","allowTempTheme":"true","dateFormat":"YYYY/MM/DD","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"821b8ed6.220b","type":"ui_group","z":"","name":"操作","tab":"c59aa853.b89cb8","order":2,"disp":false,"width":"6","collapse":false},{"id":"75e1478.2e961b8","type":"ui_group","z":"","name":"アクション","tab":"35b359af.367d46","order":1,"disp":false,"width":"6","collapse":false},{"id":"2d7ad31f.78a82c","type":"ui_group","z":"","name":"チャート1","tab":"35b359af.367d46","order":2,"disp":true,"width":"6","collapse":false},{"id":"393fee6b.2f61d2","type":"ui_group","z":"","name":"TempHumi","tab":"35b359af.367d46","order":4,"disp":false,"width":"6","collapse":false},{"id":"9a17bd4c.ba12d","type":"ui_group","z":"","name":"Logo","tab":"35b359af.367d46","order":6,"disp":false,"width":"6"},{"id":"29a8e0c4.8ba2e","type":"ui_group","z":"","name":"チャート2","tab":"35b359af.367d46","order":3,"disp":true,"width":"6","collapse":false},{"id":"c59aa853.b89cb8","type":"ui_tab","z":"","name":"ログイン","icon":"dashboard","order":1},{"id":"35b359af.367d46","type":"ui_tab","z":"","name":"Demo","icon":"dashboard","order":2},{"id":"2930f0b2.c3c76","type":"ui_group","z":"","name":"Hot","tab":"35b359af.367d46","order":5,"disp":false,"width":"6","collapse":false},{"id":"d7062c9b.1fe96","type":"ui_form","z":"55c2e8cd.69d9b8","name":"ログイン","label":"「user」と「pass」を入力","group":"821b8ed6.220b","order":1,"width":"0","height":"0","options":[{"label":"ユーザー名","value":"user","type":"text","required":true},{"label":"パスワード","value":"pass","type":"password","required":true}],"formValue":{"user":"","pass":""},"payload":"","submit":"ログイン","cancel":"クリア","topic":"","x":160,"y":140,"wires":[["2d614b2a.550ba4"]]},{"id":"7701636d.745f9c","type":"ui_ui_control","z":"55c2e8cd.69d9b8","name":"","x":840,"y":140,"wires":[[]]},{"id":"2d614b2a.550ba4","type":"switch","z":"55c2e8cd.69d9b8","name":"user ok?","property":"payload.user","propertyType":"msg","rules":[{"t":"eq","v":"user","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":320,"y":140,"wires":[["80b83bcd.b81908"],["b55fd96a.d10848","3dbfd9e4.b4e1f6"]]},{"id":"80b83bcd.b81908","type":"switch","z":"55c2e8cd.69d9b8","name":"pass ok?","property":"payload.pass","propertyType":"msg","rules":[{"t":"eq","v":"pass","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":480,"y":120,"wires":[["a50e049d.d12c98","d569e63a.498988","70b0c4af.726d1c","11f252.1bf4edaf","89969eac.c98b7","feebb748.4849b8"],["3dbfd9e4.b4e1f6","b55fd96a.d10848"]]},{"id":"b55fd96a.d10848","type":"template","z":"55c2e8cd.69d9b8","name":"redraw","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"","output":"str","x":650,"y":160,"wires":[["7701636d.745f9c"]]},{"id":"1f5bada6.34f912","type":"ui_toast","z":"55c2e8cd.69d9b8","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"","topic":"","name":"","x":850,"y":200,"wires":[[]]},{"id":"3dbfd9e4.b4e1f6","type":"template","z":"55c2e8cd.69d9b8","name":"不正アカウント","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"ユーザー名またはパスワードが違います","output":"str","x":680,"y":200,"wires":[["1f5bada6.34f912"]]},{"id":"ca03b03e.c3f81","type":"ui_button","z":"55c2e8cd.69d9b8","name":"","group":"75e1478.2e961b8","order":1,"width":"3","height":"1","passthru":false,"label":"ログアウト","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":370,"y":580,"wires":[["db6d2d36.013f4","7797cd84.9cd0f4"]]},{"id":"7e888683.db4cd8","type":"ui_ui_control","z":"55c2e8cd.69d9b8","name":"","x":840,"y":540,"wires":[[]]},{"id":"93b0e0b4.99e15","type":"inject","z":"55c2e8cd.69d9b8","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":480,"wires":[["64a85f4.85972a"]]},{"id":"db6d2d36.013f4","type":"template","z":"55c2e8cd.69d9b8","name":"ログインダイアログへ","field":"payload","fieldType":"msg","format":"text","syntax":"plain","template":"\"ログイン\"","output":"json","x":620,"y":540,"wires":[["7e888683.db4cd8"]]},{"id":"a50e049d.d12c98","type":"template","z":"55c2e8cd.69d9b8","name":"Demoへ","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"tab\": \"Demo\",\n    \"group\": {\n        \"show\": [\n            \"Demo_アクション\",\n            \"Demo_TempHumi\",\n            \"Demo_Chart2\",\n            \"Demo_Chart1\",\n            \"Demo_Logo\"\n        ]\n    }\n}","output":"json","x":660,"y":120,"wires":[["7701636d.745f9c"]]},{"id":"62a4f483.39f26c","type":"ui_gauge","z":"55c2e8cd.69d9b8","name":"","group":"2d7ad31f.78a82c","order":1,"width":"0","height":"0","gtype":"gage","title":"Gauge","label":"℃","format":"{{value}} ℃","min":0,"max":"40","colors":["#00b500","#e6e600","#ca3838"],"seg1":"25","seg2":"30","x":850,"y":680,"wires":[]},{"id":"d94efa6.0263308","type":"ui_chart","z":"55c2e8cd.69d9b8","name":"Temp Chart","group":"393fee6b.2f61d2","order":1,"width":0,"height":0,"label":"温度変化","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":true,"x":870,"y":840,"wires":[[],[]]},{"id":"6a2fab08.2d4db4","type":"ui_template","z":"55c2e8cd.69d9b8","group":"9a17bd4c.ba12d","name":"のおどれっど","order":1,"width":"6","height":"2","format":"<img src=\"data:image/png;base64,\n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\n\">\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":860,"y":400,"wires":[[]]},{"id":"c5d9366b.cc8658","type":"inject","z":"55c2e8cd.69d9b8","name":"24度の生成","topic":"","payload":"24","payloadType":"num","repeat":"60","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":680,"wires":[["28ed315b.334cee","602e0bd9.317fe4","56121541.86deac"]]},{"id":"da8ac985.336188","type":"ui_button","z":"55c2e8cd.69d9b8","name":"20度ボタン","group":"75e1478.2e961b8","order":2,"width":"3","height":"1","passthru":false,"label":"20度に設定","color":"","bgcolor":"","icon":"","payload":"20","payloadType":"num","topic":"","x":130,"y":780,"wires":[["28ed315b.334cee","602e0bd9.317fe4"]]},{"id":"28ed315b.334cee","type":"ui_slider","z":"55c2e8cd.69d9b8","name":"","label":"温度調整 (スライド)","group":"75e1478.2e961b8","order":3,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":"0","max":"40","step":1,"x":360,"y":760,"wires":[["56121541.86deac"]]},{"id":"db2f16c.b1759e8","type":"ui_gauge","z":"55c2e8cd.69d9b8","name":"","group":"29a8e0c4.8ba2e","order":2,"width":"0","height":"0","gtype":"wave","title":"Level","label":"℃","format":"{{value}}","min":0,"max":"40","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":850,"y":800,"wires":[]},{"id":"90c718c9.6b46a8","type":"ui_gauge","z":"55c2e8cd.69d9b8","name":"","group":"2d7ad31f.78a82c","order":2,"width":0,"height":0,"gtype":"donut","title":"Donut","label":"℃","format":"{{value}}","min":0,"max":"40","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":850,"y":720,"wires":[]},{"id":"2f9c2a68.91bd16","type":"ui_gauge","z":"55c2e8cd.69d9b8","name":"","group":"29a8e0c4.8ba2e","order":1,"width":0,"height":0,"gtype":"compass","title":"Commpass","label":"℃","format":"{{value}}","min":0,"max":"40","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":870,"y":760,"wires":[]},{"id":"b897a2a0.b52bb","type":"comment","z":"55c2e8cd.69d9b8","name":"ログイン中かどうか","info":"1秒間隔でログインしているかどうかを確認し、ログアウト状態であれば強制的にログイン画面に表示を切り替える\n","x":210,"y":440,"wires":[]},{"id":"602e0bd9.317fe4","type":"ui_numeric","z":"55c2e8cd.69d9b8","name":"","label":"温度調整 (ステップ)","group":"75e1478.2e961b8","order":4,"width":0,"height":0,"passthru":true,"topic":"","format":"{{value}}","min":0,"max":"40","step":"2","x":360,"y":800,"wires":[["56121541.86deac"]]},{"id":"56121541.86deac","type":"function","z":"55c2e8cd.69d9b8","name":"msgをまとめる(ダミー)","func":"// 入力と出力をまとめるための中継ノード\nreturn msg;","outputs":1,"noerr":0,"x":610,"y":760,"wires":[["62a4f483.39f26c","d94efa6.0263308","db2f16c.b1759e8","90c718c9.6b46a8","2f9c2a68.91bd16","30263a56.064906","5d8a1aa3.eef4d4"]]},{"id":"dae4d263.52667","type":"ui_ui_control","z":"55c2e8cd.69d9b8","name":"","x":860,"y":340,"wires":[[]]},{"id":"a2e7ead3.2d3238","type":"ui_switch","z":"55c2e8cd.69d9b8","name":"","label":"のおどれっど 表示","group":"75e1478.2e961b8","order":6,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"{\"group\":{\"show\":[\"Demo_Logo\"]}}","onvalueType":"json","onicon":"","oncolor":"","offvalue":"{\"group\":{\"hide\":[\"Demo_Logo\"]}}","offvalueType":"json","officon":"","offcolor":"","x":630,"y":300,"wires":[["dae4d263.52667"]]},{"id":"f3f9f012.067de","type":"comment","z":"55c2e8cd.69d9b8","name":"ON / OFFトグルスイッチ","info":"それぞれのON/OFFのトグルスイッチの設定部分","x":510,"y":260,"wires":[]},{"id":"d569e63a.498988","type":"template","z":"55c2e8cd.69d9b8","name":"のおどれっど 初期設定","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"group\": {\n        \"show\": [\n            \"Demo_Logo\"\n        ]\n    }\n}","output":"json","x":390,"y":300,"wires":[["a2e7ead3.2d3238"]]},{"id":"29c4ced.e6d7032","type":"switch","z":"55c2e8cd.69d9b8","name":"login状態？","property":"payload","propertyType":"msg","rules":[{"t":"null"}],"checkall":"true","repair":false,"outputs":1,"x":570,"y":480,"wires":[["db6d2d36.013f4"]]},{"id":"64a85f4.85972a","type":"change","z":"55c2e8cd.69d9b8","name":"loginコンテキスト","rules":[{"t":"set","p":"payload","pt":"msg","to":"login","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":480,"wires":[["29c4ced.e6d7032"]]},{"id":"7797cd84.9cd0f4","type":"change","z":"55c2e8cd.69d9b8","name":"","rules":[{"t":"delete","p":"login","pt":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":580,"wires":[[]]},{"id":"70b0c4af.726d1c","type":"change","z":"55c2e8cd.69d9b8","name":"","rules":[{"t":"set","p":"login","pt":"flow","to":"payload.user","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":80,"wires":[[]]},{"id":"30263a56.064906","type":"ui_text","z":"55c2e8cd.69d9b8","group":"393fee6b.2f61d2","order":2,"width":0,"height":0,"name":"","label":"現在温度","format":"{{msg.payload}} ℃","layout":"row-spread","x":860,"y":880,"wires":[]},{"id":"c7f026f1.321298","type":"comment","z":"55c2e8cd.69d9b8","name":"1分間隔で24℃を生成","info":"1分間隔で24を生成し、それを各チャートに送る","x":140,"y":640,"wires":[]},{"id":"c2b157e8.7b8688","type":"ui_switch","z":"55c2e8cd.69d9b8","name":"","label":"チャート1 表示","group":"75e1478.2e961b8","order":5,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"{\"group\":{\"show\":[\"Demo_チャート1\"]}}","onvalueType":"json","onicon":"","oncolor":"","offvalue":"{\"group\":{\"hide\":[\"Demo_チャート1\"]}}","offvalueType":"json","officon":"","offcolor":"","x":620,"y":340,"wires":[["dae4d263.52667"]]},{"id":"11f252.1bf4edaf","type":"template","z":"55c2e8cd.69d9b8","name":"チャート1 初期設定","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"group\": {\n        \"show\": [\n            \"Demo_チャート1\"\n        ]\n    }\n}","output":"json","x":380,"y":340,"wires":[["c2b157e8.7b8688"]]},{"id":"5304bae0.d11af4","type":"ui_switch","z":"55c2e8cd.69d9b8","name":"","label":"チャート2 表示","group":"75e1478.2e961b8","order":5,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"{\"group\":{\"show\":[\"Demo_チャート2\"]}}","onvalueType":"json","onicon":"","oncolor":"","offvalue":"{\"group\":{\"hide\":[\"Demo_チャート2\"]}}","offvalueType":"json","officon":"","offcolor":"","x":620,"y":380,"wires":[["dae4d263.52667"]]},{"id":"89969eac.c98b7","type":"template","z":"55c2e8cd.69d9b8","name":"チャート2 初期設定","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"group\": {\n        \"show\": [\n            \"Demo_チャート2\"\n        ]\n    }\n}","output":"json","x":380,"y":380,"wires":[["5304bae0.d11af4"]]},{"id":"5d8a1aa3.eef4d4","type":"switch","z":"55c2e8cd.69d9b8","name":"","property":"payload","propertyType":"msg","rules":[{"t":"gte","v":"40","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":270,"y":900,"wires":[["3b5bfc24.55b7e4"],["feebb748.4849b8"]]},{"id":"3b5bfc24.55b7e4","type":"template","z":"55c2e8cd.69d9b8","name":"40℃","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"group\": {\n        \"hide\": [\n            \"Demo_TempHumi\"\n        ],\n        \"show\": [\n            \"Demo_Hot\"\n        ]\n    }\n}","output":"json","x":470,"y":880,"wires":[["b8a77ac.d8acf88"]]},{"id":"b8a77ac.d8acf88","type":"ui_ui_control","z":"55c2e8cd.69d9b8","name":"","x":660,"y":900,"wires":[[]]},{"id":"feebb748.4849b8","type":"template","z":"55c2e8cd.69d9b8","name":"40℃未満","field":"payload","fieldType":"msg","format":"json","syntax":"plain","template":"{\n    \"group\": {\n        \"show\": [\n            \"Demo_TempHumi\"\n        ],\n        \"hide\": [\n            \"Demo_Hot\"\n        ]\n    }\n}","output":"json","x":480,"y":920,"wires":[["b8a77ac.d8acf88"]]},{"id":"7b306c8e.30c964","type":"ui_template","z":"55c2e8cd.69d9b8","group":"2930f0b2.c3c76","name":"40℃","order":1,"width":"6","height":"5","format":"<img src=\"data:image/png;base64,\n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\n\">\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":650,"y":940,"wires":[[]]}]
```

# ダッシュボードのその他のノード

このフローを作るにあたって、ダッシュボードのノードを色々試しました。「colour picker」や「date picker」等もなかなか強力なので、用途によっては便利に活用できそうです。まだ「audio out」は試せてないので、そのうち試してみたいところです。

セッション管理ができないという欠点はありますが、ダッシュボードを活用すると、便利な操作パネルが簡単に作れそうです。

# おわりに

マウスで文字を書くのは難しい