Dynamic positions in picture-elements card

Configuration Frontend
,
1

Hi all

With the following code I show my rooms with any entities:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.lumi_lumi_weather_temperature
    style:
      top: 73%
      left: 20%
      transform: scale(1,1)
      color: Transparent
    card_mod:
      style:
        ha-state-label-badge: null
        .: |
          :host {
            color: orange;
            --label-badge-background-color: white;
            --label-badge-text-color: black;
            --label-badge-red: red;
          }
...

I’m using espresense to detect my devices inside my rooms.

image
image1351×390 30.8 KB

Inside the picture-elements card, is it possible to change the positions (left and top) from a state-badge, state-icon etc. based on a state from one of this espresense entitites?

For exmpales:
if the phone is in my office (buero) then the position should be: left: 20% and top: 65%
if the phone is in the kitchen then the position should be: left 70% and top 45%

Is this possible with card-mod or in any other way

Thanks and best regards
Buhli

2

Please check out this extensive guide

3

@LiQuid_cOOled thank you very much for your quick reply. I will test it with the conditions. Best regards Buhli