mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

Improve the flipping example

Browse Source 
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
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
test/demo/flipping.html
View File

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