Lovelace: Button card

Share your Projects! Dashboards & Frontend
1549

separate post for a template related issue:

Using this name_template works fine on first state change:

        name_template: >
          if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
          return 'Ceiling spots';

after that, it never gets updated anymore.

I have the same (except for the exact naming if the entity) state template in another (Tiles) setup and that shows it does work correctly.

    templates:
      label: >
        if (entities['sensor.spots_badge'].state !== 0) return 'Total Spots on: ' + entities['sensor.spots_badge'].state;
        return 'No Spots on';

20
40

please check why the buttons aren’t updating the template? (this is a sensor that gets updated every 30 sec)

1550

That’s a bug, please open a github issue. Thanks

I can’t change that, that’s how it works in HA core, you have to put an equal number of blank cards or use lovelace-layout-card, or maybe use a vertical-stack-in-card with 4 buttons inside

Can you force the icon using icon: mdi:your_icon please? If it displays by forcing the icon, it means your entity doesn’t have an icon (or the button can’t find it)

1551

Button click only «ON»?
HA%20Mode
I have a group of buttons, that I like to behave like a radio-button-list. If I press one button, the others go “off”. When I press another button “on” in the group, the other goes “off”. I have the above functionality working with an automation.

But if I press the button that is “on” to “off” my radio-button-functionality breaks, - the pressed button goes “off”. And all other buttons are “off”.
I have a second automation setting the Home-button to “on” in this case, but its not perfect. The best would be that the buttons only could be set to “on” (other functionality/automation could then set the buttons to “off”).

Is it possible to configure a button to only be set to “on” in the GUI?

UPDATE:

    #######################################################################
    #  HA MODE SET                                                 
    #######################################################################

    - alias: HA Mode set
      initial_state: true
      trigger:
        platform: state
        entity_id: input_boolean.ha_mode_home,
                   input_boolean.ha_mode_away,
                   input_boolean.ha_mode_holiday, 
                   input_boolean.ha_mode_night
        to: 'on'
      action:
        - service: input_boolean.turn_off
          data_template:
            entity_id: >
              {% set booleans = [ 'input_boolean.ha_mode_home', 'input_boolean.ha_mode_away', 'input_boolean.ha_mode_holiday', 'input_boolean.ha_mode_night' ] | reject('equalto', trigger.entity_id) %}
              {{ booleans | list | join(', ') }}

    - alias: HA Mode default
      initial_state: true
      trigger:
        platform: template
        value_template: "{% if is_state('input_boolean.ha_mode_home', 'off') and is_state('input_boolean.ha_mode_away', 'off') and is_state('input_boolean.ha_mode_holiday', 'off') and is_state('input_boolean.ha_mode_night', 'off')%}true{% endif %}"
      action:
        - service: input_boolean.turn_on
          data_template:
            entity_id: input_boolean.ha_mode_home
1552

Use a script on top of your automation and call that script from the button.
The script would test if the button is on, and do nothing if on, else if would turn it off and your automation would kick in.

1553

ok, consider that done.

won’t that disrupt the aspect_ratio of the other cards then? I can of course set a fixed size for all the buttons, but recently rebuilt all to use aspect_ratio, without which this button setup is less than optimal across different platforms.

Please consider the ‘grid’ request as a future update? marking a button to take spot 2to5 from the row (in this case) would be way preferable to using yet more custom cards.

No, it won’t show:

      - type: 'custom:button-card'
        template: button_default_state
        name_template: >
          if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
          return 'Ceiling spots';
        entity: group.all_living_ceiling_spots
        icon: mdi:spotlight-beam
        show_state: false
        show_label: false
        show_icon: true
        show_name: true
        aspect_ratio: 16/1
        layout: icon_name
        styles:
          card:
            - border-radius: 12px
            - border: solid 1px
            - font-size: 20px
            - font-weight: bold

Also, the text should be displayed in the middle of the button

Like the test button above it now does.

it does have an icon for sure:

07
and again, see my other (Tiles) setup to be proof of that:

56

or the unformatted button:

38
that’s what I am looking for: icon_name_state or icon_name (and use the template for name)

I think it has to do with the size. I had left that out in the card, seems to have minimized to less than a pixel
 though of course plenty of space.

