Manual zoom from sliders/range input

[johnico]

Hi is it possible to do a zoom on the canvas from sliders or range input ?
I guess i need to grab the zoom data and add something like the plus and minus button

thx for the support

[iangilman]

Sure, just put in a slider and whenever it changes, call viewer.viewport.zoomTo() with the appropriate value. You'll probably want to convert the slider range to a logarithmic scale. Also, you should watch for zoom events and update the slider.

[virtualgadjo]

Sure, just put in a slider and whenever it changes, call viewer.viewport.zoomTo() with the appropriate value. You'll probably want to convert the slider range to a logarithmic scale. Also, you should watch for zoom events and update the slider.

Hi, sorry to reopen this old thread but i must admit i can't find out how to achieve the last part of your answer with tiled images, what a noob...
my slider work very well when it comes to zoom the viewport but i can't get it to be updated depending on the zoom level when zoomed with the mouse

a little help would be very welcome :)

have a nice day

[iangilman]

Sure! Something like this should do it:

viewer.addHandler('zoom', () => {
    const zoom = viewer.viewport.getZoom();
    // Set your slider value to the zoom value   
});

I haven't tested that, but it's the basic idea.

There's a possibility you might get into some sort of infinite loop where you are watching the zoom to change the slider and watching the slider to change the zoom... You can fix that by keeping track of the most recent slider update and not updating it from your zoom handler if you're within a certain time threshold since then.

[virtualgadjo]

Hi Ian
and thanks again and again for your help

actually, that's exactly what i've done, it works very well with a single image (i've used animation-finished to avoid too many requests and it works fine, too, my range slider updates the viewer and the viewer updates the range slider after some simple math with the viewer zoom value)

when it comes to tiled Image (i've read what you say about being less accurate and tried, but unsuccessfully, to use TiledImage) it starts working at big zoom values (probably because it has less tiles to manage) but at lower ones i get funny results (with zoom eventhandler this time as nothing usable with animation or animation finished, just requests responses about the tiles that are in the viewer)
using the console to see what it returns, i understand what you said about accuracy
you know, i think i'll go without this range slider for the moment, the + / - buttons and the mouse do the job very well :)

have a nice day

[iangilman]

Hmm, I'm curious what you mean about the accuracy. You're saying the zoom values are weird when you're zoomed too far out? Or too far in?

[virtualgadjo]

hi,
well, actually, using the console, that's what i get around big zoom values (being zooming in of course, not back and forth)

seems better if i use getZoom(false) i just get one value but is it the right one? :)
but at low levels i get a lot of get requests logs between the values, probably when it changes the image folder it uses

on animation-finished it doesn't return any value for getZoom(), only a huge series of get requests
not that important, honestly i can manage to get what i want without that range slider, whatever size the image is

have a nice day

[iangilman]

@virtualgadjo Okay, thank you for the further information!