"Lovelace UI": what the frontend is and how it works Home Assistant

4 minutes of reading

As you know well who has been using for a long time Home Assistant - perhaps the best known among the personal HUBsoftware - user interface (UI) is the tool in charge both to query the profirst personal home automation (eg read the value of a sensor) both to control it in the most disparate ways. This interface is essentially web-based and can be approached either through a traditional browser or through app: it is in fact a web interface responsive, that is able to adapt to the display medium.

Before that, from the version 0.86 of Home Assistant, the new interface was officially introduced, the configuration of Home Assistant was also responsible for the behavior of the user interface. The introduction of the new interface, code name LOVELACE, introduced a whole series of novelties of extreme importance.

First, the most relevant novelty lies in the choice (sacrosanct) of uncouple the configuration of theHUB from its interface. In practice, from the introduction of Lovelace one thing is the configuration of theHUB (on which we have spent on many different aspects), another one its user interface. The definition of the latter is now completely independent of the configuration of theHUB, thus opening up they are not to a greater clarity, but also to a series of additional functions initially not foreseen.

Home Assistant - lovelace-ui-comparison
the previous functional modelnamento (left) and the new (right).

This new functional modelnameAs mentioned, it has opened up to a whole series of new features, starting from the concept of "Card".

CARD

The "Card”Are dozens of pre-set templates that allow you to view, at the frontend, the most disparate information relating to specifications entity or groups of, as well as providing the user with the tools to act actively on domotics (eg. command something).

Home Assistant Lovelace UI presents dozens of different "Card”Which allow the user to customize the appearance of the interface. To give an example, one of the most classic is the one dedicated to lights:

Home Assistant - lovelace_light_card

In the example above it is possible apprezzare the rappregistration at the frontend of two type entities "Light"; as it is easy to guess, not only is it possible to turn on / off the light, but also to regulate its intensity (obviously the entity rappresentata must foresee it of his own).

Furthermore, the Lovelace specifications allow defining proprie rappgraphic resentations, defined "Custom Card": This gave birth to a lively one proproduction of Card Custom made available by the community. Develop these Card it's possible following the directions provided by the development team of Home Assistant.

The genius of "Card"And" Custom Card"Lies in the fact of foreseeing, in itself, variables and methods, which allow you to customize the behavior of the graphical interface very precisely; however, it is important to remember how these automatisms / customizations refer alone to the scope of the interface and not to the functionnameof theHUB true and profirst, who is not aware of acdare it happens on its graphic interface (for the reasons related to the decoupling described above).

THEMES

In addition to "Card", Lovelace gives the user an additional possibility, namely to customize the graphic theme of the environment: colors, shades, backgrounds are the elements on which it is possible to act in order to make Home Assistant closer to profirst taste.

CONTROL

As mentioned, Lovelace is present as a default interface starting from the 0.86 version of Home Assistant e prosees, autonomously, to self-configure based on the availability of different entities present on theHUB, which simplifies the adoption of theHUB. No need to do anything: what is integrated with Home Assistant appare, using the cards appropriate, on the frontend.

Once familiar with theHUB, access the Lovelace interface customization it's particularly simple: it is sufficient to press sui three dots in the upper right corner present on the interface and click on "Configure user interface".

This way you will get access to the interface editor ("UI Editor") which allows you to visually change the contents, layout and behavior of the Card present on the frontend. In this phase it is possible to click again on the three dots to access two possible views:

  • the list of unused entities (at the frontend);
  • the raw configuration editor.

The latter is useful for viewing the combined version of the current Lovelace configuration in text format in notation YAML, notation with which the user will already have a certain familiarity, since it is the one used also for the ordinary configuration of theHUB. This view allows you to make changes in a textual way and, for theappgreasy, raw, by users who no longer apprezzino this mode compared to the graphic one.

Examples

Let's look at a couple of examples to understand how Lovelace works.

Entity groups

A classic use of Lovelace is to group multiple entities, for example lights.
Once opened the interface editor as explained before, we will add a "Card"Selecting"Entities"

Home Assistant - Lovelace - Entities

At this point the interface will open a virgin panel of the chosen type:

Home Assistant - Lovelace - Entities - Added list

in which we will indicate a title (optional) e one or more entities, in the list, to then end with "salvo"

Home Assistant - Lovelace - Entities - Added list - 2

The resulting panel will appear as follows:

Home Assistant - Lovelace - Entities - Added list - 3

which can now be used for the control and census of the states of the entities "Light”Indicated.

Thermostat

Let's look at one of the more cards apprezzate, the one that allows you to view and check the status of a thermostat. Let us assume that we have in fact integrated a climate system (in the example, a traditional integrated air conditioner thanks to "SmartIR Climate”).

Once opened the interface editor as explained before, we will add a "Card"Selecting"Entities"

Home Assistant - Lovelace - Thermostat

At this point the interface will open a virgin panel of the chosen type:

Home Assistant - Lovelace - Thermostat 2

in which we will indicate a name (optional) e the entity to be controlled to end with "salvo"

Home Assistant - Lovelace - Thermostat 3

The resulting panel will appear as follows:

Home Assistant - Lovelace - Thermostat 4

which can now be used for the control and census of the states of the entities "Climate”Indicated.

Overview: alarm systems, home automation and Home Assistant



Please comment below