Share your Floorplan

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 :slight_smile: 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.

Hello infidels, :slight_smile: and a big welcome to 2018 from my part, to this beautiful community.

OK guys, I really need some help here. I’m not new at this, but for the life of me I can’t get this to look the way it should. So, in short, here are the facts:

  1. I have a floor plan (the view of my apartment from the top) which I decided to change, for ease of use sake, and other reasons.
  2. I have a bunch of iPad Minis, 2 and 3 gen. I have at least 3 which I’ve decided to mount on the walls. These iPad Mini, have a native resolution of 1536 x 2048 (Width x Height).
  3. In Inkscape, I created the new floorplan.svg, and give it the custom dimensions above, in pixels. The view area is the same dimensions.
    This is what I get :slight_smile:

I get the B view every time I open the Home Assistant IOS app.
Now, the B view has white spaces all around, but the white space on the left, right and top, were created by me (just white rectangles, over the brown coffee background image). Why did I do that ? Because of the white space at the bottom of which I cannot get rid of !!! … and I like things to look proper.

So, when I open the app, the real svg looks like A view on the right, left and top, but looks like B view on the bot ! WTF ! … :slight_smile:

I have 2 options here:

  1. Every time I open the app, I need to pinch to zoom to make it cover the whole screen. … fk it
  2. I set the ipads to never shut down the screens, never lock, and never close … and I only pinch to zoom once, and I leave it like that … but my ocd will kill me … :slight_smile:

Help, help, help … or I’ll be dead !, I already tried every combination of resolutions possible, to no avail … It must be something that can be done, but I miss it … I’ve been going around this for 4 days now and now I cant think past this and came here to finally ask for your help … :slight_smile:

The floorplan.svg is not near to be finished. I will describe it once its final. I have a lot of work to do still, but meantime, during these tests, maybe you can help me get this thing resolved. Thank You.

Thank you so much for that TV powered Idea…I was wondering for the longest time how I shoule make this visible…that’s a fantastic way of doing it! Great work!

PS: Your beds seem so short for some reason xD

~Cheers

here I am!

I`m new to floorplan, but encounter the same issue you did.
I have a phone with resolution 2560x1440. But for the image to fit my screen perfectly, I have the vcg file at resolution 2700x1750.
But I use google chrome browser on android.

You probably already did this, but in case not:

1: Change the resolution on the svg-file to ex. 1700x2400 and enlarge the background to that resolution, to see if anything changes.
2: Enlarge the background to be bigger than the borderlines in inkscape (or the program you use) and see if anything changes
3: Try to open floorplan in Google Chrome.

I`m sorry if you already try this, but the first one was the solution to me.

Edit: For the bottom white part, check out post 130 by Will_Garbutt
Edit 2: That seems to fix everything. When I fixed that now, I could resize down my SVG-file. When you have that white bar, the whole image resizes, and therefore the pixels gets strange values. To use the pixels the screen have on the tab or phone, the picture needs to show on the whole screen (also above the status bar at the top too I think).

Here are the files! Enjoy.

https://drive.google.com/drive/folders/1sx0nliMFfDfV8HK240G-6caKuMJjImEX?usp=sharing

1 Like

Can you share your css, .svg and .yaml for your floorplan!? Would love to steal a few ideas from it!

1 Like

@zepxir, no not yet unfortunately. Floorplan is revealing itself to be more complicated than I had hoped for. Will get there in the end…

more info can be found here: Github Floorplan Layers by @ryanrdetzel

has anyone got any ideas how you could put the ‘spotify ui’ from the non floorplan version into a rect?

My thought was to have a spotify_toggle_button on each floor, which brings up the UI

I know a number of folks have made their own UI, but trying to minimize effort :wink:

Hey,

I got 2 questions for now.

  1. How can I make my floorplan look bigger on my 7" tablet? (Solved, in Inkscape I pressed edit and “Resize page to selection”.
  2. Why does the text font differ on PC and tablet/phone?
Pictures below:


The mac address is the mac address of the firetablet running Fully Kiosk Browser.

Thank you very much.

The fonts differ due to your phone not having that truetype font installed on it.
If you’d like them all the same, use a generic font all devices should have.