Floor plan touch target size and position changes with screen size

Share your Projects! Dashboards & Frontend
1

Hello!
I managed to get the floorplan working. But I ran into a problem where the touch targets look OK on a smaller screen but they are shifted when viewing on a larger screen.

Here is what it looks like either in the edit mode or on small screens:

image

and here are where the targets move to on larger screens or when not in card edit mode.

They are all shifted to the top and left of where they should be. Any ideas on how to fix it would be greatly appreciated!

image
image1295×1081 95.3 KB

Here is my panel code:

# State images
type: picture-elements
image: /local/floorplan/1080px/no_lights_3d_home.png
elements:
  - type: image
    entity: light.bathroom_vanity_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/bathroom_vanity_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.bedroom_nightstand_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/bedroom_nightstand_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.deck_light
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/deck_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.dining_room_main_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/dining_room_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.kitchen_counter
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/kitchen_counter_mask1.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.living_room_main_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/livingroom_main_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.office_main_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/office_main_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.porch_light
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/porch_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.under_cabinet_lights
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/floorplan/1080px/undercabinet_all_mask.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square_red.png
    style:
      top: 50%
      left: 50%
      width: 100%

# Lights
  - type: image
    entity: light.bathroom_vanity_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 15%
      left: 45.5%
      transform: scale(0.9)
  - type: image
    entity: light.bedroom_nightstand_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 20%
      left: 37%
      transform: scale(0.9)
  - type: image
    entity: light.deck_light
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 66%
      left: 27%
      transform: scale(0.9)
  - type: image
    entity: light.dining_room_main_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 68%
      left: 36%
      transform: scale(0.7)
  - type: image
    entity: light.kitchen_counter
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 72%
      left: 42%
      transform: 'scale(0.3, 0.6)'
  - type: image
    entity: light.living_room_main_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 43%
      left: 40%
      transform: 'scale(1.4,1)'
  - type: image
    entity: light.office_main_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 68%
      left: 57%
      transform: 'scale(1,1)'
  - type: image
    entity: light.porch_light
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 46%
      left: 62%
      transform: 'scale(0.5, 1.1)'
  - type: image
    entity: light.under_cabinet_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    state_image:
      'on': /local/floorplan/1080px/transparent_square.png
      'off': /local/floorplan/1080px/transparent_square_red.png
      unavailable: /local/floorplan/1080px/transparent_square.png
    style:
      top: 68%
      left: 48%
      transform: 'scale(0.7, 0.9)'
2 Likes
2

The reason is that your overlay images are fixed in size. You need to size them in % with the height and width tags, so they will scale with your display size.

3

Ah that explains it. Is it better to resize the images themselves or is there a CSS parameter that would scale them X% with screen size?

Thank you for the comment, that was very helpful!

4

You can use one transparent image that you add multiple times and resize to fit your varied rooms. It takes a bit of fiddling. To visualize the positioning better, just use border: 1px solid red and remove it once you’re done with the size and position of your images.

With height: xx% and width: xx% you scale on relation to the parent element, i.e. the picture-elements card.