Readme.md

Lovelace UI - 0.73.0

Use 0.73.0 branch for stable version docs

Please follow official docs and developer docs for Lovelace UI.

Cards

Cards are the smallest unit of organisation, and provide a great setup to group functionality.

• entities
• entity-filter
• glance
• history-graph
• horizontal-stack
• iframe
• markdown
• media-control
• picture
• picture-elements
• picture-entity
• picture-glance
• plant-status
• vertical-stack
• weather-forecast

Views

These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep links like /lovelace/0. You can also assign your own custom ids.

• Using custom id in view, for nicer navigation paths in URLs
• Using icons for tabs instead of text
• Using a card to fill a complete view, just like panels
• Using themes in views

Name	Type	Default	Description
title	string	Optional	Text title of the view
id	string	number	The id to use in URL path of this view
icon	string	Optional	The material design icon for the view, uses this instead of title
panel	boolean	false	Marks view as a panel reusing the first card in list

Make Lovelace default

To make the Lovelace UI the default dashboard view use one of the methods below.

Using UI

Click the >> Set lovelace as default page page on this device << in dev-info panel to make Lovelace the default interface when visiting /.

Overview binding

This is a hack that will bind /lovelace to Overview option in the menu instead of /states using javascript. It will also set default dashboard for / using the same mechanic as Using UI method.

1. Create a new file under your config/www folder and name it lovelace.html

Content of lovelace.html

<script>
    var hack_element = document.querySelector('home-assistant').shadowRoot.querySelector('home-assistant-main').shadowRoot.querySelector('ha-sidebar').shadowRoot.querySelector('paper-icon-item[data-panel="states"]');
    if (hack_element) {
        hack_element.setAttribute("data-panel", "lovelace");
        localStorage.defaultPage = 'lovelace';
    }
</script>

2. Tell Home Assistant to load this file by referencing it inside your configuration.yaml

Example configuration:

frontend:
  extra_html_url:
    - /local/lovelace.html

3. Restart your Home Assistant and force a clear cache on your browser and a few force reloads on IOS app
4. [Optional] To view the old dashboard just navigate to /states

Debugging

To see what entities you left out, you can now use the menu Unused entities in the header of Lovelace, the top right corner.

Monster card

Due to popular request, a new custom card is now available ("monster card") to achieve similar results as the previous entity-filter. The rebirth of entity-filter from 0.72.

views:
- icon: mdi:settings
  id: debug
    cards:
      - type: "custom:monster-card"
        card: 
          type: glance
          title: My lovely card
        filter:
          include: [{}]
          exclude:
            - domain: group
            - domain: zone

Examples

To get you started you can use the demo platfrom in your configuration.yaml and experiment with the various examples inside card docs.

Other examples:

• ui-schema repo used by devs
• arsaboo own setup

Migration scripts

Thare are two migration scripts:

The scripts might not be up to date with 0.73.0 on release day. Please be patient.

• Thanks to @OttoWinter for the migration script
• Thanks to @dale3h for the migration script that works also for packages