I design my wall tablet dashboard (which uses the picture element card) on my PC using Edge. It looks good.
I then look at the dashboard on my Android tablet using Fully Kiosk Browser and things are out of possition. I then have to go back and change sizes and positions to make it correct.
Why is there not more consistency?
It’s CSS. You have to choose the correct positions that fit both screens. Avoid using pixels, because screen sizes differ. Use element sizes or percentages. Keep in mind that the percentage is based on the element it’s inside, not the screen. I.e. the sizes are based on the card size, not screen size.
Also keep in mind that images are static in size and position is based on the upper left corner. So sometimes you have to use an equation to position it based on the center. Or you have to size the icon as well as position the icon.
Thanks. I’ll take a look
It might be more of a FR than a WTH but imagine if you could position and scale in the preview window! You’d still have to jump between devices to check but it would help loads with the initial setup.
I just started looking into this more.
It seems that if we can do the math for each device’s resolution via media queries, the HA front end should also be able to do the same thing dynamically.
It does, people just don’t realize the percentages are from the upper left corner, not the center of the object. So everything moves around in a way they don’t expect. And images are static in size, so you have to specify the size on images, otherwise it will just plop the picture there.
@petro Yes, but the problem is that it resizes from the native resolution to begin with when configuring the elements.
If I’m using images that are all based on the same reference scale, I shouldn’t have to re-configure the size at all. That’s what I’m driving at.
It doesn’t know that, you have to specify that reference scale by setting the height and width of your images with css
Right. That’s why we need an option to “preserve source scale” or similar.
Here’s a notional (read made-up but demonstrative) example:
I create a background image that is 500px x 500px and an element that is 100px x 200px. Currently, the Picture Elements card arbitrarily rescales the element differently from the base image. So, the background image might be 250px x 250px (.5 scale), but the element is something like 40px x 80x (.4 scale).
If we had an option to “preserve source scale,” the element could re-scale with the background image (both would be .5 scale or whatever needed to fit the viewport).