Lovelace: Button card

mclaudiopt · May 20, 2019, 1:03pm

thanks ! unfortunelly i cannot understand the documentatio.
can you please help?

RomRider · May 20, 2019, 1:04pm

Like this:

      - dbltap_action:
          action: more-info
        entity: binary_sensor.meteoalarm
        name: ALERTA METEO
        show_label: true
        show_state: true
        show_entity_picture: true
        size: 70%
        state:
          - color: green
            value: 'off'
            entity_picture: '/local/your_image.jpg'
          - color: red
            value: 'on'
            entity_picture: '/local/your_other_image.jpg'
        tap_action:
          action: toggle
        type: 'custom:button-card'

Mariusthvdb · May 20, 2019, 1:07pm

yes, and since @mclaudiopt wanted to

replace the icon: with entity_picture: and a correct path to that picture on your system, but the above post was edited, so mine can be retracted…

mclaudiopt · May 20, 2019, 1:17pm

thanks
like this?
cause it does not show the image_(

cards:
  - name: INFORMAÇÃO
    template: header_marcelo
    type: 'custom:button-card'
  - cards:
      - entity: sensor.riscoincendio
        name: RISCO DE INCÊNDIO
        show_label: true
        show_state: true
        size: 70%
        state:
          - color: red
            value: REDUZIDO
        type: 'custom:button-card'
      - dbltap_action:
          action: more-info
        entity: binary_sensor.meteoalarm
        name: ALERTA METEO
        show_label: true
        show_state: true
        size: 70%
        state:
          - color: green
            value: 'off'
            entity_picture: '/local/images/meo.jpg'
          - COLOR: RED
            VALUE: 'on'
            entity_picture: '/local/images/meo1.jpg'
        tap_action:
          action: toggle
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

my image is in www/images

RomRider · May 20, 2019, 1:18pm

You missed:
show_entity_picture: true

and your should not write things in capital letters, like: COLOR: RED or VALUE: 'on', this whould be lowercase: color: red, value: 'on'!

Mariusthvdb · May 20, 2019, 1:40pm

must be staring blindly, but somehow the ‘off’ color won’t show:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_picture
        entity: automation.switch_bedside_table_off_when_no_motion
        state:
          - value: 'on'
            entity_picture: '/local/hue_scenes/clear.png'
            styles:
              - color: '#F0C209'
          - value: 'off'
            entity_picture: '/local/hue_scenes/nightlight.png'
            styles:
              - color: '#555B65'

with this button_template:

button_picture:
  size: 90%
  show_state: false
  show_label: false
  show_name: false
  show_entity_picture: true
  color_type: card
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - border-radius: 12px
      - width: 105px
      - height: 105px

on is as it should be:

off stays white, no matter what I enter for color, be it hex or name:

should be:

spot the error please?

–update–

think I found it:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_picture
        entity: automation.switch_bedside_table_off_when_no_motion
        state:
          - value: 'on'
            entity_picture: '/local/hue_scenes/clear.png'
            color: '#F0C209'
          - value: 'off'
            entity_picture: '/local/hue_scenes/nightlight.png'
            color: '#555B65'

works. Still confusing to me, maybe have to reread…why won’t styles work here, or is it even incorrect? And why does it work for on and not for off…

RomRider · May 20, 2019, 2:06pm

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_picture
        entity: automation.switch_bedside_table_off_when_no_motion
        state:
          - value: 'on'
            entity_picture: '/local/hue_scenes/clear.png'
            color: '#F0C209'
          - value: 'off'
            entity_picture: '/local/hue_scenes/nightlight.png'
            color: '#555B65'

when color_type: card, color: xxx is a shortcut for:

styles:
  card:
    - background-color: xxx

On a side note, your where missing something between styles and the actual style you want to put in place.

Mariusthvdb · May 20, 2019, 2:08pm

haha, thanks, yes, I tried background-color before, but it didn’t change the white background…
how come it did work for the on state?

RomRider · May 20, 2019, 2:09pm

Because by default the button applies a color for the on state, and the default on color is var(--paper-item-icon-active-color)

Mariusthvdb · May 20, 2019, 2:12pm

mmm, wait a minute please. So you’re saying that with an incorrect styles (which I had) the default color is applied, even to the off state?
Then how come the background for the on state was colored according to my erroneous styles, and not made white?

I mean, I am fine with the end result now, but like to really understand to prevent stupid mistakes in the future…

RomRider · May 20, 2019, 2:16pm

It was not applying your color, it was applying var(--paper-item-icon-active-color), which for you is also probably yellow
Defaults for color_type: card:

on: var(--paper-item-icon-active-color)
off: var(--paper-card-background-color)

Mariusthvdb · May 20, 2019, 2:27pm

that seems most unlikely, since it is no default color of anything, and i have set this hex value specifically in this configuration…
where w/could var(--paper-item-icon-active-color) bet set to make it default to my ‘yellow’ color #F0C209?

RomRider · May 20, 2019, 2:29pm

This comes from the theme of your homeassistant, and yellow (#fdd835) is also the default for this value in home-assistant when no theme is applied.

And by checking the color of your screenshot, I can tell that it’s not your color which is applied but home-assistant’s default Yours is more orange-ish than yellow.

Mariusthvdb · May 20, 2019, 2:34pm

aha! so it wasn’t applying ‘my’ yellow #F0C209 but the HA default yellow #fdd835 . Lol, missed that! It is rather subtle, I must admit…

thanks again! very informative.

RomRider · May 20, 2019, 3:01pm

Actually I was thinking, you can already style the lock icon… I just forgot I already did it, it was released in 1.8.0:
See example here: Lovelace: Button card - #952 by RomRider

mclaudiopt · May 20, 2019, 3:24pm

AMAZING ! it works ! thank you so much

hi again
i made it work for one of the sensors. for the other it seams impossivel !

cards:
  - name: INFORMAÇÃO
    template: header_marcelo
    type: 'custom:button-card'
  - cards:
      - entity: sensor.riscoincendio
        template: cartao
        name: RISCO DE INCÊNDIO
        show_name: true
        show_label: true
        show_state: true
        show_entity_picture: true
        size: 56%
        state:
          - value: MODERADO
            entity_picture: /local/images/meteo_no_alert.jpg
          - VALUE: 'on'
            entity_picture: /local/images/meteoalert.jpg
        type: 'custom:button-card'
      - entity: binary_sensor.meteoalarm
        template: cartao
        name: ALERTAS METEROLÓGICOS
        show_name: true
        show_label: true
        show_state: true
        show_entity_picture: true
        size: 100%
        state:
          - color: green
            value: 'off'
            entity_picture: /local/images/meteo_no_alert.jpg
          - COLOR: red
            VALUE: 'on'
            entity_picture: /local/images/meteoalert.jpg
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

can someone please setup this sensor and help me finding why the retrieved values are not beeing considered?

this is the output of the sensor

wich is equal to what i have in the code…

RomRider · May 20, 2019, 3:38pm

Actually it’s not but it’s subtle… I checked your scraper from the code you sent on github.
The sensor value has actually a line-return at the end but it’s not visible… That’s why it doesn’t match.

You should change your scraper to something like this:

  - platform: scrape
    resource: 'https://fogos.icnf.pt/rif/Stat_Global_Sensibilizacao_Riscolist2.asp?cmd=search&t=Stat_Global_Sensibilizacao_Risco&z_Distrito=%3D&x_Distrito=Leiria&x_Concelho=Caldas da Rainha'
    name: riscoincendio
    select: "FONT"
    index: 1
    value_template: "{{ value | trim }}"  # I added this.

Mariusthvdb · May 20, 2019, 4:26pm

A yes, So cool! I missed that completely, and seems exactly what I was looking for (except for the exception rule, but that maybe too much an edge case for you to implement)

having great time transitioning my Tiles:

to your Buttons,

left out some opacity settings, and still need to find a way to collect the individual buttons on a card, like my Tiles, but they come along very nicely.
They look very robust compared to the sometimes jittering Tiles, especially for the animated Gifs I use, very steady. Thanks a bunch for this car.

Entity_picture templates will be the definitive clincher…

petro · May 20, 2019, 4:36pm

the new versions look better. More centered and the rounded corners make for better buttons.

mclaudiopt · May 20, 2019, 4:47pm

You are right !!! now works !
thanks a lot