Help with picture elements card

Configuration Frontend
1

I’m currently trying to create a 3D floor plan in Home Assistant. So far, I’ve managed to do it relatively well.

My problem is that some images don’t overlay on the main image like the others, but are instead shifted. Adjusting the style options doesn’t seem to change the position of the shifted images. I don’t quite understand what the problem is since the code is exactly the same, and it worked before. Is there a maximum number that I’ve overlooked?

kiosk_mode:
  hide_header: true
views:
  - title: Home
    type: panel
    sections: []
    cards:
      - type: picture-elements
        image: /local/wohungsplan-tablet/schwarz.png
        elements:
          - type: image
            image: /local/wohungsplan-tablet/wohungsplan.png
            style:
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: light.led_strip_abstellraum
            tap_action:
              action: toggle
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-abstellraum-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: icon
            icon: mdi:lightbulb
            entity: light.led_strip_abstellraum
            tap_action:
              action: toggle
            title: <DEIN-TITEL>
            style:
              left: 55%
              top: 50%
              width: 100%
          - type: image
            entity: light.arbeitsflache_kuche
            tap_action:
              action: light.toggle
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-arbeitsfläche-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: light.hue_bad
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-bad-hue-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: light.hue_spot_kuche
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-küche-spot-an.png
              pointer-events: none
              left: 100%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: light.hintergrundbeleuchtung_spiegel
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-bad-spiegel-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: switch.beamer_steckdose
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-beamer-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1
          - type: image
            entity: switch.computer_steckdose
            title: <DEIN-TITEL>
            image: /local/wohungsplan-tablet/1x1-pixel.png
            state_image:
              'on': /local/wohungsplan-tablet/wohungsplan-computer-an.png
            style:
              mix-blend-mode: lighten
              pointer-events: none
              left: 50%
              top: 55%
              width: 100%
              opacity: 1

Screenshot 2024-04-12 091024
Screenshot 2024-04-12 0910241920×949 55 KB

2

You forgot the style: tag in this one. By the way, all the images must have same size that the base image, and then the style should be top 50% left 50% width: 100%. With the same size and the parts you do not want delete and transparent you do not have to worry about positioning.

1 Like
3

Are all images exactly the same size ?
The way I did it is to have the base image with all lights off and a set of other images of the same size with the various rooms on and all the rest of image transparent.

Then I just did this:

    elements:
      - type: image
        tap_action:
          action: none
        entity: light.interruttore_bagno
        state_image:
          'on': /local/Bagno_acceso.png
          'off': /local/Trasparente.png
          unavailable: /local/Trasparente.png
        style:
          top: 0%
          left: 0%
          width: 100%
          transform: translate(0%,0%)

When the light switch of that room is on, I activate the image with that room on (and the rest transparent)
When the light switch is off, I activate a fully transparent png (probably this is not required)

4

You are right. Thank you so much

1 Like