Implementing Notification-based Widget and Page Updates with Inject Nodes in Node-RED

Dashboard
1

Inject node 1 should send a notification to change the color of any specific widget (e.g., a button).
how can i achieve this. i tried this way but i could not get the proper output

[
    {
        "id": "ac6f3d4d92fcb19f",
        "type": "group",
        "z": "e6e55f4e227f4d8b",
        "style": {
            "stroke": "#999999",
            "stroke-opacity": "1",
            "fill": "none",
            "fill-opacity": "1",
            "label": true,
            "label-position": "nw",
            "color": "#a4a4a4"
        },
        "nodes": [
            "e83e3dec5ee18fd6",
            "27387bd68e4bdf54",
            "00d8445c5c3409d4",
            "02617a1392b0a5c0",
            "806a1a48edca1ad6"
        ],
        "x": 34,
        "y": 19,
        "w": 672,
        "h": 282
    },
    {
        "id": "e83e3dec5ee18fd6",
        "type": "ui-button",
        "z": "e6e55f4e227f4d8b",
        "g": "ac6f3d4d92fcb19f",
        "group": "9b23823bcb8a5cde",
        "name": "",
        "label": "button",
        "order": 1,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "gray",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 430,
        "y": 260,
        "wires": [
            [
                "00d8445c5c3409d4"
            ]
        ]
    },
    {
        "id": "27387bd68e4bdf54",
        "type": "function",
        "z": "e6e55f4e227f4d8b",
        "g": "ac6f3d4d92fcb19f",
        "name": "function 91",
        "func": "msg.ui_control = {\n    \"widget\": {\n        \"bgcolor\": msg.payload, // Set the background color\n        \"color\": \"white\" // Optional: set text color\n    }\n};\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 140,
        "wires": [
            [
                "00d8445c5c3409d4",
                "806a1a48edca1ad6"
            ]
        ]
    },
    {
        "id": "00d8445c5c3409d4",
        "type": "ui-control",
        "z": "e6e55f4e227f4d8b",
        "g": "ac6f3d4d92fcb19f",
        "name": "",
        "ui": "64fc71361e24a0d0",
        "events": "all",
        "x": 600,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "02617a1392b0a5c0",
        "type": "inject",
        "z": "e6e55f4e227f4d8b",
        "g": "ac6f3d4d92fcb19f",
        "name": "Inject Green",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"color\":\"#e91c98\"}",
        "payloadType": "json",
        "x": 150,
        "y": 120,
        "wires": [
            [
                "27387bd68e4bdf54"
            ]
        ]
    },
    {
        "id": "806a1a48edca1ad6",
        "type": "debug",
        "z": "e6e55f4e227f4d8b",
        "g": "ac6f3d4d92fcb19f",
        "name": "debug 2573",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 590,
        "y": 60,
        "wires": []
    },
    {
        "id": "9b23823bcb8a5cde",
        "type": "ui-group",
        "name": "Group Name",
        "page": "56e6a566f2912367",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "64fc71361e24a0d0",
        "type": "ui-base",
        "name": "",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-template",
            "ui-slider",
            "ui-text-input",
            "ui-button",
            "ui-text",
            "ui-chart",
            "ui-form",
            "ui-number-input",
            "ui-switch",
            "ui-table",
            "ui-gauge",
            "ui-markdown",
            "ui-iframe",
            "ui-tabulator",
            "ui-radio-group",
            "ui-dropdown",
            "ui-button-group",
            "ui-file-input"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "fixed"
    },
    {
        "id": "56e6a566f2912367",
        "type": "ui-page",
        "name": "notification",
        "ui": "64fc71361e24a0d0",
        "path": "/page6",
        "icon": "home",
        "layout": "grid",
        "theme": "default",
        "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": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    }
]
2

In this instance just connect the inject node to the button and in the inject node set msg to ui_update.buttonColor

