On today's video I'm going to show you how to set up and configure Lovelace on
Home Assistant I'm also going to cover some of the different card styles that
we can use to customize the web interface all right let's jump
right into it
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 a tab if you only setup one view the title or the icon
won't be visible unless two or more views are added below the View title
enter the word cards so you can then enter the different types of cards that
you would like to display on this view save the changes to the file and then
access the Lovelace interface by adding the word loveless 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 okay the first
car that we're going to look at is a glance car which is a very useful car
allowing to add multiple entities one next to the other minimizing the overall
size of the car you can also set up entities as a toggle allowing to just
click on the entity icon to trigger an action this is perfect for entities like
for example switches and lights let me show you an example alright so here have
a glance card that I set up with three entities to turn on three different
lights when you setup a card you need to define the type of car that you want to
use in this case a glance car then you can add a title for the card and the
entities that you would like to display within the car you also have the option
to not display the name or the state for the entities by
the variables show name or show state and setting the value to false another
available option is to setup the width and the number of columns per row by
default the width is set up to 20% with a total of five columns but because I
only have three entities in this example I can change the width to 100% with a
total of three columns using the following value 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 and 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 follow then below it you can add the variables name
icon or tap action save the file and then refresh home assistant to see the
changes next we are going to look at the picture card the picture entity card and
the picture glance card with these cards we can set up images to trigger a
specific service to navigate to a specific path within home assistant to
set up two separate pictures that will represent the ordinal state of an entity
and we can also set up an image of a room for example and add entities within
that room so we can toggle them on and off
now before we set up any of the picture card Styles you will need to first
create a new folder label www inside the config folder which will be utilized to
save the images after you create a folder you will need to restart home
assistant so it knows that the new directory was created after that anytime
you add any new images to this folder you wont need to restart Home Assistant
all right here 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 that toggle to turn the light on and off and for the service
data I added the entity ID for my desk light now anytime I click on the image
it will toggle the light on and off now what do we want to have two of the same
images one in color to represent the light one is 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 to display depending on the state of the light
here's how to do it I define the card type as a picture entity for the entity
I added a desk light then I said at the tab action as a toggle so instead of
getting the more info pop-up when clicking on the image you will just
toggle the light on and off and lastly I divided two images for the On and Off state
using the state image variable now when you click on the image you would toggle
the light on and off and the image will change to represent a specific state
next let's look at the picture glans car which is excellent when you want to
associate multiple entities to an image here I have an example that I set up for
my living room area which I added four entities one switch which is actually
connected to a floor lamp an actual light that is on my desk and two scripts
to turn on my TV and soundbar and 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 two
scripts will show the more info dialog pop up
which would allow us to execute the scripts now like on the picture entity
card we can set up two images to represent the On and Off state of the
light in the room to do that replace the image variable with the state image and
define the two 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 there is another picture card that
I'm not covering on this video and it's the picture elements car this type of
car 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 car in more detail on
a separate video so if you guys are interested let me know in the comments
below alright now let's look at the
conditional car and the media control car the conditional car allows to only
show a car depending on the state of the 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 now
when the device is off or unavailable here I have a conditional card that I
set up and under the conditions I enter my livingroom chromecast twice one with
the state_not set to off and the other one said to unavailable then below I set
up the card with the media control card and the entity for 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 this little setup here is
perfect if you have multiple chromecast devices Google homes and other devices
that you would like to display only on a specific state now why do we want to use
a traditional card style where entities are grouped together in a list well we
still have the ability to do so and with a little more customization using the
entity's card on this example that I set up for my office area I added a light
entity for my desk a switch to turn my computer on and off and a script to lock
my computer as we have done on all the cards we can also define the entities in
here as objects and be able to change the name and the icon 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 this script to lock
my computer I can set it as follow 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 will 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 then refresh Lovelace
and the script would now look like this other elements that we can use with the
entities car are dividers and also weblinks
to add a divider you can simply add the following now by default the divider is
set to 1 pixel and it uses a secondary text color in the current theme you can
also customize this by using this style variable and change the height and the
background color to add a web link you can enter the following and customize
the name and the icon for the specific URL now let's look at the entity filter
card similar to the way we use the conditional car earlier we can set up
entities that would only show on a specific state this car is perfect when
you want to track lights that were left on or to show a list of people only when
they're 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 all the cards we can
define the entities as objects and customize the name icon and the tab
action then below I added the estate filter and I set it to on so the entity
is only shown when they're on I also added a show empty variable set to false
so like that a car only shows when the lights are on now by default this card
uses the entities called style but I change it to use the glance card instead
by defining the car type below I also added a title and a specify the width
and the number of columns per row now anytime a lights are turned on a new
card will pop up at the top of home assistant showing the current lights
that are on next we are going to look at the vertical stack and the horizontal
stack cards this cards allow us to group multiple cars together vertically or
horizontally so the cards stay together in the same column or next to each other
within the space of column in this example I set up a vertical stack that
contains one marked down card which allow us to add custom text so we can
use it as a title then I set up a horizontal stack with four glance cards
and then I set up another horizontal stack for the secondary row that
contains another four 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 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 home
assistant without adding the word lovelace 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 will need to do these steps on all the devices
that you access home assistant otherwise you're gonna get the old set up alright
guys so there's a lot more to cover for the lovelace UI like for
example custom cars that the home assistant community has made available
so if you guys would like to see part 2 for this video definitely let me know in
the comments below also let me know which custom cars you would like me to
cover anyway guys thank you for watching if you like this video give it a thumbs
up don't forget to subscribe if you haven't done so already and I will see
you in the next video