Lovelace: Sizing the main image of picture-elements

Hi !

I’d like the main image of my picture-elements card (a 2D floorplan) to size according to the size of the display of the viewer, in a responsive manner.

How would this be accomplished? I already tried:

  - title: BG
id: bg
background:
icon: mdi:door-open
cards:
  - type: picture-elements
    image: /local/images/bg.png
    style:
      width: 100%
      height: 100%
    elements:
     ... all kinds of elements go here ...

Which didn’t work, even if I expected it to :slight_smile:

2 Likes

https://www.home-assistant.io/lovelace/views/#panel

thanks for copying the url but there is not much info in it :slight_smile:

1 Like

It literally links to the parameter that handles what is being asked in the thread. Panel=True. Not much more you could ask for…

Don’t get me wrong but is there no option to give the size scaling instead of saying panel = true ? I don’t want my floorplan taking the whole screen.

Thnx in advance

Lovelace scales cards based on the viewing screen and there is a maximum size for cards horizontally. Because of that, it limits what you can do with horizontal and vertical card sizes. Your only option is to use panel: true. You can attempt to use card modder to get the size you want, but typically those sizes are in pixels so it may look bad on one screen vrs another.

I think I had a similar issue. maybe this helps

When using panel=true for floor plan view, the image was automatically scaled way to big, taking up the entire screen on most of my devices and requiring me to scroll down to see certain rooms (annoying).

To fix I added empty spaces to the left and right of my floorplan .png files (basically increased canvas width in photoshop) until I was satisfied with the view on most of my devices.

9 Likes

This topic is old, but I do have this issue at hand currently… my floorplan png is too big for most screens… how can I “scale” that to the browser in panel mode?

2 Likes

Same here, the image in the panel mode is bigger than the screen.
@sender, did you fix it for you?
I played with the image size, played with the canvas size. nothing seems to work.

1 Like

No fix here… I think it is not possible. At least… not for me with the help I got :blush:.

Edit: in width it kinda works for the image, but then the entities dont zive along… rendering the picture practivlcally hidden by the entities in a small screen… :blush:

I have the exact same issue. VERY frustrating to be honest. I get the limitations of responsive design, but man. The problem results because I cant tell the “panel” that it should use the vertical view as limit instead of the horizontal one. In my experience Dashboards are more often than not supposed to be “onepagers” instead of pinterest boards still this silly behavior persist in many dashboarding applications.

I will try out the card modder suggested by petro since this frustrating behavior forces you to build separate Dashboards for different Screens anyway. May as well go canvas and define everything pixel perfect.

For anyone else having this issue and unwilling to add space in their floorplan master image another possible workaround is to layout your dashboard in panel mode with vertical & horizontal stacks. Depending on the ratio of your floorplan to your desired screensize this can have decent results.

Example: (target screen standard 4k or FHD monitor or tablet size with roughly 2:1 ratio)
Your floorplan is square, then having two columns will divide the screen in very roughly two squares. You can e.g. have your floorplan on the left and other controls & weather widgets on the right. Depending on how crazy you want to get you can then nest horizontal & vertical stacks in a way that gives you sufficient control over the layout while still retaining some benefits of Resp. Design.

1 Like

Hi,

This is how I resolved it:

    title: EZVIZ
    icon: mdi:video-outline
    panel: true
    cards:
      - type: horizontal-stack
        cards:

          - type: custom:button-card
            color_type: blank-card
            styles:
              card:
                - width: 200px

          - type: picture-elements
            entity: ...
            ...

          - type: custom:button-card
            color_type: blank-card
            styles:
              card:
                - width: 200px
9 Likes

I had one image and I wanted to take full space of my TV (I’m using google cast). I just added white spaces to the image in such a way that the resulting image has an aspect ratio of 9/16, also activated panel mode.

@thomasloven your link is dead.

This is something I am trying to figure out - I have 2 floor plans like this:
Both resolutions are much bigger but elements card its scaling it to the same width and I am trying to figure out how to leave them in their original resolutions. They are not even taking up full horizontal space available.
Any help appreciated.

Here I tried to sort out these issues:
— how does behave a background image on different clients;
— how do behave elements on different clients.
You may ping me at that thread if you have any questions.

Thanks, I am going to have a look

I read all your oosts and although I found it very usefull in learning how to change icons and badges, still can’t figure out how to make this image to occupy whole widh of available screen.

It is explained there how an image occupies an available area.