Lovelace: Button card

I have a fan entity with 5 speed setting that I have assigned button cards in my ui setup. the varying speeds are not displayed in states, but are available in Attributes. I want the button-card box-shadows to react to the speed settings of the fan. I see that @daphatty did something similar, but for me the the box-shadow that should only show if the fan is on and at this particular speed ( low/Medium/High/ Auto/ Breeze/Smart) is constantly displayed even though the fan is off.Fan buttons states.

Here is my code:

         name: Low
         icon: none
         styles:
           card:
             - width: 50px
             - border-style: solid
             - border-color: silver
             - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
           name:
             - align-self: middle
         state:
           - operator: template
             value: >
               return
               states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan',].attributes.speed
               === 'low'
             styles:
               card:
                 - box-shadow: 0px 0px 9px 3px orange
         tap_action:
           action: call-service
           service: fan.set_speed
           service_data:
             entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
             speed: low```

Would definitely appreciate any help that I could get in sorting this out.

This is my setupfan
Perhaps you can use bits of it.

          - type: custom:vertical-stack-in-card
            # title: EcoFan
            cards:
              - type: custom:button-card
                template: horizontal-divider-grey
              - type: horizontal-stack
                cards:
                  - type: custom:button-card
                    template: ceiling-fan-icon-settings
                    entity: fan.ecofan
                    tap_action:
                      action: call-service
                      service: fan.toggle
                      service_data:
                        entity_id: fan.ecofan
                  - type: custom:button-card
                    template: vertical-divider-grey
                  - type: custom:button-card
                    template: ceiling-fan-name-settings
                    entity: fan.ecofan
                    name: Fan
                    tap_action:
                      action: call-service
                      service: fan.toggle
                      service_data:
                        entity_id: fan.ecofan
                  - type: custom:button-card # Low Button
                    template: fan-speed-settings
                    name: low
                    tap_action:
                      action: call-service
                      service: fan.set_speed
                      service_data:
                        entity_id: fan.ecofan
                        speed: low
                    styles:
                      card:
                        - background-color: >
                            [[[
                              if ((states['fan.ecofan'].attributes.speed === 'low') & (states['fan.ecofan'].state === 'on'))
                                return "#2980b9";
                              return "grey";
                            ]]]
                  - type: custom:button-card
                    template: vertical-divider-grey
                  - type: custom:button-card # Med Button
                    template: fan-speed-settings
                    name: med
                    tap_action:
                      action: call-service
                      service: fan.set_speed
                      service_data:
                        entity_id: fan.ecofan
                        speed: medium
                    styles:
                      card:
                        - background-color: >
                            [[[
                              if ((states['fan.ecofan'].attributes.speed === 'medium') & (states['fan.ecofan'].state === 'on'))
                                return "#2980b9";
                              return "grey";
                            ]]]
                  - type: custom:button-card
                    template: vertical-divider-grey
                  - type: custom:button-card # High Button
                    template: fan-speed-settings
                    name: high
                    tap_action:
                      action: call-service
                      service: fan.set_speed
                      service_data:
                        entity_id: fan.ecofan
                        speed: high
                    styles:
                      card:
                        - background-color: >
                            [[[
                              if ((states['fan.ecofan'].attributes.speed === 'high') & (states['fan.ecofan'].state === 'on'))
                                return "#2980b9";
                              return "grey";
                            ]]]
                  - type: custom:button-card
                    template: vertical-divider-grey
                  - type: custom:button-card # Off Button
                    template: fan-speed-settings
                    name: 'off'
                    # color: white
                    tap_action:
                      action: call-service
                      service: fan.turn_off
                      service_data:
                        entity_id: fan.ecofan
                    styles:
                      card:
                        - background-color: >
                            [[[
                              if (states['fan.ecofan'].state === 'off') 
                                return "#2980b9";
                              return "grey";
                            ]]]
                  - type: custom:button-card
                    template: vertical-divider-grey
              - type: custom:button-card
                template: horizontal-divider-grey

and the templates

button_card_templates:
  ceiling-fan-icon-settings:
    show_icon: true
    show_label: false
    show_name: false
    styles:
      card:
        - height: 36px
        - width: 50px
      grid:
        - grid-template-areas: '"i"'
        - grid-template-columnns: auto
      icon:
        - height: 26px
        - width: 26px
    state:
      - value: 'on'
        spin: true

  ceiling-fan-name-settings:
    show_icon: false
    show_label: false
    show_name: true
    styles:
      card:
        - height: 36px
      grid:
        - grid-template-areas: '"n"'
        - grid-template-columnns: auto
      name:
        - justify-self: start

  fan-speed-settings:
    show_icon: false
    show_name: true
    styles:
      card:
        - height: 35px
        - font-size: 12px
        - width: 35px
        - border: 1px solid white
        - border-radius: 5px
        - text-transform: uppercase
        - background-color: 'var(ha-card-background)'
      icon:
        - icon-size: 14px

  vertical-divider-grey:
    color_type: blank-card
    styles:
      card:
        - width: 3px
        - color: 'var(--primary-color)'

  horizontal-divider-grey:
    color_type: blank-card
    styles:
      card:
        - height: 3px
        - background-color: 'var(ha-card-background)'

Hi guys, I need to round off a value to no decimal places and I know in templating can use something like | round(1) for example but no idea on how to add that to my if (states['sensor.dryer_mss310_power_sensor_w_0'].state > 2) below.

Does that something like that work without me creating a template?

card:
      type: 'custom:button-card'
      name: Timer
      entity: sensor.dryer_mss310_power_sensor_w_0
      margin: none
      show_name: false
      show_icon: false
      show_state: true
      styles:
        card:
          - box-shadow: none
          - font-size: 12px
        state:
          - color: |
              [[[
                if (states['sensor.dryer_mss310_power_sensor_w_0'].state > 2)
                  return "red";
                else
                  return "white";
              ]]]

That should do the trick for rounding without any decimal (it’s rounding, not truncating):
Math.round(states['sensor.dryer_mss310_power_sensor_w_0'].state)

Hey Cadster, thanks for sharing your code. I have tried to edit my setup with your code in two ways :

          name: Low
          icon: none
          styles:
            card:
              - box-shadow: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') & (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "0px 0px 9px 3px teal";
                    return "red";
                  ]]]
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: low```
This way is not producing any change to the card.


