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

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

Is there a way for me to combine these two into one? Currently they both take up so much space.

My lighting is heavily automated. If I change the lights manually an automation will likely change them back. This is completely expected. To solve this I have another card to turn off the automation so that the user can take control of the lights.

I would like to be able to designate an automation in one card like this.