mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
eebfdc1391
Adds tiled images to the viewer at creation so that they are properly centred. This also checks the current state of the test checkboxes on loading. Some browsers, notably Firefox, will remember the value of checkboxes across reloads. This can lead to the checkboxes being out of sync with with viewer after a reload. An alternative is to set autocomplete="off" on each checkbox element. This will force the browser to reset the field to the default specified in the HTML. However I think checking the actual value is preferable as it means the defaults are only specified in one place.
114 lines
3.2 KiB
HTML
114 lines
3.2 KiB
HTML
<!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)">
|
|
<label for="ffirst">Flip</label>
|
|
</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>
|
|
<label for="fsecond">Flip</label>
|
|
</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">
|
|
Viewport
|
|
<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,
|
|
tileSources: [
|
|
{
|
|
tileSource: "../data/testpattern.dzi",
|
|
x: 0,
|
|
y: 0,
|
|
flipped: document.getElementById("ffirst").checked,
|
|
degrees: document.getElementById("rfirst").checked * 45,
|
|
}, {
|
|
tileSource: "../data/testpattern.dzi",
|
|
x: 1,
|
|
y: 0,
|
|
flipped: document.getElementById("fsecond").checked,
|
|
degrees: document.getElementById("rsecond").checked * 45,
|
|
}
|
|
]
|
|
});
|
|
|
|
viewer.viewport.setFlip(document.getElementById("fview").checked);
|
|
|
|
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>
|