Can't get opacity/transparency to work as in 3d Floorplan card

Share your Projects! Dashboards & Frontend
1

Trying to mimick https://sharethelove.io/picture-elements-cards/3d-floorplan but when I make a black png to do the “darkening” and “lightning” but I have two issues.

  1. the area just says black

  2. the size of the overlayed picture is not scaled the same as the picture-element image (impact differs between safari, opera, google and firefox)

#2 I can kind of live with and add some scaling manually but would like to understand :wink:
but #1 is annoying as seen on below image:

image
image1868×1338 451 KB

Notice the black box in upper right - that should just be transparent.

My card setup is as follows:

  - title: Overview
    panel: true
    cards:
    - type: vertical-stack
      cards:
        - type: custom:plan-coordinates
        - type: picture-elements
          image: /local/floorplan/groundfloor.png
          elements:
            - type: image
              entity: group.kitchen_lights
              tap_action:
                 action: toggle
              image: /local/floorplan/dark_kitchen.png
              state_filter:
                "off": opacity(50%) 
                "on": opacity(1%)
              style:
                left: 67%
                top: 22%

full config can be seen at https://github.com/maxandersen/hass.

2

gdammit - while I was working on it someone in my house pushed the wall switch so the lights were unreachable and thus in “Unknown” state…

But the question why the image is not scaled same as the main picture-element card would be good to know.

3

Its actually really bad - resizing in browser and the scaling just goes haywire.

The only diff between these two pictures is my resizing the browser window:

image
image1728×1244 374 KB

image
image996×710 156 KB

4

Maybe the problem has already been resolved.
But I think the rectangle should be in vector format. Then it will scale along with the background.