Lovelace: Button card

[jimz011 (Jim)]

You can use a “custom:vertical-stack-in-card” for that purpose (though you could try padding/margins)

@RomRider

Edit: @jimz011, after using my brain a bit more, why would you need vertical-stack-in-card if it works with vertical-stack? I mean you can then use card-modder on each card to remove the box-shadow and the margin to achieve the result same result.

[petro]

I’m fairly certain you won’t be able to remove that. That’s 8 pixels inherited from the paper card. I myself tried removing that spacing from just about everything I could and in some cases you just can’t remove it.

[barrymossel]

I guess I will keep it this way then. Vertical-stack-in-card didn’t work that well for me actually…

[jarrah]

Hi @RomRider, would you mind advising how to fix the following layout issue I’m seeing please?

My buttons are split between having three, two and one button in a horizontal stack, and as you can see from the screenshots below, the text becomes less equally spaced vertically and off-centre as the button goes wider:

The code behind this is as follows:

anchors:
  custom_button_lights: &custom_button_lights
    type: "custom:button-card"
    color_type: icon
    color: auto
    show_label: true
    show_state: true
    show_name: true
    show_last_changed: true
    size: 35px
    hold_action:
      action: more-info
    styles:
      card:
        - border-radius: 10px
        - height: 55px
      label:
        - color: gray
        - font-size: 9px
        - justify-self: start
        - padding: 0px 5px
      name:
        - justify-self: start
        - padding: 0px 5px
        - font-size: 15px
      state:
        - justify-self: start
        - font-size: 12px
        - padding: 0px 5px
      grid:
        - grid-template-areas: '"n i" "s i" "l i"'
        - grid-gap: 0px 5px
        - grid-template-columns: 1fr 40%
        - grid-template-rows: auto auto auto auto 
    state:
      - value: 'on'
        styles:
          state:
            - color: green
      - value: 'off'
        styles:
          state:
            - color: red
          card:
            - filter: brightness(40%)
          icon:
            - color: grey

  custom_button_lights_title: &custom_button_lights_title
    type: "custom:button-card"
    color_type: card
    show_icon: false
    color: hsla(0, 0%, 98%, 0)
    styles:
      card:
        - height: 19px
        - font-weight: bold
        - padding: 0px 0px
        - box-shadow: none
      name:
        - justify-self: start
        - color: white
        - padding: 0px 5px
        # - text-transform: uppercase
        - letter-spacing: 0.2em
        - font-familly: cursive


#Removed some conditional yaml

                - type: horizontal-stack # TITLE - Lounge
                  cards:
                    - <<: *custom_button_lights_title
                      name: Lounge
                - type: horizontal-stack # Lounge lvl 1
                  cards:
                    - <<: *custom_button_lights # Front Left
                      entity: light.colour_lounge_front_left
                      name: Front Left
                      icon: mdi:wall-sconce
                    - <<: *custom_button_lights # Front Right
                      entity: light.colour_lounge_front_right
                      name: Front Right
                      icon: mdi:wall-sconce
                    - <<: *custom_button_lights # Lamp Right
                      entity: light.colour_lounge_lamp_right
                      name: Lamp Right
                      icon: mdi:lamp
                - type: horizontal-stack # Lounge lvl 2
                  cards:
                    - <<: *custom_button_lights # Rear Left
                      entity: light.colour_lounge_rear_left
                      name: Rear Left
                      icon: mdi:wall-sconce
                    - <<: *custom_button_lights # Rear Right
                      entity: light.colour_lounge_rear_right
                      name: Rear Right
                      icon: mdi:wall-sconce

                - type: horizontal-stack # TITLE - Master Bedroom
                  cards:
                    - <<: *custom_button_lights_title
                      name: Master Bedroom
                - type: horizontal-stack # Master Bedroom
                  cards:
                    - <<: *custom_button_lights # En-Suite
                      entity: light.ensuite
                      name: Master Bedroom En-Suite
                      icon: mdi:led-strip

I suspect it’s something to do with grid-template-rows so I’ve tried various combinations of auto, %, px with no luck. I even went back to the original grid options given in the fix example found here, but that just ended up looking like this:

Ideally I would like the Name near the top, State in the middle, and Label at the bottom please.

Thanks!

[RomRider]

@Mariusthvdb

I hope this will be possible with the change you’ll make soon for a global config and card config? Would be way to go.

