Lovelace: Button card

Share your Projects! Dashboards & Frontend
5846

@teamRibcage to add on to what’s already been said and similar to @Jordi83’s suggestion, I created my own toggle script so that a can specify a light profile for use with the custom button card.

toggle_light:
  # todo: timer variable?
  description: "Toggle a light using the specified profile when turned on"
  fields:
    light:
      description: "A light entity"
      example: "light.foyer_light"
    profile:
      description: "A light profile"
      example: "normal/night/security"
  mode: parallel
  sequence:
    - choose:
        - conditions:
            - condition: template
              value_template: "{{ is_state(light, 'off') }}"
          sequence:
            - service: light.turn_on
              target:
                entity_id: "{{ light }}"
              data:
                profile: "{{ profile }}"
      default:
        - service: light.turn_off
          target:
            entity_id: "{{ light }}"

            tap_action:
              haptic: light
              action: call-service
              service: script.toggle_light
              service_data:
                light: light.foyer_light
                profile: normal
            double_tap_action:
              haptic: medium
              action: call-service
              service: script.toggle_light
              service_data:
                light: light.foyer_light
                profile: night
5847

@parautenbach // @Jordi83 - There are some good ideas in both of those answers, and even more importantly they’ve helped me learn a little more about the syntax. Thank you!! :slightly_smiling_face:

1 Like
5848

Thanks so much for your response! i tried making that change to the code and it doesn’t seem to do anything. no sure if i missed something? any assistance you can provide is extremely apricated!!

Here is a screenshot of what the code looked like before i made the change:
image

here is what it looks like after i made the change:

image
image607×667 21.1 KB

5849

I figured it out!! their was a part in the code all the way at the bottom that said

 deviceID:
            - this

i changed that to

command: popup

you guys are awesome!! thank you all so much for all your help!!!

1 Like
5850

Hi Guys,
im trying to remove the Temperature and humidity for some of my cards as not all of my rooms in my house have temperature sensors. ( i pasted the code in my previous post 2 days ago). every time i remove it from the code it causes the buttons at the button to shift and bunch together. how can i hide or remove without causing issues with the buttons on the bottom of the card?

image

5851

How to correctly read attribute state from entity in JSTemplate.

I try like this but not working:

                  - template:
                      - ventilo_buttons
                    variables:
                      entity: fan.haos_vir_balcony_light_n_fan
                      entity_light: light.haos_vir_balcony_light_n_fan
                      name: Balkon
                    type: custom:button-card

      [[[ 
          if (entity.state == 'off'){
            return 'Off' + ' • ' + states[variables.entity].attributes.percentage + '%';
          } else {
            return states[variables.entity].attributes.percentage + '%';
          }
      ]]]

Error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'entity' of undefined in 'if (entity.state == 'off'){ return 'Off' + ' • ' + states[variables.entity].attributes.perce...'
5852

Strange problem JSTemplate:

this JSTemplate works without problem:

  outlet:
    tap_action:
      action: more-info
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_sensor_power].state + "W"; 
          else
          var etat = "Izklopljen";
        return etat ; ]]]

Card:

                  - entity: switch.haos_vir_halway_climate
                    variables:
                      var_sensor_power: sensor.haos_vir_halway_climate_energy_power
                    name: Klima
                    template: 
                      - icon_info_bg
                      - outlet
                    type: 'custom:button-card'

and this JSTemplate is similar and won’t work:

  ventilo:
    tap_action:
      action: more-info
    icon: mdi:dome-light
    template: yellow
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_fan].state; 
          else
          var etat = "Izklopljen• " + states[variables.var_fan].state;
        return etat ; ]]]

card:

                  - template: ventilo_buttons
                    variables:
                      var_fan: fan.haos_vir_balcony_light_n_fan
                      var_light: light.haos_vir_balcony_light_n_fan
                      name: Balkon
                    type: custom:button-card

Error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'var_fan' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'

what is the difference?

5853

You don’t have an entity set in your second card. I’m not sure, if this is the reason for your error, as it states var_fan is undefinied…

5854

