Awesome, this looks great!
Very nice layout
Hey Mihai @SMARTMEDIA / @Smoculetz,
Congrats on your floorplan. Looks stunning and allows to show a lot of info with minimal clutter.
I’d love to emulate this for my own setup, as this currently overwhelms the user with too much info.
Thanks for sharing parts of your css and yaml. Can you please share the whole lot including the svg?
That would really help me out…
Is anyone using the floorplan with a vertical/portrait orientation on tablets? This would suit my house plan much better…
My interface looks tremendously cluttered at the moment, as you can see here:
Ideally, I’d like to add the garden area on the same floorplan and that would add a lot of space at the bottom of this plan… Help is needed as I’m going from head scratching to hair pulling!
Thanks to all the contributors of this great thread and, of course, @pkozul !
I’m the world’s worst artist, so I started from some old floor plans from when I bought my house new a long time ago that I had stuffed in a drawer, then used inkscape to trace over top of it. Working on getting everything incorporated. Hours of fun!
4 Likes
Hi Ryan,
Great to be able to switch between different floorplans directly from the ui. Would love to implement that feature. Where can we get more information (CSS, Yaml files)?
Can we use different buttons to get directly to a different floorplan without toggling between all?
It would be great to be able to switch between the pages/tabs
Ie a button on the upstairs plan would allow me to switch to the downstairs plan
it shows up in the URL as …/upstairs - but sadly i cant figure out how to use the button (or in the SVG) to trigger a web action
1 Like
can you share the code
more like hadashboard type
Something different: here is my water management floorplan (yet to be implemented!). Let me know what you think…
15 Likes
I’ve tried to emulate your floorplan @j4Media, thanks for the inspiration.
Thanks too to @CCOSTAN - it really is something that you share all this, I’ve done some heavy exploring (and plundering) through your shared github config.
Time to call it a night.
6 Likes
That’s a really nice interface… Nicely done.
Please advice regarding from floorplan.yaml and floorclock.yaml in floorplan folder. The address (mac address), is this the mac address of the HA or, and can it be ip address instead of mac address ?
Also, How can I let it show in the side bar to see if it works.
Currently, everything load fine in HA but I couldn’t see the Alarm Panel and Alarm Clock on the side bar.
I already have # at the hide_app_toolbar: , Still it didn’t show up.
I have installed full kiosk on my tablet. How to let the Alarm Panel show in this browser?
*** Got it show. I will use from your floor plan to guide me ^^. First time floorplan. I’m newbie***
*** For the floorplan_speaker.py, after put in all my media_player gone***
Thank you very much
how to do this?
Create a layer, import the scanned image into the layer. Create new layer on top, start tracing with rectangles, etc. in the new layer.
Does that get you started? Basically, if you have an image, you can put it in a layer underneath what you’re drawing.
1 Like
This isn’t released yet, right? I’ll be glad to help if you need something.
Looks really good 
Have you managed to implement this, so you can control the layers?
I’ve been lurking through this post for the past week until I finally created a floorplan I’m happy with. Thanks to @pkozul for creating this addictive add-on, and to @jmart518, @oakbrad, @PhyberApex for sharing their floorplans, css and yaml files. I would not have understood any of this without seeing your CSS files. Also, I lifted some of your icons into my floorplan, haha.
I mix and matched from the designs posted here, to show another variation that I think works well (to my biased eyes). I’m happy to share the original .svg, .yaml, and .css files, which is an accumulation of most of the posts here. Let me know if anyone wants it.
My floor plan includes motion sensors (floors light up), door animations, and the glowing TV and monitor that reflects the power status. The glow effect is basically a gradient from yellow to opacity 0, and will appear if my TV lightstrip is on. You can use the ‘ping’ binary sensor to indicate if a PC is turned on, and turn on the monitor glow.
9 Likes
Looks great! Very nice. I got all my icons from https://thenounproject.com/ if you are looking for a source
That’s a great idea! Especially for landscape lighting and security. As well as a variety of environmental sensors for the garden.