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

[Fanful]

Also see this part of the post:

@system

Cards currently optimized for the grid system: Sensor card, Tile card, and Button card

To implement the grid system, we are now in the process of standardizing the widths and heights of our cards, starting with the Tile card, Button card, and Sensor card. These cards will occupy the right amount of space in the grid, while other cards will occupy the full width of a section by default at the moment.

This is already in there, those are the few cards I meant that do work as a grid in the sections view.

[thlucas (Todd Lucas)]

I don’t want to remove it per-se, I just want it to look like it was before. It’s taking up valuable real-estate on the form.

In doing some global searches, I ran across a showVisibilityTab in the hui-card-element-editor.ts module which seems like it might be able to control the visibility, but I have no idea where to set that in my card source. I am pretty new to designing custom cards (my first actually), and documentation is sparse.

In my card, I do the following to invoke the editor:

  public static getConfigElement() {
    return document.createElement('stpc-editor');
  }

my editor form render code looks like this:

  protected render(): TemplateResult {
    return html`
      <ha-form
        .data=${this.data || this.config}
        .schema=${this.schema}
        .computeLabel=${formatLabel}
        .hass=${this.hass}
        @value-changed=${this.changed || this.OnValueChanged}
      ></ha-form>
    `;
  }

Chrome dev tools shows the following element structure - not sure where the hui-card-element-editor or paper-tabs gets generated from - I have no references to those in my card source code.

At the end of the day, I just want my card editor form to look like it was prior to the 2024.6 update.

[thlucas (Todd Lucas)]

Another alternative would be to add a CSS selector that sets a display: none style on the paper-tabs element to hide the tabs. Like so:

Just not sure how to craft the selector or where to put it in my code. All of these shadow roots are driving me bonkers!

I’m also trying to get rid of some padding between <ha-form> auto-generated input fields (e.g. ha-selector, ha-form-string, etc), but that is another problem.

Designing custom cards for HA is hard! LOL

[AleXSR700 (Alex)]

@system

Over the past year, we ideated and identified a few solutions, namely:

1. a new Sections view layout
2. a design grid system , and
3. a “Z-Grid” auto-rearranging pattern .

I may be wrong but I hope not.
I thought that everything is arranged in a grid. And to use this grid there will be a sections view and a grid view selectable. The sections view will automatically display the cards with a defined amount of columns and then perform an automotic line break. The grid view will let the user actually define where and how to place a card.
Essentially what Thomas Loven has created already, but now finally implemented into HA.

The sections view is cool and all, but it does not really allow the user to layout himself properly. It just helps create some grouping.

[Fanful]

@thlucas

I don’t want to remove it per-se, I just want it to look like it was before. It’s taking up valuable real-estate on the form.

Just to be clear, I’m not a developer, I’m just writing this as a user.

I’m not sure if you understood what I was trying to say, if you did, then just ignore me.

This visibility thing is supposed to show up in the card configuration window, it’s the only place it’s shown. It’s a different thing than the visibility tab in the edit view page or in the edit section window. It was introduced here:

2024.6: Dipping our toes in the world of AI using LLMs 🤖

And as far as I understand, it’s supposed to be shown for all cards (or at least all that support visual editor). If you remove it from your card, you are removing this feature, there’s no other way to access it.

[Chykan (Andrew)]

When I CAST to a nest hub the gap shows up. The gap does not show up but not on the HOME ASSISTANT APP or a BROWSER. I have a pixel tablet hub as well, same behavior cast gap is there, app displays as it should.

While Casting to Google Pixel Tablet Conditional Conditional cards ON, pushes the cards down as it should

While Casting to Google Pixel Tablet. When the conditional cards are OFF, there is a gap showing, seems to default to one grid height each.

Using the Home Assistant App on a Google Pixel Tablet. Shows how it should. Conditional cards disappear completely.

[thlucas (Todd Lucas)]

Understood, but …

I guess I don’t understand why the CONFIG VISIBILITY tab is showing on my custom card configuration, when it’s NOT shown for other types of (stock and custom) cards.

For example, the standard HA media card. This is defined as the only card on a “Masonry” type dashboard (same as my custom card). Note that there is no CONFIG VISIBILITY tab when I edit the card.

type: media-control
entity: media_player.spotifyplus_todd_l

There are also other custom cards that it is not shown on (e.g. Mini Media Player, etc), but I think that may be due to those cards not utilizing the <ha-form> control for editing maybe?

[Fanful]

@thlucas

For example, the standard HA media card. This is defined as the only card on a “Masonry” type dashboard (same as my custom card). Note that there is no CONFIG VISIBILITY tab when I edit the card.

Hmm, I do see visibility tab for the media control card in my HA instance. Maybe try clearing cache? I would say if you still don’t see it then, it’s probably a bug.

This is how it looks like for me, I set it up for testing also in a new masonry view with just this one card in it:

I checked multiple stock cards and they all have the visibility settings for me.

Even custom cards have it, if they support the visual editor. The only cards that seem to not have it are the cards that do not support the visual editor at all.

[mark007 (Mark Kennedy)]

Has anyone had a look at the idea of making some sections have the option to have their visibility controlled not by some set of conditions/states etc, but by the visibility of all children?

I use a section to show a large list (20+) alerts/alarms that I have built up to show me when I left some light on, or some door open etc, or when some entity isn’t behaving correctly. I only make those alerts visible when theres an issue so when all is well, there are no visible alerts/alarm entities showing. When this happens, with sections it would be quite the task to make the overall section itself hide when all children are hidden.

If this is a somewhat common use for sections, I would request some toggle at the section level, under its visibility, something such as ‘control visibility based on children cards visibility’.

