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.
some more ideas. 
?
Since it gives me a quick overview of all the information I need when I am not near a computer or tablet, I use the following format for phones. Clicking on the menu items at the top does lead to more views with more information if required.
My tablet view is also a condensed view but with a little more information.
Bump, would like to get more inspirations.
Working on something like this - too simple for my taste
Can you share the code?
could you share the code?
Can you share the code
Can you share the code
type: custom:bubble-card
card_type: button
button_type: state
scrolling_effect: false
show_last_changed: true
show_attribute: false
show_state: false
show_name: false
entity: input_boolean.parents_room_occupancy
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_select.select_next
data:
entity_id: input_select.light_lounge_mode
target: {}
sub_button:
- name: light Fan
entity: light.fan_parents_room
show_icon: true
show_background: true
show_state: true
icon: mdi:ceiling-fan-light
show_attribute: false
show_last_changed: false
- name: Temp
entity: sensor.fp1_parents_device_temperature
show_icon: true
show_background: false
show_state: true
- name: Fan
entity: fan.fan_parents_room
show_icon: true
show_background: true
show_state: true
icon: mdi:fan
show_name: false
show_attribute: false
show_last_changed: false
styles: ''
name: ''
icon: mdi:motion-sensor
force_icon: true
attribute: color_mode
card_layout: large-2-rows
The dashboard is really great!
Starting to make adjustments to my system
What is missing in my opinion is information for open windows/main door
Hi there, how did you manage to place the icons for temperature and humidity so close to the displayed value, while having one on the left and one on the right? I entered the thermometer twice, for example, and set the icon to true for one and the state to true for the other, but then there’s a large gap between the icon and the state. Your code would be interesting, I cant get it to work properly