I’ve been struggling for some time to get a “Rooms Card” in a form that looks nice and provides the information I was expecting to see at a glance.
After many interactions and going back and forth, with Button-Card, I believe I got it right what I had in mind.
Anyway, I’d love to see what your current approach looks like and maybe get some more ideas.
show yours?
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: ' '
HI
I was considering doing something like this. It seems like there is everything you need to comprehend what’s inside the room.
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/
square: true
columns: 3
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
icon_color: |-
{% if is_state('binary_sensor.fp1_salon_presence', 'on') %}
light-blue
{%else%}
disabled
{% endif %}
primary: Salon
secondary: Dashboard
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: script.dashboard_navigation
data:
browser_id: THIS
view: Overview
navigate: overview
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -60px;
left: -170px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -62px;
left: -170px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 60px;
}
.: |
ha-card {
border: 0px !important;
box-shadow: none !important;
background: none;
}
:host {
--mush-icon-size: 160px;
}
- type: custom:mushroom-template-card
primary: Lights
icon_color: disabled
icon: mdi:lightbulb-on
secondary: null
entity: light.fan_parents_room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
autoclose: false
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.fan_parents_room
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.fan_parents_room
name: Closet Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
--icon-animation: illumination 1s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
ha-icon {
.: |
ha-card {
width: px;
margin-left: 65%;
top: -180px;
background: none;
}
:host {
--mush-icon-size: 45px;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-template-card
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
blue
{%else%}
disabled
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:television
{%else%}
mdi:television-off
{% endif %}
secondary: none
entity: remote.tv_parents
badge_color: |-
{% if is_state(entity, 'on') %}
blue
{%else%}
{% endif %}
badge_icon: |-
{% if is_state(entity, 'on') %}
mdi:power
{%else%}
{% endif %}
card_mod:
style: |
ha-card {
width: 196px;
margin-left: -5%;
top: -200px;
background: none;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{%else%}
disabled
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-open-variant
{%else%}
mdi:window-closed-variant
{% endif %}
secondary: none
badge_color: ''
badge_icon: mdi:record
entity: binary_sensor.sensor_magnet_big_salon_contact
tap_action:
action: more-info
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 65%;
top: -187px;
background: none;
border: 0px !important;
box-shadow: none !important;
}
card_mod:
style: |
ha-card {
height: 192px !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: fapro:couch-duotone
icon_color: |-
{% if is_state('input_select.dashboard_view', 'Living Room') %}
light-blue
{%else%}
disabled
{% endif %}
primary: Living Room
secondary: '{{ states(''sensor.sensor_motion_assaf_up_device_temperature'') }} °C'
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: script.dashboard_navigation
data:
browser_id: THIS
view: Living Room
navigate: living-room
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -60px;
left: -170px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -62px;
left: -170px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 60px;
}
.: |
ha-card {
border: 0px !important;
box-shadow: none !important;
background: none;
}
:host {
--mush-icon-size: 160px;
}
I would appreciate it if you could give me some more ideas. Thanks.
