💡 Node-RED Dashboard 2.0 ui-led ガイド

このガイドでは、Dashboard 2.0のサードパーティウィジェットui-ledについて解説します。 ui-ledは、ダッシュボード上にLEDインジケーターを表示し、デバイスやシステムの状態を視覚的に示すウィジェットです。

📦 パッケージ情報:

パッケージ名: @flowfuse/node-red-dashboard-2-ui-led
リポジトリ: GitHub
前提条件: Dashboard 2.0 (@flowfuse/node-red-dashboard) がインストール済みであること

📚 1. ui-ledとは?

🤔 どんなウィジェット?

ui-ledは、物理的なLED（発光ダイオード）をダッシュボード上に再現するウィジェットです。 msg.payloadの値に応じて色が変化し、機器の状態やセンサーの閾値超過などを一目で確認できます。

💡 活用シーン:

🏭 工場の機器稼働状態（正常=緑、異常=赤）
🌡️ センサー値の閾値監視（正常=緑、警告=黄、危険=赤）
🔌 デバイスのオンライン/オフライン表示
📡 通信接続の確認インジケーター

🎨 見た目のイメージ

正常

警告

異常

未接続

四角形

📥 2. インストール

パレットマネージャーからインストール

Node-REDエディタの右上メニュー → パレットの管理
ノードを追加タブを選択
検索欄に @flowfuse/node-red-dashboard-2-ui-led と入力
ノードを追加ボタンをクリック

コマンドラインからインストール

cd ~/.node-red
npm install @flowfuse/node-red-dashboard-2-ui-led

⚠️ 前提条件: このノードを使用するには、先に @flowfuse/node-red-dashboard（Dashboard 2.0）がインストールされている必要があります。

⚙️ 3. プロパティ（設定項目）

📋 基本設定

プロパティ	型	デフォルト	説明
name	文字列	（空）	エディタ上でのノード表示名
Group	ui-group	（必須）	ウィジェットを配置するダッシュボードグループ
Size	数値×数値	自動	ウィジェットの幅×高さ（グリッド単位）

🏷️ ラベル設定

プロパティ	型	デフォルト	説明
Label	文字列	（空）	LEDの横に表示するラベルテキスト
Placement	選択	left	ラベルの位置（left: LED左側 / right: LED右側）
Alignment	選択	left	ラベルの垂直方向の配置（left / center / right）

🔴 LED外観設定

プロパティ	型	デフォルト	説明
Shape	選択	circle	LEDの形状（circle: 円形 / square: 四角形）
Show Border	真偽値	true	物理LEDのような枠線を表示する
Show Glow	真偽値	true	発光（グロー）エフェクトを表示する

🎨 値と色のマッピング（States）

msg.payloadの値に対応する色を定義します。一致する値がない場合はグレーで表示されます。

プロパティ	型	説明
Value	各種（str/num/bool/json/bin）	msg.payloadと照合する値
Value Type	選択	値のデータ型を指定
Color	カラーコード	一致した場合に表示する色（例: #FF0000）

📌 デフォルトのマッピング:

false → 🔴 赤（#FF0000）
true → 🟢 緑（#00FF00）

複数のマッピングを追加して、多段階の状態表示が可能です。

🔧 高度な設定

プロパティ	型	デフォルト	説明
Allow Color for Value in Message	真偽値	false	msg.payloadから直接色を指定可能にする

📨 4. 入力メッセージ

基本的な入力

ui-ledノードは msg.payload を受け取り、Statesで定義したマッピングに基づいてLEDの色を変更します。

// 例1: 真偽値で制御（デフォルト設定）
msg.payload = true;   // → 緑に点灯
msg.payload = false;  // → 赤に点灯

// 例2: 文字列で制御（カスタムマッピング時）
msg.payload = "normal";   // → 設定した色で点灯
msg.payload = "warning";  // → 設定した色で点灯
msg.payload = "error";    // → 設定した色で点灯

// 例3: 数値で制御
msg.payload = 0;  // → 設定した色で点灯
msg.payload = 1;  // → 設定した色で点灯
msg.payload = 2;  // → 設定した色で点灯

⚠️ 注意: Statesに定義されていない値を受け取った場合、LEDはグレー（消灯状態）で表示されます。

🛠️ 5. 使用パターン

パターン1: ON/OFF状態の表示

最もシンプルな使い方です。真偽値でLEDのON（緑）/OFF（赤）を切り替えます。

inject (true) → ui-led

設定例:

States: false → #FF0000（赤）、true → #00FF00（緑）

パターン2: 多段階ステータス表示

Functionノードでセンサー値を判定し、3段階のステータスをLEDで表示します。

sensor data → 判定ロジック → ui-led

Functionノードの例:

// センサー値を3段階に変換 const value = msg.payload; if (value < 30) { msg.payload = "normal"; } else if (value < 70) { msg.payload = "warning"; } else { msg.payload = "error"; } return msg;

ui-led States設定:

Value	Type	Color	意味
"normal"	str	#00FF00	正常（緑）
"warning"	str	#FFFF00	警告（黄）
"error"	str	#FF0000	異常（赤）

