<!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>