[PecosKidd]

You could make a Group Helper (Settings → Devices & services → Helpers → + Create Helper → Group) that contains all the “children” entities, then make your section visibility dependent on the Group Helper. I do something similar with a Group for “All Doors and Windows” that is true if any of the doors and windows is open, and false if all of them are closed.

[mark007 (Mark Kennedy)]

Yeah that’s a good idea, I had thought of doing something like this. However unless the helper can also contain the logic I might need to have per entity / condition (eg entity < x and entity > y), it might not be a runner.

But definitely doable in other ways. The request is to see, if its a very common request (not sure if its just m;e or do others also think its a good idea), can it be considered as an idea for a future version of the sections visibility.

[gfandrea (Andrea)]

I was trying the same thing, for now I repeated all the condition on the section (there are only 5) and it is working, but it could be interesting if a section with all the objects hidden, could just hide itself.

[erkr (Eric)]

Hi, the new grid / section dashboards are very nice.
After some playing with it , I have a feature request. The use case is generic:

• For mobile views I use the `custom:tabbed-card’ to organize cards in tabs. This takes away the need of vertically scrolling.
• On wide screens, I want to show the same cards grouped by columns.
• With the new dashboard sections and conditions, I can achieve this by either show one section containing the tabbing card or show multiple sections grouping the same cards.
  BUT this at least doubles the number of configured cards in the view.

My Feature Request is therefor to allow sections to be mapped on tabs for small screens, instead off stack them into a single column.

Best Eric

[Chykan (Andrew)]

I second this. Great idea.

[hellweaver666 (Andy)]

I’m a huge fan of this new dashboard format, it has been my goto since it was released and it’s the only format that I use. My only feature request would be to have some control over the individual cards. Sometimes I have devices that I want to give a bit more size to (for example a light with a brightness slider). It would be great to be able to control the width of the card rather than have the system assume what I want.

The way I would like to see this work would be a simple “full-width” checkbox for each card that allows me to stretch things out to fill the container. Simple, hard to mess up and easy to use!

[Gav_in]

have a look at the release notes for 2024.7 (beta out today)

2024.7: Beta release notes

[pressurejetsolutions (paul)]

lovely the new sections and 2024.7 with the ability to resize cards. FAB.
Question on Max number of columns if there a way to full screen on one column As at the moment if you apply one column its in the middle of screen ( is there a way to expand it…eg like 1 panel card full screen…

another good idea if possible would be to be able to merge sections together. eg
3 column
-|-|- to --|-
Thanks and great work

[EarMaster (Nico)]

The new layout looks great on mobile devices and smaller screens, but fails to amaze me on big screens. Graphs are tiny and there is often a lot of unused space to the left and right. The current solution isn’t optimal for bigger screens. Maybe the segments should have the ability to occupy different portions of the total grid if enough space is available.

[dos1973]

Fully agreed,
for mobiles really good - but for larges screens… should be more options

[Mariusthvdb (Marius)]

trying to replace yet another custom card (layout-card) I had hoped to 1-1 move to sections.
as I use vertical-layout all over, Ive set sections max_columns to 1 and at first glance it seems perfect!

from:

title: Welkom
icon: mdi:home
path: welkom
type: custom:vertical-layout
cards:

  - !include /config/dashboard/buttons/buttons_dashboard_direct.yaml

  - !include /config/dashboard/buttons/buttons_subviews/buttons_subview_welkom.yaml

  - !include /config/dashboard/includes/include_alerts_dashboard.yaml

  -  etc etc

to

title: Welkom
icon: mdi:home
path: welkom
type: sections
max_columns: 1
sections:
  - type: grid
    cards:
      - !include /config/dashboard/buttons/buttons_dashboard_direct.yaml

      - !include /config/dashboard/buttons/buttons_subviews/buttons_subview_welkom.yaml

      - !include /config/dashboard/includes/include_alerts_dashboard.yaml

      - !include /config/dashboard/includes/include_alarm_armed.yaml

      - !include /config/dashboard/includes/markdowns/include_markdown_nieuwjaar.yaml

      - !include /config/dashboard/buttons/buttons_activiteit.yaml

      - !include /config/dashboard/buttons/buttons_speciale_scenes.yaml

however, there is a rather large empty section after my buttons_subview_welkom.yaml button grid.

custom:vertical-layout (no gap below the 2 smaller buttons):

sections (gap below 2 smaller icons)

that is nothing more than a grid of max 8 smaller buttons, but in this case only 2:

type: grid
columns: 8
cards:

  - type: custom:button-card
    template: subview
    icon: mdi:floor-plan
    variables:
      tooltip: Plattegrond
      path: /ui-sub-views/plattegrond

  - type: custom:button-card
    template: subview
    icon: mdi:microphone-message
    variables:
      tooltip: Intercom
      path: /ui-sub-views/intercom

it seems the columns: 8 there throws off the sections design, and yet I need it to auto scale the smaller buttons. If I set that to 2, or 4, the gap is gone.

Is there another ‘fix’ for this, or should I file it as an issue in the experimental phase of Sections

update

I also notice extra paddings around the cards in a sections view. Which means there is more empty space to the sides (very noticeable on iOS Mobile), and between cards inside the grid.

I checked Dom in Inspector and the confirms what I was seeing.
Ive now added

    ha-view-sections-row-gap: 4px
    ha-view-sections-column-gap: 0px
#     ha-section-grid-row-gap: 8px #default
    ha-section-grid-column-gap: 0px

to my theme which makes it a bit better, but still not prefect, as the empty space between the smaler buttons is still there.
For now, that means back to regular views or custom: vertical-layout for me