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!!

[Smiggel]

Is there any progress? I have the same kind of issue where my cards seem to go all over the place when I want to sort them. I love the UI editor, but not able to move the cards to the position I want them in, is a shame.

[vel2000]

I have the same kind of issue where my cards seem to go all over the place when I want to sort them

+1 for customizable columns and drag and drop of the cards. ^^

[mike391]

I feel like drag and drop is the one thing that HASS needs to become significantly better. Its easy to do a lot of things except its a nightmare to organize card in the UI. Drag and Drop would save a lot of time and reduce headaches for many users.

[iantrich]

muuri library is still our best bet on this, I think. I start a POC based of @bramkragten 's work, but have yet to get it working properly: https://github.com/custom-cards/muuri-grid

[Misiu]

A drag-and-drop editor would be awesome addition. Right now you only can move cards up and down, but this isn't the best option - it isn't easy to rearrange items.
Specifying number of columns is another great ideal.
Imagine you want to display 5 items, but in 2 columns, so You want to get this view:

currently, the only option I found is to use gap-card:

cards:
  - cards:
      - entity: climate.salon
        type: thermostat
      - entity: climate.sypialnia
        type: thermostat
    type: horizontal-stack
  - cards:
      - entity: climate.dzieciecy
        type: thermostat
      - entity: climate.korytarz
        type: thermostat
    type: horizontal-stack
  - cards:
      - entity: climate.lazienka
        type: thermostat
      - type: 'custom:gap-card'
    type: horizontal-stack
type: vertical-stack

but with columns support, I could rewrite this to:

cards:
  - cards:
      - entity: climate.salon
        type: thermostat
        column: 1
      - entity: climate.sypialnia
        type: thermostat
        column: 1
    type: horizontal-stack
  - cards:
      - entity: climate.dzieciecy
        type: thermostat
        column: 1
      - entity: climate.korytarz
        type: thermostat
        column: 1
    type: horizontal-stack
  - cards:
      - entity: climate.lazienka
        type: thermostat
        column: 1
    type: horizontal-stack
type: vertical-stack

There is one issue I find very annoying and I think many users will agree:
When adding new cards there should be an option to preconfigure them (for example in cards.yaml ?)
I have a grid that shows 6 mini-graph-cards in 2x3 grid. My yaml looks like this:

cards:
  - cards:
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_na_zewnatrz
        hour24: true
        hours_to_show: 24
        name: Na zewnątrz
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_salon
        hour24: true
        hours_to_show: 24
        name: Salon
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
    type: horizontal-stack
  - cards:
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_sypialnia
        hour24: true
        hours_to_show: 24
        name: Sypialnia
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_dzieciecy
        hour24: true
        hours_to_show: 24
        name: Dziecięcy
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
    type: horizontal-stack
  - cards:
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_korytarz
        hour24: true
        hours_to_show: 24
        name: Korytarz
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
      - color_thresholds:
          - color: '#f39c12'
            value: 21
          - color: '#d35400'
            value: 22
          - color: '#c0392b'
            value: 22.5
        entities:
          - sensor.temperatura_lazienka
        hour24: true
        hours_to_show: 24
        name: Łazienka
        points_per_hour: 0.5
        show:
          fill: true
          labels: false
          state: true
        type: 'custom:mini-graph-card'
        update_interval: 10
    type: horizontal-stack
type: vertical-stack

Ideally, I should be able to define that large yaml once (in cards.yaml) and when I click on the plus to add new card there should be a list of preconfigured cards. This will be super useful when you want to create multiple users and give them the ability to easily configure the UI.
With centralized card configuration, there is also one big advantage - when you want to change something you must do that in a single place and all users will get an update.

The above yaml could be then rewritten to:

type: card-template
template_name: mini-graph-grid

What do you guys think? Is this something that not only I would find super helpful 😉

[bramkragten]

@Spars3Matrix this is the issue I was talking about. You can see the reordering in https://demo.home-assistant.io -> triple dot menu right top -> edit UI -> triple dot menu on a card move up/down

[wheindl]

I'd like to give a big thumbs-up to the ideas expressed here (ranking them, it would be choosing number of columns; specifying columns for a specific card; columns taking full advantage of the width of the view; and drag-and-drop.

And also my great appreciation to everyone who is working on this. You've created a great home automation solution, with a great user interface, and it's only going to get better.

[zsarnett]

#6519
#6557

[schmurtzm]

Awesome ! Looking forward the Lovelace Drag and Drop + Resize ! Thanks a lot @zsarnett for the work !

[KentuckyMC]

Nice, we got something on the move! Good to see you back zsarnett!