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

Also see this part of the post:

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

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

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

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

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.

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:

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.

1 Like

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.

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?

1 Like

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.

1 Like

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

1 Like

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.

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.

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.

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:tabbing-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

2 Likes

I second this. Great idea.

1 Like