Lovelace UI released!


#1

Today we’re happy to announce that our new Lovelace UI, which has been in beta for the last 8 months, is becoming the new default interface of Home Assistant 0.86. With Lovelace we’re taking a new approach to building user interfaces for Home Assistant. We’re no longer storing the look and feel of your UI in your configuration.yaml, requiring restarts for changes. With Lovelace we’re keeping the UI concerns in the UI1, unlocking a whole new set of features:

  • 24 cards to place and configure as you like.
  • UI Editor. A configuration UI to manage your Lovelace UI including live preview when editing cards.
  • Fast. Using a static config allows us to build up the UI once.
  • Customizable.
    • Cards have numerous options to configure how your data is presented.
    • Themes; even at a per card basis.
    • Ability to override names and icons of entities.
    • Custom Cards from our amazing community are fully supported.

In case you’re reading this and want to give it a try right now: we’ve updated the Home Assistant demo. It now features multiple Lovelace configuration examples. The demo is fully interactive, including the configuration UI (accessible via the menu in the top right). You can also access it by updating to Home Assistant 0.86.

For a deep dive into all the new features, check out the latest episode of the Home Assistant podcast, featuring an interview with Zack Arnett from the Lovelace team.

1: If you prefer YAML, Lovelace also includes a YAML mode that supports the use of !include and !secret.

History

With Lovelace we’ve built a foundation that not only provides a lean and sleek interface, but will also allow us to add many new exciting features in the future. The main difference with the old UI is that we no longer store any UI concerns in the state machine.

When Home Assistant was started, I came up with an algorithm that would automatically organize the available entities in badges, cards and tabs; and then show that on the screen. Users demanded more influence; so over time, we’ve added a bunch of components and features of the backend whose main or sole purpose were to influence how the algorithm in the UI shows and organizes entities.

As this kept growing, I realized that we were on the wrong path. It was impossible to get an algorithm that would fulfill all needs and the backend shouldn’t be aware of anything in the frontend. It should just deliver the entities and the frontend should figure out how to display things together with the user.

At the same time as this was happening, we also had some discussions about the development of the frontend. Users wanted more control on what is shown, when it’s shown and how it’s shown. Eventually, @andrey-git came up with Custom UI for the old interface. This allowed users to do whatever they wanted. However, it was limited to power users.

Lovelace was built from the start to tackle these problems. The initial version completely dropped the algorithm and required users to add each card to their configuration. We went from a fully automatic UI to nothing. We launched it under the nomer “experimental UI” and it quickly gained traction. People loved the control and the ability to inject custom cards or entity rows at will.

The enthusiasm was great among our power users, however by switching away from an automatic UI, we were no longer beginner-friendly. A new user would open Home Assistant and they would see a blank, unconfigured UI. We realized that this had to be solved if we were to make Lovelace the default.

To solve this, we re-introduced our automatic algorithm. However, this time the algorithm generates a Lovelace configuration. If a user doesn’t like the automatic configuration, they can take control and configure it to their liking. When you take control, the automatic generated configuration will no longer be updated by Home Assistant, allowing the user to change each detail.

To make configuring your UI as easy as possible, Lovelace UI allows (custom) cards to include a config editor. This way the user will be able to quickly edit a card while a live preview shows how the changes look. If a card does not include an editor (yet), the user will be presented with a text editor in the browser.

Because of the ease to customize and share customizations, we’ve already seen a big community get created around Lovelace. They are very active in the #lovelace channel on our chat, and work is shared on ShareTheLove.io and the Lovelace section on Awesome HA.

Credits

Lovelace UI has been 8 months in the making and it has been a big undertaking. We’ve worked hard and are proud of being able to ship this first version. Lovelace UI would not have been possible without the following current and former members of the Lovelace team:

I also want to thank the community for adopting this so eagerly, building a ton of helpful tooling and examples and helping one another to create beautiful UIs for their homes.

Old UI

The transition to Lovelace should be painless for most users. If you are encountering issues, please let us know. For the time being, you will be able to still change back to the old user interface on a per-device basis by going to the info developer tool and following the instructions.


This is a companion discussion topic for the original entry at https://www.home-assistant.io/blog/2019/01/23/lovelace-released/

#2

The lovelace UI is defaulting to spanish


#3

It picks up your browser default, just like the previous layout. Can be changed on the profile page.


#4

¡esto es grande! ¡¡¡Gracias!!!


#5

Great stuff! Just curious, how do you go back to the automatic UI configuration after you’ve “taken control?”


#6

I can’t press on the title of a group to control all the lights I had in that group simultaneously anymore. Nothing at all is happening and I have to adjust each light manually instead.

I noticed that when checking out lovelace sometimes in the past but just went back to the old ui instead of posting about it then.


#7

https://demo.home-assistant.io/ is straight broken in my Firefox browser: “TypeError: window.customElements is undefined”


#8

I noticed this as well, last time I tried Lovelace. It’s what has kept me from using it. I hope there’s already a solution I’m not seeing, or that it gets implemented soon by any of you lovely people. :heart:


#9

testing Lovelace, but must conclude it still cant do many of the customizations regular HA did, combined with the aforementioned custom-ui @andrey made.

So, Im still using that, but last few iterations keep degrading that custom-ui further. I’ve been forced to stop at 84.3 because of issues and unsupported customizations caused by the new Ha version for regular HA. @andrey has updated custom-ui, but still several (important one’s) of these aren’t available any longer. Not talking Lovelace (where more dont work) but regular (you probably call it legacy now…) HA

_stateDisplay can’t be customized, anymore, And it would really be very nice if that would come back… extra badges, theming per entity (lovelace) to name but a few…


#10

Upgraded to 86 last night and having a few issues. My groups.yaml is not loading. My harmony remotes and individual activity switches I created are all missing as well… Here are the errors I am getting now…

