In this video I'm going to show you how to make a network overview screen for
your Lovelace. Make sure you stick around and if you like what you see make sure
you hit subscribe below so you don't miss out on future videos.
Hi I'm Will from Will Surridge Tech, and today we're going to create a network
overview screen so you can see, at a glance, which parts of your smart home
are, and aren't connected to your network. You may have seen my overview screen
before, but since upgrading to the new HACS it all broke, so I thought I'd
rebuild it and show you how you can do the same. We'll start by adding a new
device tracker using a network mapper. We'll then add a new Lovelace screen for
our network, with a list of all the icons, a conditional card, and some suitable
graphs. And if you stick around until the end I'll show you how you can use node-red
to notify you if one of your devices goes offline. To start with we're going
to go to our configuration file and add a new device tracker. As you can see I've
got mine referenced elsewhere. This is going to be an nmap_tracker which
tracks all the devices attached to your network. We need to make sure we change
the host to our IP address of our router, and then we can restart Home Assistant.
This should have created a new file called known_devices. In here you'll see
a list of all the devices that have been connected to your network - the new ones
will be at the bottom. These may be named using their MAC addresses so you might
need to look these up and replace the names with something more suitable here.
You can also add an icon to your devices if you wish. We need to have some add-ons
installed from the HACS store. We're going to need the layout card, the
mini graph card, and the button card. Once you've done that you need to head over
to your Lovelace file. We're going to create a new view. I'm going to add mine
in a separate file and reference it here but you can just add your view at the
bottom of this file if you prefer. In our new view we need to add an icon and a
path as usual. Our first card is going to be a vertical stack, everything's going
to be inside this so it's going to keep things nice and neat. Next we're going to
have the layout card, again this is here to keep things neat later on, it also
allows us to break our vertical stacks when we need to. I'm going to split my
entities into various categories and I want a relevant background image for
each one. I just found these images online, and I'm going to head into my
photo editor to dull them down a bit. I'm reducing the contrast the saturation and
the exposure to make them almost grayscale but they still remain a little
bit of colour. We also need to make sure they're cropped to the same size so they all
line up later on. We now need to export these and add them
to our Home Assistant. We can either do this over the network or using the file
editor. In our first vertical stack we're going to add a new picture elements card.
This will be our first group of entities. For each entity we're going to give it a
separate custom button card using a template we have in our main Lovelace
file. Because of this template, all we need to enter for each entity is the
entity ID and the position, using the top and left percentages. The template is
basically just for styling - it'll create a white circle with the icon in it and
then the name below. The icon will change from red if it's away or green if it's
connected to the network. You may need to change the values of these states if
your device tracker spits out different values. We can reuse these six lines of
codes for each of the entities in this group, we just need to change the entity
ID and the position. Once we're happy we can save it and head over to Lovelace to
see what it's going to look like. If we keep doing this for all our different
groups we're going to end up with one long line of images, so you might want to
split it up. We can use a break feature and then start a new vertical stack. We
can repeat this process using different images and different entities for our
different groups. As we add more groups of devices we can start to see what this
view is going to look like. I'm now going to add a conditional card. I'm using this
for my Christmas lights I know that most of the year these smart plugs are going
to be sitting in a box and so aren't going to be connect to the network. But at the
flick of an input boolean I want to be able to see this card and see when
they're connected or not. We can then add the picture entities and the entities
themselves using the button card as we would with all the other groups. The last
thing we're going to add is some graphs. We're going to use the mini graph card
and a horizontal stack to display three graphs in a row. In my first row I'm
going to display the disk, the processor, and the memory usage of my raspberry pi.
And then in the second row I'm going to display my network information - my upload
speed, my download speed, and my ping. I have my graphs displaying all the data
for the last seven days using data points every four hours, but you can
change these values to whatever suits you. If you want we can head over to
Lovelace and have a look. You may notice that some of the entities don't line up
with others. If their name spans two lines
then it won't line up with something that name spans one line. We can fix it
in two ways - we either adjust the percentage of that
entity by about three percent from the top; or we can ensure that our entities
that have two lines or all in one row, and the entities that only have one line
of name is in another row. Once you've had a fiddle and made
everything pretty you should end up with a view something like this. All my
network items are grouped - I have nine visible cards of groups, and then an
additional hidden card for my Christmas decorations. I then also have six graphs
for relevant network information. I said I'd get home assistant to notify you for
device goes offline, so here we go. Let's dive into node-red. For this we're going
to need three nodes - a call service node, an event state node, and an inject node
to test it out. In our event state node we're going to set the device to the
device tracker that we're trying to track and the state to not home. We then
change our call service node to notify your mobile device. We set the message to
something that you want to see, and then we can link it up and test it with the
inject node. As you trigger the automation you should get a notification
on your phone.
And there we go we now have a network overview screen
for our Lovelace. Make sure you hit subscribe below so you can find out more
about my tech and how you can build yourself the ultimate smart home!