Move an Icon in a Picture

Configuration Frontend
1

Hello everyone, I can’t dynamically move an icon on a background with an image. Basically, I would like to move the icon horizontally on the image using a variable.

image

so, I want to move the icon left to right with a variable.

I wrote the following code

configuration.yaml

input_number:
  horizontal_offset:
    name: Offset Orizzontale
    initial: 50
    min: 0
    max: 100
    step: 1

lovelace:

type: custom:stack-in-card
cards:
  - type: picture-elements
    image: /local/Cars/tesla_top01.png
    elements:
      - type: icon
        entity: sensor.horizontal_icon_position
        icon: phu:tesla-car
        style:
          top: 10%
          left: '{{ states(''sensor.horizontal_icon_position'')|int }}%'
  - type: entities
    entities:
      - entity: input_number.horizontal_offset

But it doesn’t work, the icon always stays in 0 position even when I move the bar.

Does anyone have any idea what I’m doing wrong?

2

Picture-elements card does not support templates.
Use card-mod.

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_level_1
      - entity: input_number.test_level_2
  - type: picture-elements
    card_mod:
      style: |
        ha-card {
          --top: {{states('input_number.test_level_1')|int(default=0)}}%;
          --left: {{states('input_number.test_level_2')|int(default=0)}}%;
        }
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: var(--top)
          left: var(--left)
    image: /local/images/test/blue.jpg

изображение

3

Thank you man!!
I spent all day trying to get this to work… thank you so much!

1 Like