[{"id":"02617a1392b0a5c0","type":"inject","z":"506727cd93754bdb","g":"ac6f3d4d92fcb19f","name":"Inject Green","props":[{"p":"msg.ui_update.buttonColor","v":"\"#e91c98\"","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":190,"y":2000,"wires":[["27387bd68e4bdf54","e83e3dec5ee18fd6"]]},{"id":"e83e3dec5ee18fd6","type":"ui-button","z":"506727cd93754bdb","g":"ac6f3d4d92fcb19f","group":"b25c8ff9bd654e27","name":"Test Button","label":"Test Button","order":2,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"gray","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":490,"y":2140,"wires":[["00d8445c5c3409d4"]]},{"id":"b25c8ff9bd654e27","type":"ui-group","name":"Tester","page":"4fa751779baf7b8e","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"4fa751779baf7b8e","type":"ui-page","name":"Page 05","ui":"b810194ea14e3502","path":"/page05","icon":"home","layout":"grid","theme":"4dd5dd1ce368a312","order":6,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"4dd5dd1ce368a312","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

For the button widget & others check the list of dynamic properties in the Dashboard 2 documentation

3

i tried that above one. it is working i tried simple modification to change the colors using toggling method in function. but it is not working for me.

[
    {
        "id": "d90dccb00902fbf4",
        "type": "tab",
        "label": "Flow 6",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "410c752188a8437b",
        "type": "inject",
        "z": "d90dccb00902fbf4",
        "name": "Toggle Color",
        "props": [
            {
                "p": "ui_update.buttonColor",
                "v": "\"\"",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 150,
        "y": 180,
        "wires": [
            [
                "a1c8a4e8d4916b61"
            ]
        ]
    },
    {
        "id": "a1c8a4e8d4916b61",
        "type": "function",
        "z": "d90dccb00902fbf4",
        "name": "Toggle Button Color",
        "func": "// // Define the colors to toggle between\n// const color1 = \"#009900\"; // green\n// const color2 = \"#a6a6a6\"; //gray\n\n// // Check the current color and toggle it\n// if (msg.ui_update && msg.ui_update.buttonColor === color1) {\n//     msg.ui_update.buttonColor = color2;\n// } else {\n//     msg.ui_update.buttonColor = color1;\n\n// }\n\n// return msg;\n\n\n// Define the colors to toggle between\nconst color1 = \"#009900\"; // green\nconst color2 = \"#a6a6a6\"; // gray\n\n// Initialize msg.ui_update if it doesn't exist\nmsg.ui_update = msg.ui_update || {};\n\n// Toggle the button color\nif (msg.ui_update.buttonColor === color1) {\n    msg.ui_update.buttonColor = color2;\n} else {\n    msg.ui_update.buttonColor = color1;\n}\n\nreturn msg;\n",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 180,
        "wires": [
            [
                "c73d22bea93bc3c1"
            ]
        ]
    },
    {
        "id": "c73d22bea93bc3c1",
        "type": "ui-button",
        "z": "d90dccb00902fbf4",
        "group": "a35433cec6cd3654",
        "name": "Test Button",
        "label": "Test Button",
        "order": 3,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "color": "",
        "bgcolor": "gray",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 610,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "a35433cec6cd3654",
        "type": "ui-group",
        "name": "Tester",
        "page": "cedd6f592b697245",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "cedd6f592b697245",
        "type": "ui-page",
        "name": "Page 05",
        "ui": "64fc71361e24a0d0",
        "path": "/page05",
        "icon": "home",
        "layout": "grid",
        "theme": "abe7ab01fbad592b",
        "order": 7,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "64fc71361e24a0d0",
        "type": "ui-base",
        "name": "",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-template",
            "ui-slider",
            "ui-text-input",
            "ui-button",
            "ui-text",
            "ui-chart",
            "ui-form",
            "ui-number-input",
            "ui-switch",
            "ui-table",
            "ui-gauge",
            "ui-markdown",
            "ui-iframe",
            "ui-tabulator",
            "ui-radio-group",
            "ui-dropdown",
            "ui-button-group",
            "ui-file-input"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "fixed"
    },
    {
        "id": "abe7ab01fbad592b",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
5

but it is not working for me that is because your function does not actually toggle anything. Try 2 inject nodes with msg.ui_update.buttonColor and the different colours and you will see that it does work

6

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