<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Basic 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>
Simple demo page to show a default OpenSeadragon viewer.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<div>
<table border="1">
<tr>
<th></th>
<th>Window (pixel)</th>
<th>Container (pixel)</th>
<th>Image (pixel)</th>
<th>Viewport (point)</th>
</tr>
<tr>
<th>Cursor position</th>
<td id="windowPosition"></td>
<td id="containerPosition"></td>
<td id="imagePosition"></td>
<td id="viewportPosition"></td>
<tr>
</table>
</div>
<script type="text/javascript">
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
showNavigator:true
});
function pointToString(point) {
return point.x.toPrecision(4) + "," + point.y.toPrecision(4);
}
var onMouseTrackerMove = function(eventSender, eventData) {
var viewerX = eventData.position.x;
var viewerY = eventData.position.y;
var windowPoint = new OpenSeadragon.Point(viewerX, viewerY);
$("#windowPosition").text( pointToString(windowPoint));
var containerPoint = windowPoint.minus(
OpenSeadragon.getElementPosition(viewer.element));
$("#containerPosition").text( pointToString(containerPoint));
var imagePoint = viewer.viewport.windowToImageCoordinates(windowPoint);
$("#imagePosition").text( pointToString(imagePoint));
var viewportPoint = viewer.viewport.windowToViewportCoordinates(windowPoint);
$("#viewportPosition").text( pointToString(viewportPoint));
};
mouseTracker = new OpenSeadragon.MouseTracker({
element: document,
moveHandler: onMouseTrackerMove
}).setTracking(true);
</script>
</body>
</html>