khufu.tpl.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
#openseadragon1 {
  width: 100vw;
  height: 100vh;
}
body {
  margin: 0;
  padding: 0;
}
</style>

<div id="openseadragon"></div>
<script src="openseadragon.min.js"></script>
<script src="openseadragon-scalebar.js"></script>
<script type="text/javascript">
  const SERVER = "http://0.0.0.0:8000";
  var viewer = OpenSeadragon({
    id: "openseadragon",
    prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@3.1.0/build/openseadragon/images/",
    tileSources: {
          width:  WIDTH,
          height: HEIGHT,
          tileSize: TILESIZE,
          minLevel: MINLEVEL,        
          maxLevel: MAXLEVEL,        
          overlay: 0,
          getTileUrl: function( level, x, y ) {
            // dirfull is either 0 or last index of directories (full is last)
            const lvl = DIRFULL == 0 ? (MAXLEVEL - level) : DIRFULL - (MAXLEVEL- level);
              return `${SERVER}/tile/IMAGE/${lvl}/${x}/${y}`;
          },
        },
     //  debugMode: true,
     showNavigator:  true,
      navigatorAutoFade:  false,
  });
//   viewer.scalebar({
//       barThickness: 2,
//       stayInsideImage: true,
//   minWidth: 300,
//       pixelsPerMeter: 0.2,
//       backgroundColor: "white",
//   location: OpenSeadragon.ScalebarLocation.BOTTOM_LEFT,
// });
  </script>