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.

https://yourdomain.duckdns.org/lovelace

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.

 

Glance Card

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_name or show_state and setting the value to false.

- 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: columns: 5

- 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, name, icon or 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.

 

Picture Card

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.

 

Entities Card

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 call-service element.

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 background-color values.

- 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.