IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-04 11:02:33 +02:00
commit 6e4e847be1
8 changed files with 206 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
dist/iwmlib.pixi.js vendored
View File

@ -8323,9 +8323,11 @@
**/
class WorkerTileLoader extends TileLoader {
constructor(tiles) {
constructor(tiles, workerPath) {
super(tiles);
let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js");
let worker = this.worker = new Worker(workerPath);
worker.onmessage = (event) => {
if (event.data.success) {
let { url, col, row, buffer } = event.data;
@ -8417,10 +8419,11 @@
this.tileScale = scale;
this.fadeInTime = fadeInTime;
this.keep = false;
if (this.view.preferWorker && view.info.compression.length > 0)
this.loader = new WorkerTileLoader(this);
else
if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) {
this.loader = new WorkerTileLoader(this, this.view.useWorker);
} else {
this.loader = new PIXITileLoader(this, view.info.compression);
}
this.interactive = false;
this._highlight = null;
@ -9043,7 +9046,7 @@
world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
preferWorker = false,
useWorker = '',
minimumLevel = 0,
alpha = 1,
app = window.app
@ -9054,7 +9057,7 @@
this.debug = debug;
this.shadow = shadow;
this.world = world;
this.preferWorker = preferWorker;
this.useWorker = useWorker;
this.resolution = highResolution
? Math.round(window.devicePixelRatio)
: 1;

4
lib/pixi/deepzoom/image.js
View File

@ -344,7 +344,7 @@ export class DeepZoomImage extends PIXI.Container {
world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
preferWorker = false,
useWorker = '',
minimumLevel = 0,
alpha = 1,
app = window.app
@ -355,7 +355,7 @@ export class DeepZoomImage extends PIXI.Container {
this.debug = debug
this.shadow = shadow
this.world = world
this.preferWorker = preferWorker
this.useWorker = useWorker
this.resolution = highResolution
? Math.round(window.devicePixelRatio)
: 1

6
lib/pixi/deepzoom/loader.js
View File

@ -327,9 +327,11 @@ export class RequestTileLoader extends TileLoader {
**/
export class WorkerTileLoader extends TileLoader {
constructor(tiles) {
constructor(tiles, workerPath) {
super(tiles)
let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js")
let worker = this.worker = new Worker(workerPath)
worker.onmessage = (event) => {
if (event.data.success) {
let { url, col, row, buffer } = event.data

4
lib/pixi/deepzoom/tileloader.js
View File

@ -9,7 +9,7 @@ function load() {
let tile = loadQueue.shift()
let [col, row, url] = tile
let xhr = new XMLHttpRequest()
xhr.responseType = "arraybuffer"
xhr.responseType = 'arraybuffer'
xhr.onload = (event) => {
pendingRequests.delete(url)
let buffer = xhr.response
@ -27,7 +27,7 @@ function load() {
if (loadQueue.length>0)
setTimeout(load, 1000/120)
else {
if (debug) console.log("Ready")
if (debug) console.log('Ready')
}
}

7
lib/pixi/deepzoom/tiles.js
View File

@ -48,10 +48,11 @@ export class Tiles extends PIXI.Container {
this.tileScale = scale
this.fadeInTime = fadeInTime
this.keep = false
if (this.view.preferWorker && view.info.compression.length > 0)
this.loader = new WorkerTileLoader(this)
else
if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) {
this.loader = new WorkerTileLoader(this, this.view.useWorker)
} else {
this.loader = new PIXITileLoader(this, view.info.compression)
}
this.interactive = false
this._highlight = null

39
lib/pixi/deepzoom/worker/module.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Worker Doctests</title>
<link rel="stylesheet" href="../../../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../../../css/doctest.css">
<script src="../../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../bootstrap.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>DeepZoomImage with tiles loaded by a worker...</h1>
<p>...from inside a module.</p>
<br />
<div id="div1"></div>
<script class="doctest">
Bootstrap.import("./module.js")
</script>
</body>
</html>

54
lib/pixi/deepzoom/worker/module.js Normal file
View File

@ -0,0 +1,54 @@
import PIXIApp from '../../app.js'
import {DeepZoomInfo, DeepZoomImage} from '../image.js'
import {ScatterContainer, DisplayObjectScatter} from '../../scatter.js'
// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
compression: ["dds"],
clip: {
minLevel: 12,
maxLevel: 20,
startCol: 275215,
startRow: 181050,
bounds: {
min: [48.458353, 8.96484374976547],
max: [48.5747899110263, 9.14062499976523]
}
},
tileSize: 512,
format: "png",
overlap: 0,
type: "map",
height: 131072,
width: 131072,
path: "../../../../Tuesch/var/luftbild/2018",
urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
})
// app
//--------------------
const app = new PIXIApp({
width: 800,
height: 500
}).setup().run()
div1.appendChild(app.view)
// create the ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer)
// Create the DeepZoomImage
//--------------------
const deepZoomImage = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer, useWorker: '../tileloader.js'})
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
minScale: 0,
maxScale: 50,
onTransform: event => {
deepZoomImage.transformed(event)
}
})
scatterContainer.addChild(deepZoomImage)

91
lib/pixi/deepzoom/worker/script.html Normal file
View File

@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Worker Doctests</title>
<link rel="stylesheet" href="../../../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../../../css/doctest.css">
<script src="../../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../../dist/iwmlib.js"></script>
<script src="../../../../dist/iwmlib.pixi.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>DeepZoomImage with tiles loaded by a worker...</h1>
<p>...using the dist variants.</p>
<br />
<div id="div1"></div>
<script class="doctest">
// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
compression: ["dds"],
clip: {
minLevel: 12,
maxLevel: 20,
startCol: 275215,
startRow: 181050,
bounds: {
min: [48.458353, 8.96484374976547],
max: [48.5747899110263, 9.14062499976523]
}
},
tileSize: 512,
format: "png",
overlap: 0,
type: "map",
height: 131072,
width: 131072,
path: "../../../../Tuesch/var/luftbild/2018",
urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
})
// app
//--------------------
const app = new PIXIApp({
width: 800,
height: 500
}).setup().run()
div1.appendChild(app.view)
// create the ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer)
// Create the DeepZoomImage
//--------------------
const deepZoomImage = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer, useWorker: '../tileloader.js'})
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
minScale: 0,
maxScale: 50,
onTransform: event => {
deepZoomImage.transformed(event)
}
})
scatterContainer.addChild(deepZoomImage)
</script>
</body>
</html>