Lovelace: Button card

Hi everyone, struggling with this code, perhaps some one can help me ?

Objective : when the fan setting is set to low, have the button card display a spinning fan. issue : getting a syntax error on the state (my syntax in the use of the operator template is incorrect).

image

Thanks !

entity: 'fan.ceiling_fan'
icon: 'mdi:circle-slice-2'
name: LOW
type: 'custom:button-card'
action:
  action: call service
  service: fan.set_speed
  service_data:
    entity: fan.ceiling_fan
    speed: low
state:
  - operator: template
    value: |
      [[[return.states[''fan.ceiling_fan''].attributes.speed === 'low' ]]]
    color: 'rgb(28, 128, 199)'
    icon: 'mdi:fan'
    spin: true

Itā€™s written in the error message. You have a . that is unexpected. Also you have double single quotes.

[[[return states['fan.ceiling_fan'].attributes.speed === 'low' ]]]

1 Like

Thanks @RomRider, exactly that :slight_smile: Fixed.

OK. Iā€™m stuck and need help with templates. I havenā€™t had them working properly yet and am not sure why but here is my setup. I started by trying to use some of the code from: https://www.reddit.com/r/homeassistant/comments/gm1x5b/my_mobile_friendly_lovelace_ui/ but even trimming it back iā€™m still getting stuck with applying a template to the button-card component as installed through HACS.

configuration.yaml

lovelace:
  mode: yaml

ui-lovelace.yaml

resources:
  - url: /hacsfiles/button-card/button-card.js
    type: module
    
button_card_templates:
  header:
    styles:
      card:
        - background-color: '#EBF4FC'
        - box-shadow: none
        - border-radius: 0%
        - padding: 0%
        - color: ivory
        - font-size: 10px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - width: 15%
        - margin-top: 0%
        - margin-left: 0%
        - color: white
      name:
        - font-size: 16px
        - color: '#253B56'
        - text-transform: capitalize
        - justify-self: start
        - margin-left: 1%
        - font-family: avenir
  standard_button:
    styles:
      card:
        - font-size: 10px
      icon:
        - width: 30%
      name:
        - font-size: 12px
        - color: '#6A7889'
        - font-family: avenir
      state:
        - justify-self: start
        - font-size: 10px
        - padding: 0px 5px
        - color: '#6A7889'
        - font-family: avenir

I go into my dashboard, add card and manual then paste this text:

cards:
  - name: Open Doors
    template: header
    type: 'custom:button-card'
  - card: null
    entities:
      - binary_sensor.back_door
      - binary_sensor.basement_door
      - binary_sensor.front_door
    show_empty: false
    show_header: false
    state_filter:
      - 'on'
      - open
    type: entity-filter
type: vertical-stack

which then gives this error:

Button-card template ā€˜headerā€™ is missing!

Can anyone see where I am going wrong? I did try the same setup using the example code from the button-card instructions and that didnā€™t work but when I put some of the template code inline on the card itself it works.

In yaml mode I donā€™t see how you can modify the dashboard using the UI. So youā€™re probably modifying another dashboard and in this case youā€™ll have to add the templates to this specific dashboard using the raw editor, not in ui-lovelace.yaml

Hi there, sorry it took so long for me to reply. My room card might take some work to copy because thereā€™s a lot going on behind the scenes. My philosophy was having a tiny card for each room that could show me a fair bit of information at a glance, while allowing me to expand that information further with a click when I need it.

  • The five bottom row icons all change color/icon/blinkiness depending on the state of various entities in the room. These are all defined in the decluttering card.
  • The temperature and humidity sensors change color based on my preset ideal ranges. I went to a bit of extra effort to make sure these are customizable. For example, I have a washer/dryer room card that tracks the power usage of the washer/dryer instead of the temp/hum in that room.
  • The top right room icon changes based on if the room is currently being heated/cooled (based on thermostat activity)
  • If you click anywhere on the button card, browser_mod pops up a separate card that gives me more granular control of that particular room. This is where I control the room lights, devices, and thermostat in a given room. You could add whatever you wanted to this popup since itā€™s done using a combination of vertical and horizontal stack cards. Number one on my wishlist for button card is clickable hot zones, but should that not be in the offing this still does the trick.
  • I spent a bit of effort making this all work within a decluttering card template to both simplify config for each room and also allow me to make universal changes to all of my room cards at once.

