diff --git a/filmstrip.js b/filmstrip.js index ef7c108..fd33756 100644 --- a/filmstrip.js +++ b/filmstrip.js @@ -9,25 +9,30 @@ var filmstrip={}; this.setheight=function(height){canvasheight=height;redraw();return height;}; var volumeready=false; - this.start=function(){ - initvol(locators.AtlasVolumeLocator(args.atlas),volumeReady); + this.start=async function(){ + initvol(await loaders.AtlasVolumeLoader(args.atlas),volumeReady); }; - function volumeReady(event){ - cover(); - volumeready=true; - var xhr=new XMLHttpRequest(); - xhr.open("GET",locators.SeriesLocator(args.series)); - xhr.responseType="json"; - xhr.onload=seriesReady; - xhr.send(); - } +// async function volumeReady(event){ +// cover(); +// volumeready=true; +// var xhr=new XMLHttpRequest(); +// xhr.open("GET",locators.SeriesLocator(args.series)); +// xhr.responseType="json"; +// xhr.onload=seriesReady; +// xhr.send(); +// +// } var arry=[]; this.getmeta=function(){return arry;}; var metahack; - function seriesReady(event){ - metahack=event.target.response;//.slices; - transformSeries(metahack); +// async function seriesReady(event){ + async function volumeReady(event){ + cover(); + volumeready=true; + //metahack=event.target.response;//.slices; + metahack=await loaders.SeriesLoader(args.series); + await transformSeries(metahack); var slices=metahack.slices; propagation.propagate(slices); let noname=false; @@ -125,10 +130,12 @@ var filmstrip={}; ctx.fillRect(x*160-pos+20-10,20,128+10+10,128); } if(item.icon===null){ - item.icon=new XMLHttpRequest(); - item.icon.open("GET",locators.DZILocator(item.id)); - item.icon.onload=function(event){ - var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement; + item.icon=loaders.DZILoader(item.id).then(async dzi=>{ +// item.icon=new XMLHttpRequest(); +// item.icon.open("GET",locators.DZILocator(item.id)); +// item.icon.onload=function(event){ +// var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement; + var doc=new DOMParser().parseFromString(dzi,"text/xml").documentElement; var tilesize=parseInt(doc.getAttribute("TileSize")); var size=doc.getElementsByTagName("Size").item(0); var width=parseInt(size.getAttribute("Width")); @@ -146,15 +153,17 @@ var filmstrip={}; width=(width+1)>>1; height=(height+1)>>1; } - var img=document.createElement("img"); - img.onload=function(event){ - item.icon=img; - redraw(); -// console.log(""+item.icon); - }; - img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); - }; - item.icon.send(); + item.icon=await loaders.TileLoader(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); + redraw(); +// var img=document.createElement("img"); +// img.onload=function(event){ +// item.icon=img; +// redraw(); +//// console.log(""+item.icon); +// }; +// img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); + }); +// item.icon.send(); } if(item.icon instanceof HTMLImageElement){ if(item.icon.width>=item.icon.height){ diff --git a/filmstripzoom.html b/filmstripzoom.html index 170a382..3adf228 100644 --- a/filmstripzoom.html +++ b/filmstripzoom.html @@ -91,7 +91,8 @@ } // var args={atlas:"WHS_SD_Rat_v2_39um"}; - function startup(){ + var atlas; + async function startup(){ window.addEventListener("resize",fullscreen); fullscreen(); @@ -121,16 +122,17 @@ } popup(`Loading atlas: ${args.atlas.replaceAll("_"," ")}`); - var xhr=new XMLHttpRequest(); - xhr.open("GET",locators.AtlasLocator(args.atlas)); - xhr.responseType="json"; - xhr.onload=descriptorReady; - xhr.send(); - } - - var atlas; - function descriptorReady(event){ - atlas=event.target.response; +// var xhr=new XMLHttpRequest(); +// xhr.open("GET",locators.AtlasLocator(args.atlas)); +// xhr.responseType="json"; +// xhr.onload=descriptorReady; +// xhr.send(); +// } +// +// var atlas; +// function descriptorReady(event){ +// atlas=event.target.response; + atlas = await loaders.AtlasLoader(args.atlas); for(var label of atlas.labels) if(label.rgb){ label.r=parseInt(label.rgb.substr(0,2),16); @@ -366,10 +368,11 @@ } octx.putImageData(omgdata,0,0); - var xhr=new XMLHttpRequest(); - xhr.open("GET",locators.DZILocator(section_id)); - xhr.onload=xmlReady; - xhr.send(); +// var xhr=new XMLHttpRequest(); +// xhr.open("GET",locators.DZILocator(section_id)); +// xhr.onload=xmlReady; +// xhr.send(); + loaders.DZILoader(section_id).then(dzi=>xmlReady(dzi)); } var overlay=document.createElement("canvas"); @@ -382,9 +385,10 @@ var popscape=false; var zoomer; var cfg; - function xmlReady(event){ + function xmlReady(dzi){ //!! var doc=event.target.responseXML.documentElement; - var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement; +// var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement; + var doc=new DOMParser().parseFromString(dzi,"text/xml").documentElement; var size=doc.getElementsByTagName("Size").item(0); cfg={ TileSize:parseInt(doc.getAttribute("TileSize")), @@ -436,15 +440,11 @@ cfg.MaxLevel++; } - cfg.Key=function(level,x,y){ - return locators.TileLocator(section_id,this.MaxLevel-level,x,y,cfg.Format); - }; - cfg.Load = async function (key, x, y) { - const img = document.createElement("img"); - await new Promise(resolve => { - img.onload = resolve; - img.src = key; - }); +// cfg.Key=function(level,x,y){ +// return locators.TileLocator(section_id,this.MaxLevel-level,x,y,cfg.Format); +// }; + cfg.Load = async function (level, x, y) { + const img = await loaders.TileLoader(section_id, cfg.MaxLevel-level, x, y, cfg.Format); const canvas = document.createElement("canvas"); canvas.width = cfg.TileSize; canvas.height = cfg.TileSize; diff --git a/slicer.js b/slicer.js index 4486a49..413c63f 100644 --- a/slicer.js +++ b/slicer.js @@ -1,6 +1,6 @@ var voldata; -function initvol(location,next){ - console.log(location); +function initvol(buffer,next){ +// console.log(location); let start=Date.now(); // var img=document.createElement("img"); // img.onload=function(){ @@ -13,11 +13,11 @@ function initvol(location,next){ // next(); // }; // img.src=location; - var xhr=new XMLHttpRequest(); - xhr.open("GET",location); - xhr.responseType="arraybuffer"; - xhr.onload=function(){ - let data=new Uint8Array(xhr.response); +// var xhr=new XMLHttpRequest(); +// xhr.open("GET",location); +// xhr.responseType="arraybuffer"; +// xhr.onload=function(){ + let data=new Uint8Array(buffer); console.log("Download",data.length,Date.now()-start); data=inflate(data); console.log("Deflate",data.length,Date.now()-start); @@ -25,8 +25,8 @@ function initvol(location,next){ console.log("Decode",data.length,Date.now()-start); voldata=data; next(); - }; - xhr.send(); +// }; +// xhr.send(); } function dataslice(ouv){ diff --git a/zoomer.js b/zoomer.js index e5bee23..ab6553a 100644 --- a/zoomer.js +++ b/zoomer.js @@ -12,6 +12,7 @@ class ZoomView { stop() { this.#view = null; } + static keyfunc=(l,x,y)=>`${l}-${x}-${y}`; async prepare(view) { this.redraw = drawImage; let {cutx, cuty, cutw, cuth} = view; @@ -62,16 +63,16 @@ class ZoomView { let clip = TileSize; let mask = 0; let lvl = level; - let key = dizcfg.Key(lvl, ex, ey); - let tile = dizcache.get(key); +// let key = dizcfg.Key(lvl, ex, ey); + let tile = dizcache.get(ZoomView.keyfunc(lvl,ex,ey)); while (!tile && lvl < MaxLevel) { clip /= 2; mask = (mask << 1) + 1; ex >>= 1; ey >>= 1; lvl++; - key = dizcfg.Key(lvl, ex, ey); - tile = dizcache.get(key); +// key = dizcfg.Key(lvl, ex, ey); + tile = dizcache.get(ZoomView.keyfunc(lvl,ex,ey)); } if (tile) ctx.drawImage(tile, (ox & mask) * clip, (oy & mask) * clip, clip, clip, x * TileSize, y * TileSize, TileSize, TileSize); @@ -99,13 +100,13 @@ class ZoomView { let ey = ty + y; if (ex >= 0 && ey >= 0 && ex * TileSize < planewidth && ey * TileSize < planeheight) { let templevel = level; - let key = this.#cfg.Key(level, ex, ey); + let key = ZoomView.keyfunc(level, ex, ey); //this.#cfg.Key(level, ex, ey); while (!this.#cache.get(key) && templevel < MaxLevel) { - loadmap.set(key, {ex, ey, key, level: templevel}); + loadmap.set(key, {level: templevel, ex, ey}); ex >>= 1; ey >>= 1; templevel++; - key = this.#cfg.Key(templevel, ex, ey); + key = ZoomView.keyfunc(templevel, ex, ey); } } } @@ -117,9 +118,9 @@ class ZoomView { while ((loading.length || queued.size) && this.#view === curr) { while (loading.length && queued.size < 10) { const promise = new Promise(async resolve => { - const {ex, ey, key} = loading.pop(); - const tile = await Load(key, ex, ey); - this.#cache.put(key, tile); + const {level, ex, ey} = loading.pop(); + const tile = await Load(level, ex, ey); + this.#cache.put(ZoomView.keyfunc(level, ex, ey), tile); if (this.#view === curr) { drawImage(); }