🎮 Node-RED Dashboard 2.0 入力系ウィジェット ガイド

[ { "id": "dc9d5574040bffd4", "type": "tab", "label": "入力系ウィジェット", "disabled": false, "info": "Dashboard 2.0 入力系ウィジェットのサンプル" }, { "id": "be670a85ab841705", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 🔘 ui-button サンプル ━━━", "info": "", "x": 160, "y": 40, "wires": [] }, { "id": "ece91638e37ec853", "type": "ui-button", "z": "dc9d5574040bffd4", "group": "input_ui_group_button", "name": "シンプルボタン", "label": "クリック", "order": 1, "width": 0, "height": 0, "emulateClick": false, "color": "", "bgcolor": "", "className": "", "icon": "", "iconPosition": "left", "payload": "ボタンが押されました", "payloadType": "str", "topic": "button", "topicType": "str", "buttonColor": "", "textColor": "", "iconColor": "", "x": 140, "y": 100, "wires": [ [ "a2ed2e2ca5aa8e31" ] ] }, { "id": "4225585b61928a55", "type": "ui-button", "z": "dc9d5574040bffd4", "group": "input_ui_group_button", "name": "アイコンボタン", "label": "電源", "order": 2, "width": 0, "height": 0, "emulateClick": false, "color": "", "bgcolor": "", "className": "", "icon": "mdi-power", "iconPosition": "left", "payload": "power_toggle", "payloadType": "str", "topic": "power", "topicType": "str", "buttonColor": "", "textColor": "", "iconColor": "", "x": 140, "y": 160, "wires": [ [ "a2ed2e2ca5aa8e31" ] ] }, { "id": "d8874e2fef2314b7", "type": "ui-button", "z": "dc9d5574040bffd4", "group": "input_ui_group_button", "name": "スタイル付きボタン", "label": "緊急停止", "order": 3, "width": 0, "height": 0, "emulateClick": false, "color": "#ffffff", "bgcolor": "#f44336", "className": "", "icon": "mdi-alert-octagon", "iconPosition": "left", "payload": "emergency_stop", "payloadType": "str", "topic": "emergency", "topicType": "str", "buttonColor": "#f44336", "textColor": "#ffffff", "iconColor": "#ffffff", "x": 150, "y": 220, "wires": [ [ "a2ed2e2ca5aa8e31" ] ] }, { "id": "a2ed2e2ca5aa8e31", "type": "debug", "z": "dc9d5574040bffd4", "name": "ボタン出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 370, "y": 160, "wires": [] }, { "id": "d1ca70d8bde0cc9d", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 🔛 ui-switch サンプル ━━━", "info": "", "x": 160, "y": 300, "wires": [] }, { "id": "00fcb50fa09dd2ac", "type": "ui-switch", "z": "dc9d5574040bffd4", "name": "シンプルスイッチ", "label": "LEDライト", "group": "input_ui_group_switch", "order": 1, "width": 0, "height": 0, "passthru": false, "decouple": false, "topic": "led", "topicType": "str", "className": "", "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "x": 150, "y": 360, "wires": [ [ "238baaea30514539" ] ] }, { "id": "91c32f80c0b6e1c1", "type": "ui-switch", "z": "dc9d5574040bffd4", "name": "カスタム値スイッチ", "label": "モーター", "group": "input_ui_group_switch", "order": 2, "width": 0, "height": 0, "passthru": false, "decouple": false, "topic": "motor", "topicType": "str", "className": "", "onvalue": "running", "onvalueType": "str", "onicon": "mdi-play", "oncolor": "#4caf50", "offvalue": "stopped", "offvalueType": "str", "officon": "mdi-stop", "offcolor": "#f44336", "x": 160, "y": 420, "wires": [ [ "238baaea30514539" ] ] }, { "id": "620f3ae577d53309", "type": "inject", "z": "dc9d5574040bffd4", "name": "ON", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "true", "payloadType": "bool", "x": 110, "y": 480, "wires": [ [ "00fcb50fa09dd2ac" ] ] }, { "id": "37f962b4b904eddc", "type": "inject", "z": "dc9d5574040bffd4", "name": "OFF", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "false", "payloadType": "bool", "x": 110, "y": 520, "wires": [ [ "00fcb50fa09dd2ac" ] ] }, { "id": "238baaea30514539", "type": "debug", "z": "dc9d5574040bffd4", "name": "スイッチ出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 390, "y": 390, "wires": [] }, { "id": "468c322b2e538d5a", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 🎚️ ui-slider サンプル ━━━", "info": "", "x": 160, "y": 600, "wires": [] }, { "id": "6a66ddbd42f6407b", "type": "ui-slider", "z": "dc9d5574040bffd4", "group": "input_ui_group_slider", "name": "音量スライダー", "label": "音量", "order": 1, "width": 0, "height": 0, "passthru": false, "outs": "all", "topic": "volume", "topicType": "str", "showTicks": "always", "min": 0, "max": 100, "step": 1, "className": "", "iconPrepend": "", "iconAppend": "", "color": "", "x": 160, "y": 660, "wires": [ [ "af3a4d9e66ee60b8" ] ] }, { "id": "93f40d44ae6feb64", "type": "ui-slider", "z": "dc9d5574040bffd4", "group": "input_ui_group_slider", "name": "温度設定", "label": "設定温度", "order": 2, "width": 0, "height": 0, "passthru": false, "outs": "end", "topic": "temperature", "topicType": "str", "showTicks": "always", "min": 16, "max": 30, "step": 0.5, "className": "", "iconPrepend": "", "iconAppend": "", "color": "", "x": 140, "y": 720, "wires": [ [ "af3a4d9e66ee60b8" ] ] }, { "id": "25b20ed45938fd90", "type": "inject", "z": "dc9d5574040bffd4", "name": "50%", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "50", "payloadType": "num", "x": 110, "y": 780, "wires": [ [ "6a66ddbd42f6407b" ] ] }, { "id": "af3a4d9e66ee60b8", "type": "debug", "z": "dc9d5574040bffd4", "name": "スライダー出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 400, "y": 690, "wires": [] }, { "id": "5b6a7ff04b25578f", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 📋 ui-dropdown サンプル ━━━", "info": "", "x": 170, "y": 860, "wires": [] }, { "id": "12e94b91f71bbbcf", "type": "ui-dropdown", "z": "dc9d5574040bffd4", "group": "input_ui_group_select", "name": "複数選択", "label": "通知先", "order": 2, "width": 0, "height": 0, "passthru": false, "multiple": true, "chips": true, "clearable": true, "options": [ { "label": "メール", "value": "email", "type": "str" }, { "label": "Slack", "value": "slack", "type": "str" }, { "label": "LINE", "value": "line", "type": "str" }, { "label": "SMS", "value": "sms", "type": "str" } ], "topic": "notify", "topicType": "str", "className": "", "x": 140, "y": 980, "wires": [ [ "0b4c0c9ed1f1d045" ] ] }, { "id": "0b4c0c9ed1f1d045", "type": "debug", "z": "dc9d5574040bffd4", "name": "ドロップダウン出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 410, "y": 950, "wires": [] }, { "id": "c193745151fcb0b4", "type": "inject", "z": "dc9d5574040bffd4", "name": "地域オプション", "props": [ { "p": "payload" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 160, "y": 1080, "wires": [ [ "d160c692c0ee4652" ] ] }, { "id": "d160c692c0ee4652", "type": "function", "z": "dc9d5574040bffd4", "name": "options生成", "func": "msg.options = [\n {\"label\": \"東京\", \"value\": \"tokyo\"},\n {\"label\": \"大阪\", \"value\": \"osaka\"},\n {\"label\": \"福岡\", \"value\": \"fukuoka\"}\n];\nreturn msg;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 330, "y": 1080, "wires": [ [ "f5c5e9da805c49a3" ] ] }, { "id": "ade09c3acb1fe939", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ ⌨️ ui-text-input サンプル ━━━", "info": "", "x": 180, "y": 1200, "wires": [] }, { "id": "b2b1827a4fa85257", "type": "ui-text-input", "z": "dc9d5574040bffd4", "group": "input_ui_group_text", "name": "名前入力", "label": "お名前", "order": 1, "width": 0, "height": 0, "topic": "name", "topicType": "str", "mode": "text", "delay": 300, "passthru": false, "sendOnBlur": true, "sendOnEnter": true, "className": "", "x": 160, "y": 1240, "wires": [ [ "b3dafd0ddf1ea511" ] ] }, { "id": "748bbaef47aee09f", "type": "ui-text-input", "z": "dc9d5574040bffd4", "group": "input_ui_group_text", "name": "数値入力", "label": "数量", "order": 2, "width": 0, "height": 0, "topic": "quantity", "topicType": "str", "mode": "number", "delay": 300, "passthru": false, "sendOnBlur": true, "sendOnEnter": true, "className": "", "x": 160, "y": 1300, "wires": [ [ "b3dafd0ddf1ea511" ] ] }, { "id": "0616f421b8a4a8df", "type": "ui-text-input", "z": "dc9d5574040bffd4", "group": "input_ui_group_text", "name": "パスワード入力", "label": "パスワード", "order": 3, "width": 0, "height": 0, "topic": "password", "topicType": "str", "mode": "password", "delay": 300, "passthru": false, "sendOnBlur": true, "sendOnEnter": true, "className": "", "x": 180, "y": 1360, "wires": [ [ "b3dafd0ddf1ea511" ] ] }, { "id": "b3dafd0ddf1ea511", "type": "debug", "z": "dc9d5574040bffd4", "name": "テキスト入力出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 430, "y": 1300, "wires": [] }, { "id": "47ba59b4af0b82be", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 📝 ui-form サンプル ━━━", "info": "", "x": 160, "y": 1440, "wires": [] }, { "id": "421878c92ed51ea6", "type": "ui-form", "z": "dc9d5574040bffd4", "name": "ユーザー登録フォーム", "group": "input_ui_group_form", "label": "", "order": 1, "width": 0, "height": 0, "options": [ { "label": "名前", "key": "name", "type": "text", "required": true, "rows": null }, { "label": "メール", "key": "email", "type": "email", "required": true, "rows": null }, { "label": "年齢", "key": "age", "type": "number", "required": false, "rows": null }, { "label": "コメント", "key": "comment", "type": "multiline", "required": false, "rows": 3 } ], "resetOnSubmit": true, "topic": "user_registration", "topicType": "str", "splitLayout": false, "className": "", "x": 200, "y": 1500, "wires": [ [ "596b1eee63dc8533" ] ] }, { "id": "596b1eee63dc8533", "type": "debug", "z": "dc9d5574040bffd4", "name": "フォーム出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 430, "y": 1500, "wires": [] }, { "id": "comment_radio_group", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 🔘 ui-radio-group サンプル ━━━", "info": "", "x": 180, "y": 1580, "wires": [] }, { "id": "ui_radio_priority", "type": "ui-radio-group", "z": "dc9d5574040bffd4", "group": "input_ui_group_radio", "name": "優先度選択", "label": "優先度", "order": 1, "width": 0, "height": 0, "topic": "priority", "topicType": "str", "passthru": false, "options": [ { "label": "🔴 高", "value": "high" }, { "label": "🟡 中", "value": "medium" }, { "label": "🟢 低", "value": "low" } ], "className": "", "x": 160, "y": 1640, "wires": [ [ "debug_radio_group" ] ] }, { "id": "debug_radio_group", "type": "debug", "z": "dc9d5574040bffd4", "name": "ラジオ出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 370, "y": 1640, "wires": [] }, { "id": "comment_button_group", "type": "comment", "z": "dc9d5574040bffd4", "name": "━━━ 🎛️ ui-button-group サンプル ━━━", "info": "", "x": 190, "y": 1720, "wires": [] }, { "id": "ui_button_group_mode", "type": "ui-button-group", "z": "dc9d5574040bffd4", "group": "input_ui_group_btngroup", "name": "表示モード", "label": "表示モード", "order": 1, "width": 0, "height": 0, "topic": "display_mode", "topicType": "str", "passthru": false, "options": [ { "label": "リスト", "value": "list", "icon": "mdi-format-list-bulleted", "color": "" }, { "label": "グリッド", "value": "grid", "icon": "mdi-grid", "color": "" }, { "label": "カード", "value": "card", "icon": "mdi-card-outline", "color": "" } ], "className": "", "x": 160, "y": 1780, "wires": [ [ "debug_button_group" ] ] }, { "id": "debug_button_group", "type": "debug", "z": "dc9d5574040bffd4", "name": "ボタングループ出力", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "payload", "targetType": "msg", "statusVal": "payload", "statusType": "auto", "x": 410, "y": 1780, "wires": [] }, { "id": "f5c5e9da805c49a3", "type": "ui-dropdown", "z": "dc9d5574040bffd4", "group": "input_ui_group_select", "name": "動作モード（動的）", "label": "動的オプション", "order": 3, "width": 0, "height": 0, "passthru": false, "multiple": false, "chips": false, "clearable": false, "options": [ { "label": "自動", "value": "auto", "type": "str" }, { "label": "手動", "value": "manual", "type": "str" }, { "label": "停止", "value": "stop", "type": "str" } ], "topic": "mode", "topicType": "str", "className": "", "typeIsComboBox": true, "msgTrigger": "onChange", "x": 560, "y": 1080, "wires": [ [ "0b4c0c9ed1f1d045" ] ] }, { "id": "7084e3a37c4c1ea5", "type": "ui-dropdown", "z": "dc9d5574040bffd4", "group": "input_ui_group_select", "name": "動作モード", "label": "動作モード", "order": 1, "width": 0, "height": 0, "passthru": false, "multiple": false, "chips": false, "clearable": false, "options": [ { "label": "自動", "value": "auto", "type": "str" }, { "label": "手動", "value": "manual", "type": "str" }, { "label": "停止", "value": "stop", "type": "str" } ], "payload": "", "topic": "topic", "topicType": "msg", "className": "", "typeIsComboBox": true, "msgTrigger": "onChange", "x": 150, "y": 940, "wires": [ [ "0b4c0c9ed1f1d045" ] ] }, { "id": "input_ui_group_radio", "type": "ui-group", "name": "🔘 ラジオボタン", "page": "input_ui_page", "width": "6", "height": "4", "order": 7, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_btngroup", "type": "ui-group", "name": "🎛️ ボタングループ", "page": "input_ui_page", "width": "6", "height": "4", "order": 8, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_button", "type": "ui-group", "name": "🔘 ボタン", "page": "input_ui_page", "width": "6", "height": "4", "order": 1, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_switch", "type": "ui-group", "name": "🔛 スイッチ", "page": "input_ui_page", "width": "6", "height": "4", "order": 2, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_slider", "type": "ui-group", "name": "🎚️ スライダー", "page": "input_ui_page", "width": "6", "height": "4", "order": 3, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_select", "type": "ui-group", "name": "📋 選択系", "page": "input_ui_page", "width": "6", "height": "6", "order": 4, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_text", "type": "ui-group", "name": "⌨️ テキスト入力", "page": "input_ui_page", "width": "6", "height": "6", "order": 5, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_group_form", "type": "ui-group", "name": "📝 フォーム", "page": "input_ui_page", "width": "6", "height": "8", "order": 6, "showTitle": true, "className": "", "visible": true, "disabled": false, "groupType": "default" }, { "id": "input_ui_page", "type": "ui-page", "name": "入力系サンプル", "ui": "6692685697ac2af1", "path": "/input-widgets", "icon": "mdi-gamepad-variant", "layout": "grid", "theme": "input_ui_theme", "breakpoints": [ { "name": "Default", "px": 0, "cols": 3 }, { "name": "Tablet", "px": 576, "cols": 6 }, { "name": "Small Desktop", "px": 768, "cols": 9 }, { "name": "Desktop", "px": 1024, "cols": 12 } ], "order": 2, "className": "", "visible": "true", "disabled": "false" }, { "id": "6692685697ac2af1", "type": "ui-base", "name": "My Dashboard", "path": "/dashboard", "appIcon": "", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": false, "headerContent": "page", "navigationStyle": "default", "titleBarStyle": "default", "showPageTitle": true, "showReconnectNotification": true, "notificationDisplayTime": 1, "showDisconnectNotification": true, "allowInstall": false }, { "id": "input_ui_theme", "type": "ui-theme", "name": "Default Theme", "colors": { "surface": "#ffffff", "primary": "#b92d5d", "bgPage": "#eeeeee", "groupBg": "#ffffff", "groupOutline": "#cccccc" }, "sizes": { "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px", "density": "default" } }, { "id": "012aac34447c496d", "type": "global-config", "env": [], "modules": { "@flowfuse/node-red-dashboard": "1.29.0" } } ]