A Home-Approved Dashboard chapter 1: Drag-and-drop, Sections view, and a new grid system design!

As mentioned I use the custom ā€˜room-cardā€™ marcokreeft87/room-card: Show multiple entity states, attributes and icons in a single card in Home Assistantā€™s Lovelace UI (github.com) and added it inside the new Sections. Below is the content for Study and Living, others are similar style.

  - title: sections
    path: sections
    type: sections
    sections:
      - type: grid
        cards:
          - type: custom:room-card
            title: Study
            show_icon: true
            show_name: false
            icon: mdi:desk
            templates:
              - name: onoff
                template:
                  show_icon: true
                  show_name: true
                  show_state: false
                  state_color: true
              - name: power
                template:
                  show_icon: true
                  show_state: true
                  show_name: false
                  format: precision0
                  icon:
                    template:
                      styles: |
                        if (entity.state > 0) return 'color: #FFEF00';
            rows:
              - entities:
                  - entity: sensor.plug_study_airco_power
                    show_icon: true
                    show_state: true
                    show_name: false
                    icon:
                      template:
                        styles: >
                          if (entity.state >= 30) return 'color: #FFEF00';  if
                          (entity.state >= 750) return 'color: orange';  if
                          (entity.state >= 1000) return 'color: red';
                        icon: |
                          return "ghi:airco3";
                    format: precision0
                  - entity: sensor.plug_study_heating_feet_power
                    show_icon: true
                    show_state: true
                    show_name: false
                    icon:
                      template:
                        styles: >
                          if (entity.state >= 30) return 'color: #FFEF00';  if
                          (entity.state >= 750) return 'color: orange';  if
                          (entity.state >= 1000) return 'color: red';
                        icon: |
                          return "ghi:heating-long";
                    format: precision0
                  - entity: sensor.study_lights_on
                    show_icon: true
                    show_state: true
                    show_name: false
                    icon:
                      template:
                        styles: |
                          if (entity.state >0) return 'color: #FFEF00';
              - entities:
                  - entity: sensor.plug_study_jumbo_dock_power
                    template: power
                    tap_action:
                      action: call-service
                      service: switch.toggle
                      target:
                        entity_id: switch.plug_study_jumbo_dock
                  - entity: sensor.plug_study_monitor_power
                    template: power
                  - entity: sensor.plug_study_pc_power
                    template: power
                  - entity: sensor.plug_study_devices_power
                    template: power
                  - entity: switch.plug_study_speakers
                    show_name: false
                    show_icon: true
                    show_state: true
                    state_color: true
                    tap_action:
                      action: toggle
                  - entity: sensor.mfc_l8690cdw_status
                    show_name: false
                    show_icon: true
                    show_state: true
                    state_color: true
            info_entities:
              - entity: binary_sensor.security_study_door_contact
                show_icon: true
                state_color: true
              - entity: binary_sensor.study_sensor_occupancy
                show_icon: true
                state_color: true
              - entity: sensor.study_sensor_illuminance_lux
                format: precision0
              - entity: sensor.climate_study_humidity
                format: precision1
              - entity: sensor.climate_study_temperature
                format: precision1
            cards:
              - type: entities
                entities:
                  - entity: timer.study_heating_feet_on
                hide_if:
                  conditions:
                    - condition: equals
                      entity: timer.study_heating_feet_on
                      value: idle
              - type: tile
                entity: media_player.heos_study
                state_content:
                  - state
                  - volume_level
                  - source
              - type: grid
                square: false
                columns: 3
                cards:
                  - type: tile
                    entity: light.study_ceiling
                    name: []
                  - type: tile
                    entity: light.study_strip
                    name: []
                  - type: tile
                    entity: light.study_signal
                    name: []
                hide_if:
                  conditions:
                    - condition: equals
                      entity: sensor.study_lights_on
                      value: 0
      - type: grid
        cards:
          - type: custom:room-card
            title: Living
            show_icon: true
            show_name: false
            icon: mdi:desk
            templates:
              - name: onoff
                template:
                  show_icon: true
                  show_name: true
                  show_state: false
                  state_color: true
              - name: power
                template:
                  show_icon: true
                  show_state: true
                  show_name: false
                  format: precision0
                  icon:
                    template:
                      styles: |
                        if (entity.state > 0) return 'color: #FFEF00';
            rows:
              - entities:
                  - entity: sensor.plug_living_airco_power
                    show_icon: true
                    show_state: true
                    show_name: false
                    icon:
                      template:
                        styles: >
                          if (entity.state >= 35) return 'color: #FFEF00';  if
                          (entity.state >= 750) return 'color: orange';  if
                          (entity.state >= 1000) return 'color: red';
                        icon: |
                          return "ghi:airco3";
                    format: precision0
                  - entity: sensor.living_lights_on
                    show_icon: true
                    show_state: true
                    show_name: false
                    icon:
                      template:
                        styles: |
                          if (entity.state >0) return 'color: #FFEF00';
              - entities:
                  - entity: media_player.denon
                    show_icon: true
                    show_state: false
                    show_name: true
                    icon: mdi:music-box
                  - entity: media_player.zgemma
                    show_icon: true
                    show_state: false
                    show_name: true
                    icon: mdi:music-box
                  - entity: media_player.viera_vt60_series
                    show_icon: true
                    show_state: false
                    show_name: true
                    name: VieraTV
                    icon: mdi:music-box
                  - entity: media_player.heos_left
                    show_icon: true
                    show_state: false
                    show_name: true
                    name: HEOS left
                    icon: mdi:music-box
                  - entity: media_player.heos_right
                    show_icon: true
                    show_state: false
                    show_name: true
                    name: HEOS right
                    icon: mdi:music-box
            info_entities:
              - entity: binary_sensor.security_garden_door_contact
                show_icon: true
                state_color: true
              - entity: sensor.airq_living_noise
                format: precision0
              - entity: sensor.airq_living_humidity
                format: precision1
              - entity: sensor.airq_living_temperature
                format: precision1
            cards:
              - type: tile
                entity: media_player.denon
                state_content:
                  - state
                  - volume_level
                  - source
              - type: grid
                square: false
                columns: 3
                cards:
                  - type: tile
                    entity: light.living_ceiling
                    name: []
                  - type: tile
                    entity: light.living_signe_left
                    name: []
                  - type: tile
                    entity: switch.plug_living_houses
                    name: []
                  - type: tile
                    entity: light.reading_down
                    name: []
                  - type: tile
                    entity: light.reading_up
                    name: []
                  - type: tile
                    entity: light.table_down
                    name: []
                  - type: tile
                    entity: light.table_up
                    name: []
                  - type: tile
                    entity: light.media_left
                    name: []
                  - type: tile
                    entity: light.media_strip
                    name: []
                hide_if:
                  conditions:
                    - condition: equals
                      entity: sensor.living_lights_on
                      value: 0

2 Likes

I think the ā€œheaderā€ is just there because itā€™s an natural ā€œoptionā€ for the view-type, and it doesnā€™t ā€œaffectā€ the view, if itā€™s not used.( unlike some custom cards )
I know many people likes ā€œHeaderā€ on all their cards/sections, in some form, Me a little as possible, In most Viewā€™s i only use custom-text-devider ( to reduce white-space, and some place only with the Centered Text )
We still have Glace/Grid-card/Horizontal-stack/Picture-Elements-card as native alternative, to accomplice something similar as i.e the ā€œnice n more flexibleā€ custom:room-card, or i.e custom:button card.

What ā€œsticksā€ more into my esthetic mind, is the huge vertical gap, between the columns ( there are ways of handle the card-height, i believe more will come in the native card UI-mode)
But the Gap between Columns needs to be addressed" , maybe also as an ā€œoptionā€ on the View-Settings

Here is mine, using new Dashboard futures. I loved, now my phone and laptop and tablet Dashboard look much better and uniformed

By reducing the gap between columns, you will introduce usability issues to other users in your home, as the sections will blend into each other and read as a row instead. It becomes harder and slower to locate a card.

We will probably have some sort of settings for those who know what they are doing, but the default settings will be designed for optimal home approval factor.

3 Likes

Ok, However there is unfortunately no others in the House here but me to please, and blame :smile: , so i donā€™t even try to imagine if anyone else should have access to, or use my HA :blush:
( Anyone would probably go nuts, because i donā€™t name obvious things, and some other i.e devices/entities are named in ā€œserialā€ format tp1 tp2 ā€¦ tpp1 tpp2ā€¦ tpc1 tpc2ā€¦ etc ( all ā€œstructureā€ (made) messed up in my own head :grimacing:

Yeahā€¦

I removed this incorrectly saved line from the ICS file in my storage folder

DTSTART;TZID=PST:20240306T233236

Could you please post the full path to this particular file?

EDIT: found the fileā€¦

How do I know which is the incorrectly saved line?

EDIT2: Ok, so I replaced 3 entries that started with DTSTART;ā€¦blah with that of the equivalent line for other items, being ā€˜lastmodifiedā€¦blahā€™, reloaded the Local Todo List in Devices and now itā€™s back in action.

Thanks for the pointer.

1 Like

Hahaha then of course you can go nuts :sweat_smile:

z-Š¼asonry is a more preferable option than z-grid. especially when dynamic sized cards are used.
z-grid looks bad on a large and wide screen, unless you specifically select the height of the cards.
Hopefully, there will be a choice between modes in the future.

3 Likes

The new layout options are great !
Now we need the same thing at the section level ,(Iā€™d love being able to have a 8 columns sections ā€¦)

I second that.

Iā€™ve been tinkering and this is a great, great thing to see coming to Home Assistant. I always felt there was something missing in between the very limited built-in layout capabilities and the community add-ons that are powerful but often fiddly and time-consuming to get working properly. I can see this evolving to fill that gap. I want to have some degree of control over how my dashboards lay out, but Iā€™m tired of being neck-deep in YAML files all the time.

I second the suggestion for bringing in per-section badges. Also it would be nice to be able to stack two sections next to one other taller section ā€” maybe thereā€™s a way to do that and I just havenā€™t figured it out?

1 Like

I would like to do the same. Sections are great, but I need to limit min-width too.

Great work!
I love sections, Iā€™m working hard in yaml to create my dashboard, sections are the first step to create fascinating dashboards faster.
I have 3 small suggestions for the next steps, if possible of course:

  • Section within section: possibility to create subsections in a section
  • Possibility to decide the maximum number of sections per line
  • Ability to set the size (height, width) of the section

Feature Request: conditional sectionsā€”I think that would let me clean up my dashboards and make them more responsive:

  • hide seasonal devices and their entities when not in use (AC, Heating, Pool/Spa, Sprinklers, ā€¦)
  • Day / Night differences, Sun, Solar, Some lighting controls, ā€¦
  • Notifications and alertingā€”Add a top section when something needs attention

Thanks

5 Likes

I would also appreciate conditional cards or other complex types that allow to only display what currently is ā€œrelevantā€. For example:

  • I use auto-entities to only show open windows, rooms with >65% humidity, rooms with motion, lights that are on, devices that are offline.
  • I use battery-state-card to show where I need to change batteries.
  • I have a card that alert me when a storm is approaching and another one when itā€™s going to freeze in the next hours.
  • I have a button to open the lobby door only when the doorbell rang in the past minute.

Also I would like to increase the min-width of the tile card (or be able to set it to the double width) as the title and also the state_content is cutoff and the icon takes way too much space. Another option would be to hide the icon, as this would increase the available width for text:

3 Likes

Trying to understand this. Looking at the livestream I thought the way to build a dashboard based on sections is via the UI. What you heavy is heay yaml. Am I correct to assume that in your case you have to maintain the dashboard in yaml and cant use the UI anymore?

Like the top section when something needs attention - very nicely implemented in the Homekit Infused dashboard

@tfmeier You build the sections via the UI but you can insert any card in the UI editor. Some of them allow the use of the UI others use yaml in the editor but still you can do this in the UI.

I much needed feature would be to set a fixed screen size for the dashboard you are building it for. Im trying to build a dashboard for my tablet but it doesnt end up as I want it to. (My tablet is 1920*1200 for example.)


1 Like