If I do like this:

                  - type: custom:button-card
                    entity: light.haos_vir_balcony_light_n_fan
                    variables:
                      var_fan: fan.haos_vir_balcony_light_n_fan
                    template: ventilo_buttons

  ventilo:
    tap_action:
      action: more-info
    icon: mdi:dome-light
    template: yellow
    label: |-
      [[[ if (entity.state =='on')
          var etat = "Vklopljen • " + states[variables.var_fan].state; 
          else
          var etat = "Izklopljen• " + states[variables.var_fan].state;
        return etat ; ]]]

I get error:

ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'
5855

There’s only template: ventilo, not ventilo_buttons.

5856

You’re most welcome. I’m glad I can finally give something back to the community that helped me out so many times in the past. :grinning:

1 Like
5857

Hi Tom.

Could you please to show your card config for doing this?
The glowing box is awsome

5858

Sure see here:

5859

Thank you very much… :+1: :+1: :+1:

5860

Hi Tom

Is there any templates for button_card_templates other than light_button?

5861

Hi Luxor73

Could you please to show your card config for doing this?
The slider for light entities looks cool…

5862

I have a quite a few.

Formatted for desktop:

button_card_templates:
  binary_sensor_button:
    aspect_ratio: 4/3
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--paper-item-icon-active-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]
      - styles:
          state:
            - color: var(--secondary-text-color)
        value: 'off'
      - icon: mdi:alert
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--secondary-text-color)
    tap_action:
      action: more-info
  day_button:
    color_type: icon
    hold_action:
      action: none
    show_label: false
    show_name: true
    show_state: false
    state:
      - icon: mdi:checkbox-marked-circle
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          name:
            - color: var(--primary-text-color)
        value: 'on'
      - icon: mdi:cancel
        styles: null
        value: 'off'
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 0px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: auto
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  dehum_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--button-card-light-color)
        value: 'Off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border: solid 1px var(--paper-item-icon-active-color)
        - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--paper-item-icon-active-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
  icon_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  light_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - color: var(--button-card-light-color-no-temperature)
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle
  menu_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  picture_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service
  switch_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  vacuum_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: true
    show_name: true
    show_state: true
    state:
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: cleaning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #ff0000'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: '#ff0000'
        value: error
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: idle
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: docked
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: paused
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: returning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
        value: error
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unknown
    styles:
      card:
        - border: 'solid 1px #7f7f7f'
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "l l l" "n n n"'
        - grid-template-rows: 33% auto auto
        - grid-template-columns: 33% auto auto
      icon:
        - color: '#ff0000'
        - value: mdi:alert
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - vaule: Lost
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
    tap_action:
      action: more-info

Formatted for Mobile displays:

