@MilesAheadToo, you might be able to do that for the entity, but not the way you have it. The result must be an entity id, not a boolean. I noticed you don’t have the closing }} at the end, so maybe there is more to it that didn’t make it in the paste. Hopefully that helps.
Love the light dimmer state circle (100% in your example). Can you please share the code?
Thanks @ktownsend-personal, this is just example code, and you are correct about the closing }}. I was just wondering if it is possible to use the templating. So I will need to create a new sensor.
I also have an issue with the person entities. I have tried using both the standard and alerter cards in the example below. The standard shows the state with a black background, and the alerter blinks whenever someone is away.
- Essentially I’d like the
alerter, which shows the last change, without the blinking. - I’d be OK with the
standardbut don’t understand why it doesn’t show the correct icon.
Why not use operator: template, or am I misunderstanding something?
@pedolsky , thanks for the hint. I’ll look into it. Could you reply with your suggested code as a starter for me?
Sure:
state:
- operator: template
value: |
[[[
var a = states['group.closure_downstairs'].state;
var b = states['alarm_control_panel.carpe_diem_alarm'].state;
return (a == 'on' ) && (b =='armed')
]]]
id: value_on
name: Open
icon: mdi:door-open
Regarding to your icon problem I would rename the ids.
@MilesAheadToo, take a look at show_last_changed: true in the alerter template. That’s what shows the last change. You can put that in any template, or directly in your card yaml. Also look at color_type: card in the standard template and color_type: icon in the alerter template. That’s why the backgrounds are different.
Hi!
I’m trying to find out how to change icon color of a button depending on the state of the entity.
I have custom-ui istalled but apparently it does not support button cards.
What should my yaml look like?
I want one color if the state is off and another if state is on.
Also I would like if I can change the mdi icon depending on the state as well.
So I don’t need to customize in configuration.yaml
My setup has several separate files that handle the UI, but here are the pieces of the relevant ones:
In /config/lovlace-templates-button-card.yaml
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.75
name:
- font-size: 0.5em
- white-space: normal
state:
- font-size: 0.5em
- white-space: normal
label:
- font-size: 0.5em
- white-space: normal
# fan-button
fan-button:
template: standard-button
state:
- id: value_on
value: 'on'
icon: 'mdi:fan'
- id: value_off
value: 'off'
icon: 'mdi:fan-off'
That defines the standard-button template which is used by the fan-button template, which in turn shows up in my /config/ui-lovelace.yaml file (This is the standard name for your dashboard file.)
The /config/ui-lovelace.yaml file begins with:
button_card_templates: !include lovelace-templates-button-card.yaml
Which includes those templates above. Later in the ui-lovelace.yaml file, in my dashboard, I define a button like this:
- entity: fan.lr_sonoff
name: Ceiling Fan
template: fan-button
type: 'custom:button-card'
aspect_ratio: 1/1.1
styles:
name:
- font-size: 0.45em
hold_action:
action: more-info
That will automatically have a fan button that changes color and icon according to the fan state. You’ll notice there’s no color definition there so the card will appear grey on dark grey for off and blue on yellow for on. You can, of course, change those colors as well according to the instructions in the custom:button-card documentation.
Do I have to make a template? Never done this before
Is it possible to make a Rainbow flow?
I have a switch which turns on a led strip which is everytime in Rainbow mode and i want to transfer this style to the button!
Much appreciated. Both work like a charm.
You don’t need to make a template. All the template does is allow you to reuse the code for several buttons. (I have three fans in the house. All three of them use that fan-button template.)
What you could do if you only want one button like that is to take all the entries in the template and just put them in the button definition.
What do you mean with flow? A CSS background or changing the button’s color if the strip is on?
A continuous color change! I have no state because its a (dumb) led strip on a zigbee plug!
Is it possible to change the entity picture by various Attributes of an entity?
For example: a light (entity) has rgb_colors as attributes - i want a few different entity pictures displayed in case of the rgb color!
A template which works is:
entity_picture: |
{% if is_state_attr(‘light.led_strips_kuche’, ‘rgb_color’, (255, 231, 112)) %}
/local/ledstrip_yellow.png
{% elif is_state_attr(‘light.led_strips_kuche’, ‘rgb_color’, (0, 0, 255)) %}
/local/ledstrip_blue.png
{% elif is_state(“light.led_strips_kuche”, “off”) %}
/local/ledstrip_off.png
{% endif %}
But how can i get this in a custom button card to work?
1 Like
Hi, I need some advice in regards to actions…
I want the button to set binary switch that I will use in further actions.
However at the moment it toggles avr power.
If I change ‘entity’ in second line it works correctly, but the state images do disappear.
- type: custom:button-card
entity: media_player.lounge_avr
show_entity_picture: true
show_state: false
show_name: false
tap_action:
action: toggle
entity: input_boolean.lounge_avr_source_popup
state:
- operator: template
value: "[[[ return entity.attributes.source == 'HEOS Music' ]]]"
entity_picture: /local/img/src_logo_heos.png
- operator: template
value: "[[[ return entity.attributes.source == 'apple tv' ]]]"
entity_picture: /local/img/src_logo_atv.png
- operator: template
value: "[[[ return entity.attributes.source == 'Game' ]]]"
entity_picture: /local/img/src_logo_nintendo.png
- operator: template
value: "[[[ return entity.attributes.source == 'Blu-ray' ]]]"
entity_picture: /local/img/src_logo_bluray.png
Any ideas how to fix that?
TIA
1 Like
Thank you for your feedback. I don’t understand why I did not see an alert. haha, I have changed this card so many times and I am always trying to find ways to make it better. This is my most recent code for this. Please let me know what you see.
type: custom:button-card
entity: device_tracker.g3_1_iphone_13_pro_max_2
show_icon: false
show_name: false
styles:
card:
- background-color: transparent
- box-shadow: none
- border-radius: 20%
- padding: 8%
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"i zone" "i battery""i watch" "ln1 ln2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: auto
custom_fields:
i:
- justify-self: center
zone:
- justify-self: start
- padding-top: 14px
battery:
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.g3_1_iphone_13_pro_max_battery_state_2"].state
<= 20) return "red"; ]]]
watch:
- justify-self: start
- padding-bottom: 16px
- '--text-color-sensor': >-
[[[ if (states["sensor.g3_iwatch_gen1_battery_state"].state <= 20)
return "red"; ]]]
ln1:
- justify-self: left
- padding-bottom: 12px
ln2:
- white-space: normal
- text-align: start
- text-align-last: left
- margin-left: '-60px'
custom_fields:
i: |
<img height= 80px src='/local/images/me_g3-1.png'>
zone: |
[[[
if (states['person.g3_1'].state == 'home')
return `<ha-icon
icon="mdi:google-maps"
style="width:12px;height:12px;color:SteelBlue">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.g3_1'].state}</span></span>`;
if (states['person.g3_1'].state == 'not_home')
return `<ha-icon
icon="mdi:google-maps"
style="width:12px;height:12px;color:yellow">
</ha-icon><span> <span style="color: var(--text-color-sensor);">Away</span></span>`;
else
return `<ha-icon
icon="mdi:google-maps"
style="width:12px;height:12px;color:DarkOrange">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.g3_1'].state}</span></span>`
]]]
battery: |
[[[
if (states['sensor.g3_1_iphone_13_pro_max_battery_state_2'].attributes.battery_status == 'NotCharging')
return `<ha-icon
icon="mdi:battery"
style="width:12px;height:12px;">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.g3_1_iphone_13_pro_max_battery_state_2'].state}%</span></span>`;
else
return `<ha-icon
icon="mdi:battery-charging"
style="width:12px;height:12px;color:lime">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.g3_1_iphone_13_pro_max_battery_state_2'].state}%</span></span>`;
]]]
watch: |
[[[
if (states['sensor.g3_iwatch_gen1_battery_state'].attributes.battery_status == 'NotCharging')
return `<ha-icon
icon="mdi:watch-variant"
style="width:12px;height:12px;color:grey">
</ha-icon><span> <span style="color: var(--text-color-sensor);">${states['sensor.g3_iwatch_gen1_battery_state'].state}%</span></span>`;
else
return
]]]
ln1: |
[[[
if (states['person.g3_1'].state == 'home')
return
else
return `<img
src='https://developers.google.com/maps/images/maps-icon.svg'
style="width:12px;height:12px">`
]]]
ln2: |
[[[
if (states['person.g3_1'].state == 'home')
return
else
return `${states['sensor.g3_1_iphone'].attributes['Formatted Address']}`
]]]
4 Likes
Hi I got a small question: I would like to display an entity_picture that reacts on an part of the state value string.
I get the string split working if I use it in the split-function part, but I can’t get it working with an IF-function wrapped around it… any idea why?
type: custom:button-card
layout: icon_state_name2nd
size: 100%
show_name: true
name: |
[[[
return entity.state.split('·')[0]
]]]
#works here
show_state: true
show_entity_picture: true
styles:
card:
- height: 150px
entity: sensor.afvalinfo_next_type_date
entity_picture: |
[[[
if (entity.state.split('·')[0] == 'gft' ) return '/local/images/icons/gft-icon.png' ;
if (entity.state.split('·')[0] == 'plastic' ) return '/local/images/icons/pmd-icon.png';
else return '';
]]]
# the IF statement dont works
Try it with
'url(/local/…)'
1 Like