I’ve added it yes, but it’s not perfect especially for arrays (styles or state) as it will not merge them but concatenate them together. Fortunately for styles, the latest one wins (that’s the way CSS works), but for state, you won’t be able to overload an existing - value: xx for example.

@barrymossel

That doesn’t seem to do anything unfortunately:

There is no way to delete the margin, this is how home assistant works.

@jarrah

My buttons are split between having three, two and one button in a horizontal stack, and as you can see from the screenshots below, the text becomes less equally spaced vertically and off-centre as the button goes wider:

Try this:

    styles:
      card:
        - border-radius: 10px
        - height: 55px
        - padding: 0px # the default padding is 4%, this is why the content moved down the wider the card gets
      label:
        - color: gray
        - font-size: 9px
        - justify-self: start
        - padding: 0px 5px
        - align-self: start # added this
      name:
        - justify-self: start
        - padding: 0px 5px
        - font-size: 15px
        - align-self: end # added this
      state:
        - justify-self: start
        - font-size: 12px
        - padding: 0px 5px
      grid:
        - grid-template-areas: '"n i" "s i" "l i"'
        - grid-gap: 0px 5px
        - grid-template-columns: 1fr 40%
        - grid-template-rows: 1fr min-content 1fr   # You had one too many row

[RomRider]

Version 1.9.0

NEW FEATURES

• Configuration templating support:

  • Define your config template in the main lovelace configuration and then use it in your button-card. This will avoid a lot of repetitions! It’s basically YAML anchors, but without using YAML anchors and is very useful if you split your config in multiple files
  • You can overload any parameter with a new one, appart from the states. The state arrays in templates will be concatenated together with your config, meaning you can add new states but not change/delete states. Your main config states will be appended to the ones in the template.
  • You can also inherit another template from within a template.

  In ui-lovelace.yaml (or in another file using !import)

  button_card_templates:
    header:
      styles:
        card:
          - padding: 5px 15px
          - background-color: var(--paper-item-icon-active-color)
        name:
          - text-transform: uppercase
          - color: var(--primary-background-color)
          - justify-self: start
          - font-weight: bold
        label:
          - text-transform: uppercase
          - color: var(--primary-background-color)
          - justify-self: start
          - font-weight: bold
  
    header_red:
      template: header
      styles:
        card:
          - background-color: '#FF0000'
  
    my_little_template:
      [...]
  

  And then where you use button-card, you can apply this template, and/or overload it:

  - type: custom:button-card
    template: header
    name: My Test Header
  

• To ease template usage, you can now refer to the entity assigned to the button on a call-service action using the entity keyword in the entity_id parameter:

  - type: custom:button-card
    entity: cover.mycover
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: entity  ## This will actually call the service on cover.mycover
  

FIXES

• Fixes #157, map file not found
• minified the file, it’s now 50% smaller

[mynameisdaniel (Daniel)]

Great work - looking forward to adding templates!

Is anyone else seeing issues using button cards in conditional (or the custom state-switch) cards? For me they aren’t displayed on a page refresh if they’re hidden at the time of refresh. It takes either another refresh or a page resize to get them to display.

Happening with a few custom components, although seems most frequent with button cards on an android tablet (Nexus 7). I’ve raised this on GitHub with the frontend and seems it’s a custom component issue (but affecting lots of them).

[Jer78 (Jeremy Percival)]

@mynameisdaniel I had that problem a few versions of HA ago but it hasn’t happened since maybe 0.89 or 0.90. Which version are you using?

[apop]

Love this card! My Harmony remote setup is really coming along nicely:

[RomRider]

@mynameisdaniel

Is anyone else seeing issues using button cards in conditional (or the custom state-switch) cards? For me they aren’t displayed on a page refresh if they’re hidden at the time of refresh. It takes either another refresh or a page resize to get them to display.

Use card-loader to fix that issue put it above the conditional card and wait for all your custom card types that you use in the conditional.

[mynameisdaniel (Daniel)]

Thank you! Of course there’s a custom card to fix custom cards

[Mariusthvdb (Marius)]

HI,
Please let me repost this Lovelace: Button card now that I am getting more acquainted with the Button card, and feeling the comfort of this card in Lovelace compared to that of the Tiles card. Not to mention the speed of development you tend to deploy…

Id really need the possibility to set entity_picture_templates. Ive carefully read the full documentation, but down think that is available right now, even with the latest templating addition? I know I can set picture in state, but that only allows for on/off/unavailabe.

