2021-03-19 18:45:21 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>OpenSeadragon Flipping Demo</title>
|
|
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
.openseadragon1 {
|
|
|
|
|
width: 800px;
|
|
|
|
|
height: 600px;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.options {
|
|
|
|
|
margin: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
margin: 0.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
|
|
|
|
Simple demo page to show image flipping.
|
|
|
|
|
</div>
|
|
|
|
|
<div id="contentDiv" class="openseadragon1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="options">
|
|
|
|
|
First
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="ffirst" onchange="flip(0, this.checked)">
|
2021-03-22 09:30:06 +03:00
|
|
|
<label for="ffirst">Flip</label>
|
2021-03-19 18:45:21 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="rfirst" onchange="rotate(0, this.checked * 45)">
|
|
|
|
|
<label for="rfirst">Rotate</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="options">
|
|
|
|
|
Second
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="fsecond" onchange="flip(1, this.checked)" checked>
|
2021-03-22 09:30:06 +03:00
|
|
|
<label for="fsecond">Flip</label>
|
2021-03-19 18:45:21 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="rsecond" onchange="rotate(1, this.checked * 45)">
|
|
|
|
|
<label for="rsecond">Rotate</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="options">
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="fview" onchange="flipViewport(this.checked)">
|
|
|
|
|
<label for="fview">Flip Viewport</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="button">
|
|
|
|
|
<input type="checkbox" id="debug" onchange="debug(this.checked)">
|
|
|
|
|
<label for="debug">Debug Mode</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var viewer = OpenSeadragon({
|
|
|
|
|
// debugMode: true,
|
|
|
|
|
id: "contentDiv",
|
|
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
|
|
|
showNavigator:true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var first = viewer.addTiledImage({
|
|
|
|
|
tileSource: "../data/testpattern.dzi",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var second = viewer.addTiledImage({
|
|
|
|
|
tileSource: "../data/testpattern.dzi",
|
|
|
|
|
x: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
flipped: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function debug(v) {
|
|
|
|
|
viewer.setDebugMode(v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function flip(n, v) {
|
|
|
|
|
viewer.world.getItemAt(n).setFlip(v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function rotate(n, v) {
|
|
|
|
|
viewer.world.getItemAt(n).setRotation(v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function flipViewport(v) {
|
|
|
|
|
viewer.viewport.setFlip(v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
