Floorplan for Home Assistant

Most folks seem to use Inkscape to edit their svg files. Adobe Illustrator is another option.

I have just upgraded to 0.59.1 and my floor plan on my front end has disappeared, just a white card.

Are there any known issues with 0.59.1 with floorplan or a configuration change ive missed? I couldn’t find anything reported

Ross

2 Likes

The only issue I know of with floor plan like that is on Mozilla Firefox it does work on Chrome. It also does not appear the entities are clickable on iOS platforms either.

hmm ok,

any one got any ideas as to why its suddenly stopped working? Ive made no other changes other than update to 0.59.1. Anything I can do to help work this out? Ive had a look in the logs but nothing in there…

1 Like

What browser are you using?

Safari,

As I say this was working before I upgraded. I checked pointed my Virtual machine so if I roll back it is working again. When I go back to 0.59.1 it shows blank!

Have you added the frontend: latest thing, something to do with js, it may have something to do with it

Could you point me in the right direction for that? I cant seem to find that information on the 0.59.1 page.

It was part of the breaking changes the last one in the list -

Thanks - fixed the bug for me!

frontend:
javascript_version: latest

1 Like

Yep worked for me too! Thank you!

Both of these ways fixed for me

Old broken config : -

frontend: 
extra_html_url:
    - /local/custom_ui/state-card-floorplan.html

Fixed v1 : -

frontend: 
  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html

Fixed v2 : -

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html
  
  extra_html_url_es5:
    - /local/custom_ui/state-card-floorplan.html 

Either of these worked for me. I stuck with V1

Using version 1 of my code above breaks home assistant for Safari browsers - Works fine on firefox, chrome and safari for iOS. Safari Mac however you only get a blue bar at the top. Must be a bug!

I changed to using version 2 and all browsers work and my floorplan on the front end is also working!

Just getting started with the SVG.
Can’t wait to add detail and my components.

Still deciding if showing all floors on one canvas or having a toggle button is idea.

I know i’ll have to toggle cameras/ sensors / media players etc to give them large enough hit-targets anyway

15 Likes

uhhh, I need you to design mine :wink: looks nice

1 Like

I used this very easy tool to create my .SVG floorplan:

Free option allows you to export an svg. I openend the .svg in chrome and inspected with dev tools to find the id’s of the objects I wanted to modify with sublime text.

Changed the text of the dimensions to the labels I wanted for my cameras and commented out the ones I didn’t want

I did find that If I have the zoom pan enabled then I cannot click through very nicely on a mobile device, On a PC it is excellent. Possibly because of touch/tap/click events interfering.

planningwiz also have a 3D option, hopefully in future we can do FPS type walkthroughs and turn our automations on and off… but that is a dream yet to become a reality

3 Likes

Not sure what I am doing wrong but I still cannot see my floorplan after the recent updates to HA.

I updated my frontend.yaml:

  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html

  extra_html_url_es5:
    - /local/custom_ui/state-card-floorplan.html 

and also tried the:

  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html

have F5’d it to death, and tried multiple browsers although Chrome is my default.

Any thoughts?

Have you cleared you cache?

Didn’t work for me till I did that! Try that and see how you get on

Yes I have, but no luck there either. I am not getting any errors that I can see, just blank space.

Does any of this make sense?

Hmm, i found that yaml.min.js was missing so I created it but now have:

I’m just starting out with floorplan but have already hit a snag that I can’t figure out. Is there anything wrong with the following steps that I’ve so far performed please? The error in Chrome on my Mac is:

URIError: http://<my IP>:8123/local/custom_ui/floorplan/lib/floorplan.js?_=1513339943023
cd /home/pi
git clone https://github.com/pkozul/ha-floorplan.git
cd /home/homeassistant/.homeassistant
sudo cp -r ~/ha-floorplan/www/ .
sudo cp -r ~/ha-floorplan/panels/ .
sudo chown -R homeassistant:homeassistant panels/
sudo chown -R homeassistant:homeassistant www/
cat floorplan.yaml
      name: Demo Floorplan
      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css
      warnings:

Within configuration.yaml, I added the following:

frontend:
  javascript_version: latest

panel_custom:
- name: floorplan
  sidebar_title: Floorplan
  sidebar_icon: mdi:home
  url_path: floorplan
  config:
    hide_app_toolbar:
      config: !include floorplan.yaml

Permissions look ok:

pi@hassbian:/home/homeassistant/.homeassistant $ ls -al www/custom_ui/floorplan/
total 116
drwxr-xr-x 3 homeassistant homeassistant  4096 Dec 15 12:07 .
drwxr-xr-x 3 homeassistant homeassistant  4096 Dec 15 12:07 ..
-rw-r--r-- 1 homeassistant homeassistant  2261 Dec 15 12:07 floorplan.css
-rw-r--r-- 1 homeassistant homeassistant 61908 Dec 15 12:07 floorplan.svg
-rw-r--r-- 1 homeassistant homeassistant 32955 Dec 15 12:07 ha-floorplan.html
drwxr-xr-x 2 homeassistant homeassistant  4096 Dec 15 12:07 lib

pi@hassbian:/home/homeassistant/.homeassistant $ ls -al www/custom_ui/floorplan/lib/
total 180
drwxr-xr-x 2 homeassistant homeassistant  4096 Dec 15 12:07 .
drwxr-xr-x 3 homeassistant homeassistant  4096 Dec 15 12:07 ..
-rw-r--r-- 1 homeassistant homeassistant 86659 Dec 15 12:07 jquery-3.2.1.min.js
-rw-r--r-- 1 homeassistant homeassistant 51466 Dec 15 12:07 moment.min.js
-rw-r--r-- 1 homeassistant homeassistant 29809 Dec 15 12:07 svg-pan-zoom.min.js

pi@hassbian:/home/homeassistant/.homeassistant $ ls -al floorplan.yaml
-rw-r--r-- 1 homeassistant homeassistant 528 Dec 15 09:38 floorplan.yaml

Running version 0.59.2