New Default Lovelace Experience

[zsarnett]

(This is all based on a Google Doc from @balloob, I am simply writing it up in a discussion)

With Lovelace, a Default Dashboard that was Auto-Generated was introduced. This Auto-Generated strategy was based on the old States UI. Since then, we have been tweaking the Auto-Generation Strategy by removing unwanted entities. But this is still too much on a single view. Any user that is going use Home Assistant seriously and use Lovelace as a dashboard is forced to take control and create their own dashboard.

This Discussion describes a proposal to fix this:

The new default strategy

This new strategy will create a main Overview Dashboard view as well as a view per area. The main Overview Dashboard will help the user navigate to the other Area Views as well as give them a glance at the state of their home.

Things we do not want to do for the new strategy:

• Show all entities

  • Showing all entities is too overwhelming and is not useful. We should prioritize what entities are the most important that will show the main points of the user's home.

• Use Badges

  • Badges never scale well and can lose useful information. If the badge element is used, it should not be above all cards but be used as a card

Overview Page

The Overview page will be a glance at the state of the user's home. The view will show areas and a glance of each as well as showing their favorite entities in a grid-like structure. The view will not have a title but an icon (like mdiHome).

The page will be structure as so:

• Favorite Entities

  • Favorites will be shown on top in a new grid card. Two entities per row. Sensors will be rendered in a sensor card.

• People and their status

  • People will be shown in the grid card in a new Person Card. This will be a card per person.

• Areas

  • Areas will be summarized in a Picture Glance card. Tapping the card will go to the tab for that area. If media is playing, show the media are in the picture glance.

• Weather

  • Weather will be displayed in the weather card with the forecast hidden.

• Admin Cards

  • This can be many things that are important for admins. Example: New Integrations, notifications, etc

Cards outside of the grid card will use the current method of placing cards in the shortest column.

Area Views

The area view will focus on showing the state of an area.

The page will be structure as so:

• Sensors will be shown in the most right column of the view
• Device entities will be shown in a single card
• Helpers will be shown in a single card
• Scripts will be shown as actions. Possibly under sensors
• Automations will be shown in an entities card. Only showing automation that will impact the area.

What we need to make this happen

• Strategies

  • It’s too expensive to generate this all on the fly so we just have a basic strategy that will calculate exactly what is needed when we show it. Implementation Proposal

  • We will add a new “views strategy” to generate different views with each of their own strategies. We will add an “area overview” strategy and an “area view” strategy

  • This is the most important part. We should implement this to re-create what our current strategy is today before creating the new strategy.

• Person Card

  • This will be a square/rectangle card that can show the state of the person, including the battery level of their phone. Person Card Mock up

• Grid Card Add Grid card #7476

  • Vertical + Horizontal Stack in one. It will place cards in a grid by column and then row. The height of each contained card can be equal to the width of the card or a certain max height.

• Taking control at Dashboard level and view level

  • Take control can now be decided to be done at each level that has a strategy. If you take control over the tabs, it will no longer update when you add/remove an area and it allows you to take control of each individual tab.

  • Need to make the process and UX for this really good to avoid confusion

• Ability to add entities to the area registry (backend) Add area id to entity registry core#42221

  • It is important that we can put as much in areas as possible. Internal entities have no device, so this will solve that. Also solves device having entities in different rooms (Like a Shelly 2).

• Adding entities as Favorites (backend)

  • Done in the entity registry

• Find which areas an automation is a part of (backend)

  • Extract entities from automation to detect area they are part of and cache them

Nice to have

• Ability to upload an image for an area. Done from the Overview Dashboard
• Update the Demo to use this new strategy

Other thoughts

• We could have a navigate button that navigates back to the Overview Page. We wouldn't need a title/tab bar at all
• Pre generate the Lovelace Overview in the backend? Faster loading times

[iantrich]

How does the Grid Card play into this?

[balloob]

To render favorites in the overview strategy. Using a grid we can show more entities compared to rows when using buttons / sensor cards.

It would be a card that is leveraging CSS grid.

[Misiu]

@zsarnett are the mockups and the google docs available online?
@balloob posted a mockup of config redesign here: #6578, but personally, for me, it is hard to select a feature I'd like to help to implement because I don't know what look I should target.
Lovelace has changed a lot lately, but I don't know what changes are planned, what UI changes are coming, what is "the vision".

Do you guys have publicly available mockups? For example for developer's tools.

[zsarnett]

https://www.figma.com/file/4LZqQZRynDZGTgA2rN35Te/Home-Assistant-config-mockup

[balloob]

That mockup has nothing to do with this topic though.

The content of the Google Doc is the body of the first post.

[balloob]

This is already possible. Go to config -> Lovelace dashboards.

[balloob]

Here is a beautiful custom Lovelace config by @dmatik that is similar to what we had in mind: https://github.com/dmatik/homeassistant-config . I especially like that:

• icons are not a single color, but only parts of it are colored
• Each type of entity has a slightly different card with unique info, but still icon/name remains static for uniform view.

[dmatik]

Already have the light color theme for this....