In this video I'm going to show you how to make cool interactive floor plan on
Home Assistant. Make sure you stick around and if you like what you see make
sure you hit subscribe below and keep an eye out for more videos.
Hi I'm Will from Will Surridge Tech and today we're going to create an awesome
floor plan for your Home Assistant setup. We're going to start off by making a
demo floor plan in SweetHome 3D and exporting various graphics to display
when lights are on and off. We're then going to integrate it into Home
Assistant, adding buttons to operate your lights your music and your heating, each
with a pop-up for finer control. There are loads of really cool examples out
there for floor plans on Home Assistant, but a lot of them look a bit busy for me.
I wanted a very simple layout where I can see a basic overview of my home and
I'm not clogged up with lots of numbers and figures and sensors. If I want to find
out more information then I want to be able to click on it and get the
information there. A lot of the code you'll see today is from Luke Vink - he's
got a short video on YouTube demonstrating the full capabilities of
his Lovelace. That and his github are linked below. I have also made a github
repository for all the code that I make during these videos so if you want to
see the final version of this floor plan slightly neatened up you can find it
there. Now as a bonus, if you stick around till the end I'm going to show you how
you can force your lovelace to refresh every time you make an edit,
but first let's make a floor plan. If you haven't already you need to download and
install SweetHome 3D - the links in the description below if you need it. Once
you've got it, open and create a new floor plan. I'm going to make it simple
two room apartment for the purpose of this but you can add extra floors or
make it as complicated as you like. We're going to start off by making the four
walls for each room and then we need to create a room, so we click on create
rooms then we double click inside each of the two rooms. On the left, at the top
we have a library of all the items that we can use in our floor plan,
and at the bottom we have a list of all the items that are in our floor plan
already. We're going to start off by adding some doors and windows and then
we're going to fill it out with furniture. You can change the size
of your furniture using the corners or by changing the width, height and depth
in the list at the bottom. You also can change the elevation - this might be
useful if you're placing things like bedside lights on bedside tables so
they're not poking up through the bottom. After that we're going to add some
lights - now this is really important for when it comes to
exporting our images later. I'm going to change the colour of the walls, the floor
and add a skirting board now. And then we can head over to our 3D view. Once here
we want to rearrange it so it fills the screen as much as possible and it's in
the orientation that we want it to be in. Once we're happy with it we can right
click and store point of view. This enables us to recall this view so all
our pictures will line up when we export them later. To make our daytime photo
work we need to tell sweet home where the house is and which direction it's
pointing in so we go back to the 2dDplan right-click and click modify compass
here we can enter the lat and long of the house and the compass direction. Now we
need to turn all the lights off for our daytime photo, so we go to the list in
the left and click on each one setting the light power to 0%.
Once we've done this we're ready to export our photo. So we go back to the 3D
view, right click, go to point of view, and recall the save point of view you made
earlier. Now we can right-click and click create photo. First up we need to change
our size I suggest making the width 1920 and then the height will automatically
adjust, but if you're going to use a larger screen you may want to increase
the pixel count here. Next we change the quality to best we change the time to
midday and we uncheck 'add ceiling lights'. Now we can click create and it will
render our photo, this may take a while but once it's done
click Save and save it in a suitable location. Now we're ready to create our
nighttime image. We need to add a little bit of light otherwise it's just black
so we're going to go to our two ceiling lights and turn them to about 15% you
may find you need them a bit brighter if you've got a bigger space. Now we repeat
the same process for exporting the photo - we right click, go to point of view, click
on our save point of view, then we right-click again click create photo; but
this time we're changing the daytime to nighttime so we set the time to midnight.
We click create we let it render and then we save it in a suitable location.
Now we're ready to create the photos for all our other lights, but first we need
to turn off the two ceiling lights, then we select our other light and set it to
100% brightness. Now we can create photo in the same way, we make sure in the
right view, and then we click create photo. We want
the time to be midnight for this, we click render, let it render, and then save
it in a suitable location. We can now repeat this for all our other lights. You
might find that some of the lights are too bright at 100% so you
can always set them lower. This might be the case for an LED strip or some accent
lighting that you have. Now you want this brightness to be as bright as your
lights usually are in your home so you can get as much of a realistic
impression as you can. Once we've got all the photos for our different lights
we need to transfer them over to Home Assistant. I'm just going to use my
normal file browser to do this over the network, but you can also use the online
file editor if you prefer. Now we need to head into Lovelace. As per usual I'm
going to reference an external file here, but you can just do it at the bottom of
your Lovelace if you prefer. In our new view we need to add a title, an icon and
a path as you would normally. The first card we're going to use is the
config template card - this enables us to use JavaScript to access the colour of
the lights so we can then use that to edit the photos later on. now we're going
to add a picture elements card this is going to be our nighttime view and our
base layer. Next up we need to add some conditional cards the first one being a
daytime photo. Now this one uses the Sun opacity sensor to determine how much it
needs to brighten our nighttime photo by to make it realistic in the daytime. Make
sure you add the Sun opacity sensor into your config file. You're also going to
need a transparent image - you can find one of these on my github. Next up we
need to add all the photos for our light entities. This is a similar process as
before except instead of using the Sun we're using the light and its color and
brightness to determine the effect on the photos. Unfortunately this only works
for fully colored bulbs displaying an HS value and not just color temperature
bulbs. Now we need to make sure we rename any entity that is listed to the correct
one and change the file path for the image that we want to display. Now we can
repeat this for all the bulbs we have. If you made sure you were referring back to
the save view when you're exporting your photos then all these images should line
up perfectly. If you have a really big floor plan then you may wish to use a
photo editor to delete the parts the image that are irrelevant for that
particular bulb - for example rooms that aren't the room that the bulb is in. This
will speed up the process of loading each image when you change the state of
the light bulb. All you need to do is make sure that the overall image size
remains the same. Once we've done all this we can head over to our Lovelace
and we should be able to see our floorplan - now this will respond to the
Sun and will respond to the light but we want to make it interactive, so let's add
some buttons. Now in this video I'm going to use the
full code but in the final version linked below you'll see that I'm using
decluttering templates to simplify things and make them a bit easier to
read. For each light we need to copy and paste this bit of code changing the
entity, the title and the left and the top percentages - now this is the
percentage of the image from the left and the top that we want our button to
appear. You can get an add-on tool to tell you exactly what this number needs
to be or you can just use trial and error! Once we're happy we can go over to
our floor plan and test it out we should see that some circles have appeared. If
we tap them they will toggle the light on and off, and if we hold them it will
pop up with little window giving us the ability to change the brightness, the
colour temperature, or indeed the colour. You may notice that some of the colours
have gone a bit weird when you change the colour of a coloured bulb. That's
because of the way the colour filtering works - it will actually rotate the colour
of the entire image on the colour wheel by a certain number of degrees, this
means that the effect is so much more dramatic than they would be in real life.
Now that's great, but let's add something else - let's add some media players. This
is the same principle as before except we're going to have an icon this time so
we know it's not a light. We're going to change the entity, the top, the left
and the title. This time for the tap action we wanted to call service, a media
player, play or pause. We also want to change the hold action - no point
displaying the brightness of a speaker! So instead we're going to use the mini
media player - this is a great card available in the HACS store and it
provides the ability to group or ungroup speakers, and a row of custom buttons
where you can preset and predefine some playlists or some stations. Once we're
happy we save it and let's go check it out in Lovelace. The last thing we're
going to add is heating. Now this isn't the tidiest solution I'll admit, and it
does have some refresh problems, but it's the best I could find. What we're going
to use is an image element so we need to make sure we're at the bottom of our
Lovelace so these images appear on top of all the background images. We've got
two images for two different states we've got a white rectangle or grey
rectangle for when the radiators are off, and a red rectangle for when the
radiators are on. For this to work we need to use a template sensor to extract
the heating information from our climates entity. When the heat is off we
display an off image, when the heat is on we display an on image! Now when we tap
it it brings up a thermostat card so we can control our heating further. And
there we go - we have an overview of our entire house!
At just a glance we can see whether the heating's on, or lights are left on, with
a tap we can control our music, our heating, and our lighting. Now obviously
this could be so much more powerful if you want to integrate other sensors. You
could use motion sensors, or cameras, or even tell you what's playing on the TV. I
said I'd show you how to make sure your Lovelace refresh every time you make
an edit so here we go. Some of you might be thinking that happens anyway, what is
he talking about? And that may be the case for you but others of you, if you're
like me, have spent hours and hours refreshing a page wondering whether it's
actually refreshed or not. The key thing here is if you edit your Lovelace in sub
files like I do. It turns out that Lovelace will only force a refresh
if the ui-lovelace file has been edited, and not if any of the sub files
have been edited. So the work round here is to have another tab open with your
ui-lovelace file. That means when you're editing your sub file, you can also make
an edit in your ui-lovelace file. This can be as simple as just pressing enter
and backspace if you like, but make sure you save it. Then when you go into your
user interface it'll force a reset. And there we go we've built an entire floor
plan! Now remember to check out the compact code below so you can give it a
go for yourself. Make sure you hit subscribe so you can find out more about
my tech and how you can build yourself the ultimate smart home!