Search code examples
javascriptopenseadragon

openseadragon update property showReferenceStrip at runtime

I would like to have a toggle button for the ReferenceStrip (property: showReferenceStrip). Even though the variable is updated at runtime, it is not updated visually. Is there some kind of way to update it?

<html>
<button id="toggleRefStrip">Toggle Preview</button>

    <div id="osd-container" style="width: 950px; height: 1200px;"></div>
        <script src="openseadragon/openseadragon.min.js"></script>
        <script type="text/javascript">
        var toggleRefStripBtn = document.getElementById("toggleRefStrip");
        toggleRefStripBtn.addEventListener("click",function(e){
            if(viewer.showReferenceStrip === true) { viewer.showReferenceStrip = false;}
            else {viewer.showReferenceStrip = true;}
            console.log("viewer.showReferenceStrip: " + viewer.showReferenceStrip);
        });
            var viewer = OpenSeadragon({
                crossOriginPolicy: 'Anonymous',
                visibilityRatio: 1.0,
                showRotationControl: true,
                defaultZoomLevel: 1.6,
                minZoomImageRatio: 0.4,
                //zoomPerScroll: 1, //deactivate mouse/finger zooming
                id: "osd-container",
                tileSources: ["images/T/1.dzi", "images/T/2.dzi", "images/T/3.dzi", "images/T/4.dzi"],
                sequenceMode: true,
                showReferenceStrip: false,
            });
        </script>    
</html>
Solution

  • Looks like there's no facility for that directly in OSD (though you can certainly file an issue or make a patch to add such a thing). It seems like you might be able to hide the referenceStrip with something like so:

    viewer.referenceStrip.element.style.display = 'none';

    ...and show it with:

    viewer.referenceStrip.element.style.display = 'block';