Problem with the position/alignment for the icons and pictures in Lovelace Picture-Elements

Configuration Frontend
1

Hi everyone,
I’m pretty new to HomeAssistant.
I wanted to make a little homeplan with my lights and the map of my vacuum-cleaner via Lovelace Picture-Elements.
My Problem is, that the icons and picture changes it’s size or position depending on the size of the used display.
On the Computer (in the Browser) it looks different than on my smartphone. And even in the card-configuration-editor it looks a bit different then when I close the editor.
How can I correct this problem? Is there a way with “transform” or so to correct this?

type: picture-elements
elements:
  - type: state-label
    entity: sensor.openweathermap_temperature
    title: test
    style:
      top: 4%
      left: 1%
      color: blue
      transform: scale(0.8)
  - type: state-label
    entity: sensor.gersau_temperature
    title: test
    style:
      top: 9%
      left: 1%
      color: green
      transform: scale(0.8)
  - type: state-icon
    entity: light.eingang
    style:
      top: 13%
      left: 36.3%
      transform: scale(1,-1)
  - type: state-icon
    entity: sensor.sensor_motion_eingang_temperature
    style:
      top: 25.5%
      left: 36.3%
      transform: scale(0.6,0.7)
  - type: state-label
    entity: sensor.sensor_motion_eingang_temperature
    style:
      top: 22%
      left: 31%
      color: red
      transform: scale(0.6)
  - type: state-label
    entity: sensor.sensor_motion_eingang_light_level
    style:
      top: 18%
      right: 51.3%
      color: blue
      transform: scale(0.4)
  - type: state-icon
    entity: light.light_kuche_oben
    style:
      top: 49%
      left: 24.3%
      transform: scale(1.2,-1.2)
  - type: state-icon
    entity: vacuum.xiaomi_vacuum_cleaner_2
    style:
      top: 57.6%
      left: 15.8%
      transform: scale(0.6)
  - type: state-icon
    entity: light.esstisch
    icon: mdi:square
    style:
      top: 49%
      left: 42.2%
      transform: scale(0.8,2)
  - type: state-icon
    entity: light.stube_oben
    style:
      top: 46%
      left: 63.0%
      transform: scale(1,1)
  - type: state-icon
    entity: light.schlafzimmer_marcel
    style:
      top: 75%
      left: 24.2%
      transform: scale(1,-1)
  - type: state-icon
    entity: light.schlafzimmer_barbara
    style:
      top: 75%
      left: 60.2%
      transform: scale(1,-1)
  - type: state-icon
    entity: media_player.mini_marcel
    style:
      top: 86.9%
      left: 26.9%
      transform: scale(0.5,0.5)
  - type: state-icon
    entity: media_player.mini_barbara
    style:
      top: 66%
      left: 69%
      transform: scale(0.5,0.5)
  - type: state-icon
    entity: media_player.wohnzimmerpaar
    style:
      top: 59%
      left: 46%
      transform: scale(0.5,0.5)
  - type: icon
    icon: mdi:home-roof
    hold_action:
      action: navigate
      navigation_path: /lovelace-zimmer/galerie/
    style:
      top: 15%
      left: 61%
      transform: scale(4)
      color: grey
  - type: custom:xiaomi-vacuum-map-card
    entity: vacuum.xiaomi_vacuum_cleaner_2
    calibration_points: null
    camera_calibration: true
    map_camera: camera.xiaomi_cloud_map_extractor
    hold_action:
      action: vacuum.xiaomi_vacuum_cleaner_2
    style:
      left: 14.9%
      top: 23.8%
      transform: scale(1.76)
      opacity: 30%
image: /local/homeplan/HomePlan3OG_Wohnung.png

HomeAssistant_Problem-Alignment-Lovelace_PC+Smartphone.PNG
HomeAssistant_Problem-Alignment-Lovelace_PC+Smartphone.PNG1312×1877 343 KB

2

I have found width in percentage seems to work better then transform.

1 Like
3

Thanks but sadly with percentage it’s also not good.

4

Famous issue, find it on Githib and start monitoring

5

This is how css works. You can use transform with a calculation in order to make it look correct on both systems. All developers run into this issue, I doubt home assistant will solve it when all websites everywhere struggle with the same issue. Usually you end up managing 2 separate pages (mobile and desktop) or you calculate the position and size of the icon.

E.g.

6

You don’t mention anything about your “Dashboard/View” where you made your card ?
I have solved ( well have adapted, my “Floorplan” View/Dashboard as follow:

views:
  - theme: Backend-selected
    title: FloorPlan
    type: custom:horizontal-layout
    badges: []
    cards:
      - type: picture-elements
        elements:
          - type: state-icon
            entity: light.d1
            name: light
            style:
              top: 36%
              left: 32%
          - type: state-icon
            entity: switch.ext_2_usb
            icon: mdi:alpha-i
            tap_action:
              action: toggle
              confirmation:
                text: Are you sure you want to do it?

… PS: rest of code is chopped

I.E

  1. Create a Dashborad:
  2. select:
    type: custom:horizontal-layout
  3. Add Picture-elements-card

RAW-Code Dashboard looks like this.

views:
  - theme: Backend-selected
    title: FloorPlan
    type: custom:horizontal-layout
    badges: []
    cards:

Looks the same in both Firefox/EDGE(regardless of screen-size/resolution/full-screen or not), and on phone-app (almost) :slight_smile:
Sorry i don’t use Chrome, but it should render similar as Firefox

2. Beside it’s not obvious what you have done with the “rectangle” on your dinning table( any code for that ?), there will ofcause be some discrepancies, where i.e icon-size don’t exactly follow the resizing exact … and showing 2 pics next to each other in same size, 1 from a tiny phone, other from a 32inns screen 720p or 2160p , will make a different

  1. resizing a picture with added (external) layer of icons, or other elements, is a difficult task

Thou above “solution” is what i came up to, to minimize discrepancies

EDIT: Note that i don’t use transform
EDIT2: My picture is .png … You might wanna convert your picture into .png, to make life easier
EDIT:3 If you want your picture in a card, in some other Dashboard, it would be like this ( i.e In a Masonry-view-Dashboard)

type: horizontal-stack
cards:
  - type: picture-elements
    elements:
      - type: state-icon
        entity: light.d1
        name: light
        style:
          top: 36%
          left: 32%
      - type: state-icon
        entity: switch.ext_2_usb
        icon: mdi:alpha-i
        tap_action:
          action: toggle
          confirmation:
            text: Are you sure you want to do it?