Scaling of picture-elements / floorplan just not working


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

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, as far as I’m aware i’m not doing anything special.

All elements placed using:

          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.

I have the same issue. Did you find any solution for it?

Same issue for me as well.
Does anyone know a solution?

If the images are the same size it will work on any device. e.g. The main floorplan image and another image that is the same size but has the lights off in 1 room and the rest of the image is transparent. See the first and 3rd images in this album for an example: