Dashboard 2 Labels

I have this button here

The controller is supposed to read a bit and determine of something is running or stopped.
So if the bit is 0, then I change a ui_update.Label to stopped. if 1, then change ui_update.Label to running.

This used to work on dashboard 1.0 but I guess the syntax on dashboard 2 changed. I also want the font to be bigger than whatever default is. hence the font size = 20.

[
    {
        "id": "d5fdce60e11013ce",
        "type": "debug",
        "z": "0a829f028dcf17eb",
        "name": "debug 10",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 360,
        "y": 280,
        "wires": []
    },
    {
        "id": "706e488dd0423e90",
        "type": "function",
        "z": "0a829f028dcf17eb",
        "name": "C11 - C20 PARSER",
        "func": "var msg_o = [msg, msg, msg, msg, msg, msg, msg, msg, msg, msg,];\nvar i;\n\nfor(i=0; i<10; i++){\n    msg_o[i] = {payload: msg.payload[i] }\n    \n}\n\nreturn msg_o;",
        "outputs": 10,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 370,
        "y": 380,
        "wires": [
            [
                "0660884a17151ba5"
            ],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            []
        ]
    },
    {
        "id": "0660884a17151ba5",
        "type": "switch",
        "z": "0a829f028dcf17eb",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "true"
            },
            {
                "t": "false"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 570,
        "y": 300,
        "wires": [
            [
                "10d20aa9b4481e6a",
                "c2c2be3bebab7412"
            ],
            [
                "e1b75882ec4716f8",
                "c2c2be3bebab7412"
            ]
        ]
    },
    {
        "id": "88b358b71c9453bb",
        "type": "comment",
        "z": "0a829f028dcf17eb",
        "name": "C11-C20 PARSER",
        "info": "",
        "x": 130,
        "y": 340,
        "wires": []
    },
    {
        "id": "10d20aa9b4481e6a",
        "type": "change",
        "z": "0a829f028dcf17eb",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "RUNNING",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.Label",
                "pt": "msg",
                "to": "RUNNING",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "green",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 780,
        "y": 320,
        "wires": [
            [
                "8d374369a8714b1c",
                "db85ba9b33258c1e",
                "ba30826809b09c25"
            ]
        ]
    },
    {
        "id": "e1b75882ec4716f8",
        "type": "change",
        "z": "0a829f028dcf17eb",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "STOPPED",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.Label",
                "pt": "msg",
                "to": "STOPPED",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "red",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 780,
        "y": 360,
        "wires": [
            [
                "8d374369a8714b1c",
                "db85ba9b33258c1e",
                "ba30826809b09c25"
            ]
        ]
    },
    {
        "id": "8d374369a8714b1c",
        "type": "debug",
        "z": "0a829f028dcf17eb",
        "name": "debug 11",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1080,
        "y": 200,
        "wires": []
    },
    {
        "id": "7267ca178e24092c",
        "type": "modbus-response",
        "z": "0a829f028dcf17eb",
        "name": "",
        "registerShowMax": 20,
        "x": 370,
        "y": 480,
        "wires": []
    },
    {
        "id": "910fb4f5bc49c6c9",
        "type": "modbus-read",
        "z": "0a829f028dcf17eb",
        "name": "PLC-READ",
        "topic": "PLC",
        "showStatusActivities": false,
        "logIOActivities": false,
        "showErrors": false,
        "showWarnings": true,
        "unitid": "1",
        "dataType": "Coil",
        "adr": "16394",
        "quantity": "10",
        "rate": "1",
        "rateUnit": "s",
        "delayOnStart": false,
        "startDelayTime": "",
        "server": "bf81420f.323c4",
        "useIOFile": false,
        "ioFile": "",
        "useIOForPayload": false,
        "emptyMsgOnFail": false,
        "x": 130,
        "y": 400,
        "wires": [
            [
                "d5fdce60e11013ce",
                "706e488dd0423e90"
            ],
            [
                "7267ca178e24092c"
            ]
        ]
    },
    {
        "id": "db85ba9b33258c1e",
        "type": "ui-text",
        "z": "0a829f028dcf17eb",
        "group": "425e456031a30762",
        "order": 2,
        "width": "3",
        "height": "1",
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "style": true,
        "font": "Arial Black,Arial Black,Gadget,sans-serif",
        "fontSize": 16,
        "color": "#000000",
        "wrapText": false,
        "className": "",
        "value": "payload",
        "valueType": "str",
        "x": 1070,
        "y": 260,
        "wires": []
    },
    {
        "id": "c2c2be3bebab7412",
        "type": "ui-led",
        "z": "0a829f028dcf17eb",
        "name": "",
        "group": "425e456031a30762",
        "order": 3,
        "width": "1",
        "height": "1",
        "label": "",
        "labelPlacement": "left",
        "labelAlignment": "left",
        "states": [
            {
                "value": "false",
                "valueType": "bool",
                "color": "#ff0000"
            },
            {
                "value": "true",
                "valueType": "bool",
                "color": "#00ff00"
            }
        ],
        "allowColorForValueInMessage": false,
        "shape": "circle",
        "showBorder": true,
        "showGlow": true,
        "x": 790,
        "y": 220,
        "wires": []
    },
    {
        "id": "9f2ab1b4514d3aa1",
        "type": "comment",
        "z": "0a829f028dcf17eb",
        "name": "C1 - START/STOP BUTTON",
        "info": "",
        "x": 1160,
        "y": 300,
        "wires": []
    },
    {
        "id": "f98a6ca88a705131",
        "type": "debug",
        "z": "0a829f028dcf17eb",
        "name": "debug 13",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1280,
        "y": 200,
        "wires": []
    },
    {
        "id": "ba30826809b09c25",
        "type": "ui-button",
        "z": "0a829f028dcf17eb",
        "group": "425e456031a30762",
        "name": "START STOP BUTTON",
        "label": "<font size = 20>{{msg.ui_update.Label}}",
        "order": 1,
        "width": "5",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "true",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "msg.ui_update.buttonColor",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1050,
        "y": 340,
        "wires": [
            [
                "f98a6ca88a705131"
            ]
        ]
    },
    {
        "id": "bf81420f.323c4",
        "type": "modbus-client",
        "name": "PLC",
        "clienttype": "tcp",
        "bufferCommands": true,
        "stateLogEnabled": false,
        "queueLogEnabled": false,
        "failureLogEnabled": false,
        "tcpHost": "192.168.0.10",
        "tcpPort": "502",
        "tcpType": "DEFAULT",
        "serialPort": "/dev/ttyUSB",
        "serialType": "RTU-BUFFERD",
        "serialBaudrate": "9600",
        "serialDatabits": "8",
        "serialStopbits": "1",
        "serialParity": "none",
        "serialConnectionDelay": "100",
        "serialAsciiResponseStartDelimiter": "",
        "unit_id": 1,
        "commandDelay": 1,
        "clientTimeout": 1000,
        "reconnectOnTimeout": true,
        "reconnectTimeout": 2000,
        "parallelUnitIdsAllowed": true,
        "showErrors": false,
        "showWarnings": true,
        "showLogs": true
    },
    {
        "id": "425e456031a30762",
        "type": "ui-group",
        "name": "Group 7",
        "page": "614e54b4c5fc3ccc",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "614e54b4c5fc3ccc",
        "type": "ui-page",
        "name": "Page 2",
        "ui": "ff48cd83ca1ae463",
        "path": "/page2",
        "icon": "home",
        "layout": "grid",
        "theme": "f7b447c2f12c78b5",
        "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": "ff48cd83ca1ae463",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "f7b447c2f12c78b5",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "e62274e1561c1d69",
        "type": "global-config",
        "env": [],
        "modules": {
            "node-red-contrib-modbus": "5.45.2",
            "@flowfuse/node-red-dashboard": "1.29.0",
            "@flowfuse/node-red-dashboard-2-ui-led": "1.1.0"
        }
    }
]

Thoughts on this?

label, not Label. I don't think it was Label in the old dashboard either.
When something doesn't work it is always worth reading the help text for the node.

I think you are right it's label with a lower case l.
However ...

That is a lower case l is it not? In my browser it looks like this
image

I suppose it might be.
I read it as Label and spent several hours failing to make it work recently, so that's two of us.

font-family: Menlo, Consolas, DejaVu Sans Mono, Courier, monospace

:thinking:

I'm pretty sure I tried upper case and lower case. Neither worked.

Configure a debug node to Output Complete Message and use that to show us the message you are sending to the button.

Well the first and last letter look the same, and the middle ones are obviously lowercase so unless it was LabeL I think it is definitely all lowercase :detective:

Thanks! Maybe I head wasn't consistent in my nodes, but when i changed Label to label, it worked.

But the fonts are still small. They aren't Font Size 20. How do i get that part to work in conjunction with the ui_update.label?

"RESET" this works. But {{msg.ui_update.label}} does not. Is font size = xx not supported if the suffix is msg.ui_update.label?

Have a look at Custom CSS for buttons - problem controlling font size · Issue #534 · FlowFuse/node-red-dashboard · GitHub

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