A gif of it in action ā€“
room card

Iā€™m happy to give some help if you need it.

If you want to use this as-is, youā€™ll need to make sure you have the decluttering card and the browser_mod addon (for the pop-up action) installed. But to get started I recommend you remove the pop_up part (under tap_action) and go from there. You could add the pop-up again later.

Hereā€™s the decluttering card template (this goes in the raw config editor)

decluttering_templates:
  room:
    card:
      custom_fields:
        icon1: |
          [[[
            if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
              return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
              return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon2: |
          [[[
            if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
              return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
              return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]     
        icon3: |
          [[[
            if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
              return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
              return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]       
        icon4: |
          [[[
            if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
              return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
              return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon5: |
          [[[
            if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
              return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
              return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]
        icon6: |
          [[[
            if (states['[[temp_ent]]'].state == "heat")
              return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[temp_ent]]'].state == "cool")
              return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]                      
        stat1: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat1_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
          ]]]   
        stat2: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat2_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
          ]]]  
      entity: '[[entity]]'
      name: '[[name]]'
      show_icon: false
      show_label: false
      show_state: false
      size: 70%
      state:
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: crimson
          value: heat
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: lightblue
          value: cool
      styles:
        card:
          - font-size: 12px
          - padding: 5px 3px 5px 3px
        custom_fields:
          icon1:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";                   
                  else return null;
                ]]]            
          icon2:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";                   
                  else return null;
                ]]]                    
          icon3:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
                  else return null;
                ]]]                    
          icon4:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 

                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";    
                  else return null;
                ]]]                    
          icon5:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";                   
                  else return null;
                ]]]   
          icon6:
            - padding: 0px 0px 0px 0px
          stat1:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat1_ent]]"].state < 20) return "lightblue"; 
                  if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine"; 
                  else return "tomato";
                ]]]
          stat2:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat2_ent]]"].state < 30) return "lightblue"; 
                  if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine"; 
                  else return "tomato";
                ]]]                   
        grid:
          - grid-template-areas: >-
              ". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
              stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
          - grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
          - grid-template-rows: 2fr 1fr 1fr 3fr
          - padding: 0px 0px 0px 0px
        icon:
          - place-self: center
          - padding: 0px 0px 3px 0px
        name:
          - justify-self: start
          - font-size: 16px
          - padding: 0px 0px 0px 3px
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - cards:
                  - cards:
                      - cards:
                          - color_type: '[[pu_light1_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light1_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light1_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: 'custom:button-card'
                          - color_type: '[[pu_light2_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light2_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light2_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: 'custom:button-card'
                        type: horizontal-stack
                    type: 'custom:vertical-stack-in-card'
                type: horizontal-stack
              - cards:
                  - color_type: '[[icon1_colortype]]'
                    entity: '[[icon1_ent]]'
                    hold_action:
                      action: '[[icon1_holdaction]]'
                    icon: 'mdi:[[icon1_icon2]]'
                    name: '[[icon1_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: 'mdi:[[icon1_icon1]]'
                        styles:
                          icon:
                            - color: '[[icon1_color1]]'
                            - animation: '[[icon1_animate]]'
                        value: '[[icon1_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon1_tapaction]]'
                    type: 'custom:button-card'
                  - color_type: '[[icon2_colortype]]'
                    entity: '[[icon2_ent]]'
                    hold_action:
                      action: '[[icon2_holdaction]]'
                    icon: 'mdi:[[icon2_icon2]]'
                    name: '[[icon2_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: 'mdi:[[icon2_icon1]]'
                        styles:
                          icon:
                            - color: '[[icon2_color1]]'
                            - animation: '[[icon2_animate]]'
                        value: '[[icon2_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon2_tapaction]]'
                    type: 'custom:button-card'
                  - color_type: '[[icon3_colortype]]'
                    entity: '[[icon3_ent]]'
                    hold_action:
                      action: '[[icon3_holdaction]]'
                    icon: 'mdi:[[icon3_icon2]]'
                    name: '[[icon3_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: 'mdi:[[icon3_icon1]]'
                        styles:
                          icon:
                            - color: '[[icon3_color1]]'
                            - animation: '[[icon3_animate]]'
                        value: '[[icon3_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon3_tapaction]]'
                    type: 'custom:button-card'
                  - color_type: '[[icon4_colortype]]'
                    entity: '[[icon4_ent]]'
                    hold_action:
                      action: '[[icon4_holdaction]]'
                    icon: 'mdi:[[icon4_icon2]]'
                    name: '[[icon4_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: 'mdi:[[icon4_icon1]]'
                        styles:
                          icon:
                            - color: '[[icon4_color1]]'
                            - animation: '[[icon4_animate]]'
                        value: '[[icon4_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon4_tapaction]]'
                    type: 'custom:button-card'
                  - color_type: '[[icon5_colortype]]'
                    entity: '[[icon5_ent]]'
                    hold_action:
                      action: '[[icon5_holdaction]]'
                    icon: 'mdi:[[icon5_icon2]]'
                    name: '[[icon5_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: 'mdi:[[icon5_icon1]]'
                        styles:
                          icon:
                            - color: '[[icon5_color1]]'
                            - animation: '[[icon5_animate]]'
                        value: '[[icon5_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon5_tapaction]]'
                    type: 'custom:button-card'
                type: horizontal-stack
              - color_type: '[[pu_therm_colortype]]'
                custom_fields:
                  cardy:
                    card:
                      entity: '[[pu_climate_ent]]'
                      hide:
                        state: true
                      icon:
                        cool: 'mdi:snowflake'
                        heating: 'mdi:fire'
                        'off': 'mdi:stop-circle-outline'
                      modes:
                        cool: null
                        heating: null
                        'off': null
                      name: Thermostat
                      sensors:
                        - attribute: hvac_action
                          entity: '[[pu_climate_ent]]'
                          name: Currently
                        - entity: '[[pu_climate_hum]]'
                          name: Humidity
                      type: 'custom:simple-thermostat'
                entity: light.curtis
                show_icon: false
                show_name: false
                styles:
                  grid:
                    - grid-template-areas: '"cardy"'
                    - grid-template-columns: 1fr
                    - grid-template-rows: 1fr
                type: 'custom:button-card'
              - cards:
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#f2ab48'
                        entity: '[[pu_climate_temp]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Temperature - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: 'custom:mini-graph-card'
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#57a5f2'
                        entity: '[[pu_climate_hum]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Humidity - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: 'custom:mini-graph-card'
                type: horizontal-stack
            type: 'custom:vertical-stack-in-card'
          deviceID:
            - this
          large: false
          title: '[[pu_title]]'
      triggers_update:
        - '[[icon1_ent]]'
        - '[[icon2_ent]]'
        - '[[icon3_ent]]'
        - '[[icon4_ent]]'
        - '[[icon5_ent]]'
        - '[[icon6_ent]]'
        - '[[stat1_ent]]'
        - '[[stat2_ent]]'
        - '[[pu_light1_ent]]'
        - '[[pu_light2_ent]]'
      type: 'custom:button-card'

