Merge pull request #243 from avandecreme/master

Add coordinates conversion methods to viewport.

src/viewport.js

@@ -602,7 +602,7 @@ $.Viewport.prototype = {
     /**
      * Gets the current rotation in degrees.
      * @function
-     * @name OpenSeadragon.Viewport.prototype.setRotation
+     * @name OpenSeadragon.Viewport.prototype.getRotation
      * @return {Number} The current rotation in degrees.
      */
     getRotation: function() {
@@ -678,6 +678,7 @@ $.Viewport.prototype = {
 
 
     /**
+     * Convert a delta (translation vector) from pixels coordinates to viewport coordinates
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
@@ -688,6 +689,7 @@ $.Viewport.prototype = {
     },
 
     /**
+     * Convert a delta (translation vector) from viewport coordinates to pixels coordinates.
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
@@ -698,6 +700,7 @@ $.Viewport.prototype = {
     },
 
     /**
+     * Convert image pixel coordinates to viewport coordinates.
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
@@ -711,6 +714,7 @@ $.Viewport.prototype = {
     },
 
     /**
+     * Convert viewport coordinates to image pixel coordinates.
      * @function
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      */
@@ -831,6 +835,106 @@ $.Viewport.prototype = {
             coordB.x,
             coordB.y
         );
+    },
+
+    /**
+     * Convert pixel coordinates relative to the viewer element to image
+     * coordinates.
+     * @param {OpenSeadragon.Point} pixel
+     * @returns {OpenSeadragon.Point}
+     */
+    viewerElementToImageCoordinates: function( pixel ) {
+        var point = this.pointFromPixel( pixel, true );
+        return this.viewportToImageCoordinates( point );
+    },
+
+    /**
+     * Convert pixel coordinates relative to the image to
+     * viewer element coordinates.
+     * @param {OpenSeadragon.Point} point
+     * @returns {OpenSeadragon.Point}
+     */
+    imageToViewerElementCoordinates: function( point ) {
+        var pixel = this.pixelFromPoint( point, true );
+        return this.imageToViewportCoordinates( pixel );
+    },
+
+    /**
+     * Convert pixel coordinates relative to the window to image coordinates.
+     * @param {OpenSeadragon.Point} pixel
+     * @returns {OpenSeadragon.Point}
+     */
+    windowToImageCoordinates: function( pixel ) {
+        var viewerCoordinates = pixel.minus(
+                OpenSeadragon.getElementPosition( this.viewer.element ));
+        return this.viewerElementToImageCoordinates( viewerCoordinates );
+    },
+
+    /**
+     * Convert image coordinates to pixel coordinates relative to the window.
+     * @param {OpenSeadragon.Point} pixel
+     * @returns {OpenSeadragon.Point}
+     */
+    imageToWindowCoordinates: function( pixel ) {
+        var viewerCoordinates = this.imageToViewerElementCoordinates( pixel );
+        return viewerCoordinates.plus(
+                OpenSeadragon.getElementPosition( this.viewer.element ));
+    },
+
+    /**
+     * Convert pixel coordinates relative to the viewer element to viewport
+     * coordinates.
+     * @param {OpenSeadragon.Point} pixel
+     * @returns {OpenSeadragon.Point}
+     */
+    viewerElementToViewportCoordinates: function( pixel ) {
+        return this.pointFromPixel( pixel, true );
+    },
+
+    /**
+     * Convert viewport coordinates to pixel coordinates relative to the
+     * viewer element.
+     * @param {OpenSeadragon.Point} point
+     * @returns {OpenSeadragon.Point}
+     */
+    viewportToViewerElementCoordinates: function( point ) {
+        return this.pixelFromPoint( point, true );
+    },
+
+    /**
+     * Convert pixel coordinates relative to the window to viewport coordinates.
+     * @param {OpenSeadragon.Point} pixel
+     * @returns {OpenSeadragon.Point}
+     */
+    windowToViewportCoordinates: function( pixel ) {
+        var viewerCoordinates = pixel.minus(
+                OpenSeadragon.getElementPosition( this.viewer.element ));
+        return this.viewerElementToViewportCoordinates( viewerCoordinates );
+    },
+
+    /**
+     * Convert viewport coordinates to pixel coordinates relative to the window.
+     * @param {OpenSeadragon.Point} point
+     * @returns {OpenSeadragon.Point}
+     */
+    viewportToWindowCoordinates: function( point ) {
+        var viewerCoordinates = this.viewportToViewerElementCoordinates( point );
+        return viewerCoordinates.plus(
+                OpenSeadragon.getElementPosition( this.viewer.element ));
+    },
+
+    /**
+     * Get the zoom ratio of the image. 1 means original image size, 0.5 half size...
+     * @function
+     * @param {Boolean} current If true gives the current zoom otherwise gives the
+     * target zoom.
+     * @returns {Number}
+     */
+    getImageZoomRatio: function( current ) {
+        var imageWidth = this.viewer.source.dimensions.x;
+        var containerWidth = this.getContainerSize().x;
+        var zoomToZoomLevelRatio = containerWidth / imageWidth;
+        return this.getZoom( current ) * zoomToZoomLevelRatio;
     }
 };
 

test/demo/coordinates.html

@@ -0,0 +1,77 @@
+<!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>

test/test.css

@@ -13,3 +13,7 @@
     width: 300px;
 }
 
