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"
}
}
]
Thanks in advance !
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).