Node-REDのHowTo(その4)

Node-REDのメモ Dashboard編

Node-REDでDashboardでUIを作成するときの設定手順のメモ。
鶏頭で忘れっぽいのでメモ。

Dashboardをインストールする

Dashboard のUIを作成する(ボタン)

ブラウザでDashboardのUIに接続する

Dashboard のUIを作成する(スライダ)

Dashboardでゲージグラフを表示する

[!NOTE] Value formatのフィルタの詳細はhttps://scotch.io/tutorials/all-about-the-built-in-angularjs-filtersを見ろと書かれていましたが、残念ながら私にはよく分かりませんでした…

Dashboardでテキストを表示する

フローの例


[
    {
        "id": "a226513f.c36b1",
        "type": "tab",
        "label": "Dashboard_1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "160486fa.dc7159",
        "type": "ui_button",
        "z": "a226513f.c36b1",
        "name": "",
        "group": "1127e563.00001b",
        "order": 1,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "ON",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "ON",
        "payloadType": "str",
        "topic": "",
        "x": 130,
        "y": 100,
        "wires": [
            [
                "e89b8821.ec65e8",
                "84bd2adf.3b5df8"
            ]
        ]
    },
    {
        "id": "e89b8821.ec65e8",
        "type": "debug",
        "z": "a226513f.c36b1",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 580,
        "y": 100,
        "wires": []
    },
    {
        "id": "d4346336.cf1228",
        "type": "ui_button",
        "z": "a226513f.c36b1",
        "name": "",
        "group": "1127e563.00001b",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "OFF",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "OFF",
        "payloadType": "str",
        "topic": "",
        "x": 130,
        "y": 160,
        "wires": [
            [
                "e89b8821.ec65e8",
                "84bd2adf.3b5df8"
            ]
        ]
    },
    {
        "id": "e403fdac.aa3748",
        "type": "ui_slider",
        "z": "a226513f.c36b1",
        "name": "",
        "label": "温度",
        "tooltip": "",
        "group": "1127e563.00001b",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "outs": "all",
        "topic": "",
        "min": "-30",
        "max": "50",
        "step": 1,
        "x": 140,
        "y": 240,
        "wires": [
            [
                "e89b8821.ec65e8",
                "78c10ecb.1eb67"
            ]
        ]
    },
    {
        "id": "78c10ecb.1eb67",
        "type": "ui_gauge",
        "z": "a226513f.c36b1",
        "name": "",
        "group": "1127e563.00001b",
        "order": 6,
        "width": 4,
        "height": 4,
        "gtype": "gage",
        "title": "温度",
        "label": "℃",
        "format": "{{value}}℃",
        "min": "-20",
        "max": "40",
        "colors": [
            "#0000ff",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "0",
        "seg2": "30",
        "x": 570,
        "y": 240,
        "wires": []
    },
    {
        "id": "84bd2adf.3b5df8",
        "type": "ui_text",
        "z": "a226513f.c36b1",
        "group": "1127e563.00001b",
        "order": 3,
        "width": 2,
        "height": 1,
        "name": "",
        "label": "SW",
        "format": "{{value}}",
        "layout": "row-spread",
        "x": 560,
        "y": 180,
        "wires": []
    },
    {
        "id": "1127e563.00001b",
        "type": "ui_group",
        "z": "",
        "name": "グループ1",
        "tab": "6547952b.517b34",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "6547952b.517b34",
        "type": "ui_tab",
        "z": "",
        "name": "タブ1",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Dashboard のレイアウトを修正する

ボタンのサイズを小さくしたり、複数のボタンを横に並べたい場合はレイアウトの修正を行う。