Hello infidels, 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:
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.
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).
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
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 ! …
I have 2 options here:
Every time I open the app, I need to pinch to zoom to make it cover the whole screen. … fk it
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 …
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 …
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!
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).
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.
Hello, first i want to give a big thanks to “pkozul” and all the people involved in the creation and evolution of this wonderfull feature. To “oakbrad” thank you for your beautyfull floorplan and awsome buttons. You have been my inspiration source for my own floorplan and again i would like to thank you for this.
I would like to know if it’s possible in your .svg file to “unhide/show” the invisible objects (filaments in the bulbs ‘glow’,…). For exemple when i had your ‘input_boolean.ui_livingroom’ to my floor plan it keeps the shadows from your floorplan objects. I wish i could change or replace it but i really don’t know how.
I’m sorry but i’m complete noob in .svg, .css and any help would be awsome.
If anyone is interested, I tweaked the ha-floorplan.html to support RGB lights.
The light should change its color and brightness based on the “rgb_color” and “brightness” attributes of the entity.
I only tested it with my Xiaomi Gateway but it works really nice.
Here is the code you need to add to ha-floorplan.html (just before the class_template code):
if (entityConfig.group.rgb_template) {
if (entityState.attributes.rgb_color) {
rgb = entityState.attributes.rgb_color;
fill = `#${rgb[0].toString(16)[0]}${rgb[1].toString(16)[0]}${rgb[2].toString(16)[0]}`;
if (entityState.attributes.brightness) {
fillOpacity = entityState.attributes.brightness / 255;
if (fillOpacity < 0.5)
fillOpacity = 0.5;
}
// Fill element based in rgb_color and brightness
svgElement.style.fill = fill;
svgElement.style.fillOpacity = fillOpacity;
}
else {
// Off state - use class specified in floorplan.yaml
targetClass = this.assemble(entityConfig.group.rgb_template, entityState, entities);
}
}
Thanks for sharing this really useful code! But I don`t seem to get it to work with my Hue lights.
Can you please share some text above and below your code in the ha-floorplan.html, so I can check if I have pasted it in the correct place, and have the correct spacing?
Edit: Just forget it, I just needed to delete the browser cache. So now it works! Thank you
That’s great.
I’d like to thank the creator of the floorplan add-on for writing this excellent code and all the other contributers in the forum. The result looks amazing and I’m adding more components every day.
and a big welcome to 2018 from my part, to this beautiful community.