パターン3: MQTT経由のデバイス監視

MQTTで受信したデバイスの状態をLEDで表示します。

mqtt in → change → ui-led

Changeノードの設定:

// MQTTメッセージが "online" ならtrue、それ以外はfalseに変換
msg.payload を次の値に設定:
  JSONata式: payload = "online"

パターン4: 複数LEDで機器一覧を表示

複数のui-ledノードを並べて、複数デバイスの状態を一括表示します。

device status → 振り分け → LED #1

device status → 振り分け → LED #2

device status → 振り分け → LED #3

🏋️ 6. 実践演習

演習1: 基本的なON/OFF LED初級

📝 課題:

Injectノードでtrue/falseを送信し、LEDの色を緑/赤に切り替えるフローを作成してください。

要件:

Injectノード2つ（true送信用、false送信用）
ui-ledノード1つ（デフォルト設定でOK）
ラベルに「電源」と表示

✅ 成功の条件:

ダッシュボードを開くとラベル「電源」付きのLEDウィジェットが表示される
「ON」Injectボタンをクリックすると、ダッシュボードのLEDが緑色に変わる
「OFF」Injectボタンをクリックすると、ダッシュボードのLEDが赤色に変わる
ONとOFFを交互に切り替えても色が正確に変化し続ける

💡 ヒント

Injectノードのpayload型を「真偽値」に設定
ui-ledのLabel欄に「電源」を入力
Statesはデフォルト（false=赤、true=緑）のまま使用

✅ 解答例フロー

[ { "id": "led_ex1_inject_on", "type": "inject", "name": "ON", "props": [{"p": "payload"}], "payload": "true", "payloadType": "bool", "repeat": "", "wires": [["led_ex1_led"]] }, { "id": "led_ex1_inject_off", "type": "inject", "name": "OFF", "props": [{"p": "payload"}], "payload": "false", "payloadType": "bool", "repeat": "", "wires": [["led_ex1_led"]] }, { "id": "led_ex1_led", "type": "ui-led", "name": "", "group": "", "order": 0, "width": 0, "height": 0, "label": "電源", "labelPlacement": "left", "labelAlignment": "left", "shape": "circle", "showBorder": true, "showGlow": true, "allowColorForValueInMessage": false, "states": [ {"value": "false", "valueType": "bool", "color": "#FF0000"}, {"value": "true", "valueType": "bool", "color": "#00FF00"} ], "wires": [] } ]

演習2: 温度センサーの3段階表示中級

📝 課題:

温度値（0〜100）を受け取り、3段階（正常/警告/危険）でLEDの色を変化させるフローを作成してください。

要件:

30未満: 緑（正常）
30以上70未満: 黄（警告）
70以上: 赤（危険）
ラベルに「温度」と表示
グローエフェクトを有効にする

✅ 成功の条件:

「温度: 20」Injectボタンをクリックすると、ダッシュボードのLED「温度」が緑色（正常）で表示される
「温度: 50」Injectボタンをクリックすると、ダッシュボードのLEDが黄色（警告）に変わる
「温度: 85」Injectボタンをクリックすると、ダッシュボードのLEDが赤色（危険）に変わり、グローエフェクトが確認できる
境界値（30、70）で色が正しく切り替わる（29は緑、30は黄、69は黄、70は赤）

💡 ヒント

Switchノードで温度値を3つの範囲に分岐する（< 30、30〜70、>= 70）
各出力にChangeノードを接続し、payloadを文字列ステータスに設定する
ui-ledのStatesに3つのマッピングを追加
テスト用にInjectノードで様々な数値を送信して確認

✅ 解答例フロー

[ { "id": "led_ex2_inject_normal", "type": "inject", "name": "温度: 20", "props": [{"p": "payload"}], "payload": "20", "payloadType": "num", "wires": [["led_ex2_switch"]] }, { "id": "led_ex2_inject_warn", "type": "inject", "name": "温度: 50", "props": [{"p": "payload"}], "payload": "50", "payloadType": "num", "wires": [["led_ex2_switch"]] }, { "id": "led_ex2_inject_danger", "type": "inject", "name": "温度: 85", "props": [{"p": "payload"}], "payload": "85", "payloadType": "num", "wires": [["led_ex2_switch"]] }, { "id": "led_ex2_switch", "type": "switch", "name": "温度判定", "property": "payload", "propertyType": "msg", "rules": [ {"t": "lt", "v": "30", "vt": "num"}, {"t": "btwn", "v": "30", "vt": "num", "v2": "70", "v2t": "num"}, {"t": "gte", "v": "70", "vt": "num"} ], "checkall": "true", "repair": false, "outputs": 3, "wires": [["led_ex2_change_normal"], ["led_ex2_change_warning"], ["led_ex2_change_danger"]] }, { "id": "led_ex2_change_normal", "type": "change", "name": "正常", "rules": [ {"t": "set", "p": "payload", "pt": "msg", "to": "normal", "tot": "str"} ], "wires": [["led_ex2_led"]] }, { "id": "led_ex2_change_warning", "type": "change", "name": "警告", "rules": [ {"t": "set", "p": "payload", "pt": "msg", "to": "warning", "tot": "str"} ], "wires": [["led_ex2_led"]] }, { "id": "led_ex2_change_danger", "type": "change", "name": "危険", "rules": [ {"t": "set", "p": "payload", "pt": "msg", "to": "danger", "tot": "str"} ], "wires": [["led_ex2_led"]] }, { "id": "led_ex2_led", "type": "ui-led", "name": "", "group": "", "order": 0, "width": 0, "height": 0, "label": "温度", "labelPlacement": "left", "labelAlignment": "left", "shape": "circle", "showBorder": true, "showGlow": true, "allowColorForValueInMessage": false, "states": [ {"value": "normal", "valueType": "str", "color": "#00FF00"}, {"value": "warning", "valueType": "str", "color": "#FFFF00"}, {"value": "danger", "valueType": "str", "color": "#FF0000"} ], "wires": [] } ]

