Customize Layout of Lovelace View

[jjpeet]

I've spent a few hours with Lovelace today and generally I'm finding it pretty flexible, and extremely fast.

One thing I have struggled with is defining where cards go. They tend to have a mind of their own. At least I would like to define the order of display from top left over to bottom right.

I'd like a little more control over layout in general.
Thx
JP

[zsarnett]

You can currently do this using Horizontal and Vertical stacks. But leaving this Request open as I believe a better solution is needed. I just have to figure out how to do that

[balloob]

This comment still really holds up: home-assistant/ui-schema#123 (comment)

[zsarnett]

https://github.com/thomasloven/lovelace-layout-card

@thomasloven has created a custom card for this. Using it to test different ways to do this

[zsarnett]

My points:

• Ability to specify Number of Columns in a view: Very helpful and will extend use of vertical stacks
• Making the panel variable a string or better yet just make the option extend the columns to the full width of the page instead of choosing the first card and extending it... If they want that just use one card 🤔
• As Balloob mentioned in Discord, default should be what it is now for new/less advanced users but giving more advanced users more options (not all the options 😄 ) to customize the layout

[emlove]

IMO it would be interesting to explore some client-side control of the layout, since this is pretty specific to the screen that it's being viewed on. As a rough idea, the users could enter "edit" mode for a view, and drag/drop rearrange the cards how they make sense on this device.

[iantrich]

for the UI editor, I envision a user being able to select "new row" and dragging/dropping whatever cards they want in there and selecting a card size of small/med/large. how that would translate to implementation or even populating in a configuration I'm not sure of, though

[Webserve]

At the moment I’m testing with the new lovelace layout and missing this feature.

"Ability to specify Number of Columns in a view: Very helpful and will extend use of vertical stacks" <-

[zsarnett]

| hui-view.js

    const columnCount = config.columns || this.columns;

    for (let i = 0; i < columnCount; i++) {
      columns.push([]);
      columnEntityCount.push(0);
    }
    elementsToAppend = elements.filter((el, index) => {
      const column = config.cards[index].column;

      if (column && column <= columns.length) {
        columns[column - 1].push(el);
        columnEntityCount[column - 1] += computeCardSize(el);
        return false;
      }
      return true;
    });

    elementsToAppend.forEach((el) => {
      const cardSize = computeCardSize(el);
      // Element to append might be the wrapped card when we're editing.
      columns[getColumnIndex(cardSize)].push(el);
    });

This adds columns to view config.

views:
  - id: '1' # Automatically created id
    title: Testing Grounds
    columns: 3
    cards: {...}

And column to card config. Position within the column is based on order in YAML file.

- id: '1234'
  type: entities
  show_header_toggle: true
  column: 1
  entities: {...}

I think this could be implemented easily with our new editor with drag and drop but also with a Position and Column field in the UI editor. Position would move the index within the view config cards and Column would change the column variable in the card Config.

@balloob @bramkragten

[bramkragten]

You would also need to take into account that it has to work on different kinds of screens. It is hard to make this responsive...

Not technically, but from a UX point.

[zsarnett]

Columns would stack one after the other for mobile. And we could show an outline of the column for editing the layout easier in a mobile stand point

[zsarnett]

const columnCount =
      this.columns <= 1 || !config.columns ? this.columns : config.columns;

This allows for for the cards to stack in the order they are in (index with in view.cards) if width is for 1 column and also accounts for no columns.

[zsarnett]

This also doesn't remove the current capabilities that we offer for auto sorting. If you only add column to some cards the rest will be sorted as they are today. Into the shortest/smallest column

I think this could be the first step into making a better system for users to customize their layout. If using the editor it would be easy to sort them by column then by index so that when its on mobile its still the same layout. We could even just build that straight into the mobile viewing. Sort ElemetsToappend by column then index

[zsarnett]

I would also like to propose making panel: true mean making the columns full width of the screen. AKA if there are 3 columns that means each column is 33% in width.

If you only want 1 card to show. Only supply one card to the view and it will still be a 100% width card

From this:

To this:

[marc-gist]

just curious how work is going on this before I look to custom cards to solve my similar issues?

Thanks!!