Lovelace: Button card

RomRider · April 29, 2020, 10:58am

Like this:

styles:
  icon:
    - color: var(--button-card-light-color)

screzwell · April 29, 2020, 12:07pm

Thanks for getting back to me. I’ve added it in but doesn’t seem to have changed it other than set it to a light blue. Here is the full code i’m using:

aspect_ratio: 3/1
color_type: card
entity: light.33128450807d3a7697e2
icon: 'mdi:heart'
lock:
  enabled: true
name: Chloes
state:
  - value: 'on'
    styles:
      state:
        - color: 'rgba(255, 255, 255, 0.4)'
      icon:
        - color: var(--button-card-light-color)
      card:
        - background: 'rgba(7, 17, 51, 1)'
        - border: 'solid 2px rgba(222,211,13,0.4)'
styles:
  card:
    - font-size: 80%
type: 'custom:button-card'

skank · April 29, 2020, 2:31pm

I’m still looking for a fix or way around for my long automation names.

If i could find a way to have 2 lines for it… (cant find it on google) or maybe another workaround, feel free to help…
I tried shortening… but thats hard for automations… For ex “Nachtlampje Noor” doesnt fit the button (1 line)

petro · April 29, 2020, 2:40pm

try

styles:
  name:
  - max-height: 2.4em

skank · April 29, 2020, 2:48pm

I dont see difference with that, it still is 1 line

thx for trying

petro · April 29, 2020, 2:49pm

you have to combine it with whatever you did here:

skank · April 29, 2020, 2:55pm

Bingo !!!

But a new problem rised.
Its not aligned left anymore, although first it was. + the icon moves if theres only one line

My code now:

button_card_templates:
  automation:
    show_label: true
    show_state: true
    size: 30%
    color_type: card
    styles:
      card:
        - font-size: 14px
        - height: 120px
        - width: 120px
      img_cell:
        - justify-content: start
        - align-items: start
        - padding-left: 20px
      name:
        - white-space: normal
        - max-height: 2.4em
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
      state:
        - justify-self: start
        - padding-left: 10px
    state:
    - value: 'on'
      styles:
        state:
          - color: 'rgba(0, 0, 0, 1)'
        icon: 
          - color: 'rgb(255,140,0)'
        card: 
          - background: 'rgb(255,255,255)'
        name:
          - color: 'rgba(0, 0, 0, 1)'
    - value: 'off'
      styles:
        state:
          - color: 'rgba(255, 255, 255, 0.4)'
        icon:
          - color: 'rgba(255, 255, 255, 1)'
        name:
          - color: 'rgba(255, 255, 255, 0.7)'

As you can see, im using template now, so i dont need to repeat it for every automation

petro · April 29, 2020, 2:58pm

text-align: 'left'

skank · April 29, 2020, 3:01pm

Works thx, and for the icon?
So i doesnt jump down one line… see picture above

petro · April 29, 2020, 3:03pm

You’ll have to make the img_cell size static. possibly set it to a static height.

skank · April 29, 2020, 3:11pm

i tried with

styles:
  img_cell:
    - height: 20px

but then the icon just gets smaller, it doesnt move up

petro · April 29, 2020, 3:13pm

add

grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-rows: min-content auto min-content

to styles

skank · April 29, 2020, 3:21pm

ok that fixes the icon, but now the text underneath isnt good anymore

theres now a line between the name and the state…
Also when 1 line it should be the first above the state… now its centered between the two

Sorry mate

petro · April 29, 2020, 3:22pm

use align-self: end in the name style.

skank · April 29, 2020, 3:27pm

Ur brilliant mate,
Almost perfect, now if i could lower the icon a little bit more down, its perfect (cause with the grid it went up)

petro · April 29, 2020, 3:31pm

play with the % size. If that’s the size you like, then you’ll have to play with the values in the grid-template-rows. Something like 1fr 1fr min-content I suggest you use the documentation and read up on the grid section because there is literally endless solutions.

skank · April 29, 2020, 3:33pm

ok i will
Thx for your help mate.
I find that grid stuff the hardest part of the whole card

EDIT: Got it final ! Thx @petro !! Appreciated !

VMCosco · April 29, 2020, 4:58pm

I know there have been some changes lately and I feel like I have missed something.

I have a Button Card embedded in a Decluttering Card template. I use it to select the master speaker for my Sonos system. Tapping the card sets an input_select to the proper speaker entity. Previously, one of the 5 buttons was always “lit” when I entered the view. Now, when I enter the view, no buttons are “lit” and I have to tap a button to change the input_select state before anything is “lit”.

Tl,dr Previously, the buttons always indicated the current state of the input_select. Now, I have to change the state for the buttons to recognize it.

  sonos_master:
    card:
      entity: input_select.sonos_master
      name: '[[name]]'
      state:
        - color: var(--primary-color)
          value: '[[value]]'
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.sonos_master
          option: '[[value]]'
      template: input_button_thick_name
      triggers_update: all
      type: custom:button-card

RomRider · April 29, 2020, 5:03pm

No need for that.

Did you try without the decluttering-card to see what happens ? Also did you update to the latest version of both button-card and decluttering-card?

VMCosco · April 29, 2020, 5:21pm

I did try without the decluttering-card and the behavior is the same. The input_select is set to ‘media_player.sonos_living_room’. When I go to my view with these cards, the “Living Room” button goes “on” and then back “off”. I have to click one of the other buttons to change the input and then click on “Living” Room" again to get it to turn “on”.

I had already removed the triggers_update: all. That was left over from troubleshooting.