Ive added size: 70% and this shows:
34

that is using aspect_ratio of 4/1 for the button. Which is still 3 times to high (need 12/1), so lowering that to 8/1 and increasing the icon size to 90%:

56 and there it goes!

12/1 and it is invisible (no matter why size is set, even tried 120% )

1554

EDITED:

Do you by any chance have a code example?

UPDATE:
This works, but its maybe better to stop the button process at all (instead of running the button “on” logic once more). But I have no clue how to do the button script logic to stop the button. Help please.

- alias: HA Mode default
  initial_state: true
  trigger:
    platform: template
    value_template: "{% if is_state('input_boolean.ha_mode_home', 'off') and is_state('input_boolean.ha_mode_away', 'off') and is_state('input_boolean.ha_mode_holiday', 'off') and is_state('input_boolean.ha_mode_night', 'off')%}true{% endif %}"
  action:
    - service: input_boolean.turn_on
      data_template:
        entity_id: "{{  trigger.entity_id }}"
1555

As I said, I can’t that’s how HA core works with cards and button-card is a card (tiles, is 1 card whatever the number of button inside is). I would have to build another card to achieve that purpose.

In the meantime, you can use label_template instead of name_template.

I’ll have a look, but I don’t have time until next week

No it souldn’t, because the icon “column” occupies 40% of the width of the button.

script:
  keep_on:
    sequence:
      - condition: state
        entity_id: {{ entity }}
        state: 'off'
      - service: homeassistant.turn_on
        data:
          entity_id: {{ entity }}

And then call it like this from each of your buttons:

tap_action:
  action: call-service
  service: script.keep_on
  service_data:
    entity: YOUR_ENTITY_ID

I expect your automation already in place will turn all the others off :wink:

1556

Trying to stop a button click with script, so an automation is not run if condition in the script is true.
Not getting it to work. Anny ideas?

Button:

   color_type: card
    entity: input_boolean.ha_mode_home
    icon: 'mdi:home-account'
    name: Home
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
        - border-radius: 15px
        - '-- paper-card-background-color': 'rgba(0, 100, 04, 0.2)'
    action: call-service
    service_data:
      entity_id: script.button_stopp_off
    type: 'custom:button-card'

Scripr:

  button_stopp_off:
    alias: Button stopp off
    sequence:
     - service_template: >
         {% if is_state('trigger.entity_id', 'off') %}
             homeassistant.turn_off
         {% endif %}
          entity_id: automation.ha_mode_set
1557

combine the shadows, the original shadow for a card is:

 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)

so just add your color to it and reorganize the order for whatever you want on top.

          - box-shadow: 0px 0px 1px 1px var(--paper-item-icon-active-color), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
1558

I know people have asked for this so I finally got my configuration up on github. I don’t remember who was asking exactly aside from a few users. @apop @myle. It’s a work in progress, still managing many changes that I want to add. Also having issues displaying the images on the in the README.md

4 Likes
1559

Our posts crossed, see my answer here: Lovelace: Button card

1560

thanks, seems rather more complex than you describe it :wink: will test soon.

