mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
114 lines
4.2 KiB
HTML
114 lines
4.2 KiB
HTML
<html>
|
|
<title>OpenSeadragon Overlay 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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
|
<div id="annotation-div">
|
|
<input type="button" value="Hide Overlays" id="hideOverlays">
|
|
<input type="button" value="Rotate" id="rotate">
|
|
<span id="degrees">0deg</span>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var viewer = OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
tileSources: "../data/testpattern.dzi",
|
|
minZoomImageRatio: 0,
|
|
maxZoomPixelRatio: 10,
|
|
overlayPreserveContentDirection: true // change this to true to test overlay content flipping
|
|
});
|
|
|
|
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 = "Scaled overlay";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.099),
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
|
});
|
|
|
|
// test with image of letter B to see that images flip too
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.outline = "1px solid blue";
|
|
elt.style.height = "100px";
|
|
elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.0, 0.0),
|
|
width: 0.1,
|
|
height: 0.1
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.outline = "3px solid red";
|
|
elt.style.width = "100px";
|
|
elt.textContent = "Scaled vertically";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.6, 0.6),
|
|
height: 0.1,
|
|
placement: OpenSeadragon.Placement.TOP_LEFT,
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.NO_ROTATION
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.opacity = "0.5";
|
|
elt.style.outline = "1px solid blue";
|
|
elt.style.height = "100px";
|
|
elt.textContent = "Scaled horizontally";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.1, 0.5),
|
|
width: 0.1
|
|
});
|
|
|
|
elt = document.createElement("div");
|
|
elt.className = "runtime-overlay";
|
|
elt.style.background = "white";
|
|
elt.style.opacity = "0.5";
|
|
elt.style.outline = "5px solid pink";
|
|
elt.style.width = "100px";
|
|
elt.style.height = "100px";
|
|
elt.textContent = "Not scaled, centered in the middle";
|
|
viewer.addOverlay({
|
|
element: elt,
|
|
location: new OpenSeadragon.Point(0.5, 0.5),
|
|
placement: OpenSeadragon.Placement.CENTER,
|
|
checkResize: false,
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.EXACT
|
|
});
|
|
|
|
});
|
|
$("#hideOverlays").click(function(){
|
|
$(".runtime-overlay").toggle();
|
|
});
|
|
$("#rotate").click(function() {
|
|
viewer.viewport.setRotation(viewer.viewport.getRotation() + 22.5);
|
|
$("#degrees").text(viewer.viewport.getRotation() + "deg");
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|