mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-23 21:56:10 +03:00
Code Issues Projects Releases Wiki Activity
ms-reference-strip
openseadragon/test/demo/flipping.html

114 lines
3.2 KiB
HTML
Raw Permalink Normal View History

Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
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)">
Force reload tiles when the tile's flip doesn't match the image Flipping an image changes the bounds of each tile. The existing code assumes that cannot happen. getTile() calculates the tile bounds the first time it is asked for a particular tile. It then caches and returns the same time on every subsequent call. getTile() has a check to test if a tile exists in the cache. If it does not, the tile is created and inserted. In order to make tiles be rebuilt after a flip, we only need to check if the tile's flip matches the image's flip. If not, we can recreate the tile as if it did not exist. To make this a bit clearer, the tile's flipped flag is now set in getTile() rather than positionTile(). This makes setFlip() work.
2021-03-22 09:30:06 +03:00
<label for="ffirst">Flip</label>
Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
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>
Force reload tiles when the tile's flip doesn't match the image Flipping an image changes the bounds of each tile. The existing code assumes that cannot happen. getTile() calculates the tile bounds the first time it is asked for a particular tile. It then caches and returns the same time on every subsequent call. getTile() has a check to test if a tile exists in the cache. If it does not, the tile is created and inserted. In order to make tiles be rebuilt after a flip, we only need to check if the tile's flip matches the image's flip. If not, we can recreate the tile as if it did not exist. To make this a bit clearer, the tile's flipped flag is now set in getTile() rather than positionTile(). This makes setFlip() work.
2021-03-22 09:30:06 +03:00
<label for="fsecond">Flip</label>
Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
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">
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.
2021-03-23 06:12:58 +03:00
Viewport
Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
2021-03-19 18:45:21 +03:00
<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/",
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.
2021-03-23 06:12:58 +03:00
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,
}
]
Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
2021-03-19 18:45:21 +03:00
});
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.
2021-03-23 06:12:58 +03:00
viewer.viewport.setFlip(document.getElementById("fview").checked);
Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped.
2021-03-19 18:45:21 +03:00
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>
Reference in New Issue Copy Permalink