In my particular need, and I can think of many other that require a picture based on other values than these 3, I need pictures based on the state of the zone a device is in.

My current template (for Tiles) is like this:

entities:
  - entity: device_tracker.life360_name
    templates:
      background: >
        if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
        return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
      style: >
        if (state === 'home') return 'background-color: #008000';
        if (state === 'not_home') return 'background-color: #808080';
        return 'background-color: #643aac';

would you consider creating the option to allow js templates for entity_pictures? hoping that

entity_picture_template: >
  if (entity.state === 'home' || entity.state === 'not_home') return 'url(\"/local/tiles/family/name_' + entity.state + '.png\")';
  return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';

would be just as feasible as the label_template we made a few posts above

secondly: can we point the more-info to another entity than the button entity. Use case: with device trackers, we tend to have more than 1 per person, and collect these in a group. My specific setting above, Id want the button to have the entity of my life360 device tracker, but the more-info to open up the group.name which holds all device-trackers for that person. Could be anything really, but in this case really very useful information is revealed.

Thanks for having a look!

[RomRider]

@Mariusthvdb

would you consider creating the option to allow js templates for entity_pictures? hoping that

Introducing that for entity_picture will lead to having everything as a template in a not far future as everyone has specific needs and I don’t think it’s a good idea. For now, the way to achieve that is by using the config-template-card which enables you to do templates on all the fields.

@Mariusthvdb

secondly: can we point the more-info to another entity than the button entity.

Yes, I’ll do that, would you mind opening a feature request on github please? No need to be exhaustive as it’s pretty simple to understand

[Mariusthvdb (Marius)]

@RomRider

Yes, I’ll do that, would you mind opening a feature request on github please?

great. opened the feature request referring to this.

@RomRider

I don’t think it’s a good idea

not so great…
well suppose you’re right. its because the majestic lack of native templating in Lovelace this is happening. Its plain necessary…

btw, next to name (already in feature request discussed with you) and label_template (already in function) only image templates are left … a JS template would merely be a placeholder for the image ‘string’ as you state it to be in the docs.
Hope you keep it in your mind, to enable if and when opportunity arises.

I will certainly follow your suggestion for the templater card, but truly feel this is what Lovelace makes more and more unapproachable, having to nest custom cards in custom cards, which each on their own are developing in different speeds and details.

Makes it rather cumbersome to maintain ones configuration…

Your Button card is taking over my config any time soon though. What magic you are allowing us to use.
thanks for that.

[DavidFW1960 (David)]

@Mariusthvdb

I will certainly follow your suggestion for the templater card, but truly feel this is what Lovelace makes more and more unapproachable, having to nest custom cards in custom cards,

The template card is an acquired taste to be sure. But I do share your frustration with wrapping cards in cards and TBH it makes me nervous - @RomRider fortunately took over this card and is killing it… but before he came along it was as good as dead… only one HA version away from a card totally breaking and if the dev is gone that’s it. So continually adding custom-cards to correct minor issues increases the potential for this to break in the future… (Not saying this specifically about the button-card - but it’s nonsensical to me to have to use say card-modder just to change the colour of a line on a different custom-card or say having to use card-loader…)

[petro]

@RomRider

using the config-template-card which enables you to do templates on all the fields.

My only gripe with this process is that button layouts are interrupted if you try and place these into a horizontal stack. You lose all benefits of placing all buttons into a horizontal stack when wrapping the card in another card.

[petro]

@DavidFW1960

The template card is an acquired taste to be sure. But I do share your frustration with wrapping cards in cards and TBH it makes me nervous

I wouldn’t be nervous about it. The normal cards are wrapped cards in cards in cards, you just don’t know that without looking at the code.

[DavidFW1960 (David)]

Yes but stuff in core is more likely to be supported going forward.

[petro]

Yeah, but with how CSS and HTML work, it’s no different. It’s just a panel that’s inside a panel. The only time this stuff will break is if they change the base classes of the cards. They’ve only done that once and I personally don’t see that happening again for quite some time.

EDIT:

Also, if you use anchors, replacing bulk cards is pretty easy if you can manage. I try to make all custom card anchors use everything but the attributes that are shared between the built in button card and the custom card.

[DavidFW1960 (David)]

You’re forgetting cardgate and then the paper-button-card/MWC changes… In fact this card was dead because of those for a while. It’s a risk.