The room template config:
########################################################################################################
# #
# ROOM #
# #
########################################################################################################
room:
tap_action:
action: more-info
color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 20px
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}else{
return "Unavailable";
}
]]]
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"i toggle" "n n" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
icon:
- color: 'rgba(var(--color-theme),0.2)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
- margin-top: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
custom_fields:
toggle:
card:
entity: '[[[ return entity.entity_id ]]]'
name: '[[[ return name ]]]'
state:
- value: 'on'
icon: 'mdi:lightbulb'
styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
- value: 'off'
icon: 'mdi:lightbulb-off'
tap_action:
action: toggle
type: 'custom:button-card'
template:
- widget_icon
Usage in lovelace:
- type: 'custom:button-card'
template:
- room
- yellow
entity: light.keuken
name: Keuken
icon: mdi:silverware-fork-knife
tap_action:
action: navigate
navigation_path: '/lovelace-mobile/keuken/'
Not really optimized, so there will be some duplication from other components.
Tips to improve are welcome 