Loading Profile...
How Do I Calculate the Maximum Zoom?
I'm working on implementing a MultiScaleImage viewer in Flex. I've read through the API docs, but am I missing a function that will calculate the maximum (i.e. 1:1 pixel) zoom for the image?
I've tried using the method shown on your site at http://gasi.ch/blog/inside-deep-zoom-2/, but the zoom level I calculate is much lower than the maximum that can be achieved with the mouse wheel.
I'm working with an image that is 111180 x 13481, which calculates out to a maximum level of 17 using your function, but I can actually zoom into the image up to a level of 33.59, based on setting a scaleconstraint.
My goal is to calculate the maximum zoom possible for an image and set this as the maximum for an HSilder
Thanks!
-chris
I've tried using the method shown on your site at http://gasi.ch/blog/inside-deep-zoom-2/, but the zoom level I calculate is much lower than the maximum that can be achieved with the mouse wheel.
I'm working with an image that is 111180 x 13481, which calculates out to a maximum level of 17 using your function, but I can actually zoom into the image up to a level of 33.59, based on setting a scaleconstraint.
My goal is to calculate the maximum zoom possible for an image and set this as the maximum for an HSilder
Thanks!
-chris
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The best answer from the company
-
Christian,
Very good question. This probably warrants for a deeper discussion. However, I'll try to give you a quick rundown. First of all, you have to be very careful when talking about zoom, scale and levels.
In OpenZoom it works as follows, zoom (as in IViewport.zoom) is a relative measure. What does that mean? Well, setting zoom = 1 will ensure your entire image fits exactly into your viewport, no matter whether you're looking on it on your 24" desktop screen, 15" notebook or your tiny mobile phone screen.
The scale (as in IViewport.scale) property on the other hand is an absolute measure. Therfore, setting scale = 1 will ensure that your scene is rendered at 1:1 pixel size, e.g. your scene is 4000x3000px, then it will actually be rendered as if it had this size in the viewport.
In my point of view, both zoom and scale are very useful measures and complement each other.
Example
Basically, if you wanted to prevent your image from scaling beyond 1:1, you'd have to set a ScaleConstraint with maxScale = 1. However, you have to understand that the constraint applies to the scene which does not necessarily have the same pixel dimensions as your image. For example, at this point, the larger dimension of the scene in the MultiScaleImage component is set to 16'384 pixels (yes, that's 2^14) which I've found to work best with the Flash rendering pipeline. Therefore, you'll have to adjust your maxScale parameter to take this into account, e.g. see OpenZoom Nano viewer line 312ff:
http://code.google.com/p/open-zoom/so...
As for how to configure you're slider, at this point I'd suggest you to work with the scale parameter which is easier than zoom as that one is relative to your viewport dimensions. If you find a better solution, please let me know, I'd love to hear it!
Feel free to let me know if you have any questions about this.
Cheers,
Daniel
P.S. Forget about the function to calculate the max image pyramid level you've found on my blog as it's only distantly related to this discussion. :)
I’m curious myself.
The company says
this answers the question
-
Inappropriate?Christian,
Very good question. This probably warrants for a deeper discussion. However, I'll try to give you a quick rundown. First of all, you have to be very careful when talking about zoom, scale and levels.
In OpenZoom it works as follows, zoom (as in IViewport.zoom) is a relative measure. What does that mean? Well, setting zoom = 1 will ensure your entire image fits exactly into your viewport, no matter whether you're looking on it on your 24" desktop screen, 15" notebook or your tiny mobile phone screen.
The scale (as in IViewport.scale) property on the other hand is an absolute measure. Therfore, setting scale = 1 will ensure that your scene is rendered at 1:1 pixel size, e.g. your scene is 4000x3000px, then it will actually be rendered as if it had this size in the viewport.
In my point of view, both zoom and scale are very useful measures and complement each other.
Example
Basically, if you wanted to prevent your image from scaling beyond 1:1, you'd have to set a ScaleConstraint with maxScale = 1. However, you have to understand that the constraint applies to the scene which does not necessarily have the same pixel dimensions as your image. For example, at this point, the larger dimension of the scene in the MultiScaleImage component is set to 16'384 pixels (yes, that's 2^14) which I've found to work best with the Flash rendering pipeline. Therefore, you'll have to adjust your maxScale parameter to take this into account, e.g. see OpenZoom Nano viewer line 312ff:
http://code.google.com/p/open-zoom/so...
As for how to configure you're slider, at this point I'd suggest you to work with the scale parameter which is easier than zoom as that one is relative to your viewport dimensions. If you find a better solution, please let me know, I'd love to hear it!
Feel free to let me know if you have any questions about this.
Cheers,
Daniel
P.S. Forget about the function to calculate the max image pyramid level you've found on my blog as it's only distantly related to this discussion. :)
I’m curious myself.
The company says
this answers the question
-
Inappropriate?Thanks Daniel! This is very helpful. I was not thinking of zoom being a relative property. Using the viewport scale instead achieves what I need.
Great work by the way!
-christian
I’m thankful
-
Inappropriate?Christian,
Glad my information helped you. This topic definitely calls for an in-depth article. :)
I admit, I haven't figured out a satisfying way to model your use case with a slider, myself. If you gain more insight, feel free to share.
I think of it this way, the close-up state can be bounded by scale but the overview is better modeled by the zoom property. Either way, one of the two has to be adjusted according to the size of the viewport as far as I see it.
Cheers,
Daniel
P.S. Happy you like OpenZoom! :)
I’m happy
-
Inappropriate?What I ended up doing was setting the maximum property of the slider to the maxScale calculated with the method from your examples. For now, I'm setting the minimum property to zero - in actuality, minScale is slightly more than zero, but since I'm setting a minimum zoom constraint also, the image never zooms out past zoom = 1.
Since the minScale != 0, there is a slight flicker in the slider handle from it moving from 0 to 0.0x when the the viewport is zoomed all the way out via the mouse wheel, but this isn't terribly noticeable, and good enough to get a demo out the door until I can come up with a more accurate solution. -
Inappropriate?Christian,
Nice. Sounds like a pragmatic solution. And I'm all about pragmatic.
–Daniel
-
Inappropriate?I haven't read the rest of the thread in detail, but I just went through this calculation. I think this will give you the zoom level to make your image 1 to 1 on the screen:
private function get1to1Zoom():Number
{
var descriptor:IMultiScaleImageDescriptor = getGridImageDescriptor();
if ( grid.viewport.viewportWidth < grid.viewport.viewportHeight )
{
return descriptor.width / grid.viewport.viewportWidth;
} else {
return descriptor.height / grid.viewport.viewportHeight;
}
}
Note that the viewport has to be set up before this is useful. i.e. in applicationComplete(). -
Inappropriate?I think this is even easier:
I extracted this from the nano code and simplified it a little. I am not 100% sure that it is always right, but it was correct with everything i tested so far.
var limitingFactor:Number = Math.max(descriptor.width,descriptor.height);
var maxScale:Number = limitingFactor / Math.pow(2,14);
Very simple: you take the longer side, divide it by 2^14, there you go, that's your maxScale.
i do the calculatioen, when my multiscaleimage dispatches the Event.COMPLETE-Event.
I’m confident
EMPLOYEE
