@tmen79 I like this format. Which card did you use for it?
which HA card you use ?
thanks
type: grid
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: template
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
icon: mdi:battery-20
tap_action:
action: navigate
navigation_path: /lovelace/carregamento
icon_color: yellow
visibility:
- condition: or
conditions:
- condition: numeric_state
entity: sensor.miband8_battery
below: 20
- condition: and
conditions:
- condition: state
entity: sensor.tonhu_battery_state
state: discharging
- condition: numeric_state
entity: sensor.tonhu_battery_level
below: 20
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
entity: person.antonio
tap_action:
action: navigate
navigation_path: /lovelace/antonio
hold_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.kiosk
content_info: name
use_entity_picture: true
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: template
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
icon: mdi:alert-circle-outline
tap_action:
action: navigate
navigation_path: /lovelace/remedios
icon_color: red
visibility:
- condition: or
conditions:
- condition: state
entity: input_boolean.remedio_nimesulida
state: "on"
- condition: state
entity: input_boolean.remedio_paracetamol
state: "on"
- type: horizontal-stack
cards:
- card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
aspect_ratio: 2/1.5
styles:
grid:
- grid-template-areas: "\"entity_picture icone\" \"nome nome\" \"bateria_celular\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
dormindo:
- position: absolute
- right: 1rem
- top: 6rem
- font-size: 14px
- color: grey
localizacao:
- position: absolute
- right: 1rem
- top: 3rem
- font-size: 14px
- color: grey
icone:
- font-weight: bold
- color: grey
- position: absolute
- right: 1rem
- top: 1rem
bateria_celular:
- position: absolute
- right: 1rem
- top: 4.5rem
- font-size: 14px
- color: grey
entity_picture:
- position: absolute
- border-radius: 5rem
- border: 5px solid rgb(0, 150, 255)
- left: 1rem
- top: 0.5rem
- width: 7rem
- height: 7rem
type: custom:button-card
variables:
var_entity: person.antonio
var_picture_location: /local/pictures/Eu Emoji.jpg
var_device_tracker: device_tracker.tonhu
var_battery_level: sensor.tonhu_battery_level
var_sleep_confidence: sensor.tonhu_sleep_confidence
show_name: false
show_entity_picture: true
entity: |
[[[
return variables.var_entity
]]]
entity_picture: |
[[[
return variables.var_picture_location
]]]
custom_fields:
dormindo: |
[[[
return `<ha-icon icon="` +
states[variables.var_sleep_confidence].attributes.icon +
`"style="width: 18px;"></ha-icon>` +
`<span> ${states[variables.var_sleep_confidence].state}` +
`%` +
`</span>`
]]]
localizacao: |
[[[
return states['sensor.casa_tonhu_distancia'].state + " m"
]]]
icone: |
[[[
let icone = states[variables.var_device_tracker].state;
if (icone === "home") icone = 'Em casa'
if (icone === "not_home") icone = 'Na rua'
return icone
]]]
bateria_celular: |
[[[
return `<ha-icon icon="` +
states[variables.var_battery_level].attributes.icon +
`"style="width: 16px;"></ha-icon>` +
`<span> ${states[variables.var_battery_level].state}` +
`%` +
`</span>`
]]]
- card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
aspect_ratio: 2/1.5
styles:
grid:
- grid-template-areas: "\"entity_picture icone\" \"nome nome\" \"bateria_celular\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
dormindo:
- position: absolute
- right: 1rem
- top: 6rem
- font-size: 14px
- color: grey
localizacao:
- position: absolute
- right: 1rem
- top: 3rem
- font-size: 14px
- color: grey
icone:
- font-weight: bold
- color: grey
- position: absolute
- right: 1rem
- top: 1rem
bateria_celular:
- position: absolute
- right: 1rem
- top: 4.5rem
- font-size: 14px
- color: grey
entity_picture:
- position: absolute
- border-radius: 5rem
- border: 5px solid rgb(107,63,160)
- left: 1rem
- top: 0.5rem
- width: 7rem
- height: 7rem
type: custom:button-card
variables:
var_entity: person.gabriela
var_picture_location: /local/pictures/gabi emoji.jpeg
var_device_tracker: device_tracker.gabi
var_battery_level: sensor.gabi_battery_level
var_sleep_confidence: sensor.gabi_sleep_confidence
show_name: false
show_entity_picture: true
entity: |
[[[
return variables.var_entity
]]]
entity_picture: |
[[[
return variables.var_picture_location
]]]
custom_fields:
dormindo: |
[[[
return `<ha-icon icon="` +
states[variables.var_sleep_confidence].attributes.icon +
`"style="width: 18px;"></ha-icon>` +
`<span> ${states[variables.var_sleep_confidence].state}` +
`%` +
`</span>`
]]]
localizacao: |
[[[
return states['sensor.casa_gabi_distancia'].state + " m"
]]]
icone: |
[[[
let icone = states[variables.var_device_tracker].state;
if (icone === "home") icone = 'Em casa'
if (icone === "away") icone = 'Na rua'
return icone
]]]
bateria_celular: |
[[[
return `<ha-icon icon="` +
states[variables.var_battery_level].attributes.icon +
`"style="width: 16px;"></ha-icon>` +
`<span> ${states[variables.var_battery_level].state}` +
`%` +
`</span>`
]]]
1 Like
- type: horizontal-stack
cards:
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Cozinha
icon: mdi:chef-hat
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 3rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_da_cozinha'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_da_cozinha'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:led-strip-variant
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.led_da_pia_da_cozinha'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.led_da_pia_da_cozinha'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:motion-sensor
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_cozinha_movimento'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_cozinha_movimento'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(255, 0, 0)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/cozinha
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Mesa
icon: mdi:table-chair
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_da_mesa'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_da_mesa'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:snowflake
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['climate.ar_condicionado_da_mesa'].state
if (luz == 'cool') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['climate.ar_condicionado_da_mesa'].state
if (luz == 'cool') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(252, 15, 192)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/mesa
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Sala
icon: mdi:television
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 3rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_da_sala'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_da_sala'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:led-strip-variant
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.led_da_tv'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.led_da_tv'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:television
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['media_player.tv'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['media_player.tv'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(169, 204, 227)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/sala
- type: horizontal-stack
cards:
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Banheiro<br>Social
icon: mdi:toilet
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:led-strip-variant
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.led_do_banheiro_social'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.led_do_banheiro_social'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:motion-sensor
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['binary_sensor.sensores_de_movimento_banheiro_social'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['binary_sensor.sensores_de_movimento_banheiro_social'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(174, 182, 191)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/banheirosocial
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Quarto<br>do Brian
icon: mdi:bed
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_do_quarto_do_brian'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_do_quarto_do_brian'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(210, 110, 10)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/quartodobrian
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
aspect_ratio: 1/1
name: Lavanderia
icon: mdi:washing-machine
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(174, 191, 174)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/lavanderia
- type: horizontal-stack
cards:
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Sacada
icon: mdi:window-open-variant
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_da_sacada'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_da_sacada'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_da_churrasqueira'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_da_churrasqueira'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(163, 228, 215)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/sacada
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Corredor
icon: mdi:lightbulb
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_do_corredor'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_do_corredor'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:motion-sensor
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_corredor_movimento'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_corredor_movimento'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(249, 231, 159)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/corredor
1 Like
- type: custom:button-card
card_mod:
style: |
ha-card {
background-color: rgba(255,255,255,1);
box-shadow: 1px 1px 8px #e1e0dd;
border: none;
}
name: Quarto<br>de Casal
icon: mdi:bed-king
aspect_ratio: 1/1
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:lightbulb
show_name: false
styles:
card:
- position: absolute
- bottom: 4.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.luz_do_quarto_de_casal'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.luz_do_quarto_de_casal'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:desk-lamp
show_name: false
styles:
card:
- position: absolute
- bottom: 3rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['light.abajur'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['light.abajur'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:snowflake
show_name: false
styles:
card:
- position: absolute
- bottom: 1.5rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['climate.ar_condicionado_do_quarto_de_casal'].state
if (luz == 'cool') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['climate.ar_condicionado_do_quarto_de_casal'].state
if (luz == 'cool') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
- type: custom:button-card
icon: mdi:motion-sensor
show_name: false
styles:
card:
- position: absolute
- bottom: 0rem
- right: 0.5rem
- width: 1.5rem
- height: 1.5rem
- border-radius: 50%
- border: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_quarto_de_casal_movimento'].state
if (luz == 'on') {
return '1px solid rgb(255,150,0)'
} else {
return '1px solid rgb(100,100,100)'
}
]]]
icon:
- color: |
[[[
let luz = states['binary_sensor.sensor_de_presenca_quarto_de_casal_movimento'].state
if (luz == 'on') {
return 'rgb(255,150,0)'
} else {
return 'rgb(100,100,100)'
}
]]]
- width: 15px
styles:
img_cell:
- position: absolute
- top: 3rem
icon:
- position: absolute
- bottom: 1rem
- color: rgb(245, 203, 167)
name:
- position: absolute
- top: 1rem
- font-weight: bold
- color: grey
tap_action:
haptic: medium
action: navigate
navigation_path: /lovelace/quartodecasal
1 Like
Thank you for sharing
"I’ve been working on this project for quite some time, and I’m thrilled with the result!
When there’s movement detected in a room, the frame of that room lights up with a unique color, making it visually dynamic and engaging.
For Mawar, it’s extra special — the frame lights up in a vibrant red, and it also elegantly displays the speed at which FAN is operating. 
"
type: custom:room-card
title: Living Room
show_icon: true
state_color: true
entity: binary_sensor.presence_sensor_lr_presence_sensor_6
tap_action:
action: nul
service: nul
service_data:
entity_id:
- nul
card_mod:
style: |
@keyframes blink {
20% {opacity: 0;}
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.entities-row{
margin-left: -25px;
padding: 0px 0px 0px 0px ;
height: 60px;
width: auto;
}
.entities-row:nth-child(2){
margin-top: 0px;
}
.entities-row .entity{
width: auto;
height: 200px;
margin-left: 20px !important;
margin-right: 0px !important;
--mdc-icon-size: 55%;
}
.entities-row .entity .icon-small{
width: 50px;
height: auto;
margin-top: -0px;
margin-left: -0px;
}
.entities-info-row{
padding: 0px;
width: 230px;
margin: -10px -06px;
margin-right: -60px !important;
}
.entities-info-row .entity{
!border: 1px solid red;
--mdc-icon-size: 60% !important;
margin-left: -0px !important;
}
.entities-info-row .entity .icon-small{
width: 50;
height: auto;
!border: 1px solid red;
}
.main-icon{
height: 50px ;
width:50px !important;
margin-top: 5px !important;
}
.main-state{
margin-top: 1px;
max-width: none;
max-height: none;
border-radius: 100%;
height: auto;
}
.title{
font-weight: 500;
margin-top: -2px;
}
card_styles:
"--ha-card-header-font-size": 16px
"--mdc-icon-size": 50%
styles:
template: >
if (entity.state == 'on' & entity.attributes.rgb_color!=null) return
'background-color: rgba(' + entity.attributes.rgb_color + ',0.15) '; if
(entity.state == 'on' & entity.attributes.rgb_color==null) return
'background-color: rgba(var(--rgb-accent-color),0.15); '; else return
'background-color: rgba(var(--rgb-disabled-color),0.2);'
icon:
template:
icon: null
templates:
- name: info_icon_entity
template:
show_icon: true
state_color: false
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important;'; if (entity.state == "unavailable") return 'color: red
!important;'; else return 'color: var(--disabled-color)
!important;';
- name: info_window_icon_entity
template:
show_icon: false
state_color: false
styles:
template: |
return 'width: auto; --mdc-icon-size: 50%;'
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important;'; if (entity.state == "unavailable") return 'color: red
!important;'; if (entity.state == "off") return 'color: green
!important;';else return 'color: var(--disabled-color)
!important;';
- name: info_text_entity
template:
show_icon: false
state_color: true
styles:
template: |
if (entity.state == "unavailable") return 'color: red !important;';
else return 'width: auto; font-size: 75%; color: grey;';
- name: light_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == 'on') return 'background-color: rgba(' +
entity.attributes.rgb_color + ',0.15); border-radius: 50%; border: 1px
solid var(--divider-color);'; else return 'background-color:
rgba(var(--rgb-disabled-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);';
icon:
template:
styles: |
return 'color: var(--disabled-color) !important;';
- name: cover_button
template:
show_icon: true
state_color: false
show_name: false
styles:
template: >
if ((entity.state == "closed") || (entity.attributes.current_position
< 50)) return 'background-color: rgba(var(--rgb-accent-color),.2);
border-radius: 50%; border: 1px solid var(--divider-color);'; else
return 'background-color: rgba(var(--rgb-disabled-color),.2);
border-radius: 50%; border: 1px solid var(--divider-color);';
icon:
template:
icon: >
if (entity.attributes.current_position < 10 ) { if
(entity.entity_id.includes('fenster')) return
'kuf:fts_garage_door_100'; else return 'mdi:window-shutter'}; if
(entity.attributes.current_position < 20 ) return
'kuf:fts_shutter_90'; if (entity.attributes.current_position < 30
) return 'kuf:fts_shutter_80'; if
(entity.attributes.current_position < 40 ) return
'kuf:fts_shutter_70'; if (entity.attributes.current_position < 50
) return 'kuf:fts_shutter_60'; if
(entity.attributes.current_position < 60 ) return
'kuf:fts_shutter_50'; if (entity.attributes.current_position < 70
) return 'kuf:fts_shutter_40'; if
(entity.attributes.current_position < 80 ) return
'kuf:fts_shutter_30'; if (entity.attributes.current_position < 90
) return 'kuf:fts_shutter_20'; else { if
(entity.entity_id.includes('fenster')) return 'kuf:fts_shutter_10';
else return 'mdi:window-shutter-open'};
- name: entity_button
template:
show_icon: true
state_color: true
show_name: false
styles:
template: >
if (entity.state == "on") return 'background-color:
rgba(var(--rgb-accent-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);'; else return 'background-color:
rgba(var(--rgb-disabled-color),.2); border-radius: 50%; border: 1px
solid var(--divider-color);';
icon:
template:
styles: >
if (entity.state == "on") return 'color: var(--accent-color)
!important; width: auto; height: auto;'; else return 'color:
var(--disabled-color) !important; width: auto; height: auto;';
- name: climate_button
template:
show_icon: false
state_color: true
show_name: false
styles:
template: >
return 'background-color: rgba(var(--rgb-disabled-color),.5) ;
border-radius: 10px 10px 10px 10px; font-size: 13px; width: 55px ;
height: auto ; padding: .2% ; border: 1px solid
var(--disabled-color);';
if (entity.state < 72) return 'color: blue'; if (entity.state >= 72)
return 'color: grey'; if (entity.state >= 75) return 'color: orange';
if (entity.state >= 78) return 'color: red';
icon:
template:
styles: |
return 'color: var(--disabled-color) !important;';
info_entities:
- entity: light.govee_glide_lively_2
state_color: true
name: Status LEDs
icon: mdi:led-strip
show_icon: true
tap_action:
action: toggle
- entity: sensor.curtain_status
state_color: false
name: Curtains
show_icon: true
tap_action:
action: nul
icon:
conditions:
- condition: equals
value: open
icon: mdi:curtains
styles:
color: gold
- condition: equals
value: closed
icon: mdi:curtains-closed
state_color: true
- entity: switch.a_c
name: Fan
show_icon: true
tap_action:
action: toggle
icon:
conditions:
- condition: equals
value: "on"
icon: mdi:air-conditioner
styles:
color: blue
- condition: equals
value: "off"
icon: mdi:air-conditioner
- entity: sensor.livingrm_temp_humidity_temperature
template: climate_button
rows:
- entities:
- entity: light.living_room_floor_lamps
name: Floor Lamps
show_icon: true
state_color: false
tap_action:
action: toggle
icon:
conditions:
- condition: equals
value: "on"
icon: mdi:floor-lamp
styles:
color: gold
- condition: equals
value: "off"
icon: mdi:floor-lamp
state_color: true
- entity: light.corner_floor_lamp
state_color: true
name: Corner Lamp
icon: mdi:lamp
show_icon: null
tap_action:
action: toggle
- entity: light.overhead_light_lr
name: Overhead Light
icon: mdi:ceiling-fan-light
show_icon: null
tap_action:
action: toggle
- entity: switch.overhead_fan
name: Fan
show_icon: true
tap_action:
action: toggle
icon:
conditions:
- condition: equals
value: "on"
icon: mdi:fan
styles:
color: red
animation: spin 1.5s linear infinite
- condition: equals
value: "off"
icon: mdi:fan
1 Like
Only part of this that I am not happy with, is that once I put the box around my room temp. I can no longer get the temp text to change color based on the current temp. Just don’t know enough about YAML to figure out how to do it.
type: custom:button-card
name: Bedroom
show_icon: false
show_entity_picture: false
tap_action:
action: navigate
navigation_path: "#bedroom"
aspect_ratio: 1/1
show_label: true
label: |
[[[
return states['sensor.fp1_salon_device_temperature'].state + "°C • " + states['sensor.fp1_salon_device_temperature'].state + "%"
]]]
styles:
card:
- background-color: "#2e3a51"
- border-radius: 20px
- padding: 8px
- box-shadow: >-
rgba(450, 350, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px
30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset
- outline: >
[[[ return states['input_boolean.parents_room_occupancy'].state === 'on'
? '2px solid orange' : 'none'; ]]]
name:
- font-weight: null
- font-size: 17px
- align-self: middle
- justify-self: start
- padding-left: 5px
- padding-bottom: 1px
- height: 120px
- letter-spacing: "-1.0px"
label:
- align-self: center
- justify-self: start
- font-size: 15px
- font-weight: 400
- color: white
- padding-top: 0px
- padding-bottom: 190px
custom_fields:
logo:
- position: absolute
- bottom: "-13px"
- left: "-3px"
- width: 90px
- height: 90px
- background-color: "#4B5975"
- border-radius: 40px
- display: flex
- justify-content: center
grid:
- grid-template-areas: "\"n n n i1\" \"n n n i2\" \"n n n i3\" \"n n n i4\" \"l l l l\""
- grid-template-columns: 73% 5% 5% 40%
- grid-template-rows: 20% 20% 20% 20% 20%
custom_fields:
logo:
card:
type: custom:button-card
color: transparent
show_name: false
name: false
entity_picture: https://atl6wln6h87vbmo2lpnrbdyzwmlsua08.ui.nabu.casa/local/bed.png
show_entity_picture: true
styles:
card:
- background-color: transparent
- border-style: none
icon:
- width: 80px
- height: 70px
- color: white
- padding: 0px
- border-radius: 0
i1:
card:
type: custom:button-card
color: transparent
show_name: false
name: light
icon: mdi:lamp
tap_action:
action: toggle
entity: light.fan_parents_room
styles:
card:
- background-color: >
[[[ return states['light.fan_parents_room'].state === 'on' ?
'orange' : '#4B5975'; ]]]
- border-radius: 50%
- width: 30px
- height: 30px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
-3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 18px
- color: white
- align-self: center
- text-align: center
- padding: 4px
img_cell:
- justify-content: center
- align-self: center
- margin: none
i2:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#climatebedroom"
entity: climate.parents
icon: mdi:thermometer
show_name: false
styles:
card:
- background-color: >
[[[ return states['climate.parents'].state === 'on' ? 'orange' :
'#4B5975'; ]]]
- border-radius: 50%
- width: 30px
- height: 30px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
-3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 18px
- color: white
- align-self: center
- text-align: center
- padding: 4px
img_cell:
- justify-content: center
- align-self: center
- margin: none
i3:
card:
type: custom:button-card
color: transparent
show_name: false
name: Fan
icon: |
[[[
const fanPercentage = states['fan.fan_parents_room'].attributes.percentage;
if (fanPercentage >= 100) return 'mdi:fan-speed-3'; // Speed 3
if (fanPercentage >= 66) return 'mdi:fan-speed-2'; // Speed 2
if (fanPercentage >= 33) return 'mdi:fan-speed-1'; // Speed 1
return 'mdi:fan'; // Default
]]]
tap_action:
action: toggle
entity: fan.fan_parents_room
hold_action:
action: more-info
entity: fan.fan_parents_room
styles:
card:
- background-color: >
[[[ return states['fan.fan_parents_room'].state === 'on' ? 'red' :
'#4B5975'; ]]]
- animation: >
[[[ return states['fan.fan_parents_room'].state === 'on' ? 'blink
1s linear infinite' : 'none';
]]]
- border-radius: 50%
- width: 30px
- height: 30px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
-3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 18px
- color: white
- align-self: center
- text-align: center
- padding: 4px
img_cell:
- justify-content: center
- align-self: center
- margin: none
i4:
card:
type: custom:button-card
color: transparent
show_name: false
name: Info
icon: mdi:information
tap_action:
action: navigate
navigation_path: "#info"
styles:
card:
- background-color: "#4B5975"
- border-radius: 50%
- width: 30px
- height: 30px
- border-style: none
- box-shadow: >-
rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px
-3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset
icon:
- width: 18px
- height: 18px
- color: white
- align-self: center
- text-align: center
- padding: 4px
img_cell:
- justify-content: center
- align-self: center
- margin: none
Sorry, I am attaching the code
1 Like
Thanks for posting your code, it has been a great help in getting me started with this card. I’ve been tweaking what you posted and was able to come up with a solution for the color on the current temp. This is working for me (can change either the box background or the text color).
templates:
- name: info_climate
template:
unit: °F
show_icon: false
show_name: false
state_color: true
styles:
template: |
if (entity.state > 80) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_negative);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
`;
}
if (entity.state >= 75) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_yellow);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
`;
}
if (entity.state >= 70) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_green);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
`;
}
if (entity.state >= 65) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_blue);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
`;
}
if (entity.state < 65) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_container);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
`;
}
1 Like
And I was able to fit the border box closer around the text with the following.
if (entity.state >= 65) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_blue);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
height: 25px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
2 Likes
Wow thanks man! I’m glad this helped you out.
Hey sorry to bug you but when I add your code all that you see is the temp. no background or border and the text is grey. Any chance you can drop your entire card YAML just in case something up stream is causing the issues. Also this might have to do with some custom theming you have that include color options that I do not have. My set up is pretty stock running the default theme.
Thanks!
I’m using a custom theme that I created, so you would want to replace the var(–custom_*) variables with actual colors or variables from your theme.
I’m also using the decluttering card to keep all my room cards consistent. I created three decluttering templates (one row, two rows, and three rows of entities on the room card).
I also created a helper entity (called hidden) for a binary sensor class that I dont have anything else using (I used binary-sensor_problem) and in the theme set both the on and off colors for it to be my background color. On all of the room-cards, I included this helper entity for any blanks in the info-entities row so that they all stay aligned to the right.
decluttering_templates:
room-card_1row:
default:
occupancy: input_boolean.blank_occupancy
card:
type: custom:room-card
title: '[[name]]'
name: '[[name]]'
show_icon: true
icon: mdi:[[icon]]
state_color: true
templates:
- name: hidden
template:
show_icon: true
show_state: false
show_name: false
icon:
conditions:
- condition: equals
value: 'on'
styles:
color: var(--custom_background)
- condition: equals
value: 'off'
styles:
color: var(--custom_background)
- name: info_lock
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- icon: mdi:lock-open-variant
condition: equals
value: unlocked
styles:
color: green
- icon: mdi:lock
condition: equals
value: locked
styles:
color: red
- name: info_door
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- icon: mdi:door-open
condition: equals
value: 'on'
styles:
color: green
- icon: mdi:door
condition: equals
value: 'off'
styles:
color: red
- name: info_garagedoor
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- icon: mdi:garage-open-variant
condition: equals
value: open
styles:
color: green
- icon: mdi:garage-variant
condition: equals
value: closed
styles:
color: red
- name: info_blind
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- icon: mdi:roller-shade
condition: equals
value: open
styles:
color: green
- icon: mdi:roller-shade-closed
condition: equals
value: closed
styles:
color: red
- name: info_motion
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- icon: mdi:motion-sensor
condition: equals
value: 'on'
styles:
color: orange
- icon: mdi:motion-sensor-off
condition: equals
value: 'off'
styles:
color: gray
- name: info_temp
template:
unit: °F
show_icon: false
show_name: false
state_color: true
styles:
template: |
if (entity.state > 80) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_negative);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
if (entity.state >= 75) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_yellow);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
if (entity.state >= 70) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_green);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
if (entity.state >= 65) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_positive_blue);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
if (entity.state < 65) {
return `
color: var(--custom_black) !important;
background-color: var(--custom_container);
border: 1px solid var(--custom_black);
border-radius: 10px 10px 10px 10px;
width: 55px;
padding: .2%;
font-weight: 400;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
line-height: 25px;
`;
}
- name: button_fan
template:
show_icon: true
show_state: false
state_color: true
icon:
conditions:
- condition: equals
value: 'on'
icon: mdi:fan
styles:
animation: spin 1.5s linear infinite
- condition: equals
value: 'off'
icon: mdi:fan
- name: button_value
template:
show_icon: false
show_state: true
state_color: true
card_mod:
style: |
@keyframes blink { 20% {opacity: 0;} }
@keyframes spin { from { transform:rotate(0deg); }
to { transform:rotate(360deg); } }
.entities-row{
margin-left: -25px;
padding: 0px 0px 0px 0px ;
height: 60px;
width: auto;
color: var(--custom_text);
}
.entities-row:nth-child(2){
margin-top: 0px;
}
.entities-row .entity{
width: auto;
height: 200px;
margin-left: 20px !important;
margin-right: 0px !important;
--mdc-icon-size: 55%;
}
.entities-row .entity .icon-small{
width: 50px;
height: auto;
margin-top: -5px;
margin-left: -0px;
}
.entities-info-row{
padding: 0px;
width: 230px;
margin: -10px -06px;
margin-right: -40px !important;
}
.entities-info-row .entity{
!border: 1px solid red;
--mdc-icon-size: 60% !important;
margin-left: -0px !important;
}
.entities-info-row .entity .icon-small{
width: 50;
height: auto;
!border: 1px solid red;
}
.main-icon{
height: 50px ;
width:50px !important;
margin-top: 5px !important;
background-color: var(--custom_black)
}
.main-state{
margin-top: 1px;
max-width: none;
max-height: none;
border-radius: 100%;
height: auto;
}
.title{
font-weight: 500;
color: var(--custom_text);
margin-top: -2px;
font-variant-caps: petite-caps;
text-decoration: underline;
}
card_styles:
'--ha-card-header-font-size': 22px
'--mdc-icon-size': 60%
entity: '[[occupancy]]'
info_entities:
- entity: '[[info1]]'
template: '[[info1_template]]'
- entity: '[[info2]]'
template: '[[info2_template]]'
- entity: '[[info3]]'
template: '[[info3_template]]'
- entity: '[[info4]]'
template: '[[info4_template]]'
- entity: '[[info5]]'
template: '[[info5_template]]'
rows:
- entities:
- entity: '[[r1e1]]'
name: '[[r1e1_name]]'
template: '[[r1e1_template]]'
tap_action:
action: toggle
hold_action:
action: more-info
- entity: '[[r1e2]]'
name: '[[r1e2_name]]'
template: '[[r1e2_template]]'
tap_action:
action: toggle
hold_action:
action: more-info
- entity: '[[r1e3]]'
name: '[[r1e3_name]]'
template: '[[r1e3_template]]'
tap_action:
action: toggle
hold_action:
action: more-info
- entity: '[[r1e4]]'
name: '[[r1e4_name]]'
template: '[[r1e4_template]]'
tap_action:
action: toggle
hold_action:
action: more-info
- entity: '[[r1e5]]'
name: '[[r1e5_name]]'
template: '[[r1e5_template]]'
tap_action:
action: toggle
hold_action:
action: more-info
content_alignment: center
- type: custom:decluttering-card
template: room-card_1row
variables:
- icon: home-import-outline
- name: Entry
- occupancy: binary_sensor.office_temperature_occupancy
- info1: lock.front_door_lock
- info1_template: info_lock
- info2: binary_sensor.front_door_contact
- info2_template: info_door
- info3: cover.garage_door_garage_door
- info3_template: info_garagedoor
- info4: binary_sensor.front_door_motion
- info4_template: info_motion
- info5: sensor.garage_temp
- info5_template: info_temp
- r1e1: light.entry_overhead
- r1e1_name: Overhead
- r1e2: switch.outside_lights
- r1e2_name: Outside
- r1e3: switch.entry_legos
- r1e3_name: Legos
- r1e4: switch.garage_outlets_garage_door_outlet
- r1e4_name: Opener
- type: custom:decluttering-card
template: room-card_1row
variables:
- icon: table-furniture
- name: Dining
- occupancy: binary_sensor.thermostat_occupancy
- info1: binary_sensor.hidden_object
- info1_template: hidden
- info2: binary_sensor.hidden_object
- info2_template: hidden
- info3: binary_sensor.hidden_object
- info3_template: hidden
- info4: binary_sensor.thermostat_motion
- info4_template: info_motion
- info5: sensor.thermostat_current_temperature
- info5_template: info_temp
- r1e1: light.table
- r1e1_name: Table
- r1e2: light.nook
- r1e2_name: Nook
- r1e3: media_player.sonos
- r1e3_name: Sonos