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

GH2user · March 13, 2024, 1:37pm

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

boheme61 · March 13, 2024, 2:29pm

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

Zenia · March 13, 2024, 7:51pm

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

madelena · March 14, 2024, 12:24am

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.

boheme61 · March 14, 2024, 12:33am

Ok, However there is unfortunately no others in the House here but me to please, and blame , so i don’t even try to imagine if anyone else should have access to, or use my HA
( 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

teskanoo · March 14, 2024, 12:45am

Yeah…

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

DTSTART;TZID=PST:20240306T233236

sparkydave · March 14, 2024, 2:30am

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.

madelena · March 14, 2024, 2:56am

Hahaha then of course you can go nuts

mchk · March 14, 2024, 2:57pm

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.

PhilippeP · March 15, 2024, 10:14am

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 …)

Vidar · March 15, 2024, 11:35am

I second that.

rogersmj · March 15, 2024, 1:17pm

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?

realdimik · March 15, 2024, 10:18pm

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

marcorm69 · March 17, 2024, 7:46am

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

rct · March 18, 2024, 1:54pm

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

aleco · March 18, 2024, 7:12pm

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:

tfmeier · March 19, 2024, 11:28am

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?

tfmeier · March 19, 2024, 12:18pm

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

GH2user · March 19, 2024, 7:23pm

@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.

Calzune · March 21, 2024, 12:33pm

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.)