Floorplan for Home Assistant

I wanted to say two things:
1: I love this, thank you for sharing.
2: I found Inkscape to be awful software, at least on a Mac. I found it way easier to use to use AutoCAD to draw my initial floorplan. Then use Boxy SVG to finalize.

12 Likes

What kind of tablet is that? How is it attached to the wall and how is it powered?

Sorry so many question, I am trying to find the right setup for my house but am having trouble

Looks like a raspberry pi touchscreen, same setup as I have. Embedded in the wall.

2 Likes

It is a Raspberry Pi touch screen. I have power, ethernet, and GPIO cables, and my external speaker ran to this spot. It’s not really all that hard. I cut out a hole and lined it with HVAC tape to prevent the drywall from deteriorating. I put a little electrical tape around the screen to provide a more snug fit as well. It really just fits in there like a glove with no issues. Be careful though, I accidentally pushed in the wrong spot and broke my first version.

Power was the simplest part, I tied into the mains running to the plug below. It get’s a little warm but nothing too hot to worry about. I used a thermal camera to look at the walls for hot spots to ensure I wasn’t getting to any dangerous levels. If you do cut into mains though, make sure you take all the normal safety precautions and know what you are doing.

A couple things I learned:

-Bluetooth speakers with the Raspberry Pi don’t work to my expected level of performance.
-Don’t rely on wifi, if you can get wired to your spot do it.
-Really think about what you want wired to your spot and where. I ended up doing this 3 times to get what I wanted. I also picked a poor spot. Great spot from the outside, but wiring was a giant pain.

3 Likes

Device management:
[Launch at Boot] True
Keep screen on: true
Screen off timer: 0
Screensaver timer: 10 [I have 60 - But that shouldn’t matter]
Screensaver url: dim:
[Set Wifi Wakelock: True]

Motion detection:

Enable motion detection: true
Turn screen on motion: true
Exit screensaver on motion: true

Could anyone make a more detailed tutorial (or even a video) on how to make this work. the instruction on the git its a bit confusing. I tried about 5x to get it to work, but all I get at the end is a Infinite loading circle on the Floorplan Panel. I have tried on google, firefox, explore, safari and android browser, all with the same results.
Unless this does not work in Hass.io!

1 Like

I’m not sure about Hass.io… BUT when starting out, try just starting with a SINGLE square and a single entity and see if you can get it working.

Here is another piece of free software if inkscape is not your thing.

1 Like

i’ve done that already , same result

Thank you! I wish I would have known about that before I paid for Boxy. I am going to try a few things on it. One thing about Boxy I noticed was embedded fonts didn’t work on my Raspberry Pi/Chromium. I wasn’t sure if it was a Pi problem or a problem with the font in the SVG.

Have you tried your browsers developer tools to give you an insight into what the error is? It took me awhile to get it working the way I wanted as well. But the initial version worked out of the box. My issue was renaming and creating two (upstairs and downstairs) floorplans.

If you are using Chrome, go to View -> Developer -> Developer Tools and see if there are any warnings or errors.

I can confirm it works with hass.io

Thanks! I will definitely try this.

This tutorial got me started:
https://github.com/pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md

Did you try it?

Using chrome dev tools (f12) is really the only way to troubleshoot the loading circle that i know of.

Try that and post what errors you are getting

This is what I got

paper-drawer-panel is deprecated. Please use app-layout instead! frontend-5a2a3d6181cc820f5b3e94d1a50def74.html-75.js:1:1629
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib/jquery-3.2.1.min.js”. floorplan:1
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib//moment.min.js”. floorplan:1
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib/svg-pan-zoom.min.js”. floorplan:1
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: jQuery is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:158:7
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: moment is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:89:15
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: moment is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:89:15

Without seeing the configuration files for your floorplan installation, the only thing I question is do you have an SSL certificate installed on your HA installation?

yes, i have letsencrypt

I had the same issue (spinning wheel). I found that when I copied the files from the github to my www folder I forgot to copy the ‘lib’ folder. In the folder where you put the SVG and CSS file there should be a lib sub folder. Do you have that? Once I did that it worked right away.
It still doesn’t work on my iPad though but it seems like that is related to HA version 0.51…

1 Like

yeap, it worked, it was missing the lib folder, thank so much for this.

ps to the creator, add this to the read me file. plz