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

adapted references, removed references to all.js

Browse Source
This commit is contained in:
Manfred Knobloch 2019-05-23 11:21:46 +02:00
parent 190d28b6df
commit a2711a735d
14 changed files with 270 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/coordinates.html
View File

@ -7,7 +7,7 @@
<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/all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<script>
function drawPolygons() {

2
lib/events.html
View File

@ -5,7 +5,7 @@
<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/all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()" >

4
lib/flippable.html
View File

@ -6,8 +6,8 @@
<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/all.js"></script>
<script src="./all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<link rel="stylesheet" href="../css/flipeffect.css">
<template id="flipTemplate">

5
lib/frames.html
View File

@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, user-scalable=no" />
<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/all.js"></script>
<script src="./3rdparty/highlight/highlight.pack.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()" >

2
lib/interaction.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="../css/doctest.css">
<script src="./3rdparty/highlight/highlight.pack.js"></script>
<script src="../dist/iwmlib.js"></script>
<script src="./3rdparty/all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
</head>
<body onload="Doctest.run()" >
<h1>

219
lib/pixi/deepzoom/deepzoom.html Normal file
View File

@ -0,0 +1,219 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage 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>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">
// 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}"
// })
// 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 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)
}
})
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: 100,
onTransform: (event) => {
deepZoomImage2.transformed(event)
}
})
scatterContainer2.addChild(deepZoomImage2)
</script>
<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()
window.app3 = app3
div3.appendChild(app3.view)
// create the ScatterContainer
//--------------------
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
app3.scene.addChild(scatterContainer3)
// 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._deepZoomImage3 = deepZoomImage3
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>
</html>

5
lib/pixi/deepzoom/image.html
View File

@ -11,10 +11,9 @@
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../all.js"></script>
<script src="../all.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
#app {

242
lib/pixi/deepzoom/index.html
View File

@ -1,219 +1,37 @@
<!doctype html>
<html lang="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
<title>DeepZoomImage Doctests</title>
<script src="../../../dist/iwmlib.js"></script>
<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="../../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../all.js"></script>
<script src="../all.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
<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>
</a>
</template>
</head>
<body>
<div id="container" class="container">
</div>
<script>
const index = new Index(itemTemplate, [
['Deepzoom', 'deepzoom.html'],
['Image', 'image.html'],
<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">
// 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}"
// })
// 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 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)
}
})
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: 100,
onTransform: (event) => {
deepZoomImage2.transformed(event)
}
})
scatterContainer2.addChild(deepZoomImage2)
</script>
<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()
window.app3 = app3
div3.appendChild(app3.view)
// create the ScatterContainer
//--------------------
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
app3.scene.addChild(scatterContainer3)
// 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._deepZoomImage3 = deepZoomImage3
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>
],
null)
index.load()
</script>
</body>
</html>

4
lib/pixi/index.html
View File

@ -32,8 +32,8 @@ const index = new Index(itemTemplate, [
['Button', 'button.html'],
['ButtonGroup', 'buttongroup.html'],
['Coordinates', 'coordinates.html'],
['DeepZoom', 'deepzoom.html'],
['DeepZoomImage', 'deepzoomimage.html'],
['DeepZoom', 'deepzoom/index.html'],
// ['DeepZoomImage', 'deepzoomimage.html'],
['Flippable', 'flippable.html'],
['LabeledGraphics', 'labeledgraphics.html'],
['List', 'list.html'],

4
lib/popup.html
View File

@ -7,8 +7,8 @@
<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/all.js"></script>
<script src="../dist/iwmlib.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body id="page" onload="Doctest.run()">

4
lib/popupmenu.html
View File

@ -6,8 +6,8 @@
<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/all.js"></script>
<script src="../dist/iwmlib.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()">

2
lib/scatter.html
View File

@ -6,7 +6,7 @@
<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/all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<script>
function drawPolygons() {

2
lib/styleguide.html
View File

@ -6,7 +6,7 @@
<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/all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()" >

4
lib/uitest.html
View File

@ -6,8 +6,8 @@
<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/all.js"></script>
<script src="./all.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()" >
<h1>