Button group nodes / no change of states

Dashboard
1

Hi all,

I have found an issue I think.

Feeding the button group node with an msg.ui_update as follows (from a function node). All is working fine (appearance, ouput). But the button states only change after a refresh of the page (i.e. F5). To be more precise: The recent pushed button does not get highlighted. What am I doing wrong ?

msg.ui_update = {
    options: [
        {
            "value": "1",
        "label": "<div style='background-color: rgb(255, 169, 86); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 169, 86, 0.8), 0px 0px 40px rgba(255, 169, 86, 0.5);'> </div>"
        },
        {
            "value": "2",
            "label": "<div style='background-color: rgb(255, 207, 163); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 207, 163, 0.8), 0px 0px 40px rgba(255, 207, 163, 0.5);'> </div>"
        },
        {
            "value": "3",
            "label": "<div style='background-color: rgb(255, 232, 214); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 232, 214, 0.8), 0px 0px 40px rgba(255, 232, 214, 0.5);'> </div>"
        },
        {
            "value": "4",
            "label": "<div style='background-color: rgb(255, 255, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8), 0px 0px 40px rgba(255, 255, 255, 0.5);'> </div>"
        },
        {
            "value": "5",
            "label": "<div style='background-color: rgb(223, 231, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(223, 231, 255, 0.8), 0px 0px 40px rgba(223, 231, 255, 0.5);'> </div>"
        },
        {
            "value": "6",
            "label": "<div style='background-color: rgb(203, 219, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(203, 219, 255, 0.8), 0px 0px 40px rgba(203, 219, 255, 0.5);'> </div>"
        }
    ]
};


return msg;

Thank you...

2

Could you export and paste here a flow with an inject node, your function node, and the button group node so it is easy for us the test with the button configured the correct way?

3

Sure... Here you go:

[
    {
        "id": "4f44d363aed65af7",
        "type": "function",
        "z": "d219a270aa9d8c20",
        "name": "assign values & labels",
        "func": "msg.ui_update = {\n    options: [\n        {\n            \"value\": \"1\",\n        \"label\": \"<div style='background-color: rgb(255, 169, 86); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 169, 86, 0.8), 0px 0px 40px rgba(255, 169, 86, 0.5);'> </div>\"\n        },\n        {\n            \"value\": \"2\",\n            \"label\": \"<div style='background-color: rgb(255, 207, 163); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 207, 163, 0.8), 0px 0px 40px rgba(255, 207, 163, 0.5);'> </div>\"\n        },\n        {\n            \"value\": \"3\",\n            \"label\": \"<div style='background-color: rgb(255, 232, 214); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 232, 214, 0.8), 0px 0px 40px rgba(255, 232, 214, 0.5);'> </div>\"\n        },\n        {\n            \"value\": \"4\",\n            \"label\": \"<div style='background-color: rgb(255, 255, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8), 0px 0px 40px rgba(255, 255, 255, 0.5);'> </div>\"\n        },\n        {\n            \"value\": \"5\",\n            \"label\": \"<div style='background-color: rgb(223, 231, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(223, 231, 255, 0.8), 0px 0px 40px rgba(223, 231, 255, 0.5);'> </div>\"\n        },\n        {\n            \"value\": \"6\",\n            \"label\": \"<div style='background-color: rgb(203, 219, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(203, 219, 255, 0.8), 0px 0px 40px rgba(203, 219, 255, 0.5);'> </div>\"\n        }\n    ]\n};\n\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 2170,
        "wires": [
            [
                "fd3a8eebc367fc1f"
            ]
        ]
    },
    {
        "id": "10f834f703f1c7dc",
        "type": "inject",
        "z": "d219a270aa9d8c20",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 190,
        "y": 2170,
        "wires": [
            [
                "4f44d363aed65af7"
            ]
        ]
    },
    {
        "id": "fd3a8eebc367fc1f",
        "type": "ui-button-group",
        "z": "d219a270aa9d8c20",
        "name": "Whitetemps",
        "group": "5930b6568a470324",
        "order": 0,
        "width": 6,
        "height": 1,
        "label": "Whitetemps",
        "className": "",
        "rounded": true,
        "useThemeColors": false,
        "passthru": false,
        "options": [
            {
                "label": "",
                "icon": "",
                "value": "option_0",
                "valueType": "str",
                "color": "#009933"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_1",
                "valueType": "str",
                "color": "#999999"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_2",
                "valueType": "str",
                "color": "#ff6666"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_3",
                "valueType": "str",
                "color": "#009999"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_4",
                "valueType": "str",
                "color": "#cccc00"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_5",
                "valueType": "str",
                "color": "#ff33cc"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 680,
        "y": 2170,
        "wires": [
            [
                "a7252d91595187f9"
            ]
        ]
    },
    {
        "id": "a7252d91595187f9",
        "type": "debug",
        "z": "d219a270aa9d8c20",
        "name": "debug 357",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 900,
        "y": 2170,
        "wires": []
    },
    {
        "id": "5930b6568a470324",
        "type": "ui-group",
        "name": "Group 3",
        "page": "a71e15af5f8a5ba8",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "a71e15af5f8a5ba8",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "14a551a96b61dade",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "a36c27e9dd58ee16",
        "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": "14a551a96b61dade",
        "type": "ui-base",
        "name": "My Dashboard 2 Next Level",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "id": "a36c27e9dd58ee16",
        "type": "ui-theme",
        "z": "d219a270aa9d8c20",
        "name": "Default Theme",
        "colors": {
            "surface": "#fafafa",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
4

@ceysa75, what does that that button group look like for you?

Because for me it looks like this, which does seem sub-optimal.

image
image949Ă—225 16.1 KB

5

Oh, that's strange. This is how it appears in my case:

image
image1600Ă—217 65.4 KB

6

I'm working on a rather out of date version of db2. Let me update everything...

OK, now I see what you see...

Your button group is set to use colours from the config so the active button has inline styling, eg for the first button

height: auto; background-color: rgb(0, 153, 51); color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255);

Your function also sends inline styling via msg.ui_update, which clearly overrides it.

<div style='background-color: rgb(255, 169, 86);

I think you are facing the same problem as others have raised: msg.ui_update changes are very persistent, so once your function has fired, the inline styling for a clicked button won't override it.

If you have a limited and fixed range of button colours, maybe you can get around it by specifying classes for your buttons and styling them in a CSS template.

<div class="4000K">

Also: would it be simpler to work on the button icon rather than putting a coloured circle in the label?
You can make the icon larger with --v-icon-size-multiplier, and presumably change the colour.

7

Thank you for the clarification. And escpecially for the tips and hints. Actually I am just testing the Dashboard 2 environment.

OK, I understood. Seems to be an ongoing discussion (too technical for me, thus, I am afraid I cannot contribute something reasonable). Anyway, can live without injecting msg.ui_update at the moment. It also works if I enter my stuff into the node directly (then I have no issues).

While we are at it: When disabling the button group node (msg.enable = false) then the row gets disabled. However, the button highlighted before remains highlighted, even if somewhat greyed out). Any hints to 'un-highlight' all buttons ?

Regards

8

Does sending an empty string payload to the button work?

1 Like
9

Heey. That's great. That worked! Thank you

10

BTW, found the same behavior now even without msg.ui_update. Simply using html in the label field leads to the sitution that once a button is highlighted it remains higlighted. Just a refresh with F5 shows the recently pushed button. See my entries below:

image
image1741Ă—728 33 KB

11

For further explanation:

image
image1011Ă—376 42.9 KB

And here is the respective flow:

[
    {
        "id": "9bc46b95c1b328f6",
        "type": "ui-button-group",
        "z": "7845132b7bdf9787",
        "name": "",
        "group": "6edff2fa2f5c6296",
        "order": 1,
        "width": 6,
        "height": 1,
        "label": "",
        "className": "",
        "rounded": true,
        "useThemeColors": true,
        "passthru": false,
        "options": [
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 169, 86);\"></span>",
                "icon": "",
                "value": "option_0",
                "valueType": "str",
                "color": "#009933"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 207, 163);\"></span>",
                "icon": "",
                "value": "option_1",
                "valueType": "str",
                "color": "#999999"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 232, 214);\"></span>",
                "icon": "",
                "value": "option_2",
                "valueType": "str",
                "color": "#ff6666"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 255, 255);\"></span>",
                "icon": "",
                "value": "option_3",
                "valueType": "str",
                "color": "#009999"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(223, 231, 255);\"></span>",
                "icon": "",
                "value": "option_4",
                "valueType": "str",
                "color": "#cccc00"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(203, 219, 255);\"></span>",
                "icon": "",
                "value": "option_5",
                "valueType": "str",
                "color": "#ff33cc"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 450,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "6edff2fa2f5c6296",
        "type": "ui-group",
        "name": "multiswitch",
        "page": "b76e6ae7a7b504b6",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "b76e6ae7a7b504b6",
        "type": "ui-page",
        "name": "Colors",
        "ui": "14a551a96b61dade",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "cbe751f3fb4f230f",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "6"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "6"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "14a551a96b61dade",
        "type": "ui-base",
        "name": "My Dashboard 2 Next Level",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "id": "cbe751f3fb4f230f",
        "type": "ui-theme",
        "name": "JJ_Dark",
        "colors": {
            "surface": "#2c5168",
            "primary": "#585858",
            "bgPage": "#121212",
            "groupBg": "#212121",
            "groupOutline": "#424242"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
12

That looks like a bug to me.
You could try raising an issue on github.

Personally, I have no hope for the button group widget and won't use it.
I think you are more likely to get the result you are after with a template, perhaps including multiple vue buttons.

13

Even it is a bug, (claimed that the html in label is supported) I don't think it is proper way to do the thing.

As the look and feel is mainly CSS, the tools should follow accordingly.
And as I do understand you wanted to change the default look/behavior as the icons should have different colors, not the background of the button.

It definitely can be done with CSS.

[{"id":"c8955d08c31d2d8a","type":"ui-button-group","z":"9ab81d258b54a577","name":"","group":"6edff2fa2f5c6296","order":1,"width":6,"height":1,"label":"","className":"btn-grp-colored-icons","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"","icon":"lightbulb-on mdi-36px","value":"option_0","valueType":"str","color":"#ffa942"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_1","valueType":"str","color":"#999999"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_2","valueType":"str","color":"#ff6666"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_3","valueType":"str","color":"#009999"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_4","valueType":"str","color":"#cccc00"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_5","valueType":"str","color":"#ff33cc"}],"topic":"topic","topicType":"msg","x":630,"y":1600,"wires":[[]]},{"id":"ebcb7d50d3fa2bb2","type":"ui-template","z":"9ab81d258b54a577","group":"","page":"","ui":"cf21e7dda9e29be4","name":"","order":0,"width":0,"height":0,"head":"","format":".btn-grp-colored-icons button[value=\"option_0\"] i{\n    color:rgb(255, 169, 86);\n}\n.btn-grp-colored-icons button[value=\"option_1\"] i{\n    color:rgb(255, 207, 163);\n}\n.btn-grp-colored-icons button[value=\"option_2\"] i{\n    color:rgb(255, 232, 214);\n}\n.btn-grp-colored-icons button[value=\"option_3\"] i{\n    color:rgb(255, 255, 255);\n}\n.btn-grp-colored-icons button[value=\"option_4\"] i {\n    color: rgb(223, 231, 255);\n}\n.btn-grp-colored-icons button[value=\"option_5\"] i {\n    color: rgb(203, 219, 255);\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":620,"y":1560,"wires":[[]]},{"id":"6edff2fa2f5c6296","type":"ui-group","name":"multiswitch","page":"b76e6ae7a7b504b6","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"cf21e7dda9e29be4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"b76e6ae7a7b504b6","type":"ui-page","name":"Colors","ui":"cf21e7dda9e29be4","path":"/page1","icon":"home","layout":"grid","theme":"cbe751f3fb4f230f","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"6"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"cbe751f3fb4f230f","type":"ui-theme","name":"JJ_Dark","colors":{"surface":"#2c5168","primary":"#585858","bgPage":"#121212","groupBg":"#212121","groupOutline":"#424242"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2 Likes
14

Hi hotNipi,

this is fabulous. Thank you. While you might be right with saying that the CSS approach is more reasonable, it is less intuitive for most of us (I think). Me personally, I can read and understand a bit of HTML. Nothing complicated but at least for some ICON coloring it is sufficient. Of course it would be great using the CSS 'backdoor'; but this this train has left the station for me. You, on the other hand are the train driver (or locomotive engineer... ;-))

15

Oh no, I can be found eating lunch in the restaurant car.

16

Estonian trains must be nicer than British ones!

17

There was a time....