Lovelace: Button card

Share your Projects! Lovelace & Frontend
#5498

Ive had this working ok until resent update and now I cant work out what’s going wrong.

The button suppose to change picture depending if its on or off:

type: 'custom:button-card'
show_entity_picture: true
tap_action:
  action: none
size: 100%
styles:
  card:
    - border-radius: 15px
    - width: 100px
    - height: 100px
    - box-shadow: 0px 0px 5px 0px var(--button-card-light-color)
entity_picture: >
  [[[
      if (states['binary_sensor.pet_immy'] = 'on')
        return '/local/immy_in.jpg';
      else
        return '/local/immy_out.jpg';
  ]]]

The entity displays off or on when I check in Developer Tools but the card won’t update.

#5499

I‘m not a coding hero, but using

(states['binary_sensor.xyz'].state == 'on')

always is working.

#5500

That worked, thank you, cant understand why its been working as I had it for the last few months.

#5501

You don’t have an entity, that would update the card. You need to set an entity, at least to trigger the update of the card.

See here (especially the option triggers_update): GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

#5502

Ahr, ok Patrick thank you.

#5503

I’ve put together a nice functional fan card that works, but I cannot figure out how to have the three small buttons on the bottom row show a status. What I’ve been trying to do is; if speed 1 is selected, have only that button lit up, then if speed 2 is selected, only that button lit up, etc.

I’ve tried so many variations, but I cannot figure out how to get the state to show in the speed select buttons, I’m hoping someone will be able to help me out.

Here are the attributes for my fan from developer tools:

speed_list:
  - 'off'
  - low
  - medium
  - high
preset_modes: []
speed: high
percentage: 100
percentage_step: 1.0101010101010102
preset_mode: null
friendly_name: Living Room Fan
supported_features: 1

And here’s the code for the button:

type: vertical-stack
cards:
  - card:
      - height: 5px
      - width: 30px
    entity: fan.living_room
    name: Living Room Fan
    show_state: true
    size: 35%
    state:
      - color: null
        icon: 'mdi:fan-off'
        value: 'off'
      - color: green
        icon: 'mdi:fan'
        value: 'on'
    styles: null
    tap_action:
      action: call-service
      service: fan.toggle
      service_data:
        entity_id: fan.living_room
    type: 'custom:button-card'
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        color_type: null
        color: null
        show_state: true
        size: 30%
        icon: 'mdi:fan-speed-1'
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.living_room
            percentage: 25
      - type: 'custom:button-card'
        color_type: null
        color: null
        show_state: true
        size: 30%
        icon: 'mdi:fan-speed-2'
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.living_room
            percentage: 50
      - type: 'custom:button-card'
        color_type: null
        color: null
        show_state: true
        size: 30%
        icon: 'mdi:fan-speed-3'
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            entity_id: fan.living_room
            percentage: 100

And for funsies, what the card looks like:

image

2 Likes
Icon buttons to change fan speed (by pressing them)
#5504

I don’t quite understand it yet. What is meant by ‘only one button lit up’? What should the other buttons look like? Greyed or so?

Or did you mean something like this:


styles:
  icon:
    - color: |
        [[[
          if (states['fan.living_room'].attributes.speed == 'low')  return 'yellow'; return 'black'; 
        ]]]
2 Likes
Icon buttons to change fan speed (by pressing them)
#5505

After a while I’m back for some questions.

I want to change a color of an attribute by referring to the last_changed attribute. It seems very tedious to do since the usual output is really awfull. Since button-card already has the output I want I wondered if I can re-use this.

So what I want to do is something like, if last_changed > 5 minutes return green else red, but I can’t seem to find how to do this without creating a custom sensor. Does anyone know?

#5506

Hey there folks,

Is there a way to set the box-shadow in sync color as the yeelight bulb?

#5507

SOLVED:

- box-shadow: 0px 0px 5px 0px var(--button-card-light-color)
#5508

Hey guys, any idea what is wrong with my syntax here:

   state:
      - color: >
          [[[
            if (sensor.shellyem_5e26f6_channel_1_power > -500 && sensor.shellyem_5e26f6_channel_1_power < 0) return 'orange';
            if (sensor.shellyem_5e26f6_channel_1_power < -500) return 'green';
            else return 'red';
          ]]]

Nothing is happening when my values are in those ranges.
I want color to be orange if between -500 and 0, green if it is over -500, and red if over 0