This code is somewhat working as the icon lights up but the speed button does not respond to the  device being turned on.


```- type: 'custom:button-card'
          name: Low
          icon: none
          styles:
            card:
              - background-color: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') & (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "blue";
                    return "red";
                  ]]]
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: low```
![Fan buttons states 3 |478x89](upload://veQR9dITIMMXKYTkIOakJGDNmo5.png) ![Fan buttons states 2 |471x82](upload://p3LcdHrmzFjY3jL25KAQc2aY5FL.png) .

Not sure what I am doing wrong. How are you able to get away from having `state:` as part of the config.

Actually it is this part where I need it in not as I said above entity: sensor.dryer_mss310_power_sensor_w_0 so it doesn’t work there
I thought this would work:

entity: >
        {{ states('sensor.dryer_mss310_power_sensor_w_0') | round(0) }}

It works ok in Dev tools and templates so the syntax is right but nothing is being displayed in the card.

@RomRider how can I get my card to only apply a box-shadow if the state of the device is ‘on’ and the speed attribute is ‘low’? As you can see above I have tried the background color method and it works , but the box shadow does not.

I don’t understand what you are trying to achieve? Is it just to display the state on the button without any decimals?

It’s && not &

if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') && (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))

No change with the card, so let me try and explain my intent.
I want to have a box-shadow show around a card when the entity state is ‘on’ and the state_attribute (fan speed setting) is ‘low’. I have been able to do that fairly easily using the state: element like in this example for a light:

  - value: 'on'
    styles:
      card:
        - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)```

But when I try and replicate the same efforts for my fan setting then the box-shadow no longer works:
```styles:
            card:
              - box-shadow: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') && (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "0px 0px 9px 3px teal";   
                  ]]]```

It appears that the issue is with the box-shadow element as i am successful trying it with `- background-color: |`..... I just am not able to see why

I am struggling in using a “external” entity in a template. Maybe someone can help me. Need to readjust after changing from open z-wave to zwave js

This is my actual working template.

const valve_position_num = states['number.bad_heizung_ventil'].state;

The problem is, that “[‘number.bad_heizung_ventil’]” is hardcoded.
The entity-id of the card is “climate.bad_heizung”. So only the prefix changes and “_ventil” is added.

Is there a way to build a template which uses only the name of the entity and wrap it with the prefix and the text from the end?
Something like

states[‘number.‘entity’_ventil’].state

Please share your complete config and please make some efforts to format your posts correctly…

Yes, something like:

const id = entity.entity_id.split('.')[1]
xxx = states[`number.${id}_ventil`].state
1 Like

Very nice! It is working. Thank you! :pray:

Correct, display the state value without decimal points.

@RomRider not sure what I am doing wrong with the format, I tried the - background -color: setup and it worked, but oddly using the same template with - box-shadow: failed to work. Here is my full config:

style: |
  ha-card {   
    background: url('/local/images/backgrounds/business-intelligence-technology.png');
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    max_width: 100%;
    }
card:
  type: 'custom:layout-card'
  max_width: 100%
  layout: vertical
  cards:
    - type: 'custom:button-card'
      styles:
        card:
          - border-radius: 5px
          - height: 40px
          - width: 402px
          - margin: 0px 0px 0px 1px
          - '--card-background-color': 'rgba(0, 0, 0, 0.2)'
      name: Family Room
    - type: picture-elements
      elements:
        - type: state-icon
          prefix: Media System
          style:
            top: 90%
            left: 10%
            font-size: 10px
            font-weight: bold
          icon: 'mdi:power'
          icon_template: >-
            {% if states('script.1577302825981') == "on" %} green {% else %} red
            {% endif %}
          tap-action:
            action: script.turn_on
          entity: script.1577232742416
        - type: state-label
          entity: sensor.ecobee_lite3_temperature
          prefix: 'Temp '
          style:
            top: 5%
            left: 19%
            font-size: 15px
            font-weight: bold
            color: blue
        - type: state-icon
          entity: sensor.smoke_and_carbon_monoxide_entry_hall_alarmtype
          icon: 'mdi:smoke-detector'
          style:
            top: 5%
            left: 50%
            color: blue
        - type: state-label
          entity: sensor.ecobee_lite3_humidity
          prefix: 'Humidity '
          style:
            top: 5%
            left: 80%
            font-size: 15px
            font-weight: bold
            color: blue
        - type: state-icon
          entity: climate.ecobee_lite3
          icon: 'mdi:air-conditioner'
          style:
            top: 90%
            left: 65%
            font-size: 15px
            font-weight: bold
            color: white
        - type: state-icon
          entity: lock.front_door_lock_132
          style:
            top: 90%
            left: 75%
            color: white
        - type: state-icon
          entity: binary_sensor.motion_sensor_119
          icon: 'mdi:motion-sensor'
          style:
            top: 90%
            left: 85%
            font-size: 15px
            font-weight: bold
            color: white
        - type: state-icon
          entity: alarm_control_panel.home_alarm
          style:
            top: 90%
            left: 95%
            color: white
      image: /local/images/Rooms/Family-room.jpg
    - type: 'custom:layout-card'
      column_num: 3
      layout: horizontal
      justify_content: start
      cards:
        - type: 'custom:button-card'
          styles:
            card:
              - border-radius: 5px
              - border-style: solid
              - border-color: silver
              - height: 60px
              - width: 129px
              - margin: 0px 0px 0px 5px
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          state:
            - value: 'on'
              icon: 'mdi:movie'
              color: red
          tap_action:
            action: call-service
            service: script.toggle
            service_data:
              entity_id: script.1577302825981
          name: Movie Time
          confirmation: true
          icon: 'mdi:movie'
        - type: 'custom:button-card'
          styles:
            card:
              - border-radius: 5px
              - border-style: solid
              - border-color: silver
              - height: 60px
              - width: 129px
              - margin: 0px 0px 0px 0px
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          state:
            - value: 'on'
              styles:
                - card:
                    - box-shadow': '0px 0px 10px 3px #F9C536'
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.1577318321465
          name: Game Time
          confirmation: true
          icon: 'mdi:sony-playstation'
        - type: 'custom:button-card'
          styles:
            card:
              - border-radius: 5px
              - border-style: solid
              - border-color: silver
              - height: 60px
              - width: 129px
              - margin: 0px 0px 0px 0px
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          state:
            - value: 'on'
              styles:
                - card:
                    - box-shadow': '0px 0px 10px 3px #F9C536'
          tap_action:
            action: call-service
            service: script.toggle
            service_data:
              entity_id: script.1577302825981
          name: Music
          confirmation: true
          icon: 'mdi:music'
    - type: horizontal-stack
      cards:
        - type: vertical-stack
          cards:
            - type: 'custom:button-card'
              styles:
                card:
                  - border-radius: 5px
                  - border-style: solid
                  - border-color: silver
                  - height: 60px
                  - margin: 0px 0px 0px 1px
                  - width: 196px
                  - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
              icon: 'bha:dome-light'
              name: Recessed Cans
              entity: light.family_room_cans_128
              tap_action:
                action: toggle
            - type: 'custom:slider-card'
              entity: light.family_room_cans_128
              height: 20px
              radius: 15px
              mainSliderColor: lightgreen
              secondarySliderColor: red
              thumbWidth: 15px
              thumbHeight: 30px
              thumbColor: green
              thumbHorizontalPadding: 10px
              thumbVerticalPadding: 20px
        - type: vertical-stack
          cards:
            - type: 'custom:button-card'
              styles:
                card:
                  - border-radius: 5px
                  - border-style: solid
                  - border-color: silver
                  - height: 60px
                  - width: 196px
                  - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
              icon: 'bha:ceiling-fan-light'
              name: Fan Light
              entity: light.king_of_fans_inc_hbuniversalcfremote_c04a2900_level_on_off
              tap_action:
                action: toggle
            - type: 'custom:slider-card'
              entity: light.king_of_fans_inc_hbuniversalcfremote_c04a2900_level_on_off
              height: 20px
              radius: 25px
              mainSliderColor: lightgreen
              secondarySliderColor: red
              thumbWidth: 15px
              thumbHeight: 30px
              thumbColor: green
              thumbHorizontalPadding: 10px
              thumbVerticalPadding: 20px
    - type: 'custom:layout-card'
      column_num: 6
      column_width:
        - 45%
        - 14%
        - 14%
        - 14%
        - 14%
        - 14%
      layout: horizontal
      cards:
        - type: 'custom:button-card'
          icon: 'mdi:fan'
          name: Ceiling Fan
          spin: true
          styles:
            card:
              - width: 120px
              - height: 55px
              - margin: 0px 0px 0px 5px
              - border-radius: 5px
              - border-style: solid
              - border-color: silver
              - padding: 0px 0px
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          state:
            - value: 'on'
              spin: true
          tap_action:
            action: toggle
          entity: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
        - type: 'custom:button-card'
          name: Low
          icon: none
          styles:
            card:
              - background-color: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') & (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "blue";
                    return "red";
                  ]]]
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: low
        - type: 'custom:button-card'
          name: Med
          icon: none
          styles:
            card:
              - box-shadow: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') && (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "green";   
                  ]]]
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: medium
        - type: 'custom:button-card'
          name: High
          icon: none
          styles:
            card:
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: high
        - type: 'custom:button-card'
          name: Auto
          icon: none
          styles:
            card:
              - width: 50px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: auto
        - type: 'custom:button-card'
          name: Breeze
          icon: none
          styles:
            card:
              - width: 45px
              - border-style: solid
              - border-color: silver
              - '--ha-card-background': 'rgba(0, 0, 0, 0.2)'
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan
              speed: smart```