+#unitsexample {
+    height: 500px;
+    width: 500px;
+}

test/test.html

@@ -22,5 +22,6 @@
     <script src="/test/formats.js"></script>
     <script src="/test/utils.js"></script>
     <script src="/test/events.js"></script>
+    <script src="/test/units.js"></script>
 </body>
 </html>

test/units.js

@@ -0,0 +1,116 @@
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util, testLog */
+
+(function() {
+    var viewer;
+
+    module('Units', {
+        setup: function () {
+            var example = $('<div id="unitsexample"></div>').appendTo("#qunit-fixture");
+
+            testLog.reset();
+
+            viewer = OpenSeadragon({
+                id:            'unitsexample',
+                prefixUrl:     '/build/openseadragon/images/',
+                springStiffness: 100 // Faster animation = faster tests
+            });
+        },
+        teardown: function () {
+            if (viewer && viewer.close) {
+                viewer.close();
+            }
+
+            viewer = null;
+        }
+    });
+
+
+    function pointEqual(a, b, message) {
+        ok(a.x === b.x && a.y === b.y, message);
+    }
+
+    // ----------
+    asyncTest('Coordinates conversions', function() {
+
+        viewer.addHandler("open", function () {
+            var viewport = viewer.viewport;
+
+            var point0_0 = new OpenSeadragon.Point(0, 0);
+            var point = viewport.viewerElementToViewportCoordinates(point0_0);
+            pointEqual(point, point0_0, 'When opening, viewer coordinate 0,0 is also point 0,0');
+            var pixel = viewport.viewerElementToImageCoordinates(point0_0);
+            pointEqual(pixel, point0_0, 'When opening, viewer coordinate 0,0 is also pixel 0,0');
+
+            var viewerWidth = $(viewer.element).width();
+            var imageWidth = viewer.source.dimensions.x;
+            var point1_0 = new OpenSeadragon.Point(1, 0);
+            var viewerTopRight = new OpenSeadragon.Point(viewerWidth, 0);
+            var imageTopRight = new OpenSeadragon.Point(imageWidth, 0);
+
+            var point = viewport.viewerElementToViewportCoordinates(viewerTopRight);
+            pointEqual(point, point1_0, 'Viewer top right has viewport coordinates 1,0.');
+            var pixel = viewport.viewerElementToImageCoordinates(viewerTopRight);
+            pointEqual(pixel, imageTopRight, 'Viewer top right has viewport coordinates imageWidth,0.');
+
+            var point = new OpenSeadragon.Point(15, 12);
+            var result = viewport.viewerElementToImageCoordinates(
+                viewport.imageToViewerElementCoordinates(point));
+            pointEqual(result, point, 'viewerElement and image');
+
+            var result = viewport.windowToImageCoordinates(
+                viewport.imageToWindowCoordinates(point));
+            pointEqual(result, point, 'window and image');
+
+            var result = viewport.viewerElementToViewportCoordinates(
+                viewport.viewportToViewerElementCoordinates(point));
+            pointEqual(result, point, 'viewerElement and viewport');
+
+            var result = viewport.windowToViewportCoordinates(
+                viewport.viewportToWindowCoordinates(point));
+            pointEqual(result, point, 'window and viewport');
+
+            start();
+        });
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+    // ----------
+    asyncTest('ZoomRatio', function() {
+        viewer.addHandler("open", function () {
+
+            var viewport = viewer.viewport;
+
+            var imageWidth = 1000;
+
+            function getCurrentImageWidth() {
+                return viewport.viewportToViewerElementCoordinates(
+                    new OpenSeadragon.Point(1, 0)).minus(
+                        viewport.viewportToViewerElementCoordinates(
+                            new OpenSeadragon.Point(0, 0))).x;
+            }
+
+            function checkZoom() {
+                var currentImageWidth = getCurrentImageWidth();
+                var expected = currentImageWidth / imageWidth;
+                var actual = viewport.getImageZoomRatio(true);
+                equal(actual, expected);
+            }
+
+            checkZoom();
+
+            var zoomHandler = function() {
+                viewer.removeHandler('animationfinish', zoomHandler);
+                checkZoom();
+                start();
+            };
+
+            viewer.addHandler('animationfinish', zoomHandler);
+            viewport.zoomTo(2);
+            start();
+        });
+
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
+
+})();