onSelection rect parameter is in pixels?

[SuneRadich]

I am trying to add an overlay after a successful selection. I want the overlay be positioned and sized like the selection.

My thought was to use the Rect object that is being passed to the onSelection function, like so

onSelection: function(rect) {
    viewer.addOverlay({
        element: $('<div class="overlay" style="background-color: red"></div>')[0],
        location: rect
    });
}

It seems that the overlay is being positioned way off screen somewhere, maybe because the rect that is being passed in has values for x, y, width, and height in pixels, and that the addOverlay location option expects the values to be in percentages.

If I instead set the location to

location: new OpenSeadragon.Rect(0.33, 0.75, 0.5, 0.25)

I can hardcode an overlay.

How can I correctly add an overlay to the selected area? Do I need to tell OpenSeadragon to accept pixel values? Or should I somehow convert the values?

And yes, this is my first time working with OpenSeadragon, so I might have missed something very obvious :)

[MindFreeze]

Just added a new option that should help you (returnPixelCoordinates). Set it to false to get the selection in percentages. I don't see you using rotation but if you need rotation to work you will have to use a SelectionOverlay. See src/selection.js:282 for that.

[SuneRadich]

I actually figured out that I could use

viewer.viewport.imageToViewportRectangle(rect)

on the selection rect instance to get the correct values for the overlay.

[MindFreeze]

I was going to suggest that at first but decided that having this as an option made sense anyway ;)