And hereā€™s the card config itself (youā€™ll obviously want to replace all the entity IDs and icons/colors to suit your needs)

template: room
type: 'custom:decluttering-card'
variables:
  - entity: climate.living_room_thermostat
  - icon: sofa
  - name: LIVING ROOM
  - show_icon: false
  - temp_ent: climate.living_room_thermostat
  - stat1_icon: thermometer
  - stat1_pre: 'Temp: '
  - stat1_suf: Ā°
  - stat1_ent: sensor.dev_lr_th_temp
  - stat2_icon: water-percent
  - stat2_pre: 'Hum: '
  - stat2_suf: '%'
  - stat2_ent: sensor.dev_lr_th_humidity
  - icon1_ent: sensor.lr_status_door
  - icon1_name: Door
  - icon1_tapaction: more-info
  - icon1_holdaction: more-info
  - icon1_colortype: null
  - icon1_color1: tomato
  - icon1_color2: null
  - icon1_color3: red
  - icon1_animate: blink 2s ease infinite
  - icon1_state1: Open
  - icon1_state2: Closed
  - icon1_state3: unknown
  - icon1_icon1: shield-off
  - icon1_icon2: door
  - icon1_icon3: help-circle
  - icon2_ent: sensor.lr_status_motion
  - icon2_name: Motion
  - icon2_tapaction: more-info
  - icon2_holdaction: more-info
  - icon2_colortype: null
  - icon2_color1: coral
  - icon2_color2: null
  - icon2_color3: red
  - icon2_animate: null
  - icon2_state1: 'Yes'
  - icon2_state2: 'No'
  - icon2_state3: unknown
  - icon2_icon1: motion-sensor
  - icon2_icon2: walk
  - icon2_icon3: help-circle
  - icon3_ent: switch.dev_tv_lr
  - icon3_name: LR TV
  - icon3_tapaction: toggle
  - icon3_holdaction: more-info
  - icon3_colortype: null
  - icon3_color1: mediumseagreen
  - icon3_color2: null
  - icon3_color3: red
  - icon3_animate: blink 2s ease infinite
  - icon3_state1: 'on'
  - icon3_state2: 'off'
  - icon3_state3: unknown
  - icon3_icon1: television-guide
  - icon3_icon2: television
  - icon3_icon3: help-circle
  - icon4_ent: switch.dev_fan_lr
  - icon4_name: LR Fan
  - icon4_tapaction: more-info
  - icon4_holdaction: more-info
  - icon4_colortype: null
  - icon4_color1: darkolivegreen
  - icon4_color2: null
  - icon4_color3: red
  - icon4_animate: blink 2s ease infinite
  - icon4_state1: 'on'
  - icon4_state2: 'off'
  - icon4_state3: unknown
  - icon4_icon1: weather-windy
  - icon4_icon2: fan
  - icon4_icon3: help-circle
  - icon5_ent: sensor.lr_status_windows
  - icon5_name: Windows
  - icon5_tapaction: more-info
  - icon5_holdaction: more-info
  - icon5_colortype: null
  - icon5_color1: tomato
  - icon5_color2: null
  - icon5_color3: red
  - icon5_animate: blink 2s ease infinite
  - icon5_state1: Open
  - icon5_state2: Closed
  - icon5_state3: unknown
  - icon5_icon1: window-open
  - icon5_icon2: window-closed
  - icon5_icon3: help-circle
  - pu_title: Living Room
  - pu_light1_ent: light.lr_overhead_lights
  - pu_light1_name: Overheads
  - pu_light1_colortype: icon
  - pu_light2_ent: light.lr_spots
  - pu_light2_name: Spots
  - pu_light2_colortype: icon
  - pu_climate_ent: climate.living_room_thermostat
  - pu_climate_hum: sensor.dev_lr_th_humidity
  - pu_climate_temp: sensor.dev_lr_th_temp
