I’m using a picture-elements card for my floorplan.
For the presentation of my tado thermostat, I need two elements:
- image that changes color depending on the state (auto,off,heat) on entity climate.living_room
- state-label that show the actual temperature in the middle of the image (entity: climate.living_room, attribute: current_temperature.
I position the image and state-label in such a way that the state-label is in the middle of the image.
Now when I scale my browser window (or use another device with a different resolution) the image scale fine, but the state-label looses its position against the image.
How can I make sure the state-label stays in the middle of the image?
I use the following code in ui-lovelace.yaml:
- type: image entity: climate.living_room tap_action: action: more-info state_image: "auto": /local/floorplan/sensor_thermostat_warm.png "off": /local/floorplan/sensor_thermostat_cool.png style: top: 50% left: 50% width: 6% - type: state-label entity: climate.living_room attribute: current_temperature suffix: '°C' title: null tap-action: action: more-info style: color: mediumblue top: 50% left: 49.7% width: 2% font-family: '"Arial Black", Gadget, sans-serif' font-size: 5px