What a pity!
But I like your idea with the background and I try to solve this on my own...
Thank you!
Do a forum search 'change button background color'
You can change Icon, Text or Background color within text, button or switch nodes and you need not to refresh the page like for template nodes.
@mickym2 Just to clarify, you can change the 'icon' (i.e. use a diferent one), the color of the text and the background colot without refreshing the page.
However it you want to change the color of the icon, a refresh is needed...at least I haven't found a way to change it with out refreshing the page.
If I use a dashboard button I can change background, icon and icon color without refresh.
Zusammenfassung
[
{
"id": "8af46f36.a15e7",
"type": "ui_button",
"z": "a0bc94f0.ccb338",
"name": "button",
"group": "5a9fb243.0958dc",
"order": 3,
"width": "1",
"height": "1",
"passthru": false,
"label": "",
"tooltip": "",
"color": "{{msg.color}}",
"bgcolor": "var(--nr-dashboard-BackgroundColor)",
"className": "",
"icon": "{{msg.icon}}",
"payload": "manual eco",
"payloadType": "str",
"topic": "",
"topicType": "str",
"x": 2330,
"y": 1400,
"wires": [
[]
]
},
{
"id": "8b15d73b.2edfd8",
"type": "inject",
"z": "a0bc94f0.ccb338",
"name": "",
"props": [
{
"p": "icon",
"v": "fa-thermometer-1 fa-2x",
"vt": "str"
},
{
"p": "color",
"v": "orange",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 2110,
"y": 1380,
"wires": [
[
"8af46f36.a15e7"
]
]
},
{
"id": "6de4caee.ad2c44",
"type": "inject",
"z": "a0bc94f0.ccb338",
"name": "",
"props": [
{
"p": "icon",
"v": "fa-bath fa-2x",
"vt": "str"
},
{
"p": "color",
"v": "royalblue",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 2110,
"y": 1420,
"wires": [
[
"8af46f36.a15e7"
]
]
},
{
"id": "5a9fb243.0958dc",
"type": "ui_group",
"name": "BĆ¼ro",
"tab": "4ef2978d.961b48",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "4ef2978d.961b48",
"type": "ui_tab",
"name": "Heizung",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
Same button modified by 2 inject Nodes. using msg.color and msg.icon and angular notation within the dashboard button
As background color I used the color scheme of the dashboard.
and I can do similar things with the text node and the switch node. The syntax is different, but it works for me,
Ahh, but try having a press of the button make the change....
I am not sure if I understand. If press the button - I cannot recognize any obstacles. If you mean - that the color should change when pressing the button - ok this is a different thing - but I haven't understood, that this would be the request. I thought that the request was that the color of the icon of the button should change dependent on different states.
Using text nodes with an Icon as value - I handle in the same way to reflect different states:
For switch Nodes - you can define different colors/icons for on/off directly within the node.
The only case, where I needed template nodes for a button were, when nodes/buttons should send a message with mouse button up and down - i.e. using for volume buttons etc.
I use this form of text nodes as standard to reflect status without any actions 
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
