Dashboard 2.0 - Dynamically change group color

Hello everyone,

I've recently started using Dashboard 2.0 and was trying to dynamically change a group color.
I'm using the same method as for D1.0 but it doesn't seem to work (using {{msg.payload}}).

Could someone direct me to the correct syntax ?

Here is a simple flow to demonstrate what I did :

[
    {
        "id": "6943e32d5f3cd3f3",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "red",
        "payloadType": "str",
        "x": 710,
        "y": 360,
        "wires": [
            [
                "18f7d68d73bd84b9"
            ]
        ]
    },
    {
        "id": "bf894aad5f1935e7",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "green",
        "payloadType": "str",
        "x": 710,
        "y": 400,
        "wires": [
            [
                "18f7d68d73bd84b9"
            ]
        ]
    },
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "38d13818ed4d88d2",
        "group": "",
        "page": "48a544354c74af1f",
        "ui": "",
        "name": "red or green",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n\n /* All .v-card's inside a group */\n .nrdb-ui-group.ClassTest .v-card {\n    border-width: 10px;\n    background-color: {{msg.payload}} !important ;\n}\n\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:page",
        "className": "",
        "x": 870,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "822ba01fa06fdbf0",
        "type": "ui-text",
        "z": "38d13818ed4d88d2",
        "group": "b52a3d06df21b65f",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Test",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 850,
        "y": 460,
        "wires": []
    },
    {
        "id": "3ff3d65c9acfbf59",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Hello !",
        "payloadType": "str",
        "x": 710,
        "y": 460,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "f4139e7488bf5f07",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

image

Thanks in advance !

1 Like

you can setup up styles and then dynamically set the class name

chrome_pgDQbmeWUt

[
    {
        "id": "6943e32d5f3cd3f3",
        "type": "inject",
        "z": "4dc48d85b98236c1",
        "name": "red bad",
        "props": [
            {
                "p": "class",
                "v": "red",
                "vt": "str"
            },
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "bad",
        "payloadType": "str",
        "x": 950,
        "y": 300,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "bf894aad5f1935e7",
        "type": "inject",
        "z": "4dc48d85b98236c1",
        "name": "green good",
        "props": [
            {
                "p": "class",
                "v": "green",
                "vt": "str"
            },
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "good",
        "payloadType": "str",
        "x": 970,
        "y": 340,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "4dc48d85b98236c1",
        "group": "",
        "page": "",
        "ui": "22ea43815413e748",
        "name": "red and green styles",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n\n.nrdb-ui-widget.nrdb-ui-text.red {\n    border-width: 10px;\n    background-color: red !important ;\n}\n\n.nrdb-ui-widget.nrdb-ui-text.green {\n    border-width: 10px;\n    background-color: lime !important ;\n}\n.nrdb-ui-widget.nrdb-ui-text.green > div {\n    color: darkblue;\n}\n.nrdb-ui-widget.nrdb-ui-text.red > div {\n    color: aliceblue;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 1000,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "822ba01fa06fdbf0",
        "type": "ui-text",
        "z": "4dc48d85b98236c1",
        "group": "b52a3d06df21b65f",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Test",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 1150,
        "y": 320,
        "wires": []
    },
    {
        "id": "22ea43815413e748",
        "type": "ui-base",
        "name": "base",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "22ea43815413e748",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

IMPORTANT:

You will need to edit / delete the ui-base config node that gets imported with the above demo flow and re-assign the ui-template and page to your ui-base

1 Like

Thank you for your answer !
However I'm not attempting to change a widget's background color but a group's, of which the class can't (I believe) be set dynamically.

you should be able to target parent cards using a selectoe with the pseudo :has(.red)

That worked ! Thanks a lot :slight_smile: I do have another problem though ; I'm trying to change the group's color depending on the value of a slider (the group turns red when the slider reaches 0).

However, I have to go to "0" twice on the slider for the color to change. Do you know how I could fix that ?

[
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "38d13818ed4d88d2",
        "group": "",
        "page": "48a544354c74af1f",
        "ui": "",
        "name": "CSS",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".v-card:has(.ClassRed) {\n    border-width: 10px;\n    background-color: red !important ;\n}\n\n.v-card:has(.ClassOK) {\n    border-width: 10px;\n    background-color: transparent !important ;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 1090,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "56c1625e6db2b486",
        "type": "ui-slider",
        "z": "38d13818ed4d88d2",
        "group": "b52a3d06df21b65f",
        "name": "",
        "label": "Slider",
        "tooltip": "",
        "order": 2,
        "width": "3",
        "height": "1",
        "passthru": false,
        "outs": "end",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": true,
        "min": 0,
        "max": "2",
        "step": 1,
        "className": "",
        "x": 1090,
        "y": 600,
        "wires": [
            [
                "fc56b54aa961d04c",
                "341c3cbedbe9a981"
            ]
        ]
    },
    {
        "id": "fc56b54aa961d04c",
        "type": "ui-gauge",
        "z": "38d13818ed4d88d2",
        "name": "",
        "group": "b52a3d06df21b65f",
        "order": 1,
        "width": 0,
        "height": 0,
        "gtype": "gauge-half",
        "gstyle": "needle",
        "title": "gauge",
        "units": "units",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#d65c62"
            },
            {
                "from": "1",
                "color": "#ffc800"
            },
            {
                "from": "2",
                "color": "#53eaa3"
            }
        ],
        "min": 0,
        "max": "2",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 1230,
        "y": 600,
        "wires": []
    },
    {
        "id": "341c3cbedbe9a981",
        "type": "function",
        "z": "38d13818ed4d88d2",
        "name": "Which class ?",
        "func": "var value = msg.payload;\n\nif(value == 0){\n    msg.class = \"ClassRed\";\n}\n\nelse{\n    msg.class = \"ClassOK\";\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 940,
        "y": 600,
        "wires": [
            [
                "56c1625e6db2b486"
            ]
        ]
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "f4139e7488bf5f07",
        "path": "/TEST",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": false
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": false
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Thanks in advance !

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.