Picture-element image not positioning correctly

@HipsterDufus wrote:

After spending way too much time building a floorplan dashboard, I think I have something that I’m reasonably happy with. But have run into a problem that I can’t figure out.

My floorplan looks like this, using a picture-element image:

ArgyleHouse1200×672 817 KB

I’ve been able to add various icons for the switches and lights, so that’s fine. My next useless task is to have rooms light up when a switch is on. I’m using this code:

          - entity: switch.dining_room_light_7
            image: /local/ArgyleHouse-dining2.png?v=1
            state_filter:
              'off': brightness(50%)
              'on': brightness(100%)
              style:
                left: 80%
                top: 10%
                width: 100%

The ArgyleHouse-dining2.png file is an exact copy of my picture-element background, with everything except the dining room cropped to transparent (can’t include it here, since it’s my first post).

The brightness works fine when the switch is toggled, so no problem there.

However, Lovelace insists on placing that cropped image in the extreme lower left of my background, almost as if I had something like top=90 and left=5. No matter what different values I put in for top and left, it doesn’t move.

I’ve tried using different images, including an image just of the dining room without the transparent part. I’ve cleared the cache in the browser and restarted HA several times. Hass.io is using current version.

Any ideas on other things I can try? It seems that it should just work, based on others’ experiences, but I’m stuck.

PS: This is my first post, so hope the inline images and code comes out OK.

Posts: 1

Participants: 1

Read full topic