Wouldn’t it be great to have a custom UI that would show all your smart home devices laid out on a floorplan of your house. So with just a glance you could see which lights are on, which doors are open, or where there are people moving around? Of course you’d also want to be able to control all your devices from this wonderful imaginary user interface. Well, your dreams are about to come true. Let’s set up Home Assistant Floor Plan.
It should be obvious, but I’ll say it anyway, to use HA Floorplan you need to have Home Assistant up and running. I don’t believe it matters if you’re using Hassio or Hassbian or some other installation. And it doesn’t seem to matter what version of HA you’re using. HA floorpan isn’t an Add-on it’s not even really extra software, it’s just a different way to display states and controls that requires some entries in a few yaml files and a few extra files in some sub folders.
Enough yapping! Let’s get to work! Step one is to head to this github page and download and extract the zip file.
The mastermind behind HA-Floorplan is Petar Kozul. So be sure to thank him when you see him on the street. He’s got some very helpful written instructions and he’s pretty active in the HA forums too. Here’s a couple links to the best HA-floorplan forum topics:
https://community.home-assistant.io/t/share-your-floorplan/21315
https://community.home-assistant.io/t/floorplan-for-home-assistant/17394
Back to the install:
When you extract the zip file, you’ll want to copy all these files, except the configuration.yaml, customize.yaml, README.md, and own-floorplan-tutorial, and paste all those files in you HA config folder. That’ll give you all the files you need, including an example floorplan. To be able to see the floorplan in Home Assistant we need to modify a few files.
First, in your configuration.yaml, add:
frontend:
extra_html_url:
– /local/custom_ui/state-card-floorplan.html
panel_custom:
– name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan #if you change the name of your floorplan.svg file, change it here too.
config: !include floorplan.yaml
If you already have some binary_sensors, then add one more like this:
binary_sensor:
– platform: mqtt
state_topic: dummy/floorplan/sensor
name: Floorplan
Add this to your customize.yaml or to the customize section of your config.yaml
customize:
binary_sensor.floorplan:
custom_ui_state_card: state-card-floorplan
config: !include floorplan.yaml
Add this to your groups.yaml or to the group section of your config.yaml
group:
zones:
name: Zones
entities:
– binary_sensor.floorplan
After those changes, check your config and if it checks out you can restart Home Assistant to see the example floorplan. It won’t be populated with your entities yet. That’s gonna take a bit more work…
To get your own floor plan and entities we need to create your floor plan as an svg file and then we’ll add entities to the floorplan.yaml file and customize the floorplan.css file.
To make the floorplan image you’ll need a program called Inkscape. I tried a couple other SVG editing programs but they wouldn’t let me assign properties to objects and that’s how you tie your HA entities to the icons, so as far as I know, InkScape is the best or maybe the only software that’ll work. Another genius HA user named Patrik made some very useful written instructions that will help you if you get stuck.
Once you have InkScape installed open a new file, call it floorplan.svg. Open Document Properties, change the units to px (pixels) and set the page size to 1024×768. If you know the exact size of the display you want to use you can set the size to match your display. Otherwise 1024×768 is a good generic size to use.
Now you have to draw your house. If you already have a digital picture of your house you can insert it, use it as a background and add svg icons on top of it, or you could trace it to make a floorplan, or you could guesstimate the floorplan of your house, or there are some apps that let you walk around your house and tap the screen in the corners to draw a floorplan. That’s cool.
I had a picture of the floorplans for my house. It was too low quality to use as a background so I used it to trace the walls. For my Maker Faire demo I used the actual plan of my recent basement remodel.
There are inkscape tutorials done by people who know way more about how to use it than I do. What worked well for me was to place rectangles where the rooms are, fill in hallways and such with more rectangles of different colors, then outline everything with straight lines with width of 3 px. Having an image of the actual floor plan of my house to trace was super helpful. Depending on how much detail you want to get into, you could spend hours drawing your floor plan. Some awesome HA users have even made 3d models of their house that are rendered with lighting and have animations. You can check them out at this forum topic:
https://community.home-assistant.io/t/share-your-floorplan/21315
This is HA-Floorplan Level 1. I’ll probably go back to mine someday and make it nicer with door symbols and room labels, but for the sake of actually finishing this project I’m going to stop here.
The next step is adding objects that will be linked to your Home Assistant entities. Petar recommended www.thenounproject.com and I concur. They have a lot of symbols you can download and use, and you can download them as SVG files! Grab the icons you like and import them into your floor plan. I found the ones that are solid work best because you’re going to assign a fill color to indicate a state change. Duplicate and place them where they belong. Now we need to assign an entity_id to each object so they will be able to interact with Home Assistant. Right click on the object, select Object Properties, then copy and past the entity_id from your HA states page into the box labeled ID: and click “set”. Repeat that for each entity you want to see on your floor plan view. Each entity_id can only be assigned to one icon. If you try to assign an entity_id to a second icon Inkscape will yell at you. With all your icons in place and the entity_id’s assigned you can save the svg file and make sure it’s in the new floorplan folder.
After you’ve got icons for all your devices and you’ve assigned the HA entity_id’s to them it’s time to do some work in the floorplan.yaml file. Petar has provided a nice example that you can use to start with, and just modify as you like. Floorplan.yaml is one of the files you copied to your main HA config folder earlier. Find it and open it. It won’t hurt to leave the examples Petar has in there. But you can also comment out the parts you aren’t using. Most of the real work here is done under the subheading “groups:”. These aren’t groups like you might be used to with HA groups. Let’s look at my Switches group first. The name you assign here doesn’t really matter. It doesn’t have to say “Switches”. Under “entities” you list all the HA entities that you share the same state assigned color changes. We’ll assign the color changes when we get to editing the css file. But for now I know I will want all these switches to share the same color changes so I’m putting them in the same group. Now in the “states:” section I’ve got to tell the floorplan what states these entities can become. If you don’t know what states your entities use go to your HA states page and you’ll see the current states. For Switches (and lights) the state is either on or off. Under each state we assign a “class”. The class will reference an entry in the css file. For my example switches I used a torch icon, so I called my classes “torch-on” and “torch-off”. Finally for the switches group I will assign an “action”. This is what will happen when I click on the icons in the floorplan. So far the only action I know about is “toggle”, but that’s good enough for a lot of entities like switches, lights, locks, and covers. Save your changes, check your HA config and restart HA. Anytime you change the Floorplan.yaml you have to restart HA for those changes to take effect. Now let’s look at the floorplan.css file.
Full disclosure here. I don’t know Jack about writing style files like this. So if there wasn’t an example to modify I’d be lost. So here’s my non-coder interpretation of this style file. You’ll see there are entries here that match the “class” entries from the floorplan.yaml file. Under class entry there’s a fill command with a hexadecimal color code. So what’s happening here is the state of an entity in HA, is tied to a class, and that class is assigned some appearance qualities like fill color, opacity, stroke color, or stroke width. Now you can customize how you want the icons in your floorplan to look when their states change by changing these parameters in the css file. For the switches on my basement floor plan I used a torch icon, and I assigned the classes “torch-on” and “torch-off”. So in the css file I made new entries for torch-on and torch-off and assigned the fill colors I wanted. Yellow for on, and Grey for off. There are plenty of tools to find the hex color code you want. If you just type hexadecimal color picker in to your google search bar you’ll get one. You can also change the opacity of your icon by adding the line “fill-opacity”. A value of 1 make the object completely opaque, and a value of 0 makes it invisible. So you can tweak the values until you find the look you want. Changes you make to the css file get updated in your floorplan image on HA as soon as you save them. There’s no need to restart home assistant to see the changes. Fill applies to solid icons. If you use an outlined icon then you’ll use “stroke” to change the color. You can change the width in pixels or fractions of pixels, and also the opacity. That’s it. Now for each entity state you can assign a class with your own colors, line width, and opacity. Awesome!!
In my Demo I’ve included a few switches, a cover, a lock, presence detection, motion detection. You can also use templates for text and images, to get values like temperature and humidity, or to make different icons appear for different entity states. But I couldn’t get it to work, yet. But I will, oh yes, I will.
As a quick review, here’s what we just did.
- Copied a hand full of folders and files into our main HA config folder.
- Then we modified our config.yaml (and also customize and groups).
- Then created a floorplan.svg file using Inkscape
- In that floor plan we added icons and associated them with entities in HA
- We added entries for those entities in the floorplan.yaml and referenced the state changes to entries in the style file (floorplan.css)
- Finally we edited floorplan.css to make our icons look the way we want them to look.
There is a lot more you can do with HA-Floorplan. This is really just the beginning. But you’ve taken your first step into a larger world. Now jump in there, create some awesome floor plans and post them in the HA forum! And if someone could help me figure out how to make the templates work, that would really be great. Thanks.