Card Rooms - show yours

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: ' '
3 Likes

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.

1 Like


1 Like

some more ideas. :slight_smile: ?

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.

1 Like

Bump, would like to get more inspirations.

4 Likes

1 Like

9 Likes

image

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

@CollotsSpot has published his Dashboard yaml on CollotsSpot’s gists · GitHub

3 Likes
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 :slight_smile:

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