presentation_template.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${DEST}</title>
    <link rel="stylesheet" type="text/css" href="resources/domain.css" />
    <script src="resources/openseadragon.min.js"></script>
    <!-- Presentation created by https://github.com/statsbiblioteket/graph_presenter $(date +"%Y-%m-%d %H:%M") -->
</head>
<body>
    <div id="pageheader">
        <div id="collapsable">
            <h1>Graph for ${DEST}</h1>
        </div>
        <div id="searchbox">
            Search: <input type="text" id="domain-selector"/> <span id="domain-feedback">&nbsp;</span>
        </div>
    </div>

    <div id="zoom-display" class="openseadragon"></div>

    <script type="text/javascript">
        var myDragon = OpenSeadragon({
        id:            "zoom-display",

        zoomPerScroll: 2.0,
        showNavigator:  false,
        wrapHorizontal: false,
        prefixUrl: "resources/images/",
        tileSources: "${DZI}",
        overlays: [
        {id: 'info_1', x: 0.0028, y: 0.049, width: 0.049, height: 0.049}
        ]});
    </script>

    <!-- Pan and zoom to bookmarked position. Must be before the callback below to avoid timing problems upon open -->
    <script type="text/javascript">
        // We store the match immediately so that the MouseTracker does not mess up the initial URL
        var myRegexp = /.*#x:([0-9.-]+),y:([0-9.-]+),w:([0-9.-]+),h:([0-9.-]+)/
        var match = myRegexp.exec(window.location.href);

        var gotoURL = function() {
          if (match) {
            var rect = new OpenSeadragon.Rect(parseFloat(match[1]), parseFloat(match[2]), parseFloat(match[3]), parseFloat(match[4]));
            myDragon.viewport.fitBounds(rect);
          }
        }

        myDragon.viewport.viewer.addHandler("open", gotoURL);
        window.onhashchange = gotoURL;
        window.onload = gotoURL;
    </script>

    <!-- https://github.com/openseadragon/openseadragon/issues/1545 -->
    <!-- Update URL with position and zoom -->
    <script type="text/javascript">
        function precise(x) {
          return Number.parseFloat(x).toPrecision(4);
        }
        var tracker = new OpenSeadragon.MouseTracker({
          element: myDragon.container,
          moveHandler: function (event) {
            var viewportBounds = myDragon.viewport.getBounds();
//            var tiledImage = myDragon.world.getItemAt(0); // Assuming you want the first (or only) image
//            var imageBounds = tiledImage.viewportToImageRectangle(viewportBounds);
            var posJSON = 'x:' + precise(viewportBounds.x) + ',y:' + precise(viewportBounds.y) +
                          ',w:' + precise(viewportBounds.width) + ',h:' + precise(viewportBounds.height);

            if (window.history.replaceState) {
              newLoc = window.location.href.replace(/#.*/, "") + '#' + posJSON;
              window.history.replaceState({ }, document.title, newLoc);
            }
          }
        });
    </script>
    <script src="nodes.js"></script>
    <script src="resources/domain_control.js"></script> <!-- Must be after the domain-selector input element -->

</body>
</html>