Can anyone post an example showing an icon that is left-justified in the grid?
Hi @romrider,
ever since the addition of triggers_update to this lovely card, performance has been great. As of HA 115 templates will be updated on each state change the system derives automatically, see 0.115: B-Day release! Media browser, tags, automations & WTH
will/wonât this impact button-card negatively?
No, because it uses JS instead of Jinja. It gets real-time-updates for every entity (just like all other cards) via the hass object.
a ok, that 's correct of course⌠was holding back updating because if this (amongst a few other template worries)
still get to are assured the buttons wont be impacted. thanks
Is it possible to have an animation when the entity_picture changes? I use the entity_picture of a media_player (so it shows the artwork). When I switch media, I want it to transition smoothly with an animation when the picture_entity changes. So it doesnât change based on state, but it updates when the media_player updates its artwork in this case.
Is this possible? I tried with the animation varibale, but I donât think itâs that simple (doesnât work that way).
Hi,
Ihave this code for my yeelight (toggle button)
color: auto
color_type: card
default_color: 'rgb(255, 233, 155)'
entity: light.yeelight
icon: 'mdi:lightbulb'
name: Front
size: 35%
type: 'custom:button-card'
This yeelight use for warnings (receive email on blue light, gate open on green light etc) and use for light in the evening too.
How can I do that if I click this button always turn this yeelight on fixed warm white color and another click turn it off.
Now when I click this button always turn on on last color, so this is not good for me.
Make it call a script that uses choose. If the light is currently on, turn it off. If the light is currently off, turn it on. Read the HA light docs to see how to set the color.
Try it but not working. Donât know what is the problem or how can I solve this.
color: auto
color_type: card
default_color: 'rgb(255, 233, 155)'
entity: light.yeelight
icon: 'mdi:lightbulb'
name: Front
size: 35%
tap_action:
action: call-service
service: {% if is_state('light.yeelight', 'off') %}
light.turn_on
data:
entity_id: light.yeelight
rgb_color: [255, 255, 255]
{% else %}
light.turn_off
{% endif %}
type: 'custom:button-card'
Okay. First of all, Iâd like you to thoroughly read the docs. If you did read them, you might find your mistake. I donât want to be mean though, and itâs always nice to help out, so Iâll explain.
First of all, button-card doesnât support Jinja2. It supports JS templates.
Second, that isnât really valid YAML. When you do use a Jinja template, itâs usually like
content: |
{{ states('sensor.time') }}
{{ states('sensor.data') }}
Third, you use service_data, not data.
But I donât think you can template service_data, so you should probably make a script like this:
toggle_light:
alias: Toggle Light
sequence:
- choose:
- conditions:
- condition: state
entity_id: light.58747402d8bfc0efaa13
state: 'on'
sequence:
- service: light.turn_off
data: {}
entity_id: light.58747402d8bfc0efaa13
- conditions:
- condition: state
entity_id: light.58747402d8bfc0efaa13
state: 'off'
sequence:
- service: light.turn_on
data: {}
entity_id: light.58747402d8bfc0efaa13
default: []
mode: single
Replace the entity ids, and then just set the action to call the service, which is the script.
1 Like
Thank You, this is what a I need. Working good! 
Can anyone help with this? This started happening 2-3 months ago. I thought it would just work it self out, but it has not. I think itâs the button card. When my color LED light strip is at 100% brightness and the color is white, the button card does not respect the icon color
This is the code for that button
color: auto
color_type: auto
entity: light.kitchen_cabinet_tops
hold_action:
action: more-info
label: |
[[[
if (states['light.kitchen_cabinet_tops'].state == 'off') return "Off";
else return 'Brightness ' + (Math.round(states['light.kitchen_cabinet_tops'].attributes.brightness / 2.55)) + '%';
]]]
layout: icon_label
show_label: true
show_name: true
styles:
card:
- height: 100px
icon:
- align-self: flex-start
- height: 100%
- width: 100%
label:
- font-size: 12px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
name:
- font-size: 16px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
- font-weight: bold
type: 'custom:button-card'
If I use an entty card the icon shows âyellowâ as it should. As I reduce the brighness it does become visible, just âgreyâ. Once I change the color to any other color it appears as it should
Hello everyone,
I want to replace following icon with a picture. I canât figure out how. Anyone can give me a hand?
custom_fields:
day: |
[[[
return `<ha-icon
icon="mdi:lightning-bolt"
style="opacity: 0.4; width: 12px; height: 12px; color: var(--primary-icon-color);">
</ha-icon> <span style="opacity: 0.6;">Today: </span> <span style="color: var(--text-color-sensor);">${states['sensor.daily_energy'].state}kWh</span>`
]]]
I guess i have to replace âha-iconâ with something else. Correct? But with what?
Following under âdayâ nor âstylesâ does work:
show_entity_picture: true
entity_picture: '/local/picture.png'
Cheers
Why go to al that trouble if you just want the picture instead of icon? Just set for example:
- type: âcustom:button-cardâ
entity: light.living_room
name: Living Room
show_icon: false
show_entity_picture: true
entity_picture: â/local/picture.pngâ
And you can also create a state variable, that when entity state is off, itâll show a different entity_picture.
Or maybe I donât understand what youâre trying to achieve.
Thx for the reply. I know that option but imho itâs a bit different with this card.
Itâs this card (inspired by this card):
Iâd like to replace the icons in front of each trash-type with an image. Just canât figure out how.
Whatâs the result if you use that anyway?
For the other ones:
return `<img src="/local/myimg.png">
1 Like
It works when i replace the icon with a pic inside the img-cell (i like to keep the icon though) but not inside the three custom fields or in the âstylesâ section of the custom fields.
This:
â<img src=â/local/image.pngâ>
works though!
Thanks alot!
of course you are going to post that button ?
If you have a look at Garbage pickup date (mijnafvalwijzer.nl) custom_component you understand why the community is interested
Sure, here you go:
custom_fields:
rest: |
[[[
return `<img src="/local/restgft_80.png"
style="width: 12px; height: 12px;">
<span style="font-size: 12px; opacity: 0.6;">Rest/GFT: </span>
<span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_rest_gft'].state}</span>`
]]]
pmd: |
[[[
return `<img src="/local/dhm_80.png"
style="width: 12px; height: 12px;">
<span style="font-size: 12px; opacity: 0.6;">Papier/Pmd: </span>
<span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_papier_pmd'].state}</span>`
]]]
tuin: |
[[[
return `<img src="/local/takken_80.png"
style="width: 12px; height: 12px;">
<span style="opacity: 0.6; font-size: 12px;">Tuinafval: </span>
<span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_tuinafval'].state}</span>`
]]]
first: |
[[[
return `<span style="font-size: 13px; color: limegreen;">${entity.state}</span>`
]]]
entity: sensor.trash_first_next_item
icon: 'mdi:delete-empty'
name: Ophaaldata
styles:
card:
- padding: 10%
- margin: '-5px 10px 10px'
- font-size: 10px
- font-family: 'Google Sans, Roboto'
- text-transform: capitalize
- width: 175px
- height: 175px
- border-radius: 15px
- border-width: 1px
- border-style: solid
- border-color: var(--primary-background-color)
- box-shadow: '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)'
- background-color: var(--primary-background-color)
custom_fields:
rest:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
pmd:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
tuin:
- align-self: middle
- justify-self: start
first:
- align-self: start
- justify-self: end
grid:
- grid-template-areas: '"i first" "n n" "rest rest" "pmd pmd" "tuin tuin"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: var(primary-icon-color)
- width: 77%
- opacity: 0.4
- align-self: start
- justify-self: start
img_cell:
- justify-content: start
- align-items: start
- margin-bottom: 18px
name:
- font-weight: bold
- font-size: 18px
- align-self: start
- justify-self: start
- padding-bottom: 10px
- opacity: 0.4
type: 'custom:button-card'
1 Like
Wondering if I could get some assistance with adding the battery level (sensor.steel_gate_battery_level) in the top right corner of my sensor cards? I see someone has done it and it looks great but I canât seem to see the full code.
Iâve managed to copy some code here to get my light brightness working that way and itâs super helpful so looking to add more value to some other cards. What would I need in the custom_fields section for a sensor to report a value?
color: yellow
color_type: icon
custom_fields:
notification: |
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
entity: light.shelly_dimmer_kitchen
1 Like