Improve the flipping example

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.
This commit is contained in:
Alistair Buxton 2021-03-23 03:12:58 +00:00
parent 409620fa38
commit eebfdc1391

View File

@ -20,8 +20,6 @@
margin: 0.3em;
}
</style>
</head>
<body>
@ -57,6 +55,7 @@
</div>
<div class="options">
Viewport
<div class="button">
<input type="checkbox" id="fview" onchange="flipViewport(this.checked)">
<label for="fview">Flip Viewport</label>
@ -73,21 +72,25 @@
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
showNavigator:true
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,
}
]
});
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,
});
viewer.viewport.setFlip(document.getElementById("fview").checked);
function debug(v) {
viewer.setDebugMode(v);