You have to set another value when it’s not on. Also box-shadow doesn’t take only a color:

              - box-shadow: |
                  [[[
                    if ((states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].attributes.speed === 'low') && (states['fan.king_of_fans_inc_hbuniversalcfremote_c04a2900_fan'].state === 'on'))
                      return "0 0 10px green";
                    return null;
                  ]]]

Add this:

# With the entity being
# entity: sensor.dryer_mss310_power_sensor_w_0
state_display: '[[[ return Math.round(entity.state) ]]]'

Thanks but I am getting this error, let me know if I did something wrong in my setup:
image

card:
      type: 'custom:button-card'
      name: Timer
      entity: sensor.washing_machine_mss310_power_sensor_w_0
      state_display: '[[[ return Math.round(sensor.washing_machine_mss310_power_sensor_w_0) ]]]'
      margin: none
      show_name: false
      show_icon: false
      show_state: true
      styles:
        card:
          - box-shadow: none
          - font-size: 12px
        state:
          - color: |
              [[[
                if (states['sensor.washing_machine_mss310_power_sensor_w_0'].state > 2)
                  return "red";
                else
                  return "white";
              ]]]

Just exactly write what I have put above. Don’t replace entity with something else. entity is a shortcut to the entity defined as part of the button so that you don’t have to write states['sensor.xyz'].state

