Icons are misaligned when shown in browser

Hi all,

I'm seeing an issue in control pages (2022.2.1) where the icon alignment looks fine in both the editing of the control page AND in Indigo Touch, but when I view it in a browser on my Mac, the icon is shifted.

Here's what I see when editing the control page:

Screen Shot 2023-03-01 at 6.54.39 AM.png (381.38 KiB) Viewed 1374 times

And here's what I see in the browser:

Screen Shot 2023-03-01 at 6.54.46 AM.png (304.82 KiB) Viewed 1374 times

Any ideas what may be causing this?

Is there any feedback on this? Jay or Matt?

[jay (support)]

I notice that the two images are not the same (one with the door closed and one with it open). Are you sure that those custom images are the same dimensions? Custom heuristic images must have the same dimensions or oddness will likely occur.

Yes, they are the same. I'm attaching them. I have on/off images for two different sizes, so four images in total:

Door+true.png (1.33 KiB) Viewed 1288 times

Door.png (871 Bytes) Viewed 1288 times

Door 2x+true.png (3.25 KiB) Viewed 1288 times

Door 2x.png (1.87 KiB) Viewed 1288 times

[jay (support)]

Hmm. I just tried to replicate and I can't. Can you send me an email that control page in it? (you can drag a control page from the Home window to the Finder and it'll create a clipping file that you can zip up and send me). I'm assuming you're using those images as variable state representations (because of the +true on the end). It looks like you have a background image so send that along as well.

[matt (support)]

Also try stopping and restarting the Indigo Server and clearing your browser cache. If I remember correctly the Indigo Server caches the dimensions of the images when it first loads them, which is then used by the Web server for positioning. If the size of the image(s) changes then you might need to force that cache to be cleared (by restarting the server). If you haven't recently changed the images at all then this is unlikely to fix the problem, but it is worth a try.

[jay (support)]

I got your db and saw what you were seeing. But, switching the image selector from "Door 2x.png" to "Door.png" and then back seems to fix it. As Matt suggested, I think there's some weird caching going on and perhaps the control page just saved the wrong dimensions (perhaps from an earlier version of those images). Switching the image caused Indigo to recalculate the dimension which will then render correctly. Let me know if that worked for you.

BTW, you can tell the dimensions are off when you select it - you can see the four corners that define the image corners (blue corners). Your version has a very large rectangle.

That's the hint I needed. Changing the icon to something else and back has fixed the problem. Thank you Jay and Matt!