Possible overlays location issue

We have this code snippet but:

  var bd = viewer.viewport.getBounds()

    viewer.addOverlay(
      element: element,
      location: new OpenSeadragon.Rect(p.x, p.y * bd.height, p.w, p.h * bd.height)
      checkResize: true
    )

The overlays methods is reference to the runtime overlays from the examples. The question here is why we need to multiply the bd.height factor for p.y and p.h part? I mean we have correct x, y, w, h values, but why we only needs to adjust the height related variable?

Thanks.

[iangilman]

No worries… we’ll get to the bottom of this!

So, in your diagram, all of those values are in image coordinates, right? In other words, they are based on the actual pixels of the image? Also, I assume 0, 0 is the upper left corner of the image?

When putting the overlays on, you need to do that in viewport coordinates, which is not the same as image coordinates, so you need to convert between the two. By default viewport coordinates also start with 0, 0 in the upper left corner of the image and go to 1 on the right side of the image (the bottom coordinate is based on the aspect ratio). Because the origins of the two coordinate systems are the same, and since we’re just scaling between the two, we just need to find out what the ratio is between the two in order to convert any of the coordinates. In the case of the default, with viewport X of the right side of the image being 1, that ratio is 1 / image width. Once you have that ratio you can multiply any of the above image coordinates by it to find out the viewport coordinate version.

Does that make sense? If not, which part doesn’t make sense?

I realize dealing with different coordinate systems can be challenging, but unfortunately it’s a necessary part of any kind of zooming system.

BTW, we’ve been focusing on just one strategy, but there are lots of ways to handle the conversion. At the risk of confusing things more, here are a few:

• Viewport coordinates are arbitrary, so you can set them to something different just by laying your image out differently. For instance you could specify the width of your image in viewport coordinates to be the same as its width in image coordinates. There’s an example of this on http://openseadragon.github.io/examples/multi-image/ but I can give more detail if you want.
• When you specify your overlays you can specify them in image coordinates by using px and py instead of x and y. This is mentioned on http://openseadragon.github.io/examples/ui-overlays/ but probably not prominently enough.
• Instead of manually converting between coordinates by finding the ratio you can have OSD do it for you using Viewport’s imageToViewportRectangle (unless you are using multiple image in the same viewer, in which case you need to use the TiledImage’s version).

[mertyildiran]

@iangilman that’s an important issue which should be mentioned in the documents. @speed-of-light Yes, I can confirm that you need to multiply both top and height values with viewer.viewport.getBounds().height otherwise the overlay shifts to bottom depending on the image dimensions.