17 Likes

Thatā€™s a huge configuration :blush: good job :+1:

Is color: auto-no-temperature working for anyone?

The icon just shows the inactive icon colour for this config:

  light_button:
    aspect_ratio: 1/1
    color_type: icon
    styles:
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - color: auto-no-temperature

This config has icon colour changes but includes colour temperature (which has an undesired effect for light groups, the icon shows white if any light is set to cool white):

  light_button:
    aspect_ratio: 1/1
    color_type: icon
    styles:
      icon:
        - color: var(--button-card-light-color)
        - width: 28px
        - padding: 0px 0px 0px 0px

This is not a css style, it is a main config entry thatā€™s why it doesnā€™t work for you.
Also, the variable without temperature is called differently: --button-card-light-color-no-temperature

1 Like

Doh!. Thanks.

After the last update my icons got shrunk inside my buttons. Is there a style to align the icon to the center of the button?

1 Like

This is already fixed in the latest button-card with HA 0.110. You probably didnā€™t clear the cacheā€¦

1 Like

How do I include a button_card_templates.yaml file in a Lovelace view?

Iā€™m a noob to Home Assistant but have v0.108.2 up and running on macOS v10.12.6 (Sierra) in a venv using Lovelace non-manual mode and HACS which is how I installed the Button Card. Iā€™ve found it a bit of a steep learning curve for the most part despite an IT background however if you want to do something, generally someone else has done it and this ā€œCommunityā€ site has been my saving grace.

Iā€™ve been experimenting with the Button Card and really like what it can offer however have one sticking point that I canā€™t find a solution to despite reviewing the documentation and searching this site. I have not been able to figure out how to include a button_card_templates.yaml file in a Lovelace view. All the documentation seems to be written for YAML mode Lovelace which Iā€™d prefer to avoid at this stage. As Iā€™ve seen posted elsewhere Iā€™ve tried adding this ;

button_card_templates:
  !include path_to/file_with_templates.yaml

by using the Configure UI/Raw configuration editor however I get this error;

As an experiment on one button only I can get it to work by adding this to the top of the Raw Configuration for that view;

button_card_templates:
  light_button:
    custom_fields:
      temp: >
        [[[ var bri = Math.round(entity.attributes.brightness / 2.55);  if (bri
        > 0) return (bri ? (bri+"%") : ''); else return `${entity.state}` ]]]
    hold_action:
      action: more-info
    layout: icon_label
    show_label: false
    show_name: true
    styles:
      card:
        - height: 120px
        - padding-bottom: 15px
      custom_fields:
        temp:
          - padding-left: 15%
          - padding-bottom: '-15px'
          - align-self: middle
          - justify-self: start
          - text-transform: uppercase
          - font-size: 13px
          - font-family: var(--primary-font-family)
      grid:
        - grid-template-areas: ' ". i temp ." "n n n n" '
        - grid-template-columns: 1fr 60px 30px 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      icon:
        - width: 55px
        - height: 55px
      name:
        - font-size: 13px
        - margin-bottom: 8%
        - font-family: var(--primary-font-family)

Here is how it renders (as expected);

What am I missing?

You canā€™t include a file in the RAW editor, youā€™ll have to declare the templates directly. The only way to use !include is to switch to yaml mode.

thanks @RomRider

:tada::tada: Version 3.3.5 :tada::tada:

Bugfixes

  • The ripple effect and the hold effect are back (Fix #325)
  • Font-awesome icons were not sized correctly (Fix #328)

Other

  • For dark cards, it can be useful to change the feedback color when clicking the button. The ripple effect uses a mwc-ripple element so you can style it with the CSS variables it supports.

    For example:

    styles:
      card:
        - --mdc-ripple-color: blue
        - --mdc-ripple-press-opacity: 0.5
    
1 Like

Oddly enough even with the fix that ripple effect doesnā€™t seem to be working on iOS mobile app

It never worked and I think it also doesnā€™t work in all the core cards. Apple is :poop: :man_shrugging: (thatā€™s what they get for doing their own stuff instead of following normsā€¦)

Ah thanks @RomRider, you know what is weird is that prior to the update, the ripple effect was working only with a locked button but that doesnt seem to be working now after some testing

Yes, Iā€™ve normalised the ripple effect for buttons with lock to be in line with the default ripple. I forgot it was differentā€¦ Thatā€™s why it used to work but not anymore, sorry :confused: . As it doesnā€™t work only with the Home Assistant App on IOS, Iā€™d suggest you open a bug on the appā€™s side.