Share your Floorplan

ggravlingen · July 9, 2017, 6:31am

I’m starting to get the hang of how to use this add-on but I’m all out of inspiration on how to model my floorplan. Let’s share our plans for others to nick ideas from.

There is a tutorial to get started here:

github.com

pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md

# Creating your own custom floorplan-file from scratch #

This is a short guide to creating your own floorplan-file, based on your own home.

Recommended resources:
- [Inkscape](https://inkscape.org/en/) for editing your floorplan
- [the Noun Project](https://thenounproject.com/) for neat looking custom icons

## 1. Get started
Download, install and open [Inkscape](https://inkscape.org/en/).

## 1.1 Set the size of the work area
I've set the size of my floorplan-file to match the resolution of a full-screen iPad Air (1024x768).
- Click File > Document Properties
- Ensure the top right corner says "px" as display units. There is another one under "Custom size" that should also read "px".
- Set the width and height of Orientation/custom size to 1024 by 768.
- Make sure scale = 1
- Set view box x, y, width and height to: 0, 0, 1024, 768.
- Close the document properties and save the file as floorplan.svg

This file has been truncated. show original

ggravlingen · July 9, 2017, 6:31am

This is what my setup currently looks like. The green frame around my portrait turns red when I’m not at home.

litfoo · July 9, 2017, 9:07am

how did you get to model your floorplan currently?

how did you generate that floorplan/image?

ggravlingen · July 9, 2017, 10:55am

I started using the Stanley Floorplan app to measure up my apartment. To get correct distances, I used their laser measurement that has built-in Bluetooth and automatically updates the app. Something like this should work too, even though you need to type in the measures yourself.

Once that was done, I used the Stanley app to export the plan to svg-format, after which I opened it in Inkscape to continue editing. The symbols are from the Noun Project.

CCOSTAN · July 9, 2017, 4:54pm

Here is my current lay out.

pkozul · July 9, 2017, 8:33pm

HI there. Just throwing a curve ball into this thread :-). I have this SVG representing our Ring doorbell.It maps to the following sensors from HA:

sensor.ring_salon_battery
sensor.ring_salon_last_activity
sensor.ring_salon_last_ding

Not the typical use case for the Floorplan, but it shows that you can use it for other purposes.

(Oops… I’d better charge that battery!!!)

hejman08 · July 10, 2017, 12:26am

Here’s my foray into the project.
Still have a lot to do- just bought this house and still waiting on a bunch more Z-Wave switches and camera system, but that will all get added. Mean time, I got the lights working and front door lock status and such. Oh, and my Nest is reporting data as well. The only thing I don’t currently like is that lock icon- be it green for unlocked or red for locked, that thing is Fugly with a capital “F.” But, that’s an easy fix.

ggravlingen · July 10, 2017, 5:37pm

Really neat! It’d be cool to use a drone to take a picture of a garden for instance and then embed different sensors into the high-res picture.

litfoo · July 11, 2017, 6:02am

thanks for sharing your methods ggravlingen - will have a go myself too

stanvx · July 15, 2017, 12:43am

Here’s my current setup, still have a lot to do including many additional devices to be added and adjusting the status colours but it’s a good start!

pkozul · July 15, 2017, 1:32am

@stanvx Looks great. Did you create that from scratch in Inkscape?

stanvx · July 15, 2017, 1:52am

@pkozul I used the Android App Floorplan Creator, exported to SVG then heavily modified the layout using Inkscape.
Cheers for all your hard work on HA Floorplan!

pkozul · July 15, 2017, 1:57am

@stanvx No probs. Sharing your approach is really helpful to for others who want to get the floorplan up and running. Maybe we should start creating a How To guide on creating the actual floorplan SVG itself.

synth3tk · July 17, 2017, 7:16pm

That would definitely be helpful! Cover stuff available online as well as downloadable software.

ggravlingen · July 17, 2017, 8:57pm

I wrote one down: https://github.com/pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md

ggravlingen · July 19, 2017, 2:48pm

I’ve now migrated more or less everything in my setup to Floorplan

pkozul · July 19, 2017, 10:58pm

Looks great. What sort of devices are you using this on? Tablets?

How did you end up implementing the scenes buttons getting shown/hidden?

I’m sure the plants are happy they have become first class citizens

andrewjfreyer · July 20, 2017, 4:43am

Here’s my work in progress. It’s hard to tell in this shot, but individual rooms/walls are highlighted based on light status and/or based on movement.

I’m working through a custom component for a “room” that includes information about presence, lights as a group, door access, windows, temp, humidity, and occupancy. Long way away from completion.

Used AutoDesk Graphic for iPad Pro for the SVG.

ggravlingen · July 20, 2017, 9:49am

Thanks! Currently on my computer (Chrome) and iPad but I’ve ordered a Kindle Fire to use as my main house controller.

The buttons ended up being of type input_boolean and for there’s a pull request in your repo, including documentation in the readme-file, for the code in floorplan.yaml and ha-floorplan.html. I just click the button and the layer containing the scenes buttons are shown/hidden.

jmart518 · July 20, 2017, 6:48pm

Throwing out my progress so far, this is so much fun.

Each room lights up when the lights are on, doors are “animated”. I am thinking about moving towards a dark theme though.