Lovelace: Button card

I’ll introduce templates in the next version, for those who can’t use YAML anchors.
You’ll define button-card config templates in the main part of the lovelace yaml, and then you use one of the templates in the button card config to avoid repetition! It’s basically like yaml anchors but for this card only. :slight_smile:

3 Likes

Great work.

Here is the code you asked for @RomRider I have tried putting card-modder everywhere, in front of the stacks and even as first card on the view but to no avail. I have to mention that it is on a popup card (I tried removing the background image, but same result). And it is a state switch, but I imagine that these things shouldn’t be the culprit no?

                Auto Jimmy:
                  type: vertical-stack
                  cards:
                    - type: 'custom:card-modder'
                      style:
                        border-radius: 12px
                        --paper-card-background-color: 'rgba(0, 0, 0, 0.0)'
                        box-shadow: 2px 2px rgba(0,0,0,0.0) 
                        padding: 0px 10px
                        height: 33px
                        overflow: hidden
                      card:
                        content: "##### Daihatsu Gran Move 1.6CX (1999) 42-DH-PS"
                        type: markdown
                    - type: horizontal-stack
                      cards:
                        - type: 'custom:button-card'
                          color_type: blank-card
                          styles:
                            card:
                              - width: 13px   
                        - type: 'custom:card-modder'
                          style: 
                            background-image: url('/local/images/daihatsu.jpg')
                            background-size: cover
                            background-position: 50% 50%
                            text-shadow: '1px 1px #000000'
                            color: white
                            height: 140px
                            vertical-align: baseline
                            margin-bottom: 2px
                            font-size: 13px
                            border-radius: 12px
                            overflow: hidden
                          card:
                            type: 'custom:vertical-stack-in-card'
                            cards:
                              - type: 'custom:useful-markdown-card'
                                content: >
                            
                                  **APK:** [[ sensor.daihatsu_gran_move_expdate.state ]]
            
                                  **Kenteken:** 42-DH-PS
            
                                  **Verzekerd:** [[ sensor.daihatsu_gran_move_insured.state ]]
                        - type: 'custom:button-card'
                          color_type: blank-card
                          styles:
                            card:
                              - width: 13px 

I have tried everything, but this is what happens it will “fade” the black bars just a little, but it will remain there even though I set it to be transparent. The corners of the photo shows that border-radius: hidden is not respected.

I have only done the bar that is on the top (which says “Olie”) it only does this with a vertical-stack-in-card. Using a normal vertical stack would result in this:

Edit: this was not the actual code, but the code after trying a lot of card-modders everywhere. It was just to see if it would make a difference as I read somewhere that the card modder works for the top card only.
I have only copied the code from the photo at the top, to not bloat the thread with this.

Your config looks good so it should work. Could you share here the JSON of the state of your light when it’s at 40% please? (from the device panel in HA)

I had a look at the vertical stack in card’s code and actually it enforces a background color… That’s why you have this issue. There no way to get around that even with card-modder as card-modder’s code will always apply the style on the first child of the last vertical-stack-in-card in the chain (hope it makes sense for you). I’m going to try something and PR it if it works! It’s probably going to involve custom styling on the card itself.
CC: @thomasloven

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.

You are absolutely right, that is the way I currently use it (without the margin though, as seen in the screenshot with the dog).

Though to come back to the original question (which was why I asked this in the first place). If the vertical-stack-in-card behaves this way, then applying css styling to the buttons would make no difference?

Vertical stack in card with 2 buttons inside is how I’d do it, and vertical stack in card should work with CSS, unless there’s a bug? Can you share a screenshot and a config of something which breaks the display?

Unless if I understand correctly

card-modder’s code will always apply the style on the first child of the last vertical-stack-in-card in the chain

meaning that, knowing my last vertical-stack-in-card is the one with the check-button-cards, and because in the vertical-stack-in-card there are 5 cards, it will only apply it to the first. And because of that it will enforce this background as it can not apply the style to the whole stack?

Anyways, thanks a lot for this info, helped me out a lot.

vertical-stack-in-card creates a card, with a background, box-shadow and rounded corners (problem is you can’t change the way the card is displayed, ex: you can’t change the rounded corners for example or make the background different, it is fixed to be the default of your theme or home-assistant if undefined in your theme).

That’s the first thing, then, what it does is: It takes all the cards inside (real cards, so horizontal-stack and vertical-stack are excluded) and deletes the margin and the box-shadow (only that) on each element.
It means that inside a vertical-stack-in-card you can use card-modder but keep in mind that the background of the the vertical-stack-in-card is set to var(--paper-card-background-color), so setting the background color to transparent on a card inside of a vertical-stack-in-card will display what is behind it… which means it will display var(--paper-card-background-color), everything else works.

Then for card-modder, it’s specifically hard-coded to only apply the style on the first element after the last vertical-stack-in-card in the chain. That means to be effective, card-modder has to be applied directly to the card you want to style, not on a stack.

Hope it helps :slight_smile:

Ah, yes I see the code in your link, looks logical. Btw wouldn’t using margin be a bit hacky to achieve this?

Edit: I have changed the code in the vertical-stack-in-card.js and changed all the values to 0 (those 3 lines you linked) and I changed the this.style.background line to paper-card-background-color, rgba (0, 0, 0, 0.0)

It looks the way it should now :stuck_out_tongue:
I don’t know if it would affect anything else though, but I guess it wouldn’t?

Hi @RomRider,
Here is the JSON for 40% (hope I understood you correctly, I took it from States page in Hassio):

{
  "min_mireds": 153,
  "max_mireds": 370,
  "brightness": 102,
  "color_temp": 248,
  "friendly_name": "Bedroom Ceiling",
  "supported_features": 43,
  "icon": "mdi:ceiling-light"
} 

Here is the one when it is 5%, just in case:

{
  "brightness": 13,
  "friendly_name": "Bedroom Ceiling",
  "supported_features": 41,
  "icon": "mdi:ceiling-light"
}

First of all, a big THANK YOU to the people who created this card and keep approving it. I also highly appreciate the people who create amazing views with it and share their yaml code. That being said, I do experience a problem with it, as a beginner with HA I am probably missing the obvious.

I like the examples provided in this thread displaying the last time motion was detected. So I literally copied one of those, posted by @jarrah, and sadly enough, it did not display the last_changed time in Chrome. Reading the documents, I found out the show_last_changed replaces the label, so to test I created an extremely simple button with just a regular label. This also did not work. I spend quite some time re-reading the documentation, clearing caches, etc. But to no reveal, no labels displayed.

As a kind of last resort I tried it with Firefox, and well, perfection, the labels are there, both for my own simple button as for the copied motion detectors.

So, does anybody have an idea what am I missing here, anybody else experiencing the same issues, labels not displaying in Chrome, but displaying perfectly in Firefox. For completeness, here is my very simple test-button.

  - type: custom:button-card
    color_type: card
    entity: light.stairlight
    icon: mdi:lightbulb
    name: Name
    label: Label
    show_name: false
    show_state: true
    show_label: true

Works well, apart from the label which is only shown in Firefox, not in Chrome

Thanks :slight_smile: Not only are you setting a brightness but also a light temperature. This card also reacts to the light temperature which is something the default HA components do not do (only brightness and color). The result you are obtaining is expected (40% brightness of a light blue-ish color)

Are you sure that Chrome is not using an old cached version of the card? Please clear your cache, close your browser and try again.

Thanks a lot, extremely quick reply! I thought I was sure, as I reloaded using CTRL-F5 (reload the page, ignoring cached content), I also tried using a new incognito window, but after your reply I went a bit deeper and found I needed the option to clear the browsing data and wipe out the cached images and files from there. Now it also works nicely in chrome. Have a nice Sunday!

Thanks for quick answer. That is actually pretty cool!
Anyway to configure it, in case I would like the button to react only to brightness (not sure I do, but just in case)?

It’s not possible to configure it, but I can think about something, please open a feature-request on github :slight_smile:

I’m liking the spin animation on icons in some cases, but looking to make something a bit more subtle for other icons (more like a sway). Has anyone played around with adding animations?

I suspect defining ‘- webkit-animation:’ under style would work, unfortunately defining the animation keyframes there also doesn’t work, and I don’t know enough to work out how to get around that.

Use card-modder to inject this CSS using the extra_styles property:

@keyframes mysway {
    0%, 100%{ transform: rotate(-8deg);}
    50%{ transform: rotate(6deg); }
}

Then on the button-card:

styles:
  icon:
    - animation: mysway 16s infinite

Play with the numbers to suit your needs :slight_smile:

3 Likes

Ah, I know what happened now - the input_boolean needs to be ON when you refresh the browser, otherwise it doesn’t render the buttons… @iantrich do you know if there’s a better way of doing this instead of using input_boolean?

@dmatik what does those icons look like when off? What version of the card are you using? I have auto color working for shadows and icon color w/ no problem on v 1.8.0.

Add the padding in custom_button_motion and you’ll get it to work.

  custom_button_motion: &custom_button_motion
    type: "custom:button-card"
    color_type: card
    show_name: true
    show_icon: true
    show_last_changed: true
    size: 25px
    styles:
      label:
        - font-size: 10px
      card:
        - border-radius: 10px
        - padding: 10px 10px 0px 0px
      name:
        - font-size: 15px
      grid:
        - grid-template-areas: '"i n" "i l"'
        - grid-template-columns: min-content min-content
        - width: min-content
        - grid-gap: 0px 2px
    state:
      - value: "on"
        icon: mdi:run-fast
        <<: *custom_button_state_red
      - value: "off"
        icon: mdi:run
        <<: *custom_button_state_green

Brilliant! Thanks!

Works a treat, just wish I could define it globally as things are getting a bit crazy with different layers of custom cards now as I’m also using template-config in some places :slight_smile:

I am interested too in animated icons, can I find this in the docs how to do that? Or does it only work with gifs?