How to calculate sub-image size in lovelace panel view

So I have a view with panel: true so it fills entire screen. Then I have picture-elements card with the background image. Then I have image element with state_images. It seems that I have to stylize the image element with an arbitrary position and width to match the panel background image? I know the exact pixel size of both images but using them gives wrong size and position. How do I get pixel perfect matching without having to guess the correct position and size by trial-and-error?

x_pixel_position / x_pixel_image_size = number_you_use_for_x
y_pixel_position / y_pixel_image_size = number_you_use_for_y

EDIT: If i remember correctly, you may also need to add padding to each position. You’ll have to look at the css using F12 to see if padding is required for the equation. The padding will be either 4 or 8.

Hmm I’m not sure we talk about same thing.

My background (floorplan) is 1902x1000. But in panel mode so maybe it is scaled to 1920x?

Partial floorplan for roomX is 346x265

In config I have to use (by trial and error)

style:
  top: 399px
  left: 759px
  width: 1518px

to match the room. None of those pixel amounts make any sense to me. Adding padding to the list seemed to make no difference.

so…

top would be 399/1000 and you would remove the unit px and add %
left would be 759/1920 and you would remove the unit px and add %

but if width is making the width of it static… then…

1518/1920 = 0.790625‬

so…

399/1000 * 0.790625‬
759/1920 * 0.790625‬

which would end up as

style:
  top: 31.54%
  left: 31.25%
  width: 1518px

I want to use px for pixel perfect matching. Numbers 399 and 759 and 1518 are completely random I got by trial and error and that config is working, but it is very cumbersome to guess the numbers.

Can you calculate top and left (and width) for me based on actual image sizes? 1902x1000 and 346x265. Because I cannot.

You cannot use pixel by pixel matching when the screen dynamically changes. You need to use percents. Also, you have to make sure your zoom level is at 100%, not zoomed in.

This of course is assuming that width is a valid input for the style. It’s possible that you may not be able to override the width css.

My screen is not dynamically changing. And width is working and I have guessed the correct value. But I want to know how they are calculated.

Ok that still doesn’t change the calculation. Use percentage and not pixels and you won’t have to specify the size and the calculation will be what I originally posted.

I’m not sure why you’re having trouble with percentages. It’s a simple equation.

(pixel position / total size) * 100 = percentage position

I’m not having trouble with percentages. With percentages I get the same problem. By calculating, I get completely wrong size. I have to guess. It doesnt matter is it pixels or percentages, I just want to know how to calculate. Your equation is what I tried too but it is not correct.

And i’m telling you how to calculate it. Please share your attempted config with percentages and the output with an image vrs ‘what you expect’.

I’m not sure what else to tell you. Maybe you assume that it’s the top left of your object vrs the center of your object that you’re placing?

so if your pick point is top left…

((object pixel position + object size / 2 )/ total image size)) * 100 = percentage position

That’s assuming you didn’t adjust the aspect ratio of your object.

All this turned out to be some kind of caching bug.

I recently changed the pictures of individual rooms so the new ones are completely different size. The lovelace interface shows correctly the new images and I was using it to visually put them in place by trial and error. But on the background, it was still calculating the top/left/width with the dimensions of the OLD cached images. I changed the names of the new images and entered new names in config, and now everything started to make sense.

Thanks for bearing with me.