Lovelace is a new great addition to Home Assistant. Allowing to customize the look and usability of the user interface. On this article, I’m going to show you how to set up and configure Lovelace on Home Assistant. Also, I’m going to cover some of the different card styles that we can use to customize the web interface.
Create a Lovelace yaml file
The first thing that you need to do is create an empty file called ui-lovelace.yaml in the Home Assistant Config folder. Then restart Home Assistant to apply the changes. After Home Assistant is back online, you can access the Lovelace file to start customizing the web interface with the new card styles.
To be able to display cards in the user interface, you need to set them up in
Views which are tabs in Home Assistant. For each View, you can set up a title or an icon to represent that tab. If you only set up 1 view, the title or the icon won’t be visible unless you add 2 or more Views.
views: - title: main icon: mdi:home-outline cards:
Below the View title, enter the word
cards so you can then enter the different types of cards that you would like to display in this View. Save the changes to the file and then access the Lovelace interface by adding the word lovelace at the end of your Home Assistant URL.
One of the great things about Lovelace is that you don’t have to restart Home Assistant or reload the page every time you make changes to the UI. You just need to save the changes on the Lovelace file and then click on the Refresh option at the top right corner of Home Assistant.
The Glance card is a very useful card that allows adding multiple entities one next to the other minimizing the overall size of the card. You can also set up entities as a toggle allowing to just click on the entity icon to trigger an action. This type of card is perfect for entities like for example, switches and lights. Let me show you an example.
All right so here I have a Glance card that I set up with 3 entities to turn on 3 different lights. When you set a card, you need to define the type of card that you want to use. In this case, a Glance card. Then you can add a title for the card and the entities that you would like to display within the card. You also have the options to not display the name or the state for the entities by adding the variables
show_state and setting the value to
- type: glance title: Lights show_name: false show_state: false entities: - light.desk_light - switch.living_room_light - switch.bedroom_light
Another available option is to set up the number of columns per row using the variable
columns. By default, the number of columns is set automatically depending on the number of entities. However, you can change the total amount by using this variable. So, let’s say that for the above example with the 3 entities we wanted to set up a total of 5 columns instead of just 3, we could set it like this:
- type: glance title: Lights show_state: false # Add columns if you want a different number of columns per row columns: 5 entities: - light.desk_light - switch.living_room_light - switch.bedroom_light
Set entities as objects
Now, this is pretty much the basic way to set up a Glance card. When you click on an entity, it would provide you with more info and also a toggle to turn it on or off. Now we can define the entities as objects and add more customization to be able to change, for example, the name, icon and also the tap action. To define an entity as an object, set the entity as
entity: light.desk_light Then below it, you can add the variables,
tap_action. Save the file and refresh Home Assistant to see the changes.
- type: glance title: Lights show_state: false entities: - entity: light.desk_light name: Desk icon: mdi:desk-lamp tap_action: action: toggle - entity: switch.living_room_light name: Living room tap_action: action: toggle - entity: switch.bedroom_light name: bedroom tap_action: action: toggle
Picture Card Styles
Next, we’re going to look at the Picture card, the Picture Entity card, and the Picture Glance card. These cards, allow us to:
- Set up an image to trigger a service
- Navigate to a specific path within Home Assistant
- Set up 2 separate pictures that would represent the on and off state of an entity
- Set up an image of a room for example and add the entities within that room so we can toggle them on and off.
Before you set up any of the picture card styles, you would need to first create a new folder labeled www inside of the config folder which would be utilized to save the images. After you create that folder, you would need to restart Home Assistant, so it knows the path for the new directory. After that, anytime you add new images to this folder, you won’t need to restart Home Assistant.
All right, here I have a Picture card that I set up to turn on my desk light. I added an image that I saved to my www folder using the path
/local/ and then the name of the picture including the file extension. Then, I set up the service
light.toggle to turn the light on and off, and for the
service_data I added the entity ID for my desk light. Now, any time I click on the image, it would toggle the light on and off.
- type: picture image: /local/desk_light.jpg service: light.toggle service_data: entity_id: light.desk_light
Picture Entity Card
Now, what if we want to have 2 of the same images, one in color to represent the light when it’s on and the other one in black and white when the light is off? Well, we can use the Picture Entity Card to define what image is display depending on the state of the light. Here is how to do it.
- type: picture-entity entity: light.desk_light tap_action: action: toggle state_image: "on": /local/desk_light.jpg "off": /local/desk_light_bw.jpg
I defined the card type as a
picture-entity, for the
entity, I added the desk light, then, I set up the
tap_action and I set the
action to toggle so instead of getting the more info pop up when clicking on the image, it would just toggle the light on and off. Lastly, I defined the 2 images for the on and off state using the
state_image variable. Now, when you click on the image, it would toggle the light on and off, and the image would change to represent the specific state.
Picture Glance Card
The Picture Glance card is excellent when you want to associate multiple entities to an image. On the example above, that I set up for my living room, I added 4 entities. 1 switch, which is actually connected to a floor lamp, an actual light that is on my desk, and 2 scripts to turn on my TV and soundbar. Lastly, I added the image that I want to display on the card. Now the switch and the light would work as a toggle, and the 2 scripts would show the more-info-dialog pop-up which would allow us to execute the scripts.
type: picture-glance entities: - switch.living_room_light - light.desk_light - script.tv_power_toogle - script.soundbar_power_toogle image: /local/living_room.jpg
Now, like on the Picture Entity Card, we can set up 2 images to represent the on and off state of the light in the room. To do that, replace the
image variable with the
state_imageand define the 2 images for the on and off state. Then, below enter the
entity light that would change the image. Now anytime you toggle the living room light, the image would also change depending on the state.
- type: picture-glance entities: - switch.living_room_light - light.desk_light - script.tv_power_toogle - script.soundbar_power_toogle state_image: "on": /local/living_room.jpg "off": /local/living_room_bw.jpg entity: switch.living_room_light
There is another picture card that I’m not covering on this tutorial, and it’s the Picture Elements card. This type of card allows to set up an image of a floor plan and add icons, text, and services in different parts of the image. I would like to cover this card in more detail on a separate tutorial so if you guys are interested, let me know via social media or in the comments for the video above.
Conditional Card & Media Control Card
The Conditional card allows to only show a card depending on the state of an entity. For example, if we set up a Chromecast using the Media Control card, we can define using the Conditional card to only display the card when something is playing on the Chromecast and not when the device is off or unavailable.
Here I have this Conditional card that I set up, and under the
conditions, I enter my living room Chromecast twice. One with the
state_not set to
off and the other one set to
unavailable. Then, below I set up the card with the
media-control card and the
entityfor the living room Chromecast. So, now if the Chromecast is not off or unavailable, then the media control card for the living room Chromecast would display.
- type: conditional conditions: - entity: media_player.living_room_tv state_not: "off" - entity: media_player.living_room_tv state_not: "unavailable" card: type: media-control entity: media_player.living_room_tv
This little set up here is perfect if you have multiple Chromecast devices, Google Homes and other devices that you would only like to display in a specific state.
Now, what if we want to use the traditional card style where you have entities grouped in a list? Well, we still can do so and with a little more customization using the Entities card.
On this example that I set up for my office area, I added a light entity for my desk light, a switch to turn my computer on and off and a script to lock my computer. As we have done on other cards, we can also define the entities in here as objects and be able to change the name and the icon.
- type: entities title: Office show_header_toggle: false entities: - entity: light.desk_light icon: mdi:desk-lamp - switch.computer - script.pc_lock
For entities like scripts, where you get the EXECUTE button, we can now change the button label to something else by using the
For example, the script to lock my computer, we would define the type as a
call-service. Add a name and an icon for the entity. Then to customize the button label, we would add the variable
action_name and set the value to whatever we would like the label to be. Then we need to add the
service and the
service data that we want to trigger. In this case is a script so we would add the same entity Id for the service and the service data. Lastly, save the file and refresh Lovelace and the script would now look like this.
- type: entities title: Office show_header_toggle: false entities: - entity: light.desk_light icon: mdi:desk-lamp - switch.computer - type: call-service name: PC icon: mdi:lock action_name: Lock service: script.pc_lock service_data: entity_id: script.pc_lock
Entity card – Dividers and Weblinks
Other elements that we can use with the Entities card are dividers and also weblinks. To add a divider, you can simply add
- type: divider
Now, by default, the divider is set to 1px, and it uses the secondary text color in the current theme. You can customize this by using the
style variable and changing the
height and the
- type: divider style: height: 2px background-color: “#B3B3B3”
To add a Weblink, you can enter the following and customize the name and the icon for the specific URL.
- type: weblink name: JuanMTech icon: mdi:link url: https://www.juanmtech.com - type: weblink name: Home Assistant page icon: mdi:home-assistant url: https://www.home-assistant.io/
Entity Filter Card
Similar to the way we used the Conditional card earlier, we can set up entities that would only show on a specific state. This card style is perfect for when you want to track lights that were left on or to show a list of people only when they are home.
So here I added my lights to an Entity Filter card and I set it as the first card on my main View so like that the first thing that I see when I open Home Assistant, is the lights that are currently on. Like other cards, we can define the entities as objects and customize the name, icon and the tap action. Then below, I added the
state_filter, and I set it to
on so the entities only show when they are on. I also added the
show_empty variable set to
falseso like that the card only shows when the lights are on. Now, by default, this card uses the Entities card style, but I changed it to use the Glance card instead, by defining the card type below, and I also added a title.
- type: entity-filter entities: - entity: light.desk_light name: Desk icon: mdi:desk-lamp tap_action: action: toggle - entity: switch.living_room_light name: Living room tap_action: action: toggle - entity: switch.bedroom_light name: Bedroom tap_action: action: toggle state_filter: - "on" show_empty: false card: type: glance title: Lights currently on
Now, any time my lights are turned on, a new card would pop up at the top of Home Assistant showing the current lights that are on.
Vertical Stack and Horizontal Stack Cards
These cards, allow us to group multiple cards vertically or horizontally so like that the cards always stay together in the same column or next to each other within the space of a column.
In this example, I set up a Vertical Stack that contains 1 Markdown card, which allows us to add custom text so we can use it as a title. Then I set up a Horizontal Stack with 4 Glance cards with 1 entity each. And then, I set up another Horizontal Stack for the second row that contains another 4 Glance cards. Now, each Glance card is set up to not show the name or the state and also to act as a toggle so you can quickly just click on the icon to trigger the entity.
- type: vertical-stack cards: - type: markdown content: > ## Living room TV - type: horizontal-stack cards: - type: glance show_name: false show_state: false entities: - entity: script.tv_power_toogle tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.cable_power_toogle tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.soundbar_power_toogle tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.lr_tv_volume_up tap_action: action: toggle - type: horizontal-stack cards: - type: glance show_name: false show_state: false entities: - entity: script.cable_input tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.chromecast_input tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.switch_input tap_action: action: toggle - type: glance show_name: false show_state: false entities: - entity: script.lr_tv_volume_down tap_action: action: toggle
Set up Lovelace as default
The last thing that I want to show you today is how to make the Lovelace UI be the default interface when you open Home Assistant. To do that click on info under the Developer tools, then click on Set Lovelace as the default page on this device. Now, anytime you open your home Assistant without adding the word lovalace at the end of the URL, it would automatically redirect you to the Lovelace page.
Another thing that you need to have in mind is that you would need to do this steps on all the devices that you access Home Assistant.
All right, guys, so there is a lot more to cover for the new Lovelace UI like for example custom cards that the Home Assistant community has made available. So if you guys would like to see a part 2 for this tutorial, definitely let me know via social media or in the comments on the above video and also let me know what custom cards you would like me to cover.
I have my Home Assistant configuration on GitHub, so if you would like to check it out and get some ideas for your setup, you can check it out here.
WANT TO SUPPORT JUANMTECH?
You can do so now on Patreon and Buy Me A Coffee