Ah I get it now, works great :slight_smile:
Thanks

Thanks for the quick responses. It’s working .

using:

type: custom:button-card
template:
  - button_summary
  - styles_summary_alert
entity: cover.garage_deur
name: Garage deur
tap_action:
  action: toggle
  confirmation:
    text: >
      [[[ return `Are you sure you want to toggle the Garage door?` ]]]
hold_action:
  action: navigate
  navigation_path: >
    [[[ return (window.location.pathname.split('/')[2] == 'covers')
      ? null : '/lovelace/covers'; ]]]
custom_fields:
  notification: >
    [[[ if (entity.state == 'open' && entity.attributes.current_position != 100)
        return entity.attributes.current_position + '%';
        return entity.state; ]]]
styles:
  icon:
    - color: >
        [[[ if (entity.state == 'closed') return 'green'; return 'red'; ]]]
  custom_fields:
    notification:
      - background-color: >
          [[[ if (entity.state == 'closed') return 'green'; return 'red'; ]]]

I am not sure this is working as expected. please help me out. If I click this button (which obviously toggles, because that’s what I have entered as the action…) while it is opening or closing, it completely reverses the direction up to the end. while I would have hoped not to mimic my hardware pulse button on the wall, meaning closed/opening/stop/closing/closed, or, of course vice versa opened/closing/stop/opening/opened

Is that possible with the button-card?

if that were possible, my second challenge would arise, meaning I only need the confirmation when moving from closed to opening… right now, I have it confirm each change, but with the additional state between the moving actions, that would be necessary

anyways, before I start experimenting too wildly, please have a look if what I would like is available in button-card