#5509

Try


states['sensor.shellyem_5e26f6_channel_1_power'].state

instead of


sensor.shellyem_5e26f6_channel_1_power

P.S.: If you are using sensor.shellyem_5e26f6_channel_1_power as entity in your button, you can replace it in the template with entity.state . I cannot explain it better, so have a look at my card:


type: 'custom:button-card'
template:
  - button_sensor_warnung
entity: sensor.bewegungsmelder_flur
styles:
  card:
    - background-color: |
        [[[ 
          if (entity.state < 27) return 'rgba(0,179,0,0.9)';
          if (entity.state >= 27 && entity.state <= 34) return 'rgba(255,166,64,0.9)';
          else return 'rgb(219,23,9,0.9)';
        ]]]
#5510

Hmm tried both states[‘sensor.shellyem_5e26f6_channel_1_power’].state and entity.state and no joy, color doesn’t change.
Here’s the full card in case I’m doing something else wrong:

color: auto
color_type: card
entity: sensor.shellyem_5e26f6_channel_1_power
name: Current Energy
show_label: false
show_icon: false
custom_fields:
  notification: |
    [[[ return states['sensor.shellyem_5e26f6_channel_1_power'].state ]]]
state:
  - color: >
      [[[
        if (states['sensor.shellyem_5e26f6_channel_1_power'].state >= 1000) return 'orange';
        else return 'red';
      ]]]
styles:
  card:
    - height: 45px
    - width: 232px
  name:
    - position: absolute
    - left: 3%
    - top: 5%
  custom_fields:
    notification:
      - position: absolute
      - left: 63%
      - top: 5%
  grid:
    - position: relative
type: 'custom:button-card'
#5511

Put it in the styles: section.

#5512

Yup that did the trick, thanks :+1:

#5513

Hi Guys,

Im still having issues to let this work:
Seems it won’t work for a sensor entity

type: 'custom:button-card'
template: buttons-test
entity: sensor.holiday
show_state: true
show_name: true
state:
  - value: |
      [[[ 
        if (states['sensor.holiday'].state == 'Nothing') return 'on';
        else return 'off';
      ]]]
    spin: true
    color: 'rgba(3,157,252,1)'
    styles:
      state: 'on'
      card:
        - box-shadow: '0px 0px 2px 2px  rgba(3, 157, 252,1)'
  - operator: default
    spin: false
    color: 'rgba(150,150,150,1)'

button_card_templates:
  buttons-test:
    show_icon: true
    size: 15%
    tap_action:
      action: toggle
    styles:
      card:
        - font-size: 14px
        - height: 80px
#5514

try:

  state: &spin # anchor to reuse elsewhere below in this file ;-)
    - operator: template
      id: state-on #needed if you want to merge states in your template and the button config
      value: >
         [[[ return entity.state == 'on'; ]]]
      spin: true

btw, you seem to test for state == ‘on’ twice, once for the spin, and once below that in the styles.

    styles:
      state: 'on'
      card:

You should take that out, since it all is below the template value ‘on’ in this case.

#5515

First part in template and second part take out the card part?

type: 'custom:button-card'
template: buttons-test
entity: sensor.holiday
show_state: true
show_name: true
state:
  - value: |
      [[[ 
        if (states["sensor.holiday"].state == "Nothing") return "on";
        else return "off";
      ]]]
    spin: true
    color: 'rgba(3,157,252,1)'
  - operator: default
    spin: false
    color: 'rgba(150,150,150,1)'

button_card_templates:
  buttons-test:
    show_icon: true
    size: 15%
    tap_action:
      action: toggle
    styles:
      card:
        - font-size: 14px
        - height: 80px
    state:
      - operator: template
        id: state-on
        value: |
          [[[ return entity.state == 'on'; ]]]
        spin: true
#5516

-wait, didnt spot your second line, rereading now

but first: what does this do:

  - value: |
      [[[ 
        if (states["sensor.holiday"].state == "Nothing") return "on";
        else return "off";
      ]]]
#5518 
  - value: |
      [[[ 
        if (states['sensor.holiday'].state == 'Nothing') return 'on';
        else return 'off';
      ]]]

The sensor.holiday have state: Nothing
If there is a birthday, holiday, or something else then it that is the state.

For now I try if sensor is Nothing than the value must be ‘on’
otherwise give value ‘off’

the - value: can’t work with Nothing right?