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 
.
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…
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.
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.
Sorry I missed it there.
However I have found, that I need to add this code before I add picture-element card
panel: true
after adding this picure occupy full size of the screen
But still its not exactly what I am looking for.
Is there a way to prevent main image from scaling? In other words to keep it in its original dimensions? With this parameter it fills the screen as intended, but still resize according to size of the side bar for example…
If the main image is NOT resized - then how is it supposed to be used on different clients (pc, tablet, phone)?
I understand.
It is {was) for a case where I was making a device specific dashboard (e.g. wall mounted tablet).
In the meantime by experimenting I have found, that resizing is not a problem in precise overlaying of image elements, so I am happy.
This worked for me! Tnx!
got live view in ha now xD
I solved this by putting a blank image (transparent .png image with no content) in the picture elements card. Specified athe actual image in the elements section. The image can then be resized.
type: picture-elements
elements:
- type: state-label
entity: sensor.teksthelper
prefix: Dimmer Glazenkast
style:
top: 150%
left: 50%
- type: image
image: /local/Oranje_driehoek_uitroepteken.png
style:
top: 75%
left: 50%
width: 55%
image: /local/Blank.png
It looks like this
and I can resize the triangle to any size I want by adjusting the width percentage.