Small change to public.php

[Jonk2]

I've always disliked the way the public.php image is shown at 100% width, so for me, I've manually changed the following in allskyl/html:

from...

newImg.style = "width: 100%";

to..,

newImg.style = "max-height: 100vh; max-width: 100%";

What this does, is rather than show the image at 100% width, which only shows the top 3/4 of the image (meaning scrolling to see any overlay data at the bottom), it shows the full image but limits the size depending on viewport (not display) height and width. It should never hide any of the image when resizing the browser window.

I've tested on Firefox and Edge on PC, and Safari on an iphone.

Easy for anyone to try, so I hope you consider this as an improvement idea.

[EricClaeys]

@Jonk2, even though you may be the only one who uses public.php, I will test the change and put it in the next major release. :-)

[Jonk2]

The only thing that I don’t like about this currently is when the page is refreshed, the original sized image appears full size briefly before being resized to fit the viewport.
I’m going to see if preloading the image before displaying it helps.

[EricClaeys]

Jon, are you running Point Release 4? I thought we fixed that.
What browser are you using?

[Jonk2]

Yes, point-release-four... I'm using Firefox on Windows 10 mainly, and safari on iphone / ipad.

I think I noticed the image would refresh without the page flashing before, but by resizing the image on the fly, the browsers still flash the full size image very brefly, which I guess is normal unless some code is needed to sideload / preload the image or whatever it's called.

One method I remember is loading the image and having it at a large -x position number in css to effectively have it off the side of the screen, and then loading the image again later in the code, and as it's already loaded it appears seemlessly. Not sure if this is the right approach here but worth a try if my suggestion of always fitting to the viewport is accepted.

[EricClaeys]

Only Firefox has that flashing problem. Some user gave a fix but it may have been for the Website but should work on the WebUI. I will check.

[EricClaeys]

@Jonk2, Jon,
This compresses the image vertically but not horizontally. See the screenshot below. This is on Edge. Do you notice this also?
I actually prefer the original behavior.

It appears that the fix to:

The only thing that I don’t like about this currently is when the page is refreshed, the original sized image appears full size briefly before being resized to fit the viewport.

is to include the max-height here as well:

<img id="current" class="current" src="<?php echo $image_name ?>" style="max-height: 100vh; width: 100%">

(I was thinking of a different flashing problem in a prior comment. That was resolved by pre-loading, which has been implemented.)

[Jonk2]

@EricClaeys when I tested it on Firefox, Edge (Windows) and Safari (ios), I didn't see any distortion.

The more recent versions of allsky don't show the image flashing in Firefox (previously discussed) as they're rendered by the browser any more, but my point was using a viewport resize, I noticed the full size rendered image is displayed, then resized, causing a noticable flash - this may be browser specific though. Did you notice this when having a look?

[EricClaeys]

I also noticed the full-size image flashing before the smaller one. But as I said in my last post, adding the max-height fixed that.