Lovelace: Button card

Share your Projects! Dashboards & Frontend
1000

Sure, here you go…
Thanks again for the effort.

anchors:
  custom_button_yeelight: &custom_button_yeelight
    type: custom:button-card
    icon: "mdi:ceiling-light"
    color: auto
    size: 30%
    show_state: true
    show_label: true
    styles:
      card:
        - border-radius: 15px
        - height: 105px
        - width: 105px
        - --paper-card-background-color: rgb(255, 251, 239)
      icon:
        - padding: 0px 60px 20px 0px
      name:
        - padding: 0px 10px
        - font-size: 13px
        - font-family: Helvetica 
        - justify-self: start
        - font-weight: bold
      label:
        - color: gray
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
    state:
      - value: "on"
        styles:
          name:
            - color: black
          state:
            - color: gray
      - value: "off"
        style:
          - opacity: 0.4
        styles:
          icon:
            - color: '#666666'
          name:
            - color: '#666666'
          state:
            - color: '#666666'
      - value: "unavailable"
        style:
          - opacity: 0.2
        styles:
          icon:
            - color: '#666666'
          name:
            - color: '#666666'
          state:
            - color: '#666666'    
    tap_action:
      action: toggle
    hold_action:
      action: more-info

...


      - <<: *custom_button_yeelight # Bedroom Yeelight
        entity: light.bedroom_ceiling
        name: Bedroom
        label_template: >
          var bri = Math.round(states['light.bedroom_ceiling'].attributes.brightness / 2.55);
          return (bri ? bri : '0') + '%';
1001

Hm code looks good to me, though I have never used anchors before (and have to admit that I don’t know what they are used for :smiley: :blush: )

Maybe @romrider knows what is wrong, he is the great man behind this card.

1002

Anchors are a good way to save a lot of copy/past, also to be able to modify a lot of buttons in one place.
It is very useful actually. Anyway I myself used them today for the first time :wink: .

1003

I have a padding problem and I wondered if this can be fixed within button-card or whether I need to wrap each button within card-modder please?

I’m using a conditional card to make the buttons appear / disappear when I click the title button, but because conditional only works with one card, I’m wrapping the buttons within vertical-stack-in-card. However, doing this results in the buttons having no padding between them as seen in the screenshot below.
image
I’ve tried using card padding within the styles, and after a refresh it seems to partially work:

      card:
        - padding: 10px 10px 10px 10px

image
But after closing and opening the conditional card, it goes back to looking like the first screenshot.
Here is my code for reference:

EDIT - code below updated with the fix from my next post.

anchors:
  custom_button_state_red: &custom_button_state_red
    color: rgb(71,39,45) #Red
    styles:
      label:
        - color: rgb(220,69,121)
      icon:
        - color: rgb(220,69,121)
  custom_button_state_green: &custom_button_state_green
    color: rgb(49,68,42) #Green
    styles:
      label:
        - color: rgb(134,219,85)
      icon:
        - color: rgb(134,219,85)

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

  custom_button_title: &custom_button_title
    type: "custom:button-card"
    show_icon: false
    styles:
      card:
        - height: 30px
        - font-weight: bold
        - padding: 0px 0px

  custom_button_padding: &custom_button_padding
    type: "custom:button-card"
    color_type: card
    color: hsla(0, 0%, 98%, 0)
    styles:
      card:
        - height: 10px
        - padding: 0px 0px
        - box-shadow: none


title: Home
views:
  - title: New View
    icon: mdi:view-dashboard-variant
    panel: false
    path: newview
    cards:
      - type: vertical-stack # Motion
        cards:
          - type: horizontal-stack # Title
            cards:
              - <<: *custom_button_title
                entity: input_boolean.conditional_motion
                name: MOTION
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data:
                    entity_id: input_boolean.conditional_motion
          - type: conditional
            conditions:
              - entity: input_boolean.conditional_motion
                state: "on"
            card:
              type: vertical-stack # Motion
              cards:
                - type: horizontal-stack # Motion Buttons Lvl 1
                  cards:
                    - <<: *custom_button_motion # Downstairs Hall
                      entity: binary_sensor.motion_hall_downstairs_occupancy
                      name: D Hall
                    - <<: *custom_button_motion # Upstairs Hall
                      entity: binary_sensor.motion_sensor_158d0001ad4ad6
                      name: U Hall
                    - <<: *custom_button_motion # Garage
                      entity: binary_sensor.motion_sensor_158d0001ad3413
                      name: Garage
                    - <<: *custom_button_motion # Porch
                      entity: binary_sensor.motion_sensor_158d0001ad3403
                      name: Porch
                - type: horizontal-stack # Motion Buttons Lvl 2
                  cards:
                    - <<: *custom_button_motion # Bed 1
                      entity: binary_sensor.motion_sensor_158d0001ad33f3
                      name: Bed 1
                    - <<: *custom_button_motion # Bed 2
                      entity: binary_sensor.motion_sensor_158d0001ad698e
                      name: Bed 2
                    - <<: *custom_button_motion # Bed 3
                      entity: binary_sensor.motion_sensor_158d0001ad4a0f
                      name: Bed 3
                - type: horizontal-stack # Motion Buttons Lvl 3
                  cards:
                    - <<: *custom_button_motion # Study
                      entity: binary_sensor.motion_study_occupancy
                      name: Study
                    - <<: *custom_button_motion # Lounge
                      entity: binary_sensor.motion_sensor_158d0001ad5c5c
                      name: Lounge
                    - <<: *custom_button_motion # Kitchen
                      entity: binary_sensor.motion_sensor_158d0001e43b9f
                      name: Kitchen
                - type: horizontal-stack # Padding
                  cards:
                    - <<: *custom_button_padding
1004

Great, will try that if I feel like it haha, been working almost full-time on Home Assistant (next to my full time job) so I need a break after I have finished posting my config to github.

But that sounds useful. If I find the time this weekend I will try your code and try to reproduce your problem.

1005

My recent post has a good example of anchors - they really are easy to implement and so very useful!

1006

Tried just a regular vertical stack?

1 Like
1007

Ooh that looks amazing, so basically you configure it per domain right? And then you would just have to add the button without duplicating all the code? This is amazing! My wife is going to hate me, some more sleepless nights :stuck_out_tongue:

1 Like
1008

Oh! Hmph that works now. :slight_smile:

I did originally try a vertical stack but it didn’t show the buttons for some reason, so tried vertical-stack-in-card instead. I must have had some other error at the time. :thinking:

Thanks @iantrich it works a treat now!

To correct my code above, I now use the following:

          - type: conditional
            conditions:
              - entity: input_boolean.conditional_motion
                state: "on"
            card:
              type: vertical-stack # Motion
              cards:
                - type: horizontal-stack # Motion Buttons Lvl 1
                  cards:

image

2 Likes
1009

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
1010

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.

image
image1125×2436 658 KB

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:

image
image1125×2436 733 KB

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.

1011

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)

1012

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.

1013

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.

1014

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:

1015

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?

image
image1125×2436 694 KB

1016

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

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

1018

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.

1019

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!