Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
+195
-188
@@ -1,219 +1,226 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>DeepZoomImage Doctests</title>
|
||||
|
||||
<title>DeepZoomImage Doctests</title>
|
||||
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css" />
|
||||
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||
|
||||
<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="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||
|
||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||
<style>
|
||||
#app {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
<style>
|
||||
#app {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#app > * {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
#app > * {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="Doctest.run()">
|
||||
<h1>
|
||||
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">deepzoom.</a>
|
||||
DeepZoom
|
||||
</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||
tiles at the larger level as fast as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="div1" style="float: left"></div>
|
||||
<div id="div2" style="float: right"></div>
|
||||
<div style="clear: left; margin-top: 540px" />
|
||||
<script class="doctest">
|
||||
// deepZoom
|
||||
//--------------------
|
||||
const deepZoomInfo = new DeepZoomInfo({
|
||||
tileSize: 128,
|
||||
format: 'jpg',
|
||||
overlap: 0,
|
||||
type: 'map',
|
||||
height: 4096,
|
||||
width: 4096,
|
||||
path: '../assets/maps/test',
|
||||
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
|
||||
})
|
||||
// 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: "../../../var/tuesch/luftbild_2016_full",
|
||||
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
|
||||
// })
|
||||
|
||||
<body onload="Doctest.run()">
|
||||
<h1>Double DeepZoomImage</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
||||
as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="div1" style="float: left;"></div>
|
||||
<div id="div2" style="float: right;"></div>
|
||||
<div style="clear: left; margin-top: 540px;" />
|
||||
<script class="doctest">
|
||||
// app
|
||||
//--------------------
|
||||
window.app = new PIXIApp({
|
||||
width: 400,
|
||||
height: 500,
|
||||
backgroundColor: 0xffcccccc
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
// deepZoom
|
||||
//--------------------
|
||||
const deepZoomInfo = new DeepZoomInfo({
|
||||
"tileSize": 128,
|
||||
"format": "jpg",
|
||||
"overlap": 0,
|
||||
"type": "map",
|
||||
"height": 4096,
|
||||
"width": 4096,
|
||||
"path": "../assets/maps/test",
|
||||
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
||||
})
|
||||
// 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: "../../../var/tuesch/luftbild_2016_full",
|
||||
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
|
||||
// })
|
||||
div1.appendChild(app.view)
|
||||
|
||||
// app
|
||||
//--------------------
|
||||
window.app = new PIXIApp({
|
||||
width: 400,
|
||||
height: 500,
|
||||
backgroundColor: 0xFFCCCCCC
|
||||
}).setup().run()
|
||||
|
||||
div1.appendChild(app.view)
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer1 = new ScatterContainer(app.renderer, { showBounds: true, app: app })
|
||||
app.scene.addChild(scatterContainer1)
|
||||
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
|
||||
app.scene.addChild(scatterContainer1)
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
setTimeout(() => {
|
||||
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, { app, world: scatterContainer1 })
|
||||
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 50,
|
||||
onTransform: (event) => {
|
||||
//console.log('currentLevel', deepZoomImage1.currentLevel)
|
||||
deepZoomImage1.transformed(event)
|
||||
}
|
||||
})
|
||||
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
setTimeout(() => {
|
||||
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
|
||||
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
|
||||
scatterContainer1.addChild(deepZoomImage1)
|
||||
}, 1000)
|
||||
|
||||
// app2
|
||||
//--------------------
|
||||
const app2 = new PIXIApp({
|
||||
width: 400,
|
||||
height: 500,
|
||||
backgroundColor: 0xffcccccc
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
div2.appendChild(app2.view)
|
||||
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer2 = new ScatterContainer(app2.renderer, { showBounds: true, app: app2 })
|
||||
app2.scene.addChild(scatterContainer2)
|
||||
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, { app: app2 })
|
||||
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 50,
|
||||
onTransform: event => {
|
||||
//console.log('currentLevel', deepZoomImage1.currentLevel)
|
||||
deepZoomImage1.transformed(event)
|
||||
maxScale: 100,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage2.transformed(event)
|
||||
}
|
||||
})
|
||||
|
||||
scatterContainer1.addChild(deepZoomImage1)
|
||||
}, 1000)
|
||||
|
||||
|
||||
// app2
|
||||
//--------------------
|
||||
const app2 = new PIXIApp({
|
||||
width: 400,
|
||||
height: 500,
|
||||
backgroundColor: 0xFFCCCCCC
|
||||
}).setup().run()
|
||||
|
||||
div2.appendChild(app2.view)
|
||||
scatterContainer2.addChild(deepZoomImage2)
|
||||
</script>
|
||||
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
|
||||
app2.scene.addChild(scatterContainer2)
|
||||
<h1>DeepZoomImage in DeepZoomImage</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||
tiles at the larger level as fast as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="div3"></div>
|
||||
<script class="doctest">
|
||||
// app3
|
||||
//--------------------
|
||||
const app3 = new PIXIApp({
|
||||
width: 900,
|
||||
height: 500,
|
||||
backgroundColor: 0xffcccccc
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
|
||||
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage2.transformed(event)
|
||||
}
|
||||
})
|
||||
window.app3 = app3
|
||||
|
||||
scatterContainer2.addChild(deepZoomImage2)
|
||||
div3.appendChild(app3.view)
|
||||
|
||||
</script>
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer3 = new ScatterContainer(app3.renderer, {
|
||||
app: app3,
|
||||
showBounds: true,
|
||||
claimEvent: false,
|
||||
stopEvents: false
|
||||
})
|
||||
app3.scene.addChild(scatterContainer3)
|
||||
|
||||
<h1>DeepZoomImage in DeepZoomImage</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
||||
as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="div3"></div>
|
||||
<script class="doctest">
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, { app: app3 })
|
||||
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
startScale: 2,
|
||||
autoBringToFront: false,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage3.transformed(event)
|
||||
}
|
||||
})
|
||||
|
||||
// app3
|
||||
//--------------------
|
||||
const app3 = new PIXIApp({
|
||||
width: 900,
|
||||
height: 500,
|
||||
backgroundColor: 0xFFCCCCCC
|
||||
}).setup().run()
|
||||
app3._deepZoomImage3 = deepZoomImage3
|
||||
|
||||
window.app3 = app3
|
||||
|
||||
div3.appendChild(app3.view)
|
||||
scatterContainer3.addChild(deepZoomImage3)
|
||||
|
||||
// create the ScatterContainer
|
||||
//--------------------
|
||||
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
|
||||
app3.scene.addChild(scatterContainer3)
|
||||
// Create the second DeepZoomImage
|
||||
//--------------------
|
||||
const border = new PIXI.Graphics()
|
||||
border.beginFill(0x282828, 1)
|
||||
border.drawRect(0, 0, 264, 244)
|
||||
scatterContainer3.addChild(border)
|
||||
|
||||
// Create the DeepZoomImage
|
||||
//--------------------
|
||||
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
||||
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
startScale: 2,
|
||||
autoBringToFront: false,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage3.transformed(event)
|
||||
}
|
||||
})
|
||||
const mask = new PIXI.Graphics()
|
||||
mask.beginFill(0x282828, 1)
|
||||
mask.drawRect(0, 0, 260, 240)
|
||||
scatterContainer3.addChild(mask)
|
||||
|
||||
app3._deepZoomImage3 = deepZoomImage3
|
||||
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, { app: app3 })
|
||||
deepZoomImage4.x = 4
|
||||
deepZoomImage4.y = 4
|
||||
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage4.transformed(event)
|
||||
}
|
||||
})
|
||||
deepZoomImage4.mask = mask
|
||||
|
||||
scatterContainer3.addChild(deepZoomImage3)
|
||||
|
||||
// Create the second DeepZoomImage
|
||||
//--------------------
|
||||
const border = new PIXI.Graphics()
|
||||
border.beginFill(0x282828, 1)
|
||||
border.drawRect(0, 0, 264, 244)
|
||||
scatterContainer3.addChild(border)
|
||||
|
||||
const mask = new PIXI.Graphics()
|
||||
mask.beginFill(0x282828, 1)
|
||||
mask.drawRect(0, 0, 260, 240)
|
||||
scatterContainer3.addChild(mask)
|
||||
|
||||
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
||||
deepZoomImage4.x = 4
|
||||
deepZoomImage4.y = 4
|
||||
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
onTransform: (event) => {
|
||||
deepZoomImage4.transformed(event)
|
||||
}
|
||||
})
|
||||
deepZoomImage4.mask = mask
|
||||
|
||||
app3._deepZoomImage4 = deepZoomImage4
|
||||
|
||||
scatterContainer3.addChild(deepZoomImage4)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
app3._deepZoomImage4 = deepZoomImage4
|
||||
|
||||
scatterContainer3.addChild(deepZoomImage4)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+119
-127
@@ -1,143 +1,135 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>DeepZoomImage Doctests</title>
|
||||
|
||||
<title>DeepZoomImage Doctests</title>
|
||||
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css" />
|
||||
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||
|
||||
<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="../../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>
|
||||
|
||||
<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</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
||||
as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="app">
|
||||
<button id="change_dpr">Change Pixel Ratio</button>
|
||||
<div id="canvas_container"></div>
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
<script class="doctest">
|
||||
|
||||
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
|
||||
// Just as in the doctest: scatter.html
|
||||
class ScatterApp extends PIXIApp {
|
||||
sceneFactory() {
|
||||
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
|
||||
}
|
||||
}
|
||||
|
||||
let app
|
||||
let state = 0
|
||||
|
||||
//Destroys the PIXIApp element and the corresponding canvas,
|
||||
//to reinstantiate the entire application.
|
||||
changePIXI()
|
||||
|
||||
function changePIXI() {
|
||||
if (typeof app != 'undefined') {
|
||||
//The parameter destroys the canvas, when destroying the app.
|
||||
// Not deleting a new canvas resulted in some
|
||||
// weird PIXI error.
|
||||
app.destroy(true)
|
||||
<style>
|
||||
#app {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#app > * {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
//A new canvas has to be created
|
||||
//for the new view.
|
||||
var canvas = document.createElement("canvas")
|
||||
canvas_container.appendChild(canvas);
|
||||
|
||||
app = new ScatterApp({
|
||||
resolution: state + 1,
|
||||
|
||||
//Default parameters
|
||||
view: canvas,
|
||||
autoResize: false,
|
||||
width: 128,
|
||||
height: 128,
|
||||
backgroundColor: 0xFFCCCCCC
|
||||
}).setup().run()
|
||||
|
||||
|
||||
// To create a DeepZoomImage, a DeepZoomInfo has to
|
||||
// be provided. It contains all the necessary informations
|
||||
// for the DeepZoomImage, to behave as intended.
|
||||
// (E.g. that it displays the right level of tiles for the current view distance.)
|
||||
|
||||
deepZoomInfo = new DeepZoomInfo(
|
||||
{
|
||||
"tileSize": 128,
|
||||
"format": "jpg",
|
||||
"overlap": 0,
|
||||
"type": "map",
|
||||
"height": 4096,
|
||||
"width": 4096,
|
||||
"path": "../assets/maps/test",
|
||||
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
||||
});
|
||||
|
||||
|
||||
// Create the DeepZoomImage
|
||||
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
|
||||
highResolution: !!state,
|
||||
app
|
||||
});
|
||||
|
||||
|
||||
|
||||
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
|
||||
// Allow more flexible scaling for debugging purposes.
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
// Notify the DeepZoomImage, when it's container has
|
||||
// been transformed (translated, scaled, rotated, ...)
|
||||
onTransform: (event) => {
|
||||
deepZoomImage.transformed(event)
|
||||
<body onload="Doctest.run()">
|
||||
<h1>
|
||||
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
|
||||
><a href="index.html">deepzoom.</a>DeepZoomImage
|
||||
</h1>
|
||||
<p>
|
||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||
tiles at the larger level as fast as possible.
|
||||
</p>
|
||||
<br />
|
||||
<div id="app">
|
||||
<button id="change_dpr">Change Pixel Ratio</button>
|
||||
<div id="canvas_container"></div>
|
||||
<div id="info"></div>
|
||||
</div>
|
||||
<script class="doctest">
|
||||
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
|
||||
// Just as in the doctest: scatter.html
|
||||
class ScatterApp extends PIXIApp {
|
||||
sceneFactory() {
|
||||
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let app
|
||||
let state = 0
|
||||
|
||||
// Add the DeepZoomImage to the scene.
|
||||
app.scene.addChild(deepZoomImage)
|
||||
|
||||
//Set info text.
|
||||
info.innerHTML = "resolution: " + app.renderer.resolution +
|
||||
"<br>high resolution: " + !!state;
|
||||
}
|
||||
|
||||
|
||||
// Add functionality to the button.
|
||||
change_dpr.addEventListener("click", (event) => {
|
||||
state = (state + 1) % 2
|
||||
//Destroys the PIXIApp element and the corresponding canvas,
|
||||
//to reinstantiate the entire application.
|
||||
changePIXI()
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
function changePIXI() {
|
||||
if (typeof app != 'undefined') {
|
||||
//The parameter destroys the canvas, when destroying the app.
|
||||
// Not deleting a new canvas resulted in some
|
||||
// weird PIXI error.
|
||||
app.destroy(true)
|
||||
}
|
||||
|
||||
//A new canvas has to be created
|
||||
//for the new view.
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas_container.appendChild(canvas)
|
||||
|
||||
app = new ScatterApp({
|
||||
resolution: state + 1,
|
||||
|
||||
//Default parameters
|
||||
view: canvas,
|
||||
autoResize: false,
|
||||
width: 128,
|
||||
height: 128,
|
||||
backgroundColor: 0xffcccccc
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
// To create a DeepZoomImage, a DeepZoomInfo has to
|
||||
// be provided. It contains all the necessary informations
|
||||
// for the DeepZoomImage, to behave as intended.
|
||||
// (E.g. that it displays the right level of tiles for the current view distance.)
|
||||
|
||||
deepZoomInfo = new DeepZoomInfo({
|
||||
tileSize: 128,
|
||||
format: 'jpg',
|
||||
overlap: 0,
|
||||
type: 'map',
|
||||
height: 4096,
|
||||
width: 4096,
|
||||
path: '../assets/maps/test',
|
||||
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
|
||||
})
|
||||
|
||||
// Create the DeepZoomImage
|
||||
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
|
||||
highResolution: !!state,
|
||||
app
|
||||
})
|
||||
|
||||
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
|
||||
// Allow more flexible scaling for debugging purposes.
|
||||
minScale: 0,
|
||||
maxScale: 100,
|
||||
// Notify the DeepZoomImage, when it's container has
|
||||
// been transformed (translated, scaled, rotated, ...)
|
||||
onTransform: (event) => {
|
||||
deepZoomImage.transformed(event)
|
||||
}
|
||||
})
|
||||
|
||||
// Add the DeepZoomImage to the scene.
|
||||
app.scene.addChild(deepZoomImage)
|
||||
|
||||
//Set info text.
|
||||
info.innerHTML = 'resolution: ' + app.renderer.resolution + '<br>high resolution: ' + !!state
|
||||
}
|
||||
|
||||
// Add functionality to the button.
|
||||
change_dpr.addEventListener('click', (event) => {
|
||||
state = (state + 1) % 2
|
||||
changePIXI()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,38 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>PIXI Lib Doctests</title>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<link rel="stylesheet" href="../../../css/index.css">
|
||||
<head>
|
||||
<title>PIXI Lib Doctests</title>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
|
||||
/>
|
||||
<link rel="stylesheet" href="../../../css/index.css" />
|
||||
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
|
||||
<template id="itemTemplate">
|
||||
<a class="wrapper" href="">
|
||||
<div class="preview">
|
||||
<div class="thumbnail-container">
|
||||
<div class="thumbnail">
|
||||
<img class="icon" >
|
||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||
</div>
|
||||
<template id="itemTemplate">
|
||||
<a class="wrapper" href="">
|
||||
<div class="preview">
|
||||
<div class="thumbnail-container">
|
||||
<div class="thumbnail">
|
||||
<img class="icon" />
|
||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="title"></div>
|
||||
</div>
|
||||
<div class="title"></div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" class="container">
|
||||
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
|
||||
</div>
|
||||
<script>
|
||||
const index = new Index(itemTemplate, [
|
||||
['Deepzoom', 'deepzoom.html'],
|
||||
['Image', 'image.html'],
|
||||
|
||||
],
|
||||
null)
|
||||
index.load()
|
||||
</script>
|
||||
</body>
|
||||
</a>
|
||||
</template>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" class="container">
|
||||
<a style="position: absolute; left: 22px; top: 12px" target="_blank" href="http://www.iwm-tuebingen.de"
|
||||
>IWMLib PIXI DeepZoom</a
|
||||
>
|
||||
</div>
|
||||
<script>
|
||||
const index = new Index(
|
||||
itemTemplate,
|
||||
[
|
||||
['Deepzoom', 'deepzoom.html'],
|
||||
['Image', 'image.html']
|
||||
],
|
||||
null
|
||||
)
|
||||
index.load()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user