Lovelace: Button card

I’ve read through the documentation and various posts, but I’m still not clear as to whether or not it’s possible to use templates with triggers_update.

For instance, I have a motion button card template that I’d like to add to my light cards, but also update the motion sensor when that changes, but the light state doesn’t.

In this example I’d move triggers_update to the motion button card template if I can get it to work.

- type: custom:button-card
  entity: light.kitchen_lights_group
  name: Kitchen
  variables:
    motion: binary_sensor.kitchen_motion
  triggers_update: > 
    [[[ return states[variables.motion].entity_id; ]]]
  template:
    - light
    - icon_hue
    - extra_styles
    - motion

If possible, I’d like to avoid having to hardcode the entity twice like this.

  variables:
    motion: binary_sensor.kitchen_motion
  triggers_update: binary_sensor.kitchen_motion

Thanks in advance for any help.

Does anyone know why I get this message? What am I doing wrong?

Schermafbeelding 2023-01-23 153001

Probably there is no “button_default_template” defined as a button-card template.

1 Like

How to define a button-card template?

since you copied my code above, here’s the template you are missing:

button_default_title:
  tap_action:
    action: none
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 20px
      - font-weight: 400
      - padding: 12px
    name:
      - justify-self: left

note this also relies on some theme variables I have set in my theme definitions.

Always best to not simply copy other peoples yaml, but try to understand what you are doing.

As for the definition of button-card-templates, check the documentation on that aspect: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

you need to set that for each dashboard you use (with custom:button-cards)

button_card_templates: !include_dir_merge_named ../button_card_templates

to point to a map inside you /config folder. I use relative notation, but you can also use absolute notation

button_card_templates: !include_dir_merge_named /config/dashboard/button_card_templates

ofc, adjust to your folder naming convention

besides all of the above, there are some navigations set in the hold action to paths I use in my config. So you need to adjust those too (or delete that if you don’t want to navigate away)

Don’t get me wrong, but you explain pretty difficult. That’s why I still haven’t figured out how to configure afvalwijzer like I asked you how I wanted it…

?? wat are you referring to here?

this has nothing to do with afvalwijzer perse.
this is nothing more than a button card styling. Wrapped in a template, so I can use these throughout my dashboards

here, it only styles the top card (Ophaaldata):

if you dont yet use/understand button-card-templates, you can even take it out and simply set that styling on the button in the stack itself

instead of using:

card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      name: Ophaaldata
      template: button_default_title

you then use:

card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      name: Ophaaldata
      tap_action:
        action: none
      styles:
        card:
          - background-color: var(--background-color-off)
          - color: var(--text-color-off)
          - font-size: 20px
          - font-weight: 400
          - padding: 12px
        name:
          - justify-self: left

2 Likes

EDIT : So I was so focused on doing this in YML than I didnt think of the obvious, modifying the picture as a png with low alpha Working great, thanks for the addons !

Hello ! is their a way to have a semi-transparent background-image in a template as a container ?

I use :

button_card_templates:
  container:
    color_type: label-card
    styles:
      card:
        - padding: 0
        - background-color: transparent
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.1em
        - width: 100%
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
        - background-image: >-
            url('https://cdn.couteaux-du-chef.fr/54851/poele-paysanne-bord-haut-de-buyer-fer-32cm.jpg')
        - opacity: 0.5
      custom_fields:
        buttons:
          - margin: 0
          - padding: 0.3em

But It also make the buttons transparents, if anyone have an idea, thanks !

I will try this afternoon… thanks!

@D34DC3N73R I might be a bit late to the party here, sorry but realised I have a solution for you.

So you aren’t able to use the js templates under the triggers_update property unfortunately, however there is a workaround. If you define a custom field as a card within a button-card template then ALL properties of that card definition can use templates! Not only that but it will still automatically update when it’s entity updates regardless of the state of the parent. That said, I have two other entities that need to update the card in mine so…

Here’s an example from the light_motion template in Creative Button Card Templates:

# ...template definition 
  custom_fields:
    motion:
      card:
        type: custom:button-card
        template: transparent
        entity: "[[[ return variables.motion_entity ]]]"
        show_name: false
        show_last_changed: true
        triggers_update:
          - "[[[ return variables.motion_entity ]]]"
          - "[[[ return variables.timer_entity ]]]"
          - "[[[ return variables.enabled_entity ]]]"
        state:
          # ...

You can see in that example that I’m even populating the entity with a js template!

Also all the code for my templates is on Github so feel free to grab anything from there that’ll help. OR better still, load up my templates so you don’t have to redo it yourself. However I completely get it if you already have a whole eco-system going. Just grab the bits you need.

Hope this helps. Let me know if you have any questions about the code.

Hi All,
I’m trying to define a Button card template, but have a problem. Here is the code of template:

  tado_button_card_template:
    variables:
      var_name: var_value1
      var_entity: var_value2
    name: '[[[ return variables.var_name ]]]'
    entity: '[[[ return variables.var_entity ]]]'

And here is the card:

type: custom:button-card
template: tado_button_card_template
variables:
  var_name: Bedroom
  var_entity: climate.bedroom

But when I try to click on the card instead of entity opened (climate control in this case), I have following error:

Thanks for the suggestion, I’ll check it out.

You’re missing quotes around var_value1 and var_value2.

Unfortunately the problem is not into the quotes. I’m using Raw editor and it automatically removes the quotes and second - name variable works perfectly.

So, if I understand correctly, var_name doesn’t work and var_entity does?

As far as I know you can’t use the entity as a variable (or it’s not meant to at least). Variables are well, variables. So things that you can alter regardless of the entity. Things like name, icon, label etc. Which is why your card shows that error: it can’t return an entity. I believe the templates support the same variable as the javascript template option: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant.

You need to declare the entity in the card itself, not as a variable. So like this:

type: custom:button-card
entity: climate.bedroom
template: tado_button_card_template
variables:
  var_name: Bedroom

Perhaps I’m wrong and you can use entity as a variable, but I always declare the entity in the card since it’s how the docs explain it as well.

Hi all,

I would like to use a button card that displays the state of my window contact sensor and if and only if the window is open, displays the time since it has been opened below the state.

I first tried the show_last_state option but first of all, it displays the information always and not depending on the state and secondly I want to have the format of the output slightly different.

So I tried to realize this using the label of the button card which was successful except the fact that the value was not updated. Is there any way to have the label being refreshed, say every minute?

Here is my button card configuration (I’m using a template as I want to apply this to multiple button cards):

type: custom:button-card
name: Küche
entity: binary_sensor.kitchen_window
icon: mdi:window-closed-variant
template: my_template

button_card_templates:
  my_template:
    color_type: card
    show_name: true
    show_icon: true
    show_state: true
    show_label: true
    state:
      - id: state_on
        value: 'on'
        color: var(--accent-color)
        label: >
          [[[
            let diff = Date.now() - new Date(entity.last_changed);
            if (diff < 60000)
            {
              return "Weniger als eine Minute";
            }
            else if (diff < 3600000)
            {
              let since = Math.floor(diff / 60000);
              return "Seit " + since + " " + ((since == 1) ? "Minute" : "Minuten");
            }
            else
            {
              let since = Math.floor(diff / 3600000);
              return "Seit " + since + " " + ((since == 1) ? "Stunde" : "Stunden");
            }
          ]]]
      - id: state_off
        value: 'off'
        color: var(--ha-card-background)

Hi,
I’m trying to build a customer button-card template, where I have nested custom:button-card elements and want to use a second template to customize the nested buttons. Is it possible?

you should probably should use this, though I havent checked your full config.

[[[ return variables.var_entity.entity_id ]]]

you can do things like:

button_motion:
  variables:
    id: >
      [[[ return 'switch.' + entity.entity_id.split('.')[1]; ]]]
  template:
    - button_body
    - styles_ripple
  show_last_changed: true
  tap_action:
    action: call-service
    service: switch.toggle
    service_data:
      entity_id: >
        [[[ return variables.id; ]]]
  state_display: >
    [[[ return states[variables.id].state === 'off' ? 'Uit'
        : entity.state === 'off' ? 'Geen' : 'Beweging'; ]]]
  state:
    - value: 'on'
      icon: >
        [[[ return variables.on_icon; ]]]
      styles:
        card:
          - color: red
          - border-top: 0.5rem solid red
        name:
          - color: black
        icon:
          - color: red

and use a config like:

          - type: custom:button-card
            template: button_motion
            name: Laundry
            entity: binary_sensor.laundry_sensor_motion
            triggers_update: switch.laundry_sensor_motion
            variables:
              clear_icon: mdi:washing-machine
              on_icon: mdi:washing-machine-alert
              off_icon: mdi:washing-machine-off

note still the triggers_update is still required and it is hard-coded. Button-card uses templates and can not use variables inside those, as it would mean it had to update on all state changes. It did so before, and was taken out because it could bring down the instance… so triggers_update was introduced

Thanks. It looks like - “main” entity - cannot be controlled by variable. This is not a big issue - as it’s easy to add entity with name - instead of variable - as the variable can be used in nested custom:button-card. To give more idea what I’m trying to achieve - I have TADO TVR’s on all my regurgitators - now I want to build a template for card - that can be easily reproduced for all of them - keeping most important parameters visible. So into the template - I’m defining all elements and then into the dashboard / card configuration with just few variables (and entity) - I’m specifying “custom” elements. I want also to add few buttons where I can preform few operations on the TVR - like temp +/- and On/Off. Here is the very draft version of the card (please ignore colors, as I just put few of them to see that they are working, but final design of the card will be on the next stage):

image

1 Like