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…
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...'
There’s only template: ventilo, not ventilo_buttons.
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. 
1 Like
Hi Tom.
Could you please to show your card config for doing this?
The glowing box is awsome
Sure see here:
Thank you very much… 
Hi Tom
Is there any templates for button_card_templates other than light_button?
Hi Luxor73
Could you please to show your card config for doing this?
The slider for light entities looks cool…
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
3 Likes
Wow…, that looks like a lot to me… 
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… 
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…
styles:
card:
- background: |
[[[
if (entity.state > 60) return 'orange';
if (entity.state > 120) return 'red';
]]]
1 Like
thank you, it works!
i noticed that now that i removed replaced device ID with command: popup that the screen is popping up on every single device. Is their a way i can specify which devices see the popup?
i changed the service from browser_mod.popup to fire-dom-event now im getting this error:
this is where i changed it:
Please compare your latest code with the linked code.
sorry not sure what you mean. all i did was change the service from “browser_mod.popup” to “fire-dom-event” Below is the full code i am using. any assistance you can provide is greatly apricated
5IconsWithTstatLaundryRoom:
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 == 'none') return "cyan";
else return "lime";
]]]
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: fire-dom-event
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
command: popup
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**strong text**
This is the linked code:
tap_action:
action: fire-dom-event
browser_mod:
command: popup
large: false
hide_header: false
title:
card:
type: