Hi,
Been trying for a few days even weeks to figure out making a 3d floorplan with lovelace picture-elements and I’m going somewhat crazy
I got the 3d rendering, I have the blacked out overlays and I have them ligthing up and down when clicking but it looks really bad if I just change the scaling slightly - which is impossible to avoid when moving between laptops, phones and tablets to access the UI.
Is it expected the picture-elements approach only work at one specific resolution ?
See the images below at a “working” resolution (what I see at desktop at one specific size browser and fullscreen tablet) and another that is at what I see on phones.
What does anyone else do to get those great looking floor plans - only use it at one specific resolution ?
The code used for the above is at https://github.com/maxandersen/hass/blob/master/ui-lovelace.yaml#L29, as far as I’m aware i’m not doing anything special.
All elements placed using:
style:
left: 60%
top: 8%
transform: none
Note: tried without transform: none too and that works too but breaks in slightly different ways plus its much harder to get the image properly aligned.