Lovelace: Button card

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)

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

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.

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

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 }}"

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:

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

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) 

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

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

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)

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

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…

Add this:

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

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

This is because you kept the padding on the card:

styles:
  card:
    - padding: 0px

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.

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.

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.

Ok, I have a circumstance with Templates and Merging States that confuses me a bit. This is specifically dealing with Merging States that are based on the same value.

Based on my current template, when an entity is 'on' I apply a specific theme to the corresponding button. However, when that entity is a Fan, I also want to apply spin: true. Because of the way state merging behaves (and my template), the end result will always be spinning icons for all entities when turned on.

My current work around is to leverage two different templates where the only difference is spin: true but I feel like that sort of defeat the purpose of templates. What do you folks think?

Here’s the Template YAML in case anyone is curious or needs clarification on what I’m describing.

button_card_templates:
  homekit_style_settings:  #Globally unique theme settings regardless of button type or design.
    styles:
      card:
        - border-radius: 10px
    state:
      # - value: 'on'
      #   id: fan_speed
      #   spin: true
      #   styles:
      #     card:
      #       - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
      - value: 'on'
        id: buttons
        styles:
          card:
            - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
 
  homekit_button_settings:  # Specific settings for Square Homekit buttons
    template: homekit_style_settings
    show_state: true
    show_label: true
    show_icon: true
    aspect_ratio: 1/1
    styles:
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content min-content
      img_cell:
        - justify-content: start
        - align-items: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: Titlecase
        - font-size: 14px
      label:
        - font-size: 11px
        - padding: 0px 10px
        - justify-self: start
      state:
        - justify-self: start
        - padding-left: 10px
        - text-transform: lowercase
        - font-size: 12px
      icon:
        - height: 70%

  homekit_light:  #Light and Switch entity specific settings 
    template: homekit_button_settings

  homekit_fan:   #Fan entity specific settings 
    template: homekit_button_settings
    state:
      - value: 'on'
        id: fan_speed

  homekit_dimmer:   #Dimmer entity specific settings 
    template: homekit_button_settings
    tap_action:
      action: toggle
    hold_action:
      action: more-info
1 Like