Trying to position an icon on a floorplan image

Configuration Frontend
1

Good morning. I would love some help positioning an icon on a floorplan image. I have created a two sensors using templates with a fixed value. I would like to use those sensors in the top and left attributes of a style statement of an icon. (hope that is not too confusing). I have added card-mod. Before you ask, yes since these values are not dynamic I could just hard code them in the style statement but I decided this was a simple way to learn how to use dynamic location before i got to more complex use cases like an icon moving with the locaion of a device

My code looks like this:

views:
  - type: panel
    path: location-tracker
    title: Location Tracker
    icon: mdi:bluetooth
    cards:
      - type: picture-elements
        image: /local/floorplan/irl_floorplan.png
        style: |
          ha-card {
            --person-x: {{ states('sensor.kitchen_virtual_proxy_x_position') | float(0) }}px;
            --person-y: {{ states('sensor.kitchen_virtual_proxy_y_position') | float(0) }}px;
          }
        elements:
          - type: icon
            entity: sensor.kitchen_virtual_proxy_x_position
            icon: mdi:person-walking
            style:
              position: absolute
              left: var(--person-x)
              top: var(--person-y)
              color: #FF0000
          - type: icon
            entity: sensor.kitchen_virtual_proxy_x_position 
            icon: mdi:person-walking
            style:
              position: absolute
              left: 200px
              top: 200px
              color: red

When I check the states and template in the Developer Tools I get the value that appears in the Template, however when I check the Elements in the browser console I see that the variables are undefined.

Please let me know if I can clarify anything or add any information. TIA

2

Place values in quotes, try
xxx: “{{your template}}px”;

You missed a “card_mod” keyword before “style”, check Docs.

3

Excellent. Thanks for catching that. I think I was following a lot of examples rather than going back to the original documents.

4

Please mark the post with a solution as a “solution” to check this thread as “solved”.

1 Like