in the meantime please help me getting the icon and label to concatenate more. I am a bit lost what grid to set for that
managed to get it all on 1 line using a label_template, (which of course is a bit of a hack, but no other way because in the button card settings label and state or name and label won’t ever be concatenated:

06

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: horizontal-filler

      - type: 'custom:button-card'
    #    color_type: label-card
    #    color: auto
    #    name: Hallway lights
        entity: group.all_hallway_lights
        aspect_ratio: 12/1

# https://community.home-assistant.io/t/lovelace-button-card/65981/1116?u=mariusthvdb
        label_template: >
            function capitalizeFirstLetter(string) {
              return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
            }
            var i;
            var entities = entity.attributes.entity_id;
            var count = 0;
            for (i = 0; i < entities.length; i++) {
              var state = states[entities[i]].state;
              if (state === 'on') {
                count += 1;
              }
            }
            if (count === 0 || count === entities.length ) return 'Hallway lights: ' + capitalizeFirstLetter(entity.state) +':  All ' + entities.length.toString();
            return 'Hallway lights: ' +  capitalizeFirstLetter(entity.state) +': ' + count.toString() + ' of ' + entities.length.toString();
    #      if (count > 0) return count.toString() + ' of ' + entities.length.toString() + ' hallway and ambient lights';
    #      return 'Hallway and ambient lights';
        layout: icon_label
        show_icon: true
    #    color: auto
        size: 40%
        show_state: false
        show_name: false
        show_label: true
        tap_action:
          action: toggle
          haptic: light
        hold_action:
          action: more-info
          haptic: success
        styles:
          card:
            - padding: 4px # 0px
            - border-radius: 12px
            - background-color: rgb(255, 251, 239)
          label:
            - color: gray
            - font-size: 13px
            - font-weight: bold
            - font-family: Helvetica
    #        - padding: 0px 5px
    #        - justify-self: start

#          state:
#            - font-size: 13px
#            - font-family: Helvetica
#    #        - padding: 0px 10px
#    #        - justify-self: start
#            - text-transform: capitalize
#    #        - font-weight: bold
#    #        - padding-left: 10px
          grid:
            - grid-template-columns: auto
            - grid-template-areas: '"i l"'
            - grid-template-columns: 1fr 50%
#            - grid-template-columns: min-content min-content
#            - width: min-content
#            - margin: auto
#            - grid-gap: 0px 0px
#          name:
#    #        - justify-self: center
#    #        - padding-left: 10px
#            - font-weight: bold
#            - font-family: Helvetica 
#            - font-size: 13px
        state:
          - value: 'on'
            styles:
              name:
                - color: black
              state:
                - color: red
          - value: 'off'
            styles:
              card:
                - opacity: 0.6
              label:
                - color: grey
              icon:
                - color: black
              name:
                - color: black
              state:
                - color: black
          - value: 'unavailable'
            styles:
              card:
                - opacity: 0.4
                - color: grey
                - --paper-item-icon-color: grey
              label:
                - color: rgba(0, 0, 0, 0.0)
1561

its not really that complex. It’s like 8 shadows on top of eachother. That’s what you can do with the color & shadow css attributes. You can add as many as you want and in the order that you want.

I’m not sure what you mean

1562

Sorry. Trying to get the icon to show just left outside the middle and the label start just right outside the middle of the button, so they appear to be next to each other


1563

Add this:

styles:
  img_cell:
    - justify-content: end
  label:
    - justify-self: start
1 Like
1564

thanks,! was just ending up with this:

      - type: 'custom:button-card'
        template: button_default_state
        entity: group.all_living_ceiling_spots
        aspect_ratio: 12/1
        label_template: >
          if (states['sensor.spots_badge'].state !== 0) return 'Ceiling spots on: ' + states['sensor.spots_badge'].state;
          return 'Ceiling spots';
        layout: icon_label
        show_icon: true
        size: 40%
        show_label: true
        show_state: false
        show_name: false
        styles:
          img_cell:
            - justify-content: flex-end
          card:
            - padding: 4px
            - border-radius: 6px
          label:
            - text-align: left
            - font-size: 16px
            - font-weight: bold
            - padding-left: 0px
          grid:
            - grid-template-areas: '"i l"'
            - grid-template-columns: 1fr 60%

which isn’t right yet, but close to what you suggest;-)

Note that I:

had to change from name_template to label_template to get the template to work, something is not right in the name_template

got the icon to show up, by changing the order, and probably most importantly, the font-size
 Don’t know how yet, changed so many options, but this is how it finally showed.

06

as you can see the top button needs some finetuning to get it centered nicely. Will use your suggestion for that first!

thanks for helping out

1565

This is because you kept the padding on the card:

styles:
  card:
    - padding: 0px
1566

Is it possible to pipe the Home Assistant Area value of an entity into the label field? I haven’t actually configured areas but realized this would be a great way to add context to our custom Homekit-Like buttons.

1567

This data is not available in the hass object exposed passed to the cards as far as I know, so for now it’s not possible and it doesn’t seem obvious to retrieve that info (From what I’ve checked it would involve retrieving stuff from the websocket directly). If you open a feature request, I might look into it.

1568

No worries. It’s such a minor feature that it’s probably not worth investing the time if HA core doesn’t make the data easily available. Thanks for looking into it.