Lovelace: Button card

[Mariusthvdb (Marius)]

so, that’s remarkable isnt it? How can that be an array, and not a string? also how come it says the entity is undefined, while it most certainly is:

      - type: custom:button-card
        template: button_meterget
        entity: script.netwerk_auditorium_meterget_power

update

2 things solved:

• the entity undefined: well that was a simple typo. so correct error
• Capitalize is solved by using

  name: >
    [[[
      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').pop(-1);
      console.log(id);
      return capitalizeFirstLetter(id);
    ]]]

pop() instead of slice()

[petro]

@petro

.slice(-1)

slice returns an array.

[Mariusthvdb (Marius)]

yeah, see my post above. thanks for your analysis.

have another quest now that all is solved: trying to write a decluttering template:

card:
  type: horizontal-stack #<-- no dash in front of the type: here!!
  cards:
    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_power

    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_usage

    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_state

so I can use a simple:

  - type: custom:decluttering-card
    template: meterget
    variables:
      - id: kast_library

for all of my 25 switches, instead of having to copy all of this:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_power
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_usage
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_state

somehow I’ve mixed things up, but I cant bend my head around it… it errors out with

have a suggestion on this? Checking the red cards reveals the exact same code as the yaml section…?

Sorted! had a ‘-’ in front of the card type from a previous edit, marked it in the code above…

[Mariusthvdb (Marius)]

made life just a bit easier for now using below code for decluttering card:

    - type: horizontal-stack
      cards:

        - type: custom:button-card
          template: button_meterget
          triggers_update:
            - switch.[[id]]
            - sensor.[[id]]_actueel
          entity: script.[[id]]_meterget_power
          name: Power
          variables:
            sensor: sensor.[[id]]_actueel
            unit: ' W'

        - type: custom:button-card
          template: button_meterget
          triggers_update: switch.[[id]]
          entity: script.[[id]]_meterget_usage
          name: Usage
          variables:
            sensor: sensor.[[id]]_totaal
            unit: ' kW'

        - type: custom:button-card
          template: button_meterget
          triggers_update: switch.[[id]]
          entity: script.[[id]]_meterget_state
          name: State
          variables:
            sensor: sensor.[[id]]_state
            unit: ''

Simply hardcoding the name here is waay less error prone than the js function;-)

only using small configs like these for all my switches now in the card config:

  - type: custom:decluttering-card
    template: force_switches
    variables:
      - id: netwerk_dorm
      - on-icon: wifi
      - off-icon: wifi-off

thanks for the amazing button-card and decluttering-card, using templates and variables!

[RichardU (Richard)]

Can anyone post an example showing an icon that is left-justified in the grid?

[Mariusthvdb (Marius)]

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?

[KTibow (Kendell R)]

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.

[Mariusthvdb (Marius)]

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

[ASNNetworks]

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).

[spider7611]

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.

[KTibow (Kendell R)]

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.

[spider7611]

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'

[KTibow (Kendell R)]

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.

[spider7611]

Thank You, this is what a I need. Working good!

[ptdalen]

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

[Harry-1976]

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

[ASNNetworks]

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.

[xADDRx (Ben)]

Petro, thank you.

it works now:

[Harry-1976]

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.

[KTibow (Kendell R)]

What’s the result if you use that anyway?
For the other ones:

        return `<img src="/local/myimg.png">