These are chat archives for openseadragon/openseadragon

1st
Jun 2017
Illya Moskvin
@IllyaMoskvin
Jun 01 2017 14:23
Do you need the images to be zoomable? If not, would it be acceptable to just put them into absolutely-positioned HTML elements that are children of the viewer element?
Matthew Jack
@matthew-jack
Jun 01 2017 14:39
@IllyaMoskvin yes they need to be zoomable and pannable
so the images start in their respective corners and remain "pinned" there when zoomed until that their width >= 1 (in viewport terms), and then I reenable panning. But I'm struggling to nail down how to calculate the coordinates they need to pan to or by to get to the corner
sorry I guess the width would be less than 1, because I meant when the image takes up the full width of the viewer
Ian Gilman
@iangilman
Jun 01 2017 16:29
@matthew-jack I'm trying to get a sense for what you're trying to build... why are there two viewers? Are there more images besides just the two pinned ones?
Matthew Jack
@matthew-jack
Jun 01 2017 16:33
@iangilman fair question—this is for an ophthalmology-related application and there is a case where you want to view two images side-by-side exactly like this: https://c.ymcdn.com/sites/www.opsweb.org/resource/group/b04f8803-764c-4ba5-a056-bfef9c4ef954/rotational/fundus1.jpg
however, we don't have a way to stitch them together beforehand and have to fetch the images separately.
So I want to make a a viewer that can sync the zoom and pan of those two images. I have that part done but "pinning" the images to the corner so they do not move as they are zoomed I haven't figured out.
Ian Gilman
@iangilman
Jun 01 2017 16:35
Gotcha, that makes sense. Well, you'll have to adjust them every animation frame, since the default behavior is to zoom on the cursor (or the center of the viewport)
...and hitting the right point is probably going to involve both viewport.getBounds and tiledImage.getBounds, since they don't necessarily have the same aspect ratio
Btw, keep in mind that you can also move the image itself instead of panning the viewport, if that helps at all
Matthew Jack
@matthew-jack
Jun 01 2017 16:38
is that TiledImage.setPosition()?
Ian Gilman
@iangilman
Jun 01 2017 16:38
Yep
I don't know which is better, but both are worth considering
Also, the math might be easier with viewport.panTo instead of panBy; depends I suppose
Also remember that all of those functions take an immediately flag which makes them not animate but instead snap to the new location; since you're going to need to call it every frame, you should pass true for that flag
Matthew Jack
@matthew-jack
Jun 01 2017 16:41
That is really helpful, thank you! So if I'm trying to set the position to the corner of the viewport, do I have to account for the distance from the image's center to the image's corner? That is, if I just setPosition to the corner ( viewport coords = (0,1) ), does it set the center of the image to that position?
Ian Gilman
@iangilman
Jun 01 2017 16:45
Well, I think this would pin the image to the upper left:
viewer.addHandler('animation', function() {
  var viewportBounds = viewport.getBounds(true); // gets the bounds as they are this frame, not where they're animating to
  tiledImage.setPosition(new OpenSeadragon.Point(viewportBounds.x, viewportBounds.y), true);
});
...and this would do the upper right:
viewer.addHandler('animation', function() {
  var viewportBounds = viewport.getBounds(true); // gets the bounds as they are this frame, not where they're animating to
  var imageBounds = tiledImage.getBounds(true);
  tiledImage.setPosition(new OpenSeadragon.Point((viewportBounds.x + viewportBounds.width) - imageBounds.width, viewportBounds.y), true);
});
Like I said, I don't know if moving the image is a better choice than panning the viewport, but it might be worth trying
Does that answer your question?
Matthew Jack
@matthew-jack
Jun 01 2017 16:48
Wow, thank you very much! Yes this is great
Ian Gilman
@iangilman
Jun 01 2017 16:48
Cool :)