Hi. Today (17 oct., 2022) is … a new day for me. Yesterday i planned and recorded a video on how to get started with ha-floorplan. It’s done with Home Assistant OS, which are the easiest way to get started with Home Assistant.
I really hope that I’ll find time to create more videos in the future, with more specific content - but I’ve received quite a few requests on how to get started with Home Assistant, in the last couple of years.
Happy floorplanning everyone!
It’s my first video in English and as a “teacher”, but I’ve executed it the best I can, during a rainy sunday.
There’s many ways of adding the Floorplan. I’ve spinned up my Hass.io test-instance, and create a guide for you 
I’ll like to mention, that it’s totally OK that you’re asking. It’s helping us to know, what we need to include in our docs, for a “Beginners” guide ! That’s great.
Guide for Hass.io setup (where static-files will be located within config/www)
Please note that this is ONLY FOR the Hass.io solution!
Note about non-hass-io solution:
Static-files for non-hassio setups, are normally within your .homeassistant/www (.homeassistant are the same folder, as where your configuration.yaml file lives.)
Hass.io setup guide
At this point, you’ve already installed HACS, and added the ha-floorplan repo as a custom reposition, and installed it, too
Let’s take the last steps together…
- Please validate that the resources is added in
http://{HA-IP}:8123/config/lovelace/resources
Attention: You’d have to enable “Advanced mode” on your Home Assistant user-account. Read more here.
-
Create a new view:
-
Go to the “raw” editor:
-
Scroll down, and find “Floorplan”
-
Replace the Floorplan-content with the following code (open the link, and copy it):
Note that “type” are missing in our docs (I’ve created a note about that, so we’ll remember to have it 100% copy-paste friendly).
I’ve just added it as the viewst view, so here it looks like this:
-
Now you’ll be able to see an empty card, if your CSS and SVG-files are missing:
-
If you’re unsure about how to transfer files to your Hass.io instance, I’ll recommend you to use the “File editor” add-on from the “Supervisor” section.
After it’s installed, open the Web UI. -
You can see that the defined path are
/local/floorplan/examples/home/home.svg, for the svg-file./local/translates into/www/:
-
Let’s create the folders needed. Note that
/will be used to create a folder, within a folder path (that’s a default thing on most Unix-systems).
-
Navigate to floorplan > examples > home
-
Upload the “home.svg” and “home.css” file to the folder, with the “Upload file” button.
-
IMPORTANT: If you created the “www” folder yourself, you’ll need to restart Home Assistant before continue. If you’re unsure whether the “www” folder was created with
configfrom the beginning, please restart Home Assistant - just to be sure. -
Enjoy Floorplan
Oh well… You’ll need to draw a svg yourself, ofc.
Bonus-info: You can remove the console by removing the log_level: info-line from the config.
Also… It’s totally possible to use the GUI for almost every step, if you like to do so.
-
Use the “+” button, after you’re created the “Floorplan” view:
-
Press “Manual”
-
Paste in this wall of code (open the link, and copy it):
