Allow zooming to full detail in lightbox

[gnprice]

When viewing an image in the lightbox, you can pinch to zoom; but we currently allow zooming in only by a factor of at most 2.5x, aka 250%.

If you're looking at a large photo on a phone screen, that isn't enough to see all the detail that's there. We should make it possible to zoom in to see all the detail — so at least far enough for a 1:1 mapping between pixels of the image and physical pixels on the display. Then probably more than that, since phone displays tend to be denser than the point at which people can see individual physical pixels clearly.

I'm not sure what the right formula is. The right max scale factor might depend on the size of the original image and the size of the screen. The major reason to have a maximum at all is that if you make a pinch gesture that's interpreted as trying to zoom vastly in, that's not useful (it just fills the screen with a near-featureless blob of a few pixels from the image) and is annoying to zoom back out from. So this issue will require experimenting with different choices, and/or investigating what other apps do, in order to come up with a good formula with a clear rationale.

Given a choice of max scale factor, the actual implementation is easy: just set the maxScale parameter on the InteractiveViewer widget we use in the lightbox.

[sher999]

Tested on android with 6.67 inch screen size

Tested with below graph for calculating number of boxes in a row is visible on max zoom possible on multiple apps

whatsApp -> 2 box in a row
chrome -> 3 box in a row
Telegram -> 7 boxes in a row

Image 1

Image 2

maxScale : 8 gives the similar behaviour like WhatsApp zoom upto 2 boxes in a row

child: InteractiveViewer(
    maxScale: 8,

[gnprice]

Thanks for starting an investigation.

In order to make use of the results, we'll want them in the form of something that we can expect to be stable from one image to another, like a maxScale value. A number of boxes visible per row can be a useful intermediate observation; but it'll depend on the details of the image used, so needs to be combined with other details to compute a maxScale value.

I see WhatsApp in that screenshot, but the Telegram part of the screenshot doesn't seem to agree with your summary: I see about 5.5 boxes per row, not 7. I also don't see Chrome in the screenshot, though your summary has it.

The other part of an investigation will be to see how apps behave (a) when the image being viewed has a very large number of pixels, so that a maxScale of 8 or whatever still isn't enough to see every pixel; and (b) when the image has very few pixels, so that it naturally occupies only a small fraction of the screen.

[sher999]

I have tried with 3 different image in whatsapp and zulip beta app

Large image with 6000*4000 (w*h)

screenshot of Large image with 6000*4000 (w*h)

its behaviour in whatsapp is it can zoom to the maxScale : 30 as compare to zulip app

medium image with 300*250 (w*h)

screnshot medium image with 300*250 (w*h)

whatsapp it can zoom to the maxScale : 10 as compare to zulip app

very small image with 54*49 (w*h)

its behaviour in whatsapp is it can zoom to the maxScale : 10 as compare to zulip app
but in whatsapp every image is open fit to screen , then it zoom upto 1000% but in zulip it open's in its orignal size and then it zoom with maxscale : 10

Screenshot of both zulip preview and whatsapp

[sher999]

I'm being able to come up with relative value between image pixel size and MaxScale value . Tested on my physical device so screen size is not changing here.

[gnprice]

Thanks. Can you explain how you determined the values "maxScale: 30" and "maxScale: 10"?

[sher999]

I have tried different number to match with WhatsApp, hence those are my results

I don't have a rigid formula or any calculation to achieve that :(

[gnprice]

I see. You mean that you tried editing the lightbox code in this app to set maxScale to various values, and those were values that produced similar results to WhatsApp?

[sher999]

Yes

[gnprice]

Cool, that's helpful, thanks!

On the device where you did that testing, what are the dimensions of the screen, and what is the ratio of physical pixels to logical pixels?
On Android I find this app handy for answering questions like those — see its "Screen dimensions" screen:
https://play.google.com/store/apps/details?id=com.roysolberg.android.developertools

Perhaps better yet: you can also put a line like print(MediaQuery.of(context)); somewhere in the Flutter app, and see what that prints. (Or print more specifically the size and devicePixelRatio fields from that object.)

[sher999]

Size:(392.7, 825.5) and devicePixelRatio: 2.75