<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon fitBoundsWithConstraints() 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: 500px;
border:thin black solid;
margin-right:20px;
}
#buttons button{
width:10em;
text-align:center;
margin:5px;
}
.layout{
display:grid;
grid-template-columns:auto 1fr;
padding:10px;
}
.method{
border:medium gray solid;
margin:2px;
background-color:rgb(240, 240, 240)
}
.method.selected{
border:medium red solid;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="layout">
<div id="contentDiv" class="openseadragon1"></div>
<div id="controls">
<div>
Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
constraints.
</div>
<h3>Pick a method to use:</h3>
<div>
<div class="method selected" data-value="0">
<pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
</div>
<div class="method" data-value="1">
<pre>viewport.fitBoundsWithConstraints(bounds);</pre>
</div>
<div class="method" data-value="4">
<pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
</div>
<div class="method" data-value="2">
<pre>//Initially ignore constraints
viewport.fitBounds(bounds);
//Apply constraints after 1 second delay
setTimeout(() => viewport.applyConstraints(), 1000);</pre>
</div>
</div>
<button id="rotate">Rotate the viewer</button>
<h3>Click to fit overlay bounds:</h3>
<div id="buttons"></div>
<h4>overlay.getBounds(viewer.viewport):</h4>
<pre class="bounds">Pick an overlay above to show the bounds</pre>
</div>
</div>
<script type="text/javascript">
var viewer;
var _fittingMethod = 0;
viewer = window.viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10,
visibilityRatio:1,
constrainDuringPan:true,
});
viewer.addHandler("open", function(event) {
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "green";
elt.style.outline = "3px solid red";
elt.style.opacity = "0.7";
elt.textContent = "Within the image";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
elt.style.outline = "5px solid pink";
elt.textContent = "Left edge rectangle";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
});
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "lightblue";
elt.style.outline = "3px solid purple";
elt.style.opacity = "0.7";
elt.textContent = "Top right square";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
viewer.currentOverlays.forEach(overlay=>{
var text = $(overlay.element).text();
var div=$('<div>').appendTo('#buttons');
var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{
var bounds = overlay.getBounds(viewer.viewport);
$('.bounds').text(JSON.stringify(bounds,null,2));
var _fittingMethod = parseInt($('.method.selected').data('value'));
if (_fittingMethod === 0) {
viewer.viewport.fitBounds(bounds, false);
}
else if (_fittingMethod === 1) {
viewer.viewport.fitBoundsWithConstraints(bounds, false);
}
else if (_fittingMethod === 4) {
viewer.viewport.fitBoundsWithConstraints(bounds, true);
}
else if (_fittingMethod === 2) {
viewer.viewport.fitBounds(bounds, false);
setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
}
});
})
viewer.viewport.zoomTo(0.5, null, true);
});
$('.method').on('click',function(){
$('.method').removeClass('selected');
$(this).addClass('selected');
})
$("#rotate").click(function() {
viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
$("#degrees").text(viewer.viewport.getRotation() + "deg");
});
</script>
</body>
</html>