2015-06-24 01:02:46 +03:00
|
|
|
<html>
|
2016-01-07 04:25:58 +03:00
|
|
|
<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>
|
2015-06-24 01:02:46 +03:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-01-07 04:25:58 +03:00
|
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
|
|
|
|
<div id="annotation-div">
|
2016-03-25 23:49:58 +03:00
|
|
|
<input type="button" value="Hide Overlays" id="hideOverlays">
|
2016-01-07 04:25:58 +03:00
|
|
|
</div>
|
|
|
|
|
|
2015-06-24 01:02:46 +03:00
|
|
|
<script type="text/javascript">
|
2016-01-07 04:25:58 +03:00
|
|
|
|
|
|
|
|
var viewer = OpenSeadragon({
|
|
|
|
|
id: "contentDiv",
|
|
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
2016-03-25 23:49:58 +03:00
|
|
|
tileSources: "../data/testpattern.dzi",
|
|
|
|
|
minZoomImageRatio: 0,
|
|
|
|
|
maxZoomPixelRatio: 10
|
2016-01-07 04:25:58 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
viewer.addHandler("open", function(event) {
|
|
|
|
|
var elt = document.createElement("div");
|
2016-03-25 23:49:58 +03:00
|
|
|
elt.className = "runtime-overlay";
|
2016-01-07 04:25:58 +03:00
|
|
|
elt.style.background = "green";
|
|
|
|
|
elt.style.border = "1px solid red";
|
2016-03-25 23:49:58 +03:00
|
|
|
elt.textContent = "Scaled overlay";
|
|
|
|
|
viewer.addOverlay(elt, new OpenSeadragon.Rect(0.2, 0.2, 0.1, 0.1));
|
|
|
|
|
|
|
|
|
|
elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "white";
|
|
|
|
|
elt.style.border = "3px solid red";
|
|
|
|
|
elt.style.width = "100px";
|
|
|
|
|
elt.textContent = "Scaled vertically";
|
|
|
|
|
viewer.addOverlay({
|
|
|
|
|
element: elt,
|
|
|
|
|
location: new OpenSeadragon.Rect(0.6, 0.6, 0.1, 0.1),
|
|
|
|
|
scaleWidth: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "white";
|
|
|
|
|
elt.style.opacity = "0.5";
|
|
|
|
|
elt.style.border = "1px solid blue";
|
|
|
|
|
elt.style.height = "100px";
|
|
|
|
|
elt.textContent = "Scaled horizontally";
|
|
|
|
|
viewer.addOverlay({
|
|
|
|
|
element: elt,
|
|
|
|
|
location: new OpenSeadragon.Rect(0.1, 0.5, 0.1, 0.1),
|
|
|
|
|
scaleHeight: false
|
|
|
|
|
});
|
2016-01-07 04:25:58 +03:00
|
|
|
|
2016-03-25 23:49:58 +03:00
|
|
|
elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "white";
|
|
|
|
|
elt.style.opacity = "0.5";
|
|
|
|
|
elt.style.border = "1px 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
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
$("#hideOverlays").click(function(){
|
|
|
|
|
$(".runtime-overlay").toggle();
|
2016-01-07 04:25:58 +03:00
|
|
|
});
|
|
|
|
|
|
2015-06-24 01:02:46 +03:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
