I use a custom card called Room Card for mine:
Here’s what I ended up with:
That’s a vertical stack of four custom room cards. I also use browser-mod to override the info behavior of the first three cards so that I can get all the detailed controls in a room with one click on the room’s icon. That looks like this:
I’m gonna post all the YAML, but there is a ton of it.
type: vertical-stack
cards:
- type: custom:room-card
title: Great Room
entity: input_text.fake_greatroom
show_icon: true
action: more-info
entities:
- entity: fan.lrfan_relay
hide_if:
conditions:
- condition: equals
entity: fan.lrfan_relay
value: unavailable
name: Fan
state_color: true
show_icon: true
tap_action:
action: toggle
- entity: light.holiday_lights
hide_if:
conditions:
- condition: equals
entity: light.tree_relay
value: unavailable
name: Holiday
state_color: true
show_icon: true
tap_action:
action: toggle
- entity: input_boolean.great_room_blinds_open
name: Open
state_color: true
show_icon: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id:
- script.dining_blinds_open
- script.lanai_blinds_open
- entity: input_boolean.great_room_blinds_tilt
name: Tilt
state_color: true
show_icon: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id:
- script.dining_blinds_tilt
- script.lanai_blinds_tilt
- entity: input_boolean.great_room_blinds_close
name: Close
state_color: true
show_icon: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id:
- script.dining_blinds_close
- script.lanai_blinds_close
- entity: binary_sensor.lanai_door_down
name: Lanai Door
state_color: true
show_icon: true
tap_action:
action: call-service
service: script.lanai_door_toggle
icon:
conditions:
- icon: mdi:blinds-open
condition: equals
value: 'off'
- icon: mdi:blinds
condition: equals
value: 'on'
info_entities:
- entity: sensor.livingroom_temperature
format: precision1
- entity: sensor.livingroom_humidity
format: precision0
tap_action:
action: toggle
- entity: sensor.livingroom_lux
show_icon: true
icon:
conditions:
- condition: equals
entity: binary_sensor.great_room_light
value: 'on'
styles:
color: var(--amber-color)
- condition: equals
entity: binary_sensor.great_room_dark
value: 'on'
styles:
color: var(--indigo-color)
card_mod:
style: |
.entities-row .icon-small {
top: -6px;
}
.entities-info-row {
margin-right: -25px;
}
.entities-info-row .icon-small {
top: -2px;
}
.main-state {
margin-top: -3px;
width: 30px;
}
- type: custom:room-card
title: Bedroom
entity: input_text.fake_main_bedroom
show_icon: true
entities:
- entity: fan.brfan_relay
name: Fan
state_color: true
tap_action:
action: toggle
- entity: input_boolean.bedroom_blinds_open
name: Open
state_color: true
tap_action:
action: call-service
service: script.bedroom_blinds_open
- entity: input_boolean.bedroom_blinds_tilt
name: Tilt
state_color: true
tap_action:
action: call-service
service: script.bedroom_blinds_tilt
- entity: input_boolean.bedroom_blinds_close
name: Close
state_color: true
tap_action:
action: call-service
service: script.bedroom_blinds_close
- entity: input_boolean.bedroom_blinds_tilt_more
name: Tilt More
state_color: true
tap_action:
action: call-service
service: script.bedroom_blinds_tilt_more
info_entities:
- entity: sensor.bedroom_temperature
format: precision1
- entity: sensor.bedroom_humidity
format: precision0
- entity: sensor.bedroom_lux
show_icon: true
icon:
conditions:
- condition: equals
entity: binary_sensor.main_bedroom_light
value: 'on'
styles:
color: var(--amber-color)
- condition: equals
entity: binary_sensor.main_bedroom_dark
value: 'on'
styles:
color: var(--indigo-color)
card_mod:
style: |
.entities-row .icon-small {
top: -6px;
}
.entities-info-row {
margin-right: -25px;
}
.entities-info-row .icon-small {
top: -2px;
}
.main-state {
margin-top: -3px;
width: 30px;
}
- type: custom:room-card
title: Study
entity: input_text.fake_study
show_icon: true
entities:
- entity: fan.stfan_relay
name: Fan
state_color: true
tap_action:
action: toggle
- entity: input_boolean.study_blinds_open
name: Open
state_color: true
tap_action:
action: call-service
service: script.study_blinds_open
- entity: input_boolean.study_blinds_tilt
name: Tilt
state_color: true
tap_action:
action: call-service
service: script.study_blinds_tilt
- entity: input_boolean.study_blinds_close
name: Close
state_color: true
tap_action:
action: call-service
service: script.study_blinds_close
- entity: input_boolean.study_blinds_tilt_a_little
name: Tilt Some
state_color: true
tap_action:
action: call-service
service: script.study_blinds_tilt_a_little
info_entities:
- entity: sensor.study_temperature
format: precision1
- entity: sensor.study_humidity
format: precision0
- entity: sensor.study_lux
show_icon: true
icon:
conditions:
- condition: equals
entity: binary_sensor.study_light
value: 'on'
styles:
color: var(--amber-color)
- condition: equals
entity: binary_sensor.study_dark
value: 'on'
styles:
color: var(--indigo-color)
card_mod:
style: |
.entities-row .icon-small {
top: -6px;
}
.entities-info-row {
margin-right: -25px;
}
.entities-info-row .icon-small {
top: -2px;
}
.main-state {
margin-top: -3px;
width: 30px;
}
- type: custom:room-card
title: Presence
entity: binary_sensor.house_occupied
show_icon: true
entities:
- entity: binary_sensor.great_room_occupied
name: Great
show_icon: true
state_color: true
- entity: binary_sensor.dining_room_occupied
name: Dining
show_icon: true
state_color: true
- entity: binary_sensor.kitchen_occupied
name: Kitchen
show_icon: true
state_color: true
- entity: binary_sensor.guest_bathroom_occupied
name: Guest
show_icon: true
state_color: true
- entity: binary_sensor.study_occupied
name: Study
show_icon: true
state_color: true
- entity: binary_sensor.main_bedroom_occupied
name: Bed
show_icon: true
state_color: true
- entity: binary_sensor.main_bathroom_occupied
name: Main
show_icon: true
state_color: true
info_entities:
- entity: sensor.house_people
show_icon: true
card_mod:
style: |
.entities-row .icon-small {
top: -6px;
}
.entities-row .entity {
margin-left: -10px;
}
.entities-row {
margin-left: 10px;
}
.entities-info-row {
margin-right: -25px;
}
.entities-info-row .entity {
margin-left: -15px;
}
.entities-info-row .icon-small {
top: -2px;
}
.main-state {
margin-top: -3px;
width: 30px;
}
- type: custom:popup-card
dismissable: true
card:
type: entities
entities:
- entity: light.stlight_relay
- entity: light.study_closet_bulb
- type: custom:slider-entity-row
entity: cover.study_left
- type: custom:slider-entity-row
entity: cover.study_right
show_header_toggle: false
title: Study Controls
card_mod:
style: |
ha-card {
margin-top: -15px;
}
div {
margin-top: -20px;
padding-top: 0px;
}
title: ' '
entity: input_text.fake_study
- type: custom:popup-card
dismissable: true
card:
type: entities
entities:
- entity: light.bedroom_lamps
- entity: light.bedroom_closet_bulb
- type: custom:slider-entity-row
entity: cover.bedroom_left
- type: custom:slider-entity-row
entity: cover.bedroom_center
- type: custom:slider-entity-row
entity: cover.bedroom_right
show_header_toggle: false
title: Bedroom Controls
card_mod:
style: |
ha-card {
margin-top: -15px;
}
div {
margin-top: -20px;
padding-top: 0px;
}
entity: input_text.fake_main_bedroom
title: ' '
- type: custom:popup-card
dismissable: true
card:
type: entities
entities:
- entity: light.living_room_lamps
- entity: light.kitchen_switch
name: Kitchen Light
- entity: light.dnlight_relay
name: Dining Room Lamp
- entity: light.media_center_lights
- type: custom:slider-entity-row
entity: cover.dining_left
- type: custom:slider-entity-row
entity: cover.dining_center
- type: custom:slider-entity-row
entity: cover.dining_right
- type: custom:slider-entity-row
entity: cover.lanai_left
- type: custom:slider-entity-row
entity: cover.lanai_right
- type: custom:slider-entity-row
entity: cover.lanai_left_back
- type: custom:slider-entity-row
entity: cover.lanai_right_back
- type: custom:slider-entity-row
entity: cover.lanai_door
show_header_toggle: false
title: Great Room Controls
card_mod:
style: |
ha-card {
margin-top: -15px;
}
div {
margin-top: -20px;
padding-top: 0px;
}
entity: input_text.fake_greatroom
title: ' '