button_card_templates:
  binary_sensor_button:
    aspect_ratio: 1/1
    hold_action:
      action: none
    label: |
      [[[ entity.last_changed ]]]
    show_last_changed: true
    show_name: true
    show_state: true
    state:
      - styles:
          icon:
            - color: var(--paper-item-icon-active-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: >
          [[[ return entity.attributes.value && entity.attributes.value in [
          'on', 'disarmed','home'] ]]]
      - styles:
          state:
            - color: var(--secondary-text-color)
        value: 'off'
      - icon: mdi:alert
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"n n n" "i s s" "l l l"'
        - grid-template-rows: auto 33% auto
        - grid-template-columns: 33% auto auto
      icon:
        - width: 28px
        - padding: 0px 0px 0px 0px
        - margin: 0% 0% 0% 0%
      label:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: left
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
      state:
        - justify-self: left
        - font-size: 12px
        - padding: 0px 0px 0px 3px
        - color: var(--secondary-text-color)
    tap_action:
      action: more-info
  day_button:
    color_type: icon
    hold_action:
      action: none
    show_label: false
    show_name: true
    show_state: false
    state:
      - icon: mdi:checkbox-marked-circle
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          name:
            - color: var(--primary-text-color)
        value: 'on'
      - icon: mdi:cancel
        value: 'off'
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 0px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-rows: auto auto
        - grid-template-columns: auto
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  dehum_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--button-card-light-color)
        value: 'Off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border: solid 1px var(--paper-item-icon-active-color)
        - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--paper-item-icon-active-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
  icon_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  light_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    label: >
      [[[ var bri = entity.attributes.brightness &&
      Math.round(entity.attributes.brightness / 2.55);  if
        (entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
    layout: icon_label
    show_label: true
    show_name: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          label:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.4
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i l l" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color-no-temperature)
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
    tap_action:
      action: toggle
  menu_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
        - white-space: normal
    tap_action:
      action: call-service
  picture_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_entity_picture: true
    show_icon: false
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--ha-card-background': rgba(0, 0, 0, 0)
      entity_picture:
        - width: 100%
        - height: 100%
        - object-fit: contain
    tap_action:
      action: call-service
  switch_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: false
    show_name: true
    show_state: true
    state:
      - styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
        value: 'on'
      - styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
        value: 'off'
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unavailable
    styles:
      card:
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "n n n"'
        - grid-template-rows: 33% auto
        - grid-template-columns: 33% auto
      icon:
        - color: var(--button-card-light-color)
        - width: 28px
        - padding: 0px 0px 0px 0px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: var(--primary-text-color)
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: toggle
  vacuum_button:
    aspect_ratio: 1/1
    color_type: icon
    hold_action:
      action: more-info
      haptic: selection
    show_label: true
    show_name: true
    show_state: true
    state:
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: cleaning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #ff0000'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: '#ff0000'
        value: error
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: idle
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: docked
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--primary-color)
            - box-shadow: none
          icon:
            - color: var(--paper-item-icon-active-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
        value: paused
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: solid 1px var(--paper-item-icon-active-color)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--primary-text-color)
          label:
            - color: var(--secondary-text-color)
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--paper-item-icon-active-color)
        value: returning
      - label: '[[[ return `Bat ${entity.attributes.battery_level}%` ]]]'
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: '0px 0px 10px 3px #ff0000'
          icon:
            - color: '#ff0000'
        value: error
      - icon: mdi:alert
        label: Lost
        styles:
          card:
            - border: 'solid 1px #7f7f7f'
            - box-shadow: none
          icon:
            - color: '#ff0000'
            - opacity: 0.6
          label:
            - color: '#7f7f7f'
          name:
            - color: '#7f7f7f'
        value: unknown
    styles:
      card:
        - border: 'solid 1px #7f7f7f'
        - box-shadow: none
        - border-radius: 10px
        - padding: 6px 6px 6px 6px
        - margin: 0% 0% 0% 0%
        - '--ha-card-background': rgba(0, 0, 0, 0)
      grid:
        - grid-template-areas: '"i s s" "l l l" "n n n"'
        - grid-template-rows: 33% auto auto
        - grid-template-columns: 33% auto auto
      icon:
        - color: '#ff0000'
        - value: mdi:alert
        - width: 28px
        - padding: 0px 0px 0px 0px
      label:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - vaule: Lost
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
        - white-space: normal
      state:
        - font-size: 12px
        - justify-self: right
        - padding: 0px 0px 0px 0px
        - color: '#7f7f7f'
    tap_action:
      action: more-info

Screenshot 2021-08-23 at 20-27-27 Overview - Home Assistant
Screenshot 2021-08-23 at 20-27-37 Overview - Home Assistant
Screenshot 2021-08-23 at 20-27-48 Overview - Home Assistant
Screenshot 2021-08-23 at 20-28-01 Overview - Home Assistant
Screenshot 2021-08-23 at 20-29-00 Overview - Home Assistant
Screenshot 2021-08-23 at 20-29-43 Overview - Home Assistant

3 Likes
5863

Wow…, that looks like a lot to me… :sweat_smile: :sweat_smile:
I’m new in home assistant, I will try to learn and understand it.

I really appreciate for sharing me the config and thank you very much… :pray: :pray: :pray:

5864

Team

could you please help me with a hint how to change background of this cased based on a range coming from the sensor? e.g. if above 60 turn background orange, above 120 turn it red…

image
image658×836 46.7 KB

5865 
styles:
  card:
    - background: |
        [[[ 
          if (entity.state > 60) return 'orange';
          if (entity.state > 120) return 'red';
        ]]]
1 Like