I wrote one down: https://github.com/pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md
6 Likes
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 
1 Like
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.
7 Likes
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.
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.
20 Likes
Really neat! What are those snowflakes-looking symbols for?
How did you animate them? Using css keyframes?
~Cheers
1 Like
@ggravlingen Thanks! Those are my window AC units
@PhyberApex Haven’t tried doing any true animations. Right now it’s just two separate elements. One goes invisible and the other becomes visible. Looks pretty cool in action
2 Likes
I like the style of yours. Where did you get the icons you are using? Such as the fans and snowflake etc.
Also I have noticed a lot of people using Cameras on their floorplan is this just the camera sensor(s) or does it toggle a live feed?
I get most of my icons from https://materialdesignicons.com
As far as the cameras go, yup, clicking one gives me the feed
If you want, you can take a look at my repo https://github.com/PhyberApex/homeassistant-config there I have CSS animation for doors. With the latest floorplan this works
~Cheers
5 Likes
This animation is slick! Apparently I’m not smart enough this morning to make it work with my “horizontal” doors. Any tips?
Thanks!
1 Like
I had some issues with the transform origin. Try playing with that. Also for some reason I had to draw the squares to animate new after moving several items in inkscape (dunno what happened there). Also you might need 2 animations one for 90deg and one for -90/270 deg (mine just happened to be the same). If you need more specific help feel free to ask.
~Cheers
1 Like
Awesome, that is the path I’m on, I’ve gotten it to do some wild stuff ha!
I remember my door just flying off all the way to the left in the floorplan with the animation. That always happened when it for some reason didn’t get the right transform origin. Redrawing of the square helped there for some reason.
~Cheers
1 Like
Wow weird, redrawing the square did the trick for me as well.
I also ended up having to create a second keyframe for -90 and played with different origins for each door until I got them to “open” the correct way. This is very cool!
1 Like
Wow would u mind to share your code that’s awesome
1 Like