Lovelace: Button card

[lawsuitup]

Hey, is there a way to customize the background and the icon? For example, could I make the background white and the icon red? I can only seem to manage one or the other.

[Jdruwe (Jeroen Druwé)]

Hey I am looking to build something similar for my blinds, can you please share that config? I am not sure how you included those buttons and how they trigger the blinds.

[qoheleth (Russell Smith)]

I think

styles:
  card:
    - background-color: white
  icon:
    - color: red

should work

[RomRider]

We already discussed this here I think with a proposed solution.
I don’t think I can implement this in the card itself, it would work for white, but then, what if the user has a blue background and the light is blue?

[skank]

I need some help here.
I made a button to have a popup.
If i leave the entity out of the code, the popup (mod-browser) comes up and works
However i want to change the icon used, based on the state of the entity.
Thathwhy i added the entity, but when i do that, the popup doesnt work anymore.

name: Alarm
        type: custom:button-card
        entity: alarm_control_panel.risco
        state:
        - value: "disarmed"
          icon: mdi:shield-off
        - value: "armed_away"
          icon: mdi:shield-check
          styles:
            icon:
              - color: var(--primary-color)
        - value: "armed_home"
          icon: mdi:shield-half-full
          styles:
            icon:
              - color: var(--primary-color)     
        style: |
          ha-card {
            height: 128px;
            text-align: center;
          }
        tap_action: !include popup/alarm.yaml

[RomRider]

I don’t think it is related.
What does your popup code look like?
Also, does this code it work on another card’s tap action?

[skank]

This one for example works with the popup

- name: Verlichting
        type: custom:button-card
        icon: mdi:lightbulb-outline
        tap_action: !include popup/verlichting.yaml
        style: |
          ha-card {
            height: 128px;
          }

But as soon as i put in an entity there, the popup doesnt work

Heres the popup

action: call-service
service: browser_mod.popup
service_data:
  title: Alarm
  hide_header: true
  deviceID: this
  style:
    .: |
      :host .content {
        width: calc(400px);
      }
    $: |
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
      }
  card:
    type: alarm-panel
    entity: alarm_control_panel.risco
    states:
      - arm_home
      - arm_away

[skank]

ok i found it
if i change code like this , it the popup works

name: Alarm
        type: custom:button-card
        tap_action: !include popup/alarm.yaml
        entity: alarm_control_panel.risco
        state:
        - value: "disarmed"
          icon: mdi:shield-off
        - value: "armed_away"
          icon: mdi:shield-check
          styles:
            icon:
              - color: var(--primary-color)
        - value: "armed_home"
          icon: mdi:shield-half-full
          styles:
            icon:
              - color: var(--primary-color) 
        style: |
          ha-card {
            height: 128px;
            text-align: center;
          }

It seems the order where i put the tap_action is important

[parautenbach (Pieter Rautenbach)]

Thank you, RomRider. This is what I thought. I’ll try Petro’s suggestion. I couldn’t find that particular post you linked to.

I understand that there will always be some ambiguity (and summarising for myself and others): For a blue light on a blue background, you’ll either have the true colour which won’t be visible, or another colour that doesn’t reflect the true light colour just to make it visible on the card. I suppose even the built-in behaviour has the latter problem (choosing hues of yellow for both yellow and white hues).

[RomRider]

The exact code to add to your card to have the result you expect is the one in this post: (it was the one linked in my previous post)

Lovelace: Button card

@petro’s approach is the best, the only thing is that color doesn’t support templates so in the meantime you’ll have to use states instead: state: - operator: template value: > [[[ if (entity.state === 'on' && entity.attributes.rgb_color) { let rgb_sum = entity.attributes.rgb_color.reduce((a, b) => a + b, 0); return rgb_sum > 3 * 230; // adjust the value to match when you want to switch to the default icon color } return false; ]]] …

[parautenbach (Pieter Rautenbach)]

Thanks again - and now I see the ambiguity in what I said (ironically): The link worked fine! I meant that I posted the question since I couldn’t find anything on the topic. I appreciate all the feedback.

[Denman2103 (Dennis)]

Hello,

I want to use the button card for selecting games to start on my PS4. I tried it with lovelace picture cards but they don’t scale and fit like the button card does. Now i’m wondering is there a way to move or scale the image which is used as background-image? so i can fit the image on the button card.
Here is my code and a picture of the card.

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        aspect_ratio: 1/1
        styles:
          card:
            - background-size: cover
            - background-image: url("/local/images/Far_Cry_5.jpg")
      - type: 'custom:button-card'
        aspect_ratio: 1/1
        styles:
          card:
            - background-size: cover
            - background-image: url("/local/images/Fortnite.jpg")
      - type: 'custom:button-card'
        aspect_ratio: 1/1
        styles:
          card:
            - background-size: cover
            - background-image: url("/local/images/FS19.jpg")

[pollinolas]

Try to add too:
background-repeat: no-repeat;
background-position: center;
background-size: auto;

Maybe better set the size:
background-size: Xpx Xpx;

[Denman2103 (Dennis)]

Works like a charm. Thank you!

[bednim]

Hi @PodPerson - would you mind sharing your YAML code for one of the tiles, maybe for Lounge? Thank you!

[PodPerson]

I’m sorry, I don’t use those anymore tiles as it was pretty slow to load and I haven’t kept a copy of it. I’ve gone through a few designs since then. It was bascally a lot of nested button cards and stack-in-card. Something like this:

- vertical-stack-in-card
     - horizontal-stack
         - light
         - vertical-stack
             - lux sensor
             - fake button for spacing
     -vertical-stack
       - horizontal-stack
              - motion sensor
              - Light mode
       - horizontal-stack
              - door
              - garage door
       - horizontal-stack
              - window 1
              - window 2

[gualandd]

Good morning,
I’m using Button Card for some stuff but now I’m stuck in the color_type: card & color: auto feature:
in particular i have an rgb light entity with a custom image (entity_picture) as icon (just a custom black icon) and I like to have it change in color with the text to be readable when card color change by color: auto, but I can’t figure how to do this.

I know that is not a standard icon so the color: auto function doesn’t work, but there is a trick to make the entity_picture change with card color by changing the picture (I can make a black one, a white one and a grey one for example)?

[RomRider]

That is not possible (technically it is possible with filters to change black into something else but not be predictive and obtain the light color)
If your image was a SVG, then you could do something.

[gualandd]

Well, if I have the possibility to convert it to svg how can I do the color change?

BTW, is no possible to change the image ex. from A.png to B.png based on the RGB Light color (that colorize the card)?

[RomRider]

For SVG, you can use the solution from this post.

If you want to change the picture based on the color, you can use javascript templates to return the appropriate image path.