variables support JS templates, but your button instance erases the JS templates you have defined (the variables have the same name):
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_gym_on
triggers_update: sensor.audio_gym_state
## This below erases the JS templates
variables:
on_icon: mdi:music
off_icon: mdi:music-off
I don’t quite understand what you’re trying to achieve.
I am trying to set the variable based on the state of a sensor instead of the config entity. the entity is the script.x_on, and the icon should be set, based on the state of sensor.x_state, as is reflected in the JS template.
meaning the on_icon should be set when the state of the sensor.x_state == ‘on’.
Which is what is use in the button config now for each button using the id field and the operator: template. And which logic I would like to transfer to the template using the variable .
in the button config, I only want to set the icon itself, because that is the only per button item. And changes between all buttons, so cant be set in the template
Probably something like this would work (just putting the relevant parts)?
button_force_switch_on:
variables:
is_on: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state === 'on';
]]]
on_icon: mdi:xxx
off_icon: mdi:yyy
states:
- id: on-icon
operator: template
value: '[[[ return variables.is_on ]]]'
icon: '[[[ return variables.on_icon ]]]'
- id: off-icon
operator: default
icon: '[[[ return variables.off_icon ]]]'
And then you can override your icons when you instantiate the button if you need to:
type: custom:button-card
template: button_force_switch_on
variables:
on_icon: mdi:special_on
off_icon: mdi:special_off
Hi guys. Looking to remove red area around icon (screenshot below), but no luck. Can you help me please.
code that im using
- type: 'custom:button-card'
entity: person.olga
show_entity_picture: true
triggers_update:
['person.olga']
show_state: false
show_name: false
styles:
entity_picture:
- clip-path: circle(50% at center)
card:
- --paper-card-background-color: rgba(0, 0, 0, 0.0)
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: 'none'
state:
- value: 'not_home'
styles:
icon:
- filter: grayscale(100%)
thanks. I was way overthinking this…
this does the trick, and is much simpler:
button_force_switch_off:
template: button_force_body
show_label: true
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: entity
haptic: light
variables:
on_icon: 'on_icon'
off_icon: 'off_icon'
label: >
[[[
var id = entity.entity_id.split('_off')[0].split('.')[1];
return states['sensor.' + id + '_state'].state;
]]]
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_off')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'off';
]]]
icon: '[[[ return variables.off_icon ]]]'
styles:
card:
- background: '#F0C209'
- color: '#555B65'
icon:
- color: '#555B65'
# id: off-icon
- operator: default
icon: '[[[ return variables.on_icon ]]]'
styles:
card:
- background: '#555B65'
- color: '#F0C209'
icon:
- color: '#F0C209'
# id: on-icon
and the button:
- type: custom:button-card
template: button_force_switch_off
entity: script.test_2_off
triggers_update: sensor.test_2_state
variables:
on_icon: mdi:test-tube
off_icon: mdi:test-tube-off
great. only have the JS state template in the button template, and the variable is used ever so simple.
I am using button cards to display the temperature of various zones in the house. The card color_type is set to “icon”, and I change the color of the displayed temperature if the temperature is too cold or too hot.
I would also like to change to background color to blue or red to show that the air conditioning or furnace is currently running. Typically I use a button card with color_type of “card” to change the card background color based on the entity state.
Is it possible to set the button text (icon) and card color based for a single card? Based on the state of two different entities?
Here is my current use of the cards for the temperature.
hi everyone ,
i have a few buttons i have created but cant seem to get the color_off: working correctly
color: black
color_off: 'rgb(28, 128, 199)'
color_type: card
entity: media_player.sony_bravia_tv
icon: 'mdi:television-box'
name: Tap to Turn Off
show_name: null
show_state: null
tap_action:
action: call-service
service: script.tv_upstairs_lounge_off
type: 'custom:button-card'
That’s possible using javascript templates. For eg:
styles:
card:
- background-color: >
[[[
if (states['OTHER_ENTITY'].state === 'on') return "red";
return "blue";
]]]
color_off is not a configuration option. You have to use states for that.
states:
- value: 'off'
color: 'rgb(28, 128, 199)'
i tried that but still no joy not sure if its a syntax issue
cards:
- color:
color_type: card
entity: group.kitchen_cinemax
icon: 'mdi:cast-connected'
name: Home Cinema OFF - Kitchen
styles:
card:
- height: 50px
- width: null
type: 'custom:button-card'
states:
value: off
color: rgb(28, 128, 199)
states is an array (missing the -), that’s why it doesn’t work. Also off should be enclosed in quotes
Thank. you. Works perfectly!
Hey there,
I am trying to color a bulb icon when a condition is true. But the coloring does not work at all.
Could you experts out there please have a look at my code?
aspect_ratio: 1/0.7
color: '#29b6f6'
custom_fields:
light: >
<ha-icon icon="fas:lightbulb"
style= "width: 40%;
height: 55%;
color: [[[
if (0 == 0)
return "green";
return "red";
]]]; >
</ha-icon>
shutter: >
<ha-icon icon="mdi:window-shutter" style= "width: 55%; height: 55%; color:
#29b6f6; "> </ha-icon>
window: >
<ha-icon icon="mdi:window-closed-variant" style= "width: 55%; height: 55%;
color: #29b6f6; "> </ha-icon>
icon: 'fas:couch'
label: >
[[[ return states['sensor.heizung_wohnzimmer_temperature'].state + '°C / ' +
states['sensor.heizung_wohnzimmer_humidity'].state + '%' ]]]
name: Wohnzimmer
show_label: true
size: 40%
styles:
card:
- color: '#101012'
- padding-top: 10%
custom_fields:
light:
- position: absolute
- left: 85%
- top: 0%
shutter:
- border-radius: 70%
- position: absolute
- left: 85%
- top: 63%
- font-size: 8px
window:
- border-radius: 70%
- position: absolute
- left: 85%
- top: 30%
- font-size: 8px
grid:
- position: relative
label:
- color: '#adadb7'
- font-size: 13px
- padding-top: 5px
name:
- justify-self: center
- margin-bottom: 5%
- font-size: 18px
- font-weight: bold
- font-family: 'Roboto,sans-serif'
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
type: 'custom:button-card'
Is this what you want for the condition?
No, it´s just for testing purpose.
Later the coloring of the three icon should depend on the state of three entities. But for now i just tried 0==0
The whole field has to be a template, not just a part of it:
light: >
[[[
let color = (0 == 0) ? 'green' : 'red';
return `<ha-icon icon="fas:lightbulb"
style="width: 40%;
height: 55%;
color: ${color};">
</ha-icon>`
]]]
Hi RomRider
i tried it, but now the complete card disapeared ;-(
this is the code i used
aspect_ratio: 1/0.7
color: '#29b6f6'
custom_fields:
light: >
[[[
let color = (0 == 0) ? 'green' : 'red'
return '<ha-icon icon="fas:lightbulb"
style="width: 40%;
height: 55%;
color: ${color};">
</ha-icon>'
]]]
shutter: >
<ha-icon icon="mdi:window-shutter" style= "width: 55%; height: 55%; color:
#29b6f6; "> </ha-icon>
window: >
<ha-icon icon="mdi:window-closed-variant" style= "width: 55%; height: 55%;
color: #29b6f6; "> </ha-icon>
icon: 'fas:couch'
label: >
[[[ return states['sensor.heizung_wohnzimmer_temperature'].state + '°C / ' +
states['sensor.heizung_wohnzimmer_humidity'].state + '%' ]]]
name: Wohnzimmer
show_label: true
size: 40%
styles:
card:
- color: '#101012'
- padding-top: 10%
custom_fields:
light:
- position: absolute
- left: 85%
- top: 0%
shutter:
- border-radius: 70%
- position: absolute
- left: 85%
- top: 63%
- font-size: 8px
window:
- border-radius: 70%
- position: absolute
- left: 85%
- top: 30%
- font-size: 8px
grid:
- position: relative
label:
- color: '#adadb7'
- font-size: 13px
- padding-top: 5px
name:
- justify-self: center
- margin-bottom: 5%
- font-size: 18px
- font-weight: bold
- font-family: 'Roboto,sans-serif'
tap_action:
action: navigate
navigation_path: /lovelace/wohnzimmer
type: 'custom:button-card'
do you have an idea, what´s going wrong here?
Edit: after refreshing lovelace i get an error:
ButtonCardJSTemplateError: SyntaxError: Invalid or unexpected token in 'let color = (0 == 0) ? 'green' : 'red'; return '<ha-icon icon="fas:lightbulb" style= "width:...'
You didn’t exactly copy what I wrote and the error doesn’t exactly match the code you have pasted.
If I write return `...` it’s on purpose and not the same as return '...'
Hello,
I’m very new using the grid element of this card. It looks amazing what is possible with this feature. However i can’t get it as i want it.
How, can i get the icon in the upper left-corner? by default it is in the middle. Is it with padding-right: or is there any other way? cause the name and state are also begin at the left side. Here is my code and a screenshot of the button-card.
type: 'custom:button-card'
entity: sensor.solaredge_current_power_template
show_state: true
name: Huidig vermogen
styles:
card:
- width: 200px
- height: 200px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-columns: 1fr
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
state:
- justify-self: start
- padding-left: 10px
state:
- value: '0'
styles:
card:
- filter: opacity(40%)
icon:
- filter: grayscale(100%)
I find that the easiest way to adjust the size&position of the icon (and have it look correct in Chrome & safari) is to size the grid instead of sizing the icon.
grid:
- grid-template-areas: '"i ." "n n" "s s"'
- grid-template-rows: 1fr min-content min-content
- grid-template-rows: 40% 1fr
It will be in the upper left corner, taking up 40% of the card.
Idea that I’m looking to confirm before trying to implement…
I would like to have a full SVG custom icon for the icon. Not sure if that’s possible. I’ve only seen @Mattias_Persson use the paths in his custom_icons.js.
I would like to have an icon with a “magic” colour that is the only part of the icon that is transformed when the state changes. Think of it like a “green screen” in the movies. So for example, let’s say my icon was as follows:
Can this be done? I was thinking of using JS templating to edit the SVG in place replacing the appropriate colour. The rest of the icon would not change colour on state change.
Maybe someone has already done this… I’ve read through much of this thread but there is sooooo much! What a great thread and addon!
