Node-RED

Node-RED Dashboardでボタンの色を状態によって変更する方法

Node-RED Dashboardでボタンの色を状態によって変更する方法について、こちらのURLにて紹介されていたので確認しました。

Change button color – Dashboard – Node-RED Forum

フロー

上記URLにフローのjsonが公開されているので、それを読み込んだフローがこちら。

05 27 20 16 39

ダッシュボードの画面

05 27 20 18 22

“START”という緑のボタンをクリックすると、

05 27 20 19 10

ボタンが赤くなり、3秒後にまた緑になります。

Buttonノード

05 27 20 20 01

ButtonノードのBackgroundに{{background}}という変数がきております。

05 27 20 22 08

先程のButtonノードはdelayノードの後にchangeノードにつながっています。

changeノードは、msg.backgroundに”RED”をいれており、先程のボタンを押すとButtonノードの{{background}}に来る値が”RED”になるという仕組みです。

05 27 20 24 51

先程のdelayノードの後、もうひとつのdelayノードがあり、その先につながるchangeノードの中身がこちら。

{{background}}に”green”が入り、この値がbuttonノードに行くと、ボタンが緑色になるというわけです。

ボタンの色を変えるシンプルなフロー

05 27 20 29 27

先程のフローをInjectノードを使ってシンプルにしたのがこちら。

05 27 20 31 39

さらに、Injectノードからmsg.backgroundのデータを直接送るようにしたフローがこちら。

05 27 20 32 22

Injectノードの中身はこちらです。

まとめ

以上、Node-RED Dashboardにてボタンの色を簡単に変える方法について解説しました。

IoTソリューションの開発のときに、現場側のデジタルInputから0か1をサーバーのNode-REDにおくって、単純にその値をボタンで見せるときに使えそうです。

ということで、弊社、スマートライトではIoTソリューションの開発もおこなっておりますので、なにかありましたら、気軽に相談ください。

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。