Picture-element image not positioning correctly

Configuration Frontend
1

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:

ArgyleHouse
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.

1 Like
2

pretty sure left and top are center based, so if it’s the same size image, then you should e using top: 50% and left: 50%

3

Thanks. I have tried 50/50 for Top/Left, with various Widths, including 100%, with no luck.

caz

4

and when you clear your cache, you reload the page as well? CTRL+F5 is the fastest/easiest way. What does the F12 dev tools in chrome show for the element as well?

5

Yes, I’ve pretty much worn out the Ctrl-F5 keys doing reloads.

I’m by no means a CSS whiz. Where in Inspect should I be looking for clues? This is a screen shot of what I see in Chrome. The misplaced room can’t be seen here, because of the Inspect pane sizing (it’s hidden behind the Weather Card), but the blue outline is what shows when I put the inspect pointer on the offending image.

screenedit
screenedit3078×1929 892 KB

Same behavior in Firefox and Chrome Edge, by the way.

caz

6

Solved it. Indention problem, the style should have been at entity level, not state-filter.

7

Well shit, didn’t even notice that. Sorry!

8

Hello all. Started to experience some strange behaviour.

At the beginning none of my backgrounds would load and it showed broken. Cleared the cache and same thing, but when I turn a room light on it would show.

Now i have this.

image
image1377×853 28 KB

The rooms are in the correct place but the background image is totally off.

Checked the code and all looks ok.

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Morning: local/floorplan/home_morning.png
      Afternoon: local/floorplan/home_afternoon.png
      Evening: local/floor/plan/home_evening.png
      Night: local/floorplan/home_night.png
      unavailable: local/floorplan/home_transparent.png
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.front_facade
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Facade.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.outside_entrance
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/FrontTerrace.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.outside_columns
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Columns.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.living_zone_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Living.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.corridor_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Corridor.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.light_group_hallway
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Hallway.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.kitchen_spots
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Kitchen.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
  - type: image
    entity: light.lights_group_bathroom
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Bathroom.png
      'off': local/floorplan/home_transparent.png
      unavailable: local/floorplan/home_transparent.png
image: local/floorplan/home_transparent.png

Any ideas?