Lovelace: Button card

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! :wink:

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.

Petro, thank you.

it works now:

3 Likes

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 :wink:

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?

image

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