Dashboard 2.0 text color

Hello,

Is there a way to make the text of the status green when online, red when offline?

afbeelding

The trigger node send On or Off line,

Try sending msg.ui_update.color = "red" to the text widget.

Docs: Text ui-text | Node-RED Dashboard 2.0

Thanks for your support!

Where of how should I place this in the flow? This is new to me.
Behind the trigger node i guess.
After the trigger Online should been green, and OFFline red

Switch node to check online/offline --> followed by change nodes that set the property to the desired colour --> text widget

The trigger node can have two outputs, so no need for switch node.
You also have to check apply style.

The only issue I see is msg.ui_update.color will affect all text in the text node, not just offline/online the title status will change to.

[edit]
Example two outputs on trigger node.

[{"id":"afdc199a57eca001","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":100,"wires":[["6a222a2c0d88d886"]]},{"id":"6a222a2c0d88d886","type":"trigger","z":"d1395164b4eec73e","name":"","op1":"online","op2":"offline","op1type":"str","op2type":"str","duration":"10","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":450,"y":100,"wires":[["a5ce3b7792b9530c"],["6807057c1fa30dc8"]]},{"id":"a5ce3b7792b9530c","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"ui_update.color","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":80,"wires":[["e9bace5f900290fe"]]},{"id":"6807057c1fa30dc8","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"ui_update.color","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":120,"wires":[["e9bace5f900290fe"]]},{"id":"e9bace5f900290fe","type":"ui-text","z":"d1395164b4eec73e","group":"b429518aee48a6fb","order":1,"width":0,"height":0,"name":"","label":"Status","format":"{{msg.payload}}","layout":"col-center","style":true,"font":"","fontSize":16,"color":"#000000","className":"","x":870,"y":100,"wires":[]},{"id":"b429518aee48a6fb","type":"ui-group","name":"Chart Examples","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"1805777f90e92057","path":"/charts","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","order":3,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Maybe you can help me on the right way? I can't get it to work. This is also new to me.
This is what i have. The color of the text does not change.

[
    {
        "id": "162334d1df967473",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "aca4b0bec15a08d1",
        "type": "switch",
        "z": "162334d1df967473",
        "name": "IDX Temp",
        "property": "payload.idx",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "5257",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 300,
        "y": 100,
        "wires": [
            [
                "7e1b9a257df7d474",
                "3e886ce4e57a5fb4",
                "2e4cde816b54d548"
            ]
        ]
    },
    {
        "id": "7e1b9a257df7d474",
        "type": "function",
        "z": "162334d1df967473",
        "name": "Battery",
        "func": "// Set msg.payload to msg.payload.nvalue\nmsg.payload = msg.payload.Battery;\n\n// Return the modified message\nreturn msg;",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 580,
        "y": 80,
        "wires": [
            [
                "0999bbd5a971bf4f"
            ]
        ]
    },
    {
        "id": "0999bbd5a971bf4f",
        "type": "ui-gauge",
        "z": "162334d1df967473",
        "name": "Hal beneden batterij",
        "group": "56f1346a9aebbaab",
        "order": 2,
        "width": "2",
        "height": "2",
        "gtype": "gauge-half",
        "gstyle": "needle",
        "title": "Hal beneden batterij",
        "units": "",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "10",
                "color": "#ff0000"
            },
            {
                "from": "20",
                "color": "#ff8040"
            },
            {
                "from": "30",
                "color": "#00ff00"
            }
        ],
        "min": "10",
        "max": "100",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 1240,
        "y": 80,
        "wires": []
    },
    {
        "id": "953603824d0666f5",
        "type": "ui-text-input",
        "z": "162334d1df967473",
        "group": "56f1346a9aebbaab",
        "name": "Hal beneden update",
        "label": "Laatste update",
        "order": 3,
        "width": "2",
        "height": "1",
        "topic": "topic",
        "topicType": "msg",
        "mode": "text",
        "tooltip": "",
        "delay": 300,
        "passthru": false,
        "sendOnDelay": false,
        "sendOnBlur": false,
        "sendOnEnter": false,
        "className": "",
        "clearable": false,
        "sendOnClear": false,
        "icon": "",
        "iconPosition": "left",
        "iconInnerPosition": "inside",
        "x": 1240,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "3e886ce4e57a5fb4",
        "type": "function",
        "z": "162334d1df967473",
        "name": "LastUpdate",
        "func": "// Set msg.payload to msg.payload.nvalue\nmsg.payload = msg.payload.LastUpdate;\n\n// Return the modified message\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 590,
        "y": 120,
        "wires": [
            [
                "953603824d0666f5"
            ]
        ]
    },
    {
        "id": "2e4cde816b54d548",
        "type": "trigger",
        "z": "162334d1df967473",
        "name": "",
        "op1": "Online",
        "op2": "Offline",
        "op1type": "str",
        "op2type": "str",
        "duration": "60",
        "extend": true,
        "overrideDelay": false,
        "units": "min",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 590,
        "y": 160,
        "wires": [
            [
                "4515bea65d375473",
                "7ca4e5cc22970087"
            ]
        ]
    },
    {
        "id": "4515bea65d375473",
        "type": "ui-text-input",
        "z": "162334d1df967473",
        "group": "56f1346a9aebbaab",
        "name": "Status",
        "label": "Status",
        "order": 4,
        "width": "2",
        "height": "1",
        "topic": "topic",
        "topicType": "msg",
        "mode": "text",
        "tooltip": "",
        "delay": 300,
        "passthru": true,
        "sendOnDelay": false,
        "sendOnBlur": true,
        "sendOnEnter": true,
        "className": "",
        "clearable": false,
        "sendOnClear": false,
        "icon": "",
        "iconPosition": "left",
        "iconInnerPosition": "inside",
        "x": 1190,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "7ca4e5cc22970087",
        "type": "switch",
        "z": "162334d1df967473",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "Online",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "Offline",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 710,
        "y": 240,
        "wires": [
            [
                "0e01b670533515eb"
            ],
            [
                "a22a690800999224",
                "1f9638cd36d86a37"
            ]
        ]
    },
    {
        "id": "a22a690800999224",
        "type": "change",
        "z": "162334d1df967473",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.color",
                "pt": "msg",
                "to": "\"red\"",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 930,
        "y": 260,
        "wires": [
            [
                "4515bea65d375473",
                "991ef8eab62e28d8"
            ]
        ]
    },
    {
        "id": "6982f21f086a82d2",
        "type": "inject",
        "z": "162334d1df967473",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Online",
        "payloadType": "str",
        "x": 350,
        "y": 220,
        "wires": [
            [
                "2e4cde816b54d548",
                "7ca4e5cc22970087"
            ]
        ]
    },
    {
        "id": "ca27728f3e5b4ec1",
        "type": "inject",
        "z": "162334d1df967473",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Offline",
        "payloadType": "str",
        "x": 350,
        "y": 260,
        "wires": [
            [
                "7ca4e5cc22970087"
            ]
        ]
    },
    {
        "id": "0e01b670533515eb",
        "type": "change",
        "z": "162334d1df967473",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.color",
                "pt": "msg",
                "to": "\"green\"",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 930,
        "y": 220,
        "wires": [
            [
                "4515bea65d375473",
                "991ef8eab62e28d8"
            ]
        ]
    },
    {
        "id": "991ef8eab62e28d8",
        "type": "debug",
        "z": "162334d1df967473",
        "name": "color",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "ui_update.color",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1230,
        "y": 240,
        "wires": []
    },
    {
        "id": "1f9638cd36d86a37",
        "type": "debug",
        "z": "162334d1df967473",
        "name": "switch node",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 300,
        "wires": []
    },
    {
        "id": "56f1346a9aebbaab",
        "type": "ui-group",
        "name": "Hal beneden",
        "page": "2c8dbd8f4d392b7b",
        "width": "2",
        "height": "3",
        "order": 2,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "2c8dbd8f4d392b7b",
        "type": "ui-page",
        "name": "Status temperatuur Sensoren ",
        "ui": "07d9e68410f8668f",
        "path": "/TempSensoren",
        "icon": "home",
        "layout": "grid",
        "theme": "58232a5d443a2893",
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "07d9e68410f8668f",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "fixed",
        "titleBarStyle": "fixed"
    },
    {
        "id": "58232a5d443a2893",
        "type": "ui-theme",
        "name": "Theme MMMM",
        "colors": {
            "surface": "#242424",
            "primary": "#0094ce",
            "bgPage": "#535353",
            "groupBg": "#d3d3d3",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px",
            "density": "default"
        }
    }
]

Don't put quotes on string fields. It's red not "red"

I think there is something else wrong,

Add another line above that sets ui_update to JSON { }

Also, green should be a string NOT JSONata (change the J: to str)

Can you make an example for me? I don't have much experience with this.

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