Failed to connect, retrying in 5.0s
2:23 AM /usr/local/lib/python3.6/site-packages/pychromecast/socket_client.py (ERROR)
Error communicating with socket, resetting connection
2:23 AM /usr/local/lib/python3.6/site-packages/pychromecast/socket_client.py (WARNING)
Error reading from socket.
2:23 AM /usr/local/lib/python3.6/site-packages/pychromecast/socket_client.py (ERROR)
Heartbeat timeout, resetting connection
2:09 AM /usr/local/lib/python3.6/site-packages/pychromecast/socket_client.py (WARNING)
Setup failed for remote: Could not set up all dependencies.
January 23, 2019, 10:11 PM setup.py (ERROR)
Unable to set up dependencies of remote. Setup failed for dependencies: group
January 23, 2019, 10:11 PM setup.py (ERROR)
Setup of platform denonavr is taking over 10 seconds.
January 23, 2019, 10:11 PM util/async_.py (WARNING)
Receiver sources list empty. Please check if device is powered on.
January 23, 2019, 10:11 PM components/media_player/denonavr.py (ERROR)
Getting renamed and deleted sources failed.
January 23, 2019, 10:10 PM components/media_player/denonavr.py (ERROR)
No connection to /goform/AppCommand.xml end point on host 192.168.1.72
January 23, 2019, 10:10 PM components/media_player/denonavr.py (ERROR)
Error while setting up platform firetv
January 23, 2019, 10:10 PM components/media_player/firetv.py (ERROR)
Setup failed for device_tracker: Could not set up all dependencies.
January 23, 2019, 10:10 PM setup.py (ERROR)
Unable to set up dependencies of device_tracker. Setup failed for dependencies: group
January 23, 2019, 10:10 PM setup.py (ERROR)
Setup failed for switch: Could not set up all dependencies.
January 23, 2019, 10:10 PM setup.py (ERROR)
Unable to set up dependencies of switch. Setup failed for dependencies: group
January 23, 2019, 10:10 PM setup.py (ERROR)
Setup failed for script: Could not set up all dependencies.
January 23, 2019, 10:10 PM setup.py (ERROR)
Unable to set up dependencies of script. Setup failed for dependencies: group
January 23, 2019, 10:10 PM setup.py (ERROR)
Setup failed for automation: Could not set up all dependencies.
January 23, 2019, 10:10 PM setup.py (ERROR)
Unable to set up dependencies of automation. Setup failed for dependencies: group
January 23, 2019, 10:10 PM setup.py (ERROR)
Setup failed for group: Invalid config.
January 23, 2019, 10:10 PM setup.py (ERROR)
Invalid config for [group]: Entity ID binary_sensor.guest_bedroom__nest_protect_online is an invalid entity id for dictionary value @ data['group']['nest_protect_guest_bedroom']['entities']. Got ['binary_sensor.guest_bedroom__nest_protect_online', 'sensor.guest_bedroom__nest_protect_battery_health', 'sensor.guest_bedroom__nest_protect_co_status', 'sensor.guest_bedroom__nest_protect_smoke_status', 'sensor.guest_bedroom__nest_protect_color_status'] Entity ID media_player.roku__theater is an invalid entity id for dictionary value @ data['group']['basement_view']['entities']. Got ['group.nest_protect_basement', 'group.bsmt_harmony_hub', 'media_player.roku__theater', 'media_player.denon_avrx6300h']. (See /config/configuration.yaml, line 194). Please check the docs at https://home-assistant.io/components/group/
January 23, 2019, 10:10 PM config.py (ERROR)
Setup failed for cloud: Invalid config.
January 23, 2019, 10:10 PM setup.py (ERROR)
Invalid config for [cloud]: Entity ID media_player.roku__theater is an invalid entity id for dictionary value @ data['cloud']['alexa']['filter']['exclude_entities']. Got ['group.nest_protect_entryway', 'group.nest_thermostat_kitchen', 'group.nest_protect_office', 'group.nest_protect_dining_room', 'group.nest_protect_hallway', 'group.nest_thermostat_master_bedroom', 'group.nest_protect_master_bedroom', 'group.nest_protect_guest_bedroom', 'group.nest_protect_landing', 'group.nest_protect_basement', 'media_player.denon_avrx3300w', 'media_player.denon_avrx6300h', 'media_player.kitchen_tv', 'media_player.living_room_tv', 'media_player.master_bedroom_speaker', 'med.... (See /config/configuration.yaml, line 108). Please check the docs at https://home-assistant.io/components/cloud/
January 23, 2019, 10:10 PM config.py (ERROR)

#11

After upgrade my Hass looks exactly the same, no lovelace gui. Wasn’t this update set it as default automatically? Yes I have cleared cache and also run incognito.


#12

@ balloob
Chrome is set to English as the default and when i updated to .86 Lovelace was set to Spanish. I am able to change it, i just don’t know why it would have changed itself.


#13

Will be possible in the next version.


#14

Update FireFox :slight_smile:


#15

That’s the beauty of Lovelace, you can now customize everything you want with custom components. What can’t be done with Lovelace that can be done with custom_ui? The community might not have built it yet, but it is possible.


#16

well that’s a big promise… don’t want to be a Don Quichot, so Im going with Lovelace, which of course isnt ready yet being the default interface, but even that I can justify, loving the experiment and progress to be as I do. (not to the other half though who just hates the constant refreshing pages).

Id love to have this kind of theme templating in Lovelace, and get the _stateDisplay back in regular HA…

device_tracker.*macbook*:
  templates:
    theme: >
      if (state === 'home') return 'green';
      return 'grey';
    _stateDisplay: >
      if (state === 'home') return 'On';
      return 'Off';

for now My default is still regular HA, and would love for the devs to stop deprecating custom-ui possibilities further on each update. Or at least offer some alternative options.


#17

Sadly I don’t control my corporate desktop browser versions :wink:


#18

I agree with you.
Lovelace is interesting but also a downgrade since you can’t use all the excellent features in custom-ui (@andrey): context-aware attributes, badges in state cards, extra badges per entity, per entity theming/templating, extra data template, hiding controls, confirmable controls etc. Many other custom components don’t work with Lovelace.
Also why are the notifications hidden? If something is wrong I want to see it fast.


#19

How is the order of the views changed within the UI editor?


#20

After upgrade to 0.86 Lovelace becomes default page, when I click on Configure UI, I get this message:

The edit UI is not available when in YAML mode.