OpenSeadragon zoom issues

Question

I am trying to learn openseadragon zoom functionality, however, not understanding something. I put together a simple example and have few questions: https://codepen.io/Ivalina/pen/poPbaMv

When page first loads, how can I make sure that when I click zoom out right away, image doesn't get any smaller than it already is. This is confusing, as I would hope it starts at its smallest. (priority)

Another question, I did set the min and max zoom levels, yet when I keep on clicking zoom in, it definitely goes beyond 3 clicks. Same goes for zoom out once zoomed in. Is there a way to limit zoom to specific amount of clicks (preferably 3).

var tileSources = {
    Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        TileSize: "256",
        Size: {
            Width:  "13920",
            Height: "10200"
        }
    }
};

var viewer = OpenSeadragon({
    id: "seadragonviewer",
    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
    tileSources: tileSources,
    visibilityRatio: 1.0,
    constrainDuringPan: true,
    minZoomLevel: 0,
    maxZoomLevel: 2,
    zoomPerClick: 1.5,
    gestureSettingsMouse: {
      clickToZoom: false,
      scrollToZoom: false,
      flickEnabled: true
    },
    gestureSettingsTouch: {
      clickToZoom: false
    },
    visibilityRatio: 1.0,
    useCanvas: false
});

It looks like maybe you have changed the codepen since you asked this question, since click to zoom isn't happening at all? Anyway, I'm actually not sure how you would guarantee that it goes in exactly three clicks. For one thing, I believe how much you have to zoom to get all the way in depends on how big the viewer is... on a large monitor you won't have to zoom as much as you would on a phone. Perhaps it's better to just let it work the way it wants to? — iangilman
clicking on the buttons zoom in and out is working, I just tried the pen that I have. Overall the requirements are not to go beyond 3 clicks on zoomin nor zoomout when clicking the buttons. So what I need to do if possible is no matter what the size of viewer is, I can only zoom in 3 levels. — coder
I guess I don't understand what maxZoomLevel is for then. I would assume it would indicate you can only go so many clicks. Is there a way to overwrite this functionality and only set it to 3? — coder

iangilman iangilman · Accepted Answer · 2021-07-30T18:50:26

This isn't necessarily an answer, per se, but I need more space than a comment, so here goes:

The OSD "zoom" is based on the relationship between the width of the image and the width of the viewer. It is 1 when the image exactly fills the viewer horizontally. If you zoom in enough that the viewer only shows half of the width of the image, the zoom is 2. Zoom in enough that the viewer can only hold a quarter of the width, and the zoom is 4. The maxZoomLevel option is based in those terms.

By default, the furthest you can zoom in is based on the ratio of image pixels to screen pixels specified in the maxZoomPixelRatio option (default 1.1). In other words, if maxZoomPixelRatio is 1, then you can only zoom in enough to see the image pixels 1:1. As you've found, you can override that with maxZoomLevel, but then how close to the actual pixels you can get will depend on the size of your viewer.

At any rate, if what you want is to guarantee three clicks and you don't care about how close you get to the actual pixels, here's a scenario:

If your image naturally fills the viewer on the horizontal dimension, you'll get a starting zoom of 1. If zoomPerClick is set to 2, on the first click your zoom will now be 2. On the second click it'll be 4 (zooms are multiplicative), and on the third zoom it'll be 8. Therefore you should set your maxZoomLevel to 8 in that scenario.

If your image doesn't start with a zoom of 1 (because it's tall enough it doesn't fill out the width of the viewer), you'll have to base the maxZoomLevel on that starting zoom. If you have a different zoomPerClick, you'll have to take that into account.

If you do care about how close to the actual pixels you can get on the third click, you'll need to adjust your zoomPerClick so it's different for every viewer size/image size ratio.

I hope this additional background info helps!

EDIT: here's how you might set the zoomPerClick:

What you need to know is the home zoom (where the user starts with the image zoomed all the way out) and the full zoom (when you're zoomed all the way in to see the pixels of the image 1:1), and then you need to figure out what you have to multiply the home zoom by 3 times (since you want 3 clicks) in order to get to the full zoom. Fortunately you can do this after the image is loaded, so OpenSeadragon can do most of the math for you.

viewer.addHandler('open', function() {
  const homeZoom = viewer.viewport.getHomeZoom();
  const fullZoom = viewer.viewport.imageToViewportZoom(1);
  viewer.zoomPerClick = Math.cbrt(fullZoom / homeZoom);
});

I haven't tested this code, but it should be the basic idea.

OpenSeadragon zoom issues

1 Answers