Fix coordinates conversion with rotation.

src/drawer.js

@@ -267,13 +267,14 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     },
 
     /**
-     * Translates from OpenSeadragon viewer rectangle to drawer rectangle.
+     * Scale from OpenSeadragon viewer rectangle to drawer rectangle
+     * (ignoring rotation)
      * @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
      * @return {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
      */
     viewportToDrawerRectangle: function(rectangle) {
-        var topLeft = this.viewport.pixelFromPoint(rectangle.getTopLeft(), true);
+        var topLeft = this.viewport.scalePixelFromPoint(rectangle.getTopLeft(), true);
-        var size = this.viewport.deltaPixelsFromPoints(rectangle.getSize(), true);
+        var size = this.viewport.scaleDeltaPixelsFromPoints(rectangle.getSize(), true);
 
         return new $.Rect(
             topLeft.x * $.pixelDensityRatio,
@@ -293,22 +294,14 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
      * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1.
      * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position
      */
-    drawTile: function( tile, drawingHandler, useSketch, scale, translate ) {
+    drawTile: function(tile, drawingHandler, useSketch, scale, translate) {
         $.console.assert(tile, '[Drawer.drawTile] tile is required');
         $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
 
-        if ( this.useCanvas ) {
+        if (this.useCanvas) {
-            var context = this._getContext( useSketch );
+            var context = this._getContext(useSketch);
             scale = scale || 1;
-            // TODO do this in a more performant way
+            tile.drawCanvas(context, drawingHandler, scale, translate);
-            // specifically, don't save,rotate,restore every time we draw a tile
-            if( this.viewport.degrees !== 0 ) {
-                this._offsetForRotation( tile, this.viewport.degrees, useSketch );
-                tile.drawCanvas( context, drawingHandler, scale, translate );
-                this._restoreRotationChanges( tile, useSketch );
-            } else {
-                tile.drawCanvas( context, drawingHandler, scale, translate );
-            }
         } else {
             tile.drawHTML( this.canvas );
         }
@@ -418,7 +411,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         context.fillStyle = this.debugGridColor;
 
         if ( this.viewport.degrees !== 0 ) {
-            this._offsetForRotation( tile, this.viewport.degrees );
+            this._offsetForRotation(this.viewport.degrees);
         }
 
         context.strokeRect(
@@ -480,7 +473,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         );
 
         if ( this.viewport.degrees !== 0 ) {
-            this._restoreRotationChanges( tile );
+            this._restoreRotationChanges();
         }
         context.restore();
     },
@@ -506,21 +499,21 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     },
 
     // private
-    _offsetForRotation: function( tile, degrees, useSketch ){
+    _offsetForRotation: function(degrees, useSketch) {
-        var cx = this.canvas.width / 2,
+        var cx = this.canvas.width / 2;
-            cy = this.canvas.height / 2;
+        var cy = this.canvas.height / 2;
 
-        var context = this._getContext( useSketch );
+        var context = this._getContext(useSketch);
         context.save();
 
         context.translate(cx, cy);
-        context.rotate( Math.PI / 180 * degrees);
+        context.rotate(Math.PI / 180 * degrees);
         context.translate(-cx, -cy);
     },
 
     // private
-    _restoreRotationChanges: function( tile, useSketch ){
+    _restoreRotationChanges: function(useSketch) {
-        var context = this._getContext( useSketch );
+        var context = this._getContext(useSketch);
         context.restore();
     },
 

src/navigator.js

@@ -307,8 +307,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
 
         if( viewport && this.viewport ) {
             bounds      = viewport.getBounds( true );
-            topleft     = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
+            topleft     = this.viewport.scalePixelFromPoint(bounds.getTopLeft(), false);
-            bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false )
+            bottomright = this.viewport.scalePixelFromPoint(bounds.getBottomRight(), false)
                 .minus( this.totalBorderWidths );
 
             //update style for navigator-box

src/point.js

@@ -179,14 +179,18 @@ $.Point.prototype = /** @lends OpenSeadragon.Point.prototype */{
      * From http://stackoverflow.com/questions/4465931/rotate-rectangle-around-a-point
      * @function
      * @param {Number} degress to rotate around the pivot.
-     * @param {OpenSeadragon.Point} pivot Point about which to rotate.
+     * @param {OpenSeadragon.Point} [pivot=(0,0)] Point around which to rotate.
+     * Defaults to the origin.
      * @returns {OpenSeadragon.Point}. A new point representing the point rotated around the specified pivot
      */
-    rotate: function ( degrees, pivot ) {
+    rotate: function (degrees, pivot) {
-        var angle = degrees * Math.PI / 180.0,
+        pivot = pivot || new $.Point(0, 0);
-            x = Math.cos( angle ) * ( this.x - pivot.x ) - Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x,
+        var angle = degrees * Math.PI / 180.0;
-            y = Math.sin( angle ) * ( this.x - pivot.x ) + Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y;
+        var cos = Math.cos(angle);
-        return new $.Point( x, y );
+        var sin = Math.sin(angle);
+        var x = cos * (this.x - pivot.x) - sin * (this.y - pivot.y) + pivot.x;
+        var y = sin * (this.x - pivot.x) + cos * (this.y - pivot.y) + pivot.y;
+        return new $.Point(x, y);
     },
 
     /**

src/rectangle.js

@@ -351,7 +351,7 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{
             (Math.round(this.y * 100) / 100) + "," +
             (Math.round(this.width * 100) / 100) + "x" +
             (Math.round(this.height * 100) / 100) + "," +
-            (Math.round(this.degrees * 100) / 100) + "°" +
+            (Math.round(this.degrees * 100) / 100) + "deg" +
             "]";
     }
 };

src/tiledimage.js

@@ -357,23 +357,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @return {OpenSeadragon.Rect} A rect representing the coordinates in the viewport.
      */
     imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight, current ) {
-        if (imageX instanceof $.Rect) {
+        var rect = imageX;
+        if (rect instanceof $.Rect) {
             //they passed a rect instead of individual components
             current = imageY;
-            pixelWidth = imageX.width;
+        } else {
-            pixelHeight = imageX.height;
+            rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
-            imageY = imageX.y;
-            imageX = imageX.x;
         }
 
-        var coordA = this.imageToViewportCoordinates(imageX, imageY, current);
+        var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current);
-        var coordB = this._imageToViewportDelta(pixelWidth, pixelHeight, current);
+        var coordB = this._imageToViewportDelta(rect.width, rect.height, current);
 
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -389,23 +389,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @return {OpenSeadragon.Rect} A rect representing the coordinates in the image.
      */
     viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) {
+        var rect = viewerX;
         if (viewerX instanceof $.Rect) {
             //they passed a rect instead of individual components
             current = viewerY;
-            pointWidth = viewerX.width;
+        } else {
-            pointHeight = viewerX.height;
+            rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
-            viewerY = viewerX.y;
-            viewerX = viewerX.x;
         }
 
-        var coordA = this.viewportToImageCoordinates(viewerX, viewerY, current);
+        var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current);
-        var coordB = this._viewportToImageDelta(pointWidth, pointHeight, current);
+        var coordB = this._viewportToImageDelta(rect.width, rect.height, current);
 
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -652,7 +652,7 @@ function updateViewport( tiledImage ) {
         haveDrawn       = false,
         currentTime     = $.now(),
         viewportBounds  = tiledImage.viewport.getBoundsWithMargins( true ),
-        zeroRatioC      = tiledImage.viewport.deltaPixelsFromPoints(
+        zeroRatioC      = tiledImage.viewport.scaleDeltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( 0 ),
             true
         ).x * tiledImage._scaleSpring.current.value,
@@ -733,7 +733,7 @@ function updateViewport( tiledImage ) {
         drawLevel = false;
 
         //Avoid calculations for draw if we have already drawn this
-        renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints(
+        renderPixelRatioC = tiledImage.viewport.scaleDeltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( level ),
             true
         ).x * tiledImage._scaleSpring.current.value;
@@ -747,12 +747,12 @@ function updateViewport( tiledImage ) {
         }
 
         //Perform calculations for draw if we haven't drawn this
-        renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints(
+        renderPixelRatioT = tiledImage.viewport.scaleDeltaPixelsFromPoints(
             tiledImage.source.getPixelRatio( level ),
             false
         ).x * tiledImage._scaleSpring.current.value;
 
-        zeroRatioT      = tiledImage.viewport.deltaPixelsFromPoints(
+        zeroRatioT      = tiledImage.viewport.scaleDeltaPixelsFromPoints(
             tiledImage.source.getPixelRatio(
                 Math.max(
                     tiledImage.source.getClosestLevel( tiledImage.viewport.containerSize ) - 1,
@@ -1140,10 +1140,10 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility,
     boundsSize.x *= tiledImage._scaleSpring.current.value;
     boundsSize.y *= tiledImage._scaleSpring.current.value;
 
-    var positionC    = viewport.pixelFromPoint( boundsTL, true ),
+    var positionC    = viewport.scalePixelFromPoint(boundsTL, true),
-        positionT    = viewport.pixelFromPoint( boundsTL, false ),
+        positionT    = viewport.scalePixelFromPoint(boundsTL, false),
-        sizeC        = viewport.deltaPixelsFromPoints( boundsSize, true ),
+        sizeC        = viewport.scaleDeltaPixelsFromPoints(boundsSize, true),
-        sizeT        = viewport.deltaPixelsFromPoints( boundsSize, false ),
+        sizeT        = viewport.scaleDeltaPixelsFromPoints(boundsSize, false),
         tileCenter   = positionT.plus( sizeT.divide( 2 ) ),
         tileDistance = viewportCenter.distanceTo( tileCenter );
 
@@ -1331,6 +1331,10 @@ function drawTiles( tiledImage, lastDrawn ) {
         tiledImage._drawer._clear( true );
     }
 
+    if (tiledImage.viewport.degrees !== 0) {
+        tiledImage._drawer._offsetForRotation(tiledImage.viewport.degrees, useSketch);
+    }
+
     var usedClip = false;
     if ( tiledImage._clip ) {
         tiledImage._drawer.saveContext(useSketch);
@@ -1396,6 +1400,10 @@ function drawTiles( tiledImage, lastDrawn ) {
         tiledImage._drawer.restoreContext( useSketch );
     }
 
+    if (tiledImage.viewport.degrees !== 0) {
+        tiledImage._drawer._restoreRotationChanges(useSketch);
+    }
+
     if ( useSketch ) {
         tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale, sketchTranslate );
     }

src/viewport.js

@@ -704,7 +704,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             this.centerSpringX.target.value,
             this.centerSpringY.target.value
         );
-        delta = delta.rotate( -this.degrees, new $.Point( 0, 0 ) );
         return this.panTo( center.plus( delta ), immediately );
     },
 
@@ -750,14 +749,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @return {OpenSeadragon.Viewport} Chainable.
      * @fires OpenSeadragon.Viewer.event:zoom
      */
-    zoomBy: function( factor, refPoint, immediately ) {
+    zoomBy: function(factor, refPoint, immediately) {
-        if( refPoint instanceof $.Point && !isNaN( refPoint.x ) && !isNaN( refPoint.y ) ) {
+        return this.zoomTo(
-            refPoint = refPoint.rotate(
+            this.zoomSpring.target.value * factor, refPoint, immediately);
-                -this.degrees,
-                new $.Point( this.centerSpringX.target.value, this.centerSpringY.target.value )
-            );
-        }
-        return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
     },
 
     /**
@@ -936,40 +930,79 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return changed;
     },
 
+    /**
+     * Scale a delta (translation vector) from pixels coordinates to viewport
+     * coordinates. This method does not take rotation into account.
+     * Consider using deltaPixelsFromPoints if you need to account for rotation.
+     * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    scaleDeltaPixelsFromPoints: function(deltaPoints, current) {
+        return deltaPoints.times(
+            this._containerInnerSize.x * this.getZoom(current)
+        );
+    },
 
     /**
-     * Convert a delta (translation vector) from pixels coordinates to viewport coordinates
+     * Convert a delta (translation vector) from pixels coordinates to viewport
-     * @function
+     * coordinates.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
-    deltaPixelsFromPoints: function( deltaPoints, current ) {
+    deltaPixelsFromPoints: function(deltaPoints, current) {
-        return deltaPoints.times(
+        return this.scaleDeltaPixelsFromPoints(
-            this._containerInnerSize.x * this.getZoom( current )
+            deltaPoints.rotate(this.getRotation()),
+            current);
+    },
+
+    /**
+     * Scale a delta (translation vector) from viewport coordinates to pixels
+     * coordinates. This method does not take rotation into account.
+     * Consider using deltaPointsFromPixels if you need to account for rotation.
+     * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    scaleDeltaPointsFromPixels: function(deltaPixels, current) {
+        return deltaPixels.divide(
+            this._containerInnerSize.x * this.getZoom(current)
         );
     },
 
     /**
      * Convert a delta (translation vector) from viewport coordinates to pixels coordinates.
-     * @function
+     * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
-    deltaPointsFromPixels: function( deltaPixels, current ) {
+    deltaPointsFromPixels: function(deltaPixels, current) {
-        return deltaPixels.divide(
+        return this.scaleDeltaPointsFromPixels(deltaPixels, current)
-            this._containerInnerSize.x * this.getZoom( current )
+            .rotate(-this.getRotation());
-        );
+    },
+
+    scalePixelFromPoint: function(point, current) {
+        return this._scalePixelFromPoint(point, this.getBounds(current));
     },
 
     /**
      * Convert image pixel coordinates to viewport coordinates.
      * @function
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @param {Boolean} [ignoreRotation=false] - Pass true to ignore the rotation
      */
-    pixelFromPoint: function( point, current ) {
+    pixelFromPoint: function(point, current) {
-        return this._pixelFromPoint(point, this.getBounds( current ));
+        return this._pixelFromPoint(point, this.getBounds(current));
     },
 
     // private
-    _pixelFromPoint: function( point, bounds ) {
+    _scalePixelFromPoint: function(point, bounds) {
         return point.minus(
             bounds.getTopLeft()
         ).times(
@@ -979,12 +1012,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
-    /**
+    // private
-     * Convert viewport coordinates to image pixel coordinates.
+    _pixelFromPoint: function(point, bounds) {
-     * @function
+        return this._scalePixelFromPoint(
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+            point.rotate(this.getRotation(), this.getCenter(true)),
-     */
+            bounds);
-    pointFromPixel: function( pixel, current ) {
+    },
+
+    scalePointFromPixel: function(pixel, current) {
         var bounds = this.getBounds( current );
         return pixel.minus(
             new $.Point(this._margins.left, this._margins.top)
@@ -995,6 +1030,18 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
+    /**
+     * Convert viewport coordinates to image pixel coordinates.
+     * @function
+     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     */
+    pointFromPixel: function(pixel, current) {
+        return this.scalePointFromPixel(pixel, current).rotate(
+            -this.getRotation(),
+            this.getCenter(true)
+        );
+    },
+
     // private
     _viewportToImageDelta: function( viewerX, viewerY ) {
         var scale = this.homeBounds.width;
@@ -1075,29 +1122,21 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Number} pixelWidth the width in pixel of the rectangle.
      * @param {Number} pixelHeight the height in pixel of the rectangle.
      */
-    imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
+    imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight) {
-        var coordA,
+        var rect = imageX;
-            coordB,
+        if (!(rect instanceof $.Rect)) {
-            rect;
+            //they passed individual components instead of a rectangle
-        if( arguments.length == 1 ) {
+            rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
-            //they passed a rectangle instead of individual components
-            rect = imageX;
-            return this.imageToViewportRectangle(
-                rect.x, rect.y, rect.width, rect.height
-            );
         }
 
-        coordA = this.imageToViewportCoordinates(
+        var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
-            imageX, imageY
+        var coordB = this._imageToViewportDelta(rect.width, rect.height);
-        );
-        coordB = this._imageToViewportDelta(
-            pixelWidth, pixelHeight
-        );
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -1116,25 +1155,21 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Number} pointWidth the width of the rectangle in viewport coordinate system.
      * @param {Number} pointHeight the height of the rectangle in viewport coordinate system.
      */
-    viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight ) {
+    viewportToImageRectangle: function(viewerX, viewerY, pointWidth, pointHeight) {
-        var coordA,
+        var rect = viewerX;
-            coordB,
+        if (!(rect instanceof $.Rect)) {
-            rect;
+            //they passed individual components instead of a rectangle
-        if ( arguments.length == 1 ) {
+            rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
-            //they passed a rectangle instead of individual components
-            rect = viewerX;
-            return this.viewportToImageRectangle(
-                rect.x, rect.y, rect.width, rect.height
-            );
         }
 
-        coordA = this.viewportToImageCoordinates( viewerX, viewerY );
+        var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
-        coordB = this._viewportToImageDelta(pointWidth, pointHeight);
+        var coordB = this._viewportToImageDelta(rect.width, rect.height);
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 

test/demo/coordinates.html

@@ -24,38 +24,55 @@
                 <th></th>
                 <th>Window (pixel)</th>
                 <th>Container (pixel)</th>
-                <th>Image 1 - top left (pixel)</th>
-                <th>Image 2 - bottom right (pixel)</th>
                 <th>Viewport (point)</th>
+                <th>Big Image (pixel)</th>
+                <th>Small Image (pixel)</th>
             </tr>
             <tr>
                 <th>Cursor position</th>
-                <td id="windowPosition"></td>
+                <td id="cursorWindowPosition"></td>
-                <td id="containerPosition"></td>
+                <td id="cursorContainerPosition"></td>
-                <td id="image1Position"></td>
+                <td id="cursorViewportPosition"></td>
-                <td id="image2Position"></td>
+                <td id="cursorImage1Position"></td>
-                <td id="viewportPosition"></td>
+                <td id="cursorImage2Position"></td>
+            </tr>
+            <tr>
+                <th>Big Image top left position</th>
+                <td id="image1WindowPosition"></td>
+                <td id="image1ContainerPosition"></td>
+                <td id="image1ViewportPosition"></td>
+                <td id="image1Image1Position"></td>
+                <td id="image1Image2Position"></td>
+            </tr>
+            <tr>
+                <th>Small Image top left position</th>
+                <td id="image2WindowPosition"></td>
+                <td id="image2ContainerPosition"></td>
+                <td id="image2ViewportPosition"></td>
+                <td id="image2Image1Position"></td>
+                <td id="image2Image2Position"></td>
             </tr>
             <tr>
                 <th>Zoom</th>
                 <td>-</td>
                 <td>-</td>
+                <td id="viewportZoom"></td>
                 <td id="image1Zoom"></td>
                 <td id="image2Zoom"></td>
-                <td id="viewportZoom"></td>
             </tr>
         </table>
     </div>
+    <button onclick="rotate();">Rotate</button>
     <script type="text/javascript">
 
         var viewer = OpenSeadragon({
-            // debugMode: true,
+            debugMode: true,
             id: "contentDiv",
             prefixUrl: "../../build/openseadragon/images/",
             tileSources: [{
-                    tileSource: "../data/testpattern.dzi"
+                    tileSource: "../data/testpattern.dzi",
-                },
+                    clip: new OpenSeadragon.Rect(0, 0, 500, 1000)
-                {
+                }, {
                     tileSource: "../data/testpattern.dzi",
                     x: 1,
                     y: 1,
@@ -64,28 +81,29 @@
             ],
             showNavigator: true
         });
+        viewer.addHandler("open", onAnimation);
 
         function pointToString(point) {
             return point.x.toPrecision(4) + "," + point.y.toPrecision(4);
         }
 
-        var onMouseTrackerMove = function (event) {
+        function onMouseTrackerMove(event) {
             var viewerX = event.position.x;
             var viewerY = event.position.y;
             var windowPoint = new OpenSeadragon.Point(viewerX, viewerY);
-            $("#windowPosition").text(pointToString(windowPoint));
+            $("#cursorWindowPosition").text(pointToString(windowPoint));
             var containerPoint = windowPoint.minus(
                     OpenSeadragon.getElementPosition(viewer.element));
-            $("#containerPosition").text(pointToString(containerPoint));
+            $("#cursorContainerPosition").text(pointToString(containerPoint));
             var image1 = viewer.world.getItemAt(0);
             var imagePoint = image1.windowToImageCoordinates(windowPoint);
-            $("#image1Position").text(pointToString(imagePoint));
+            $("#cursorImage1Position").text(pointToString(imagePoint));
             var image2 = viewer.world.getItemAt(1);
             var imagePoint = image2.windowToImageCoordinates(windowPoint);
-            $("#image2Position").text(pointToString(imagePoint));
+            $("#cursorImage2Position").text(pointToString(imagePoint));
             var viewportPoint = viewer.viewport.windowToViewportCoordinates(windowPoint);
-            $("#viewportPosition").text(pointToString(viewportPoint));
+            $("#cursorViewportPosition").text(pointToString(viewportPoint));
-        };
+        }
         mouseTracker = new OpenSeadragon.MouseTracker({
             element: document,
             moveHandler: onMouseTrackerMove
@@ -100,9 +118,40 @@
             var image2 = viewer.world.getItemAt(1);
             var image2Zoom = image2.viewportToImageZoom(viewportZoom);
             $("#image2Zoom").text(image2Zoom.toFixed(3));
+
+            var origin = new OpenSeadragon.Point(0, 0);
+            var image1WindowPoint = image1.imageToWindowCoordinates(origin);
+            $("#image1WindowPosition").text(pointToString(image1WindowPoint));
+            var image1ContainerPoint = image1.imageToViewerElementCoordinates(origin);
+            $("#image1ContainerPosition").text(pointToString(image1ContainerPoint));
+            var image1Image1Position = image1.viewportToImageCoordinates(
+                image1.getBounds(true).getTopLeft());
+            $("#image1Image1Position").text(pointToString(image1Image1Position));
+            var image1Image2Position = image1.viewportToImageCoordinates(
+                image2.getBounds(true).getTopLeft());
+            $("#image1Image2Position").text(pointToString(image1Image2Position));
+            var image1ViewportPoint = image1.imageToViewportCoordinates(origin);
+            $("#image1ViewportPosition").text(pointToString(image1ViewportPoint));
+
+            var image2WindowPoint = image2.imageToWindowCoordinates(origin);
+            $("#image2WindowPosition").text(pointToString(image2WindowPoint));
+            var image2ContainerPoint = image2.imageToViewerElementCoordinates(origin);
+            $("#image2ContainerPosition").text(pointToString(image2ContainerPoint));
+            var image2Image1Position = image2.viewportToImageCoordinates(
+                image1.getBounds(true).getTopLeft());
+            $("#image2Image1Position").text(pointToString(image2Image1Position));
+            var image2Image2Position = image2.viewportToImageCoordinates(
+                image2.getBounds(true).getTopLeft());
+            $("#image2Image2Position").text(pointToString(image2Image2Position));
+            var image2ViewportPoint = image2.imageToViewportCoordinates(origin);
+            $("#image2ViewportPosition").text(pointToString(image2ViewportPoint));
         }
         viewer.addHandler("animation", onAnimation);
 
+        function rotate() {
+            viewer.viewport.setRotation(viewer.viewport.getRotation() + 45);
+            onAnimation();
+        }
     </script>
 </body>
 </html>