演習3: 数値マッピングによるバッテリー残量LED中級

📝 課題:

バッテリー残量を4段階の数値で受け取り、残量に応じたLED色で表示するフローを作成してください。

要件:

0: 消灯（グレー）- バッテリー切れ
1: 赤 - 残量わずか
2: 黄 - 残量少
3: 緑 - 十分
四角形のLEDを使用
ボーダーあり、グローなし

✅ 成功の条件:

ダッシュボードを開くとラベル「バッテリー」付きの四角形LEDウィジェットが表示される
値0を送信すると、LEDがグレー（バッテリー切れ）で消灯したように表示される
値1で赤色、値2で黄色、値3で緑色にLEDが切り替わる
LEDにグローエフェクトが表示されず、ボーダーが表示されている

💡 ヒント

Statesに数値型（num）のマッピングを3つ追加（1, 2, 3）
0は定義しないことでグレー表示になる
Shapeを「square」に設定
Show Glowをオフに設定

✅ 解答例フロー

[ { "id": "led_ex3_inject0", "type": "inject", "name": "バッテリー切れ (0)", "props": [{"p": "payload"}], "payload": "0", "payloadType": "num", "wires": [["led_ex3_led"]] }, { "id": "led_ex3_inject1", "type": "inject", "name": "残量わずか (1)", "props": [{"p": "payload"}], "payload": "1", "payloadType": "num", "wires": [["led_ex3_led"]] }, { "id": "led_ex3_inject2", "type": "inject", "name": "残量少 (2)", "props": [{"p": "payload"}], "payload": "2", "payloadType": "num", "wires": [["led_ex3_led"]] }, { "id": "led_ex3_inject3", "type": "inject", "name": "十分 (3)", "props": [{"p": "payload"}], "payload": "3", "payloadType": "num", "wires": [["led_ex3_led"]] }, { "id": "led_ex3_led", "type": "ui-led", "name": "", "group": "", "order": 0, "width": 0, "height": 0, "label": "バッテリー", "labelPlacement": "left", "labelAlignment": "left", "shape": "square", "showBorder": true, "showGlow": false, "allowColorForValueInMessage": false, "states": [ {"value": "1", "valueType": "num", "color": "#FF0000"}, {"value": "2", "valueType": "num", "color": "#FFFF00"}, {"value": "3", "valueType": "num", "color": "#00FF00"} ], "wires": [] } ]

🔧 7. トラブルシューティング

問題	原因	解決方法
LEDが常にグレーのまま	msg.payloadの値がStatesのどのマッピングにも一致しない	Statesの値と型（str/num/bool）がmsg.payloadと一致しているか確認する
LEDが表示されない	Groupが未設定、またはDashboard 2.0がインストールされていない	Groupプロパティを設定し、Dashboard 2.0パッケージがインストール済みか確認する
色が変化しない	Value Typeが一致していない（例: 数値の1を文字列"1"で定義）	StatesのValue Typeを送信するmsg.payloadの型に合わせる
グローが表示されない	Show Glowが無効になっている	ノード設定でShow Glowをオンにする
ラベルが表示されない	Label欄が空、またはサイズが小さすぎる	Label欄にテキストを入力し、Sizeを適切に設定する
ノードがパレットに表示されない	インストール失敗、またはNode-RED再起動が必要	npm installのエラーを確認し、Node-REDを再起動する

📝 8. ベストプラクティス

✅ 推奨事項:

型の統一: msg.payloadの型とStatesのValue Typeを必ず合わせる
デフォルト状態の考慮: 未知の値を受け取った場合のグレー表示を意図的に活用する
ラベルの活用: 複数のLEDを並べる場合は必ずラベルを設定して識別しやすくする
グループ配置: 関連するLEDは同一グループに配置してまとめて表示する
色の選択: 信号機の色（緑=正常、黄=注意、赤=異常）に従うと直感的

⚠️ 注意事項:

States定義が多すぎると管理が複雑になるため、5〜6段階程度に抑えることを推奨
高頻度のメッセージ（毎秒10回以上）を送信するとダッシュボードの描画に負荷がかかる可能性がある
allowColorForValueInMessageを有効にする場合はセキュリティに注意（外部入力から直接色を指定できるため）

🔗 9. 追加リソース

🏠