overlays not positioned correctly

[robhicks]

I'm working on a application where I would like to consider using Openseadragon. The project involves displaying single images that have been been OCRd using machine learning.

Users of the application will verify OCRd text at specific locations. The application has access to the suggested OCRd text and the x and y coordinates for the bounding box of where the OCRd text exists. The x and y coordinates are in percentages of the image, with 0, 0 starting at the upper left side of the image.

By all indications, this should be a good fit for Openseadragon. But overlays drawn on the image using Openseadragon are never where they should be. Since Openseadragon has been released for so long, I assume I'm doing something wrong.

To show the problem, I have created a Code Sandbox project. I have supplied an image that shows where each of the highlights should be placed. Two buttons are provided at the bottom of the page to walk through the highlights. The computed Openseadragon Rect objects are logged in the console.

I would appreciate help understanding why the highlights are off.

The project uses the latest version of Openseadragon, which at the time of writing this, is v4.0.0.

[msalsbery]

@robhicks

You'll probably find it pretty easy to work with percentage coordinates in OpenSeadragon.

OpenSeadragon's viewport coordinates have one issue, however: y-axis coordinates/sizes are a factor of the image width and the image aspect ratio, so you'll need to adjust for that.

I've never used codesandbox before, but I forked your sandbox and adjusted your overlayRect y-coordinates and heights by multiplying by hardcoded image aspect ratio.

    overlayRect = new Openseadragon.Rect(
      $currentField.x1,
      //$currentField.y1,
      $currentField.y1 * (2500 / 4000),
      //($image.x * $currentField.x2 - $image.x * $currentField.x1) / $image.x,
      //($image.y * $currentField.y2 - $image.y * $currentField.y1) / $image.y
      $currentField.x2 - $currentField.x1,
      ($currentField.y2 - $currentField.y1) * (2500 / 4000)
    );

Hopefully this gets you closer to what you're looking for:

CodeSandbox

[Titan21]

y-axis coordinates/sizes are a factor of the image width and the image aspect ratio, so you'll need to adjust for that.

This. We ran into this as well. Most of our testing was with mostly square images, so we didn't even catch it until customers noticed in production.