Hi,
I’m making floor plan with picture elements card. I have successfully added state labels (temperature, humidity, etc.) on top of the picture. The problem is that I cannot set the position correctly for all screen sizes (e.g. for mobile, laptop, etc.). For example:
badges: []
title: Floor plan
panel: true
cards:
- type: picture-elements
image: /local/upstairs.png
elements:
- type: state-label
entity: sensor.netatmo_indoor_temperature
style:
top: 25%
left: 50%
font-size: 10px
- type: state-label
entity: sensor.netatmo_indoor_humidity
style:
top: 32%
left: 50%
font-size: 10px
This way the values are shown properly on my mobile (2 lines close to each other), but with laptop there’s too much space between the two lines. I tried to use pixel values (px) for top and left variables, but it does not work either because the number of pixels in the picture is different when looking at mobile and laptop. So how can I get the values shown properly?
Using only px values I can get the space between lines stay static, but then the position is not relative and depending on the screen size the labels are not positioned correctly. So I think I should somehow get the labels anchored to the correct position with relative values (using % values for top and left variables) and then use px values. Is that possible?
Cheers!
edit.
panel: false -> Fixes all the problems and relative positions (%) can be used. Naturally the card is not expanded to the size of the view, so still not perfect.