Get reference to existing OpenSeadragon Viewer

Question

I need to add an overlay to an existing OpenSeadragon viewer object which isn't created by my code, but elsewhere in the application.

I have got to a point where I know that the viewer has been created as I can access the various html elements that are created via jQuery. However I can't work out if there's any way to create a viewer from an existing reference.

I've tried using the id of the viewer div in:

var viewer = OpenSeadragon(id: "open-seadragon-viewer-id");

but this doesn't seem to work.

Is there any way to do this or can you only get the viewer within the code that initialised it?

I'm not aware of any way you can do this (unless somehow the existing code on your page stores the viewer in a global variable). It's an interesting feature request for OSD, though! It shouldn't be too hard to add if you want to pursue that, and I'd be happy to help point you in the right direction. I suppose it wouldn't help with your case, though, since you would have to update the OSD the other code is using. — iangilman, May 06 '21 at 18:32

iangilman · Accepted Answer · 2021-06-01T18:32:07.137

Here's one crazy thought... you could monkey-patch some portion of OSD in order to grab the viewer...

var viewer;
var originalIsOpen = OpenSeadragon.Viewer.prototype.isOpen;

OpenSeadragon.Viewer.prototype.isOpen = function() {
  // Now we know the viewer!
  viewer = this;
  
  // Reinstate the original, since we only need to run our version once
  OpenSeadragon.Viewer.prototype.isOpen = originalIsOpen;
  
  // Call the original
  return originalIsOpen.call(this);
}

It's kind of tacky, but should work. Note this assumes there is only one viewer on the page... if there are more than one, the same principle could work but you would need to keep track of an array of viewers.

BTW, I'm using isOpen, because it's simple and it gets called every frame. Other functions could work as well.

EDIT: fixed code so we are using the prototype. I still haven't actually tested this code so there may still be bugs!

score 0 · Answer 2 · answered Feb 13 '22 at 16:41

This solution does not directly answer the question, as it relies on your own code creating the OpenSeaDragon object. It is an implementation of @iangilman's mention of storing the viewer in a global variable. However others may find it useful. (Note that passing a global variable to a function requires a workaround - see Passing a global variable to a function)

The code demonstrates how to use the same OpenSeaDragon object to display different pictures.

var viewer3=null; //global variable

var newURL1='image/imageToDisplay1.png';
var newURL2='image/imageToDisplay2.png';
var elementID='myID';

//the loadScan function will display the picture using openSeaDragon and can be called as many times as you want.
loadScan("viewer3",newURL1,elementID);
loadScan("viewer3",newURL2,elementID);

//the actual function
function loadScan(theViewer,newURL,theID) {
    //if object has already been created, then just change the image
    if (window[theViewer]!=null) {
            window[theViewer].open({
                type: 'image',
                url: newURL
            });
        } else {
            //create a new OpenSeadragon object
            window[theViewer] = OpenSeadragon({
                prefixUrl: "/myapp/vendor/openseadragon/images/",
                id: theID,
                defaultZoomLevel: 1,
                tileSources: {
                    url: newURL,
                    type: 'image'
                }
            });

        }
        
}

Get reference to existing OpenSeadragon Viewer

2 Answers2

Linked