WTH does the size and position of elements in a picture elements card vary between devices?

[templeton_nash]

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?

[petro]

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.

[templeton_nash]

Thanks. I’ll take a look

[AJStubbsy (Adam)]

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.

WTH can't overlays be dragged to position on picture element cards?

It can be a fine art positioning state_images and other overlays on picture element cards. Using px or % can change actual location on the card and a lot of trial and error is required to get it looking right. It would be superb if you could drag (maybe scale as well at a push) to a new location when in editing mode.

[GoodyGizmos]

I just started looking into this more.

Styling elements in Picture elements card: a small tutorial

Ok. Thank you. I guess I got what I came here for which is that both are working as currently intended/designed and there’s nothing I’m missing in the basic configuration of the Picture Elements Card itself. Overall, whether it’s this card or many others, I wish the HA front end had CSS more embedded (UI and/or yaml) so we didn’t have to mess with all of these CSS properties, card-mod, etc. These two “issues” are IMO prime examples. I bring in a bunch of images all scaled appropriately, but th…

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.

[petro]

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.

[GoodyGizmos]

@petro Yes, but the problem is that it resizes from the native resolution to begin with when configuring the elements.

Styling elements in Picture elements card: a small tutorial

I’m trying to recreate an Apple Remote using Photoshop by exporting each layer individually for each button. I thought this would be the best way since it would preserve the exact base dimensions for the base image and overlaid image elements (i.e. autoscale), but it appears that the picture elements card resizes image elements. Is there a way around this so that the elements scale in relation to the base image? Photoshop [image] Picture Elements Card Configuration [image]

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.

[petro]

@GoodyGizmos

I’m using images that are all based on the same reference scale

It doesn’t know that, you have to specify that reference scale by setting the height and width of your images with css

[GoodyGizmos]

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).