Page MenuHomePhabricator

Full Zoom Feature in Media Viewer
Open, LowPublic

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/167

Narrative

As a user, I want to be able to zoom on large image files in Media Viewer, so I can see the details in a variety of sizes.

Note: This is a proposal for the full version of this feature, which requires a lot of development time. For a simpler linkversion that could be implemented sooner, check out T77423.

Acceptance Criteria

We would like to enable zooming in the Media Viewer, for large images (and/or extra wide or tall mediafiles), with features like:

  • Zoom button (magnifying glass with plus sign) is present when the zoom level is 100%, and allows to increase the zoom level.
  • At 100% zoom level, when the user hovers the zoom icon, an overview thumbnail (navigation pane) appears with the zoom controls.
  • When the image is zoomed, the overview thumbnail becomes fixed (is visible and permanently shown regardless of the cursor position).
  • The overview thumbnail indicates which area of the image is being shown, and allows the user to move the active area.
  • the overview thumbnail allows the user to zoom-in ( + ), zoom-out ( - ) and reset the zoom level (an expand button that appears on a corner of the thumbnail when the user hovers it).
  • When the image is zoomed, users are able to pan it. A grabbing cursor (or move cursor on those browsers not supporting the grab cursor) will be used over the image.
  • Shortcuts for zoom will be provided to avoid clicking and repositioning: shift+scroll and "+" and "-" keys will increase/decrease the zoom level centering the zoom area to the current mouse position. In addition, regular scroll can be considered to trigger zoom if it happens over the zoom control or the thumbnail overview.
  • You can select several levels of zoom, depending on the size of the original (2x, 3x, 5x, 10x?)
  • By default, wide media files are scaled vertically to 2/3 (if resolution allows), and the zoom mode is auto-enabled.
  • By default, tall media files are scaled horizontally to 2/3 (if resolution allows), and the zoom mode is auto-enabled.

See also community requests and related bugs below.More specifics will be addedlater in the Notes section below.

Note that this tool is a major development effort, which is likely to take weeks to build. Since we don't have the capacity to develop it in coming months, we are considering this much simpler interim proposal: #504 Basic Zoom.

Also note that Commons already has a nice here in Commons preferences .

Design notes

A prototype is available to illustrate most of the aspects described above.

media-viewer-zoom.png (458×622 px, 509 KB)

See preliminarymockups below, fromPau's original design exploration forextreme media sizes, which describes how the zoom mode could work, and howto adjust small, tall, and wide images. Note that the early prototypes were presenting the zoom icon disconnected from the navigation pane, just ignore that part.

Screen_Shot_2014-02-06_at_1.42.51_PM.png (474×721 px, 426 KB)

Screen_Shot_2014-02-06_at_1.43.20_PM.png (481×721 px, 32 KB)

Community Requests

Media Vision Talk Page # 1:

Any possibility of a "magnifying glass" tool that allows you to see a portion of an image at full resolution? (Should be entirely feasible, I've built things like this, though it would take some tricky tuning to make it work acceptably in such an open-ended environment. Still, bandwidths are going up...) - talk 00:53, 10 January 2014

Other community feedback :

Zooming would be useful. There is no obvious interface for getting to a larger version or the original media file. (FocalPoint, Daniele Pugliesi, Michael Z.)

About Media Viewer

Read more on MediaWiki product page .

Related Bugs

Event Timeline

MingleTerminator raised the priority of this task from to Medium.Dec 8 2014, 4:26 PM
In mingle on 2014-02-07 at 13:50:51, @Pginer-WMF wrote:

Need zoom icon, drag cursor icon and navigation panel assets.

In mingle on 2014-02-07 at 13:51:35, @Pginer-WMF wrote:

Need clarifications on how to support multiple zoom levels, how to zoom back and get out of zoom mode.

In mingle on 2014-02-10 at 15:45:23, @Gilles wrote:

What lets the user zoom in and out? On touch devices we can use the pinch gesture, but on desktop the scrollwheel is already captured by the browser and we need it for revealing/hiding the metadata panel.

The mockup suggests a single magnifier icon, which presumably could be clicked to cycle through predetermined zoom levels, but if there are many levels I think that two icons would be more appropriate, for zooming in and out. "To get out of zoom mode, click on the Zoom button again" definitely doesn't sound like that button was intended for zoom level anyway.

Since on the technical side of things we will need to load higher resolution images as the person zooms in, it would be nice to have that progress reflected in the UI (eg. 1-pixel tall discreet progress bar). Otherwise the user might give up before the details are loaded.

In mingle on 2014-02-11 at 00:42:22, @Tgr wrote:

Commons has a decent zoom viewer as an external tool (see the little zoom links below the image, e.g. https://commons.wikimedia.org/wiki/File:Bryce_Amphitheater_from_Sunrise_Point_Highres_2013.jpg )

Do we want something similar? (That is, do we want to be able to zoom into insanely huge images?) That is a very complex technical task, and we probably shouldn't try to reinvent the wheel.

In mingle on 2014-02-12 at 17:11:33, @Fabrice_Florin wrote:

Thanks, Gergo. I added a note about the ZoomViewer gadget in the card itself, as well as contacted its author, Daniel Schwen, to seek his advice about this feature.

Here is his email response:

"Quick comment on the mingle: Georgo said something about not reinventing the wheel. I agree. Opensource solutions exist to do all the work. VIPS (which, as I understand is either already in use or about to be used for scaling images) to generate the multi resolution pyramid data for zooming and IIP for the front- and backend (serving tiles and UI).
With that it was super easy to get the zoomviewer up and running in a master of hours."

In mingle on 2014-02-27 at 16:18:28, @Pginer-WMF wrote:

I have created a mockup with some ideas for zoom support: http://pauginer.github.io/prototypes/media-viewer/desk/mm-zoom2.html

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Tgr set Security to None.
Jdlrobson lowered the priority of this task from Medium to Lowest.Dec 17 2015, 9:06 PM
Jdlrobson subscribed.

IIPMooViewer (the library used by the zoomviewer tool) has a poor user experience and dated coding style. It should not be considered for production deployment. iipsrv is also pretty bad.

Maybe consider OpenSeadragon with some kind of DZI generator.

I don't know why everyone uses a tile size of 256x256. With 50 Mbps and 280ms RTT, and a lot of HTTP/2 head of line delay, I am finding that it is faster to download the original than to download a screenful of tiles, even for 200MB source images. I guess that's a function of viewport size, but even for mobile I think you could push it up to 512px. Doubling the tile width means reducing the request count by a factor of 4.

ProofreadPage (in use on Wikisources) uses OpenSeadragon and it seems pretty good.

I see ProofreadPage uses it in "legacy image pyramid" mode, that is, it just downloads a thumbnail or original of an appropriate size for the selected zoom level, it doesn't use tiles. That would be a very simple way to get this feature into Media Viewer, if the performance is good enough.

Shortcuts for zoom will be provided to avoid clicking and repositioning: shift+scroll and "+" and "-" keys will increase/decrease the zoom level centering the zoom area to the current mouse position.

I would suggest ctrl-scroll since that is the more common shortcut for zoom elsewhere, for example in browsers and in Google Maps.

Jdlrobson raised the priority of this task from Lowest to Low.May 22 2024, 3:50 PM

Spoke to @JWheeler-WMF about this. Picking this up to hopefully get the designs to a point where we can get the development going in the first couple weeks of next FY. Aiming for progress on designs in the next couple weeks.

@simon04 is this something you'd be interested in working on, given your MMV experience?

Also @ovasileva we had some concepts for media viewer improvements as part of our hypotheses for 3.1 in next year's OKR. Curious about your thoughts on that.

@JScherer-WMF asked on Slack for image size statistics.

Here are the JPEG width, height and aspect ratio histograms for Commons, as of 2024-06-11. The bucket label is the lower bound, so for example 0.001% of images have a width between 8 and 15 pixels. From a sample of 81831 images with base-36 hash beginning with "00".

WidthFrequency
80.001%
320.009%
640.068%
1280.528%
2562.983%
51211.845%
102419.190%
204839.038%
409625.452%
81920.836%
163840.046%
327680.004%
HeightFrequency
160.005%
320.026%
640.083%
1280.580%
2566.614%
51211.541%
102419.741%
204850.135%
409610.890%
81920.375%
163840.011%
Aspect ratioFrequency
1/640.001%
1/320.001%
1/160.011%
1/80.017%
1/40.932%
1/229.956%
166.966%
21.801%
40.287%
80.026%
160.001%

Queries used:

select pow(2,floor(log(2,img_width))) as width_bucket, count(*) from image where img_major_mime='image' and img_minor_mime='jpeg' and img_sha1 like '00%' group by width_bucket;
select pow(2,floor(log(2,img_height))) as height_bucket, count(*) from image where img_major_mime='image' and img_minor_mime='jpeg' and img_sha1 like '00%' group by height_bucket;
select pow(2,floor(log(2,img_width/img_height))) as ar_bucket, count(*) from image where img_major_mime='image' and img_minor_mime='jpeg' and img_sha1 like '00%' group by ar_bucket;
Jdlrobson lowered the priority of this task from Medium to Low.Tue, Jun 11, 6:19 PM

Justin has been working on this with Jack and Tim on the side. Design should be closed out soon.

Hi all,

@JWheeler-WMF, @tstarling and I have been working through some wireframes for this feature over the last few weeks. You can watch a walkthrough of the two previous iterations of the design in these two videos on Youtube.
Per their feedback, I've simplified things and increased the fidelity of the designs in this round of revisions.

Requirements
Desktop

  • Zero state is 100% zoom which is defined as fitting the image to the content area
  • Allow scroll to zoom on desktop when cursor is over the image
  • While zoomed, allow click and drag gestures to pan on desktop
  • Remove “zoom in” icon for cursor when the zoom button is over the image
  • A “grab hand” cursor should display when a user hovers over a zoomed image
  • The hand cursor should “close” while grabbing to pan with a mouse
  • While zoomed on desktop, horizontal scrolling pans the image
  • Zoom in button should be disabled when maximum zoom is reached
  • Zoom out button should be disabled when minimum zoom is reached

Mobile

  • Allow pinch to zoom on mobile
  • While zoomed, allow drag to pan on mobile
  • Don’t allow users to pan more than 34px past the edge of an image in any direction
  • Zoom in button should be disabled when maximum zoom is reached
  • Zoom out button should be disabled when minimum zoom is reached
  • Minimum zoom is fit to content area
  • Tapping an image in mobile hides the metadata pane and all “chrome” on the page except the “x” icon
  • User should still be able to use gestural zoom and pan controls in mobile when the controls are hidden
  • Replace current icon buttons with “neutral-normal” buttons from Codex.

Metadata pane

  • Metadata pane should scroll over top of the image when a user scrolls down while their mouse is hovering over the metadata pane

Screenshots

Screenshot 2024-06-14 at 2.29.59 PM.png (1×1 px, 2 MB)

Screenshot 2024-06-14 at 2.30.05 PM.png (1×1 px, 2 MB)

Screenshot 2024-06-14 at 2.30.13 PM.png (1×1 px, 1 MB)

Screenshot 2024-06-14 at 2.30.22 PM.png (812×1 px, 1 MB)

You can watch a walkthrough of the prototype on Youtube.