OK, I will investigate using these two options with the card.
Thanks.
First off all thank you for this awsome card! It allowed me to get everything on a single page and the interface it gives works very well.
nice is also the flexibility to use browser_mod.popup which creates a perfect interface, for example clicking the Lights icon in living room pops up:
3 Likes
Hey!
I am trying to do something similar to this dude example
but I keep getting an error:
type: custom:button-card
template:
- card_room
- red_no_state
name: Bathroom
entity: light.bathroom
icon: mdi:shower-head
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/bathroom
variables:
label_use_temperature: false
label_use_brightness: true
entity_1:
entity_id: light.bathroom
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.badkamer_motion_sensor
templates:
- blue_on
tap_action:
action: none
entity_3:
entity_id: input_boolean.badkamer_motionsensor_enabled
templates:
- green_on
- red_off
tap_action:
action: toggle
entity_4:
entity_id: input_boolean.bath_mode
templates:
- pink_on
tap_action:
action: toggle
I do have a room card in HACS and I did empty my cache and did reload the page as well.
Seems like you have the wrong name for Custom Room Card. Try room-card or maybe custom:room-card. I’m not familiar with button-card, so I’m not sure what that template section is expecting. Or maybe there is some step in button-card you need to do to make the card_room template?
Great, now it showing me some card, but not what they should look like
should look like this:
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/#usage
What am I missing here?
You’re in the wrong thread for starters. This thread is for a custom card called Room Card. You seem to be trying to use UI Lovelace Minimalist, which has an option for something called a room card. But it’s not this one. I’d try this thread for UI Lovelace Minimalist.
2 Likes
Any chance you can share the code?
I’m stumped. I have a socket for a fan that I use to control the Christmas tree during the holidays. I also have a couple sockets I only plug in during the holidays, so I’m trying to use their availability to set a name and icon for another entity so that my interface either shows a Fan or a Tree. It doesn’t seem like room-card understands unavailable as a state for an entity, or at least I can’t figure it out. Here’s what I have that doesn’t work (i.e. it always shows the Tree even when the sockets are unavailable).
entities:
- entity: fan.living_room
hide_if:
conditions:
- condition: not_equals
entity: switch.holiday_lights_1
attribute: state
value: 'unavailable'
name: Fan
state_color: true
show_icon: true
tap_action:
action: toggle
- entity: fan.living_room
hide_if:
conditions:
- condition: equals
entity: switch.holiday_lights_1
attribute: state
value: 'unavailable'
name: Tree
state_color: true
show_icon: true
icon: mdi:pine-tree
tap_action:
action: toggle
State isnt an attribute, try without the ‘attribute’
1 Like
Not all of it but here is something to get you going
type: vertical-stack
cards:
- type: custom:room-card
title: Living Room
entities:
- entity: light.living_room_lights
name: Lights
show_icon: true
icon:
state_on: mdi:light-switch
state_off: mdi:light-switch-off
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
show_header_toggle: true
entities:
- type: custom:slider-entity-row
entity: light.living_room_sphere
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_ceiling
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_leds_channel_1
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.sideboard_stairs_channel_1
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.staircase_kg_2
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_leds_channel_3
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_leds_channel_2
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.kitchen_light
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.gallery_wall_light
hide_state: true
toggle: true
step: 1
- entity: light.kitchen_counter
- entity: light.black_1_switch
double_tap_action:
action: none
hold_action:
action: none
- entity: input_boolean.scene_livingroom_off
name: Scenes
icon:
state_off: mdi:lightbulb-group
state_on: mdi:lightbulb-group-off-outline
template:
styles: >
if (states["input_boolean.scene_livingroom_off"].state == 'off')
return 'color:var(--paper-item-icon-active-color)';
show_icon: true
state_color: false
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
entities:
- entity: input_boolean.scene_livingroom_off
name: 'Off'
state_color: true
tap_action:
action: toggle
- entity: input_boolean.scene_livingroom_normal
name: 'On'
state_color: true
tap_action:
action: toggle
- entity: input_boolean.scene_livingroom_dim
name: Dim
state_color: true
tap_action:
action: toggle
- entity: input_boolean.scene_livingroom_tvtime
name: TV Time
state_color: true
tap_action:
action: toggle
- entity: input_boolean.livingroom_motion_control
name: Control
state_color: true
tap_action:
action: toggle
- entity: binary_sensor.living_room_motion
name: Motion
state_color: true
show_icon: true
- entity: cover.living_room_shutters
name: Shutters
state_color: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
entities:
- entity: cover.living_room_shutters
- type: custom:slider-entity-row
entity: cover.living_room_shutters
full_row: true
step: 1
- type: divider
- entity: cover.living_room_1
- type: custom:slider-entity-row
entity: cover.living_room_1
full_row: true
step: 1
- type: divider
- entity: cover.living_room_2
- type: custom:slider-entity-row
entity: cover.living_room_2
full_row: true
step: 1
- type: divider
- entity: cover.living_room_3
- type: custom:slider-entity-row
entity: cover.living_room_3
full_row: true
step: 1
- type: divider
- entity: cover.living_room_4
- type: custom:slider-entity-row
entity: cover.living_room_4
full_row: true
step: 1
- entity: media_player.livingroom
name: Display
state_color: true
show_icon: true
icon: mdi:television
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.livingroom
- entity: media_player.home_theater
name: Audio
state_color: true
show_icon: true
icon: mdi:audio-video
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.home_theater
- entity: media_player.living_room_tv
name: TV
state_color: true
show_icon: true
icon: mdi:television
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.living_room_tv
- entity: binary_sensor.sliding_door_access_control_window_door_is_open
name: Door
show_icon: true
state_color: true
icon:
state_on: mdi:door-sliding_open
state_off: mdi:door-sliding
- entity: switch.fridge
show_icon: true
state_color: true
- entity: switch.dishwasher_power_on
show_icon: true
state_color: true
- entity: switch.steam_combination_oven_power_on
show_icon: true
state_color: true
info_entities:
- entity: sensor.multisensor_6_air_temperature
- entity: sensor.multisensor_6_humidity
- entity: sensor.multisensor_6_illuminance
card_mod:
style: |
ha-card {
height: 100% !important;
}
.card-header .entities-info-row {
padding: 0px 0px 0px 0px;
margin: 0px;
right: 10px;
top: 0px;
}
.card-header {
margin: 0px;
padding: 0px 0px 0px 8px;
right: 10px;
top: 0px;
font-size: 18px !important;
}
.entities-row.content-left {
padding: 0px 0px 0px 8px;
margin-right: 0px;
margin-left: 0px;
}
.entities-row.content-left .entity {
padding: 0px 0px 0px 0px;
margin-right: 3px;
margin-left: 3px;
}
- type: custom:room-card
title: Living Room Luca
entities:
- entity: light.living_room_luca_lights
name: Lights
show_icon: true
icon:
state_on: mdi:light-switch
state_off: mdi:light-switch-off
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
show_header_toggle: true
entities:
- type: custom:slider-entity-row
entity: light.luca_living_room_ceiling
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_luca_spheres
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_luca_right_sphere
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.living_room_luca_left_sphere
hide_state: true
toggle: true
step: 1
double_tap_action:
action: none
hold_action:
action: none
- entity: cover.luca_living_room
name: Shutter
state_color: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
entities:
- entity: cover.luca_living_room
- type: custom:slider-entity-row
entity: cover.luca_living_room
full_row: true
step: 1
- entity: media_player.nestaudio5366
name: Speaker
state_color: true
show_icon: true
icon: mdi:speaker
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.nestaudio5366
- entity: media_player.samsung_ue55ku6079_3
name: TV
state_color: true
show_icon: true
icon: mdi:television
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.samsung_ue55ku6079_3
info_entities:
- entity: sensor.luca_living_room_ht_temperature
- entity: sensor.luca_living_room_ht_humidity
card_mod:
style: |
ha-card {
height: 100% !important;
}
.card-header .entities-info-row {
padding: 0px 0px 0px 0px;
margin: 0px;
right: 10px;
top: 0px;
}
.card-header {
margin: 0px;
padding: 0px 0px 0px 8px;
right: 10px;
top: 0px;
font-size: 18px !important;
}
.entities-row.content-left {
padding: 0px 0px 0px 8px;
margin-right: 0px;
margin-left: 0px;
}
.entities-row.content-left .entity {
padding: 0px 0px 0px 0px;
margin-right: 3px;
margin-left: 3px;
}
- type: custom:room-card
title: Bedroom
entities:
- entity: light.bedroom_lights
show_icon: true
icon:
state_on: mdi:light-switch
state_off: mdi:light-switch-off
name: Lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
show_header_toggle: true
entities:
- entity: light.bedroom_ron
name: Ron
- entity: light.bedroom_ledi
name: Ledi
double_tap_action:
action: none
hold_action:
action: none
- entity: input_boolean.bedroom_motion_control
name: Control
state_color: true
tap_action:
action: toggle
- entity: binary_sensor.bedroom_home_security_motion_detection
name: Motion
state_color: true
show_icon: true
- entity: cover.bedroom_shutters
name: Shutters
state_color: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
entities:
- entity: cover.bedroom_shutters
- type: custom:slider-entity-row
entity: cover.bedroom_shutters
full_row: true
step: 1
- type: divider
- entity: cover.bedroom_1
- type: custom:slider-entity-row
entity: cover.bedroom_1
full_row: true
step: 1
- type: divider
- entity: cover.bedroom_2
- type: custom:slider-entity-row
entity: cover.bedroom_2
full_row: true
step: 1
- type: divider
- entity: cover.bedroom_3
- type: custom:slider-entity-row
entity: cover.bedroom_3
full_row: true
step: 1
- entity: media_player.bedroom_display
name: Display
state_color: true
show_icon: true
icon: mdi:television
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.bedroom_display
info_entities:
- entity: sensor.bedroom_air_temperature
- entity: sensor.bedroom_humidity
- entity: sensor.bedroom_illuminance
card_mod:
style: |
ha-card {
height: 100% !important;
}
.card-header .entities-info-row {
padding: 0px 0px 0px 0px;
margin: 0px;
right: 10px;
top: 0px;
}
.card-header {
margin: 0px;
padding: 0px 0px 0px 8px;
right: 10px;
top: 0px;
font-size: 18px !important;
}
.entities-row.content-left {
padding: 0px 0px 0px 8px;
margin-right: 0px;
margin-left: 0px;
}
.entities-row.content-left .entity {
padding: 0px 0px 0px 0px;
margin-right: 3px;
margin-left: 3px;
}
- type: custom:room-card
title: Bedroom Luca
entities:
- entity: light.bedroom_luca_lights
show_icon: true
icon:
state_on: mdi:light-switch
state_off: mdi:light-switch-off
name: Lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
show_header_toggle: true
entities:
- type: custom:slider-entity-row
entity: light.luca_bedroom_light
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.bedroom_luca
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.right_sphere_light_0
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.left_sphere_light_0
hide_state: true
toggle: true
step: 1
double_tap_action:
action: none
hold_action:
action: none
- entity: media_player.luca_bedroom
name: Speaker
state_color: true
show_icon: true
icon: mdi:speaker
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.luca_bedroom
- entity: media_player.chromecast
name: Chromecast
state_color: true
show_icon: true
icon: mdi:google-chrome
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.chromecast
info_entities:
- entity: sensor.luca_bedroom_ht_temperature
- entity: sensor.luca_bedroom_ht_humidity
card_mod:
style: |
ha-card {
height: 100% !important;
}
.card-header .entities-info-row {
padding: 0px 0px 0px 0px;
margin: 0px;
right: 10px;
top: 0px;
}
.card-header {
margin: 0px;
padding: 0px 0px 0px 8px;
right: 10px;
top: 0px;
font-size: 18px !important;
}
.entities-row.content-left {
padding: 0px 0px 0px 8px;
margin-right: 0px;
margin-left: 0px;
}
.entities-row.content-left .entity {
padding: 0px 0px 0px 0px;
margin-right: 3px;
margin-left: 3px;
}
- type: custom:room-card
title: Bathroom
entities:
- entity: light.bathroom_lights
name: Lights
show_icon: true
state_color: true
icon:
state_on: mdi:light-switch
state_off: mdi:light-switch-off
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
show_header_toggle: true
entities:
- type: custom:slider-entity-row
entity: light.bathroom_eg_ceiling
hide_state: true
toggle: true
step: 1
- type: custom:slider-entity-row
entity: light.bathroom_cabinet_channel_1
hide_state: true
toggle: true
step: 1
double_tap_action:
action: none
hold_action:
action: none
- entity: input_boolean.scene_bathroom_eg_off
name: Scenes
icon:
state_off: mdi:lightbulb-group
state_on: mdi:lightbulb-group-off-outline
template:
styles: >
if (states["input_boolean.scene_bathroom_eg_off"].state == 'off')
return 'color:var(--paper-item-icon-active-color)';
show_icon: true
state_color: false
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: entities
state_color: true
entities:
- entity: input_boolean.scene_bathroom_eg_off
name: 'Off'
state_color: true
tap_action:
action: toggle
- entity: input_boolean.scene_bathroom_eg_on
name: 'On'
state_color: true
tap_action:
action: toggle
- entity: input_boolean.scene_bathroom_eg_dim
name: Dim
state_color: true
tap_action:
action: toggle
- entity: input_boolean.bathroom_eg_motion_control
name: Control
state_color: true
tap_action:
action: toggle
- entity: binary_sensor.bathroom_eg_home_security_motion_detection
name: Motion
state_color: true
show_icon: true
- entity: media_player.bathroom
name: Speaker
state_color: true
show_icon: true
icon: mdi:speaker
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: media-control
entity: media_player.bathroom
info_entities:
- entity: sensor.bathroom_eg_air_temperature
- entity: sensor.bathroom_eg_humidity
- entity: sensor.bathroom_eg_illuminance
card_mod:
style: |
ha-card {
height: 100% !important;
}
.card-header .entities-info-row {
padding: 0px 0px 0px 0px;
margin: 0px;
right: 10px;
top: 0px;
}
.card-header {
margin: 0px;
padding: 0px 0px 0px 8px;
right: 10px;
top: 0px;
font-size: 18px !important;
}
.entities-row.content-left {
padding: 0px 0px 0px 8px;
margin-right: 0px;
margin-left: 0px;
}
.entities-row.content-left .entity {
padding: 0px 0px 0px 0px;
margin-right: 3px;
margin-left: 3px;
}
view_layout:
grid-area: main1
1 Like
Thanks. That did it. I swear I thought I had tried that variation, but if I did I had the logic wrong. 
1 Like
Good news! Another bug fixed :
Hello @marcokreeft87!
After the latest update it seems I can’t use the card to navigate to other views.
The weird part is that after the update it affected only my laptop, while phone and tablet remained OK, until this next morning.
All above screams that the error might be between the chair and the screen, but I hoped to see if you or others notice similar issues in the pursuit of the culprit
Can you share your yaml? Maybe the last update changed some action behavior
Can do.
Heres the card for my bathroom. They’re linking to the new subview, but I get the same issue with default pages, and the no-go full path.
type: custom:room-card
title: Bad
tap_action:
action: navigate
navigation_path: /lovelace-subviews/bad
entities:
- entity: light.bathrom2_roof_spot
name: Taklampe
hide_if:
entity: sensor.light_unavailable
state: true
tap_action:
action: toggle
- entity: media_player.bathroom2
name: Media
show_icon: true
icon:
conditions:
- condition: equals
value: playing
styles:
color: orange
- condition: equals
value: idle
styles:
color: orange
- condition: equals
value: 'off'
styles:
color: default
show_states:
- playing
- paused
tap_action:
action: toggle
- entity: sensor.varmtvannstank_availablemix40vol
name: Vann
show_icon: true
icon:
conditions:
- icon: mdi:hexagon-outline
condition: above
value: 1
styles:
color: red
- icon: mdi:hexagon-slice-1
condition: above
value: 80
styles:
color: red
- icon: mdi:hexagon-slice-2
condition: above
value: 140
styles:
color: orange
- icon: mdi:hexagon-slice-3
condition: above
value: 200
styles:
color: orange
- icon: mdi:hexagon-slice-4
condition: above
value: 260
styles:
color: green
- icon: mdi:hexagon-slice-5
condition: above
value: 320
styles:
color: green
- icon: mdi:hexagon-slice-6
condition: above
value: 350
styles:
color: green
- entity: sensor.vtr300_modus_status
name: Ventilasjon
show_icon: true
icon:
conditions:
- condition: equals
value: Auto schedule - Low
icon: mdi:fan-auto
styles:
color: orange
- condition: equals
value: Auto schedule - Normal
icon: mdi:fan-auto
styles:
color: orange
- condition: equals
value: Auto schedule - Høy
icon: mdi:fan-auto
styles:
color: orange
- condition: equals
value: Manuell Lav
icon: mdi:fan-speed-1
styles:
color: orange
- condition: equals
value: Manuell Normal
icon: mdi:fan-speed-2
styles:
color: orange
- condition: equals
value: Manuell Høy
icon: mdi:fan-speed-3
styles:
color: orange
- condition: equals
value: Party
icon: mdi:fan-chevron-up
styles:
color: orange
- condition: equals
value: Boost
icon: mdi:fan-plus
styles:
color: orange
- condition: equals
value: borte
icon: mdi:fan-minus
styles:
color: orange
- condition: equals
value: ferie
icon: mdi:fan-remove
styles:
color: orange
- condition: equals
value: Manuell Stopp
icon: mdi:fan-off
styles:
color: red
info_entities:
- entity: binary_sensor.bathroom2_occupancy
show_icon: true
icon:
conditions:
- condition: equals
value: 'on'
styles:
color: orange
- condition: equals
value: 'off'
styles:
color: default
- entity: sensor.bathroom2_temperature
show_icon: false
- entity: sensor.bathroom2_humidity
show_icon: false
Tbf I dont know whats causing this. Normal navigation works fine. Subviews seem to work correct on my setup.
The issue that it was only working on your laptop could be because it was cached on phone and tablet.
But I used the HA boilerplate card for action handling, so it should work as designed…
Can you try it with a new subview?
Oh wait, can you try it with an entity configured?
So likes this:
type: custom:room-card
title: Bad
entity: light.somelight
tap_action:
action: navigate
navigation_path: /lovelace-subviews/bad
entities:
It might be because for the title to be clickable, the action handler needs an entity
Indeed, the title entity is the problem. I removed them from the cards as it didn’t go well with my layout.
Is this now enforced from the newest version, or was I just good friends with a bug that let me disable it?
My follow up question is then if this is something that can be optional in future releases?
And I want to say that this is one of my favorite cards mixed with subviews, it really helped me improve the design grounded in WAF. (Although she never listened when I said she could click on the card to control lights in detail from the subview…)
I
It wasnt a bug, it was a feature haha. No you managed to shape a bug to your liking 
I will try to figure out a way to get that functionality back. Can you make a bug on : Issues · marcokreeft87/room-card · GitHub
And thanks for the love !
2 Likes