finished collection support for html drawers

build.properties

@@ -6,7 +6,7 @@
 PROJECT: openseadragon
 BUILD_MAJOR: 0
 BUILD_MINOR: 9
-BUILD_ID: 92
+BUILD_ID: 95
 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 

openseadragon.js

@@ -6265,8 +6265,8 @@ $.TileSourceCollection = function( tileSize, tileSources, rows, layout  ) {
         options.width = ( options.tileSize ) * tilesPerRow;
         options.height = ( options.tileSize ) * options.rows;
     } else {
-        options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
+        options.height = ( options.tileSize ) * tilesPerRow;
-        options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+        options.width = ( options.tileSize ) * options.rows;
     }
 
     options.tileOverlap = -options.tileMargin;
@@ -7663,9 +7663,7 @@ $.Tile.prototype = {
      */
     drawHTML: function( container ) {
 
-        var position = this.position.apply( Math.floor ),
+        var containerSize = $.getElementSize( container );
-            size     = this.size.apply( Math.ceil )
-            containerSize = $.getElementSize( container );
 
         if ( !this.loaded || !this.image ) {
             $.console.warn(
@@ -7675,6 +7673,7 @@ $.Tile.prototype = {
             return;
         }
 
+        /* EXISTING IMPLEMENTATION
         if ( !this.element ) {
             this.element              = $.makeNeutralElement("img");
             this.element.src          = this.url;
@@ -7692,10 +7691,11 @@ $.Tile.prototype = {
         this.style.left    = position.x + "px";
         this.style.height  = size.y + "px";
         this.style.width   = size.x + "px";
+        */
 
         //EXPERIMENTAL - trying to figure out how to scale the container
         //               content during animation of the container size.
-        /*
+        
         if ( !this.element ) {
             this.element            = $.makeNeutralElement("div");
             this.image              = $.makeNeutralElement("img");
@@ -7708,14 +7708,16 @@ $.Tile.prototype = {
             this.style                     = this.element.style;
             this.style.position            = "absolute";
         }
-        this.style.right   = "0px";
+        if ( this.element.parentNode != container ) {
-        this.style.bottom  = "0px";
+            container.appendChild( this.element );
-        if ( size.y == containerSize.y || size.x == containerSize.x ){
-            this.style.right   = position.x + "px";
-            this.style.bottom  = position.y + "px";
         }
-        */
+
-        $.setElementOpacity( this.element, this.opacity );
+        this.style.top     = 100 * ( this.position.y / containerSize.y ) + "%";
+        this.style.left    = 100 * ( this.position.x / containerSize.x ) + "%";
+        this.style.height  = 100 * ( this.size.y / containerSize.y ) + "%";
+        this.style.width   = 100 * ( this.size.x / containerSize.x ) + "%";
+        
+        $.setElementOpacity( this.image, this.opacity );
 
 
     },
@@ -7741,8 +7743,13 @@ $.Tile.prototype = {
 
         context.save();
 
+        //if we are supposed to b rendering fully opaque rectangle,
+        //ie its done fading or fading is turned off, and if we are drawing
+        //an image with an alpha channel, then the only way
+        //to avoid seeing the tile underneath is to clear the rectangle
         if( context.globalAlpha == 1 && this.image.src.match('.png') ){
-
+            //clearing only the inside of the rectangle occupied
+            //by the png prevents edge flikering
             context.clearRect( 
                 position.x+1, 
                 position.y+1, 
@@ -8919,17 +8926,22 @@ function drawTiles( drawer, lastDrawn ){
         //We dont actually 'draw' a collection tile, rather its used to house
         //an overlay which does the drawing in its own viewport
         if( drawer.viewport.collectionMode ){
+            
             tileKey = tile.x + '/' + tile.y;
             viewport = drawer.viewport;
             collectionTileSource = viewport.collectionTileSource;
+            
             if( !drawer.collectionOverlays[ tileKey ] ){
+                
                 position = collectionTileSource.layout == 'horizontal' ? 
-                    tile.x + ( tile.y * collectionTileSource.tilesPerRow ) :
+                    tile.y + ( tile.x * collectionTileSource.rows ) :
-                    tile.y + ( tile.x * collectionTileSource.tilesPerRow ),
+                    tile.x + ( tile.y * collectionTileSource.rows ),
+                
                 tileSource = position < collectionTileSource.tileSources.length ?
                     collectionTileSource.tileSources[ position ] :
                     null;
-                //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+
+                //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position);
                 if( tileSource ){
                     drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
                         element:               $.makeNeutralElement( "div" ),
@@ -9120,10 +9132,10 @@ $.Viewport.prototype = {
         this.contentSize    = contentSize;
         this.contentAspectX = this.contentSize.x / this.contentSize.y;
         this.contentAspectY = this.contentSize.y / this.contentSize.x;
-        this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectX );
+        this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
-        this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+        this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY);
 
-        this.homeBounds = this.fitHeightBounds;
+        this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
         return this;
     },
 
@@ -9380,12 +9392,7 @@ $.Viewport.prototype = {
      * @param {Boolean} immediately
      */
     goHome: function( immediately ) {
-        if( this.contentSize.x <= this.contentSize.y ){
+        return this.fitBounds( this.homeBounds, immediately );
-            return this.fitVertically( immediately );
-        } else {
-            return this.fitHorizontally( immediately );
-        }
-        return this;
     },
 
     /**
@@ -9409,7 +9416,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.homeBounds, immediately );
+        this.fitBounds( this.fitHeightBounds, immediately );
         return this;
     },
 
@@ -9434,7 +9441,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.homeBounds, immediately );
+        this.fitBounds( this.fitWidthBounds, immediately );
         return this;
     },
 

src/drawer.js

@@ -971,17 +971,22 @@ function drawTiles( drawer, lastDrawn ){
         //We dont actually 'draw' a collection tile, rather its used to house
         //an overlay which does the drawing in its own viewport
         if( drawer.viewport.collectionMode ){
+            
             tileKey = tile.x + '/' + tile.y;
             viewport = drawer.viewport;
             collectionTileSource = viewport.collectionTileSource;
+            
             if( !drawer.collectionOverlays[ tileKey ] ){
+                
                 position = collectionTileSource.layout == 'horizontal' ? 
-                    tile.x + ( tile.y * collectionTileSource.tilesPerRow ) :
+                    tile.y + ( tile.x * collectionTileSource.rows ) :
-                    tile.y + ( tile.x * collectionTileSource.tilesPerRow ),
+                    tile.x + ( tile.y * collectionTileSource.rows ),
+                
                 tileSource = position < collectionTileSource.tileSources.length ?
                     collectionTileSource.tileSources[ position ] :
                     null;
-                //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+
+                //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position);
                 if( tileSource ){
                     drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
                         element:               $.makeNeutralElement( "div" ),

src/tile.js

@@ -78,9 +78,7 @@ $.Tile.prototype = {
      */
     drawHTML: function( container ) {
 
-        var position = this.position.apply( Math.floor ),
+        var containerSize = $.getElementSize( container );
-            size     = this.size.apply( Math.ceil )
-            containerSize = $.getElementSize( container );
 
         if ( !this.loaded || !this.image ) {
             $.console.warn(
@@ -90,6 +88,7 @@ $.Tile.prototype = {
             return;
         }
 
+        /* EXISTING IMPLEMENTATION
         if ( !this.element ) {
             this.element              = $.makeNeutralElement("img");
             this.element.src          = this.url;
@@ -107,10 +106,11 @@ $.Tile.prototype = {
         this.style.left    = position.x + "px";
         this.style.height  = size.y + "px";
         this.style.width   = size.x + "px";
+        */
 
         //EXPERIMENTAL - trying to figure out how to scale the container
         //               content during animation of the container size.
-        /*
+        
         if ( !this.element ) {
             this.element            = $.makeNeutralElement("div");
             this.image              = $.makeNeutralElement("img");
@@ -123,14 +123,16 @@ $.Tile.prototype = {
             this.style                     = this.element.style;
             this.style.position            = "absolute";
         }
-        this.style.right   = "0px";
+        if ( this.element.parentNode != container ) {
-        this.style.bottom  = "0px";
+            container.appendChild( this.element );
-        if ( size.y == containerSize.y || size.x == containerSize.x ){
-            this.style.right   = position.x + "px";
-            this.style.bottom  = position.y + "px";
         }
-        */
+
-        $.setElementOpacity( this.element, this.opacity );
+        this.style.top     = 100 * ( this.position.y / containerSize.y ) + "%";
+        this.style.left    = 100 * ( this.position.x / containerSize.x ) + "%";
+        this.style.height  = 100 * ( this.size.y / containerSize.y ) + "%";
+        this.style.width   = 100 * ( this.size.x / containerSize.x ) + "%";
+        
+        $.setElementOpacity( this.image, this.opacity );
 
 
     },
@@ -156,8 +158,13 @@ $.Tile.prototype = {
 
         context.save();
 
+        //if we are supposed to b rendering fully opaque rectangle,
+        //ie its done fading or fading is turned off, and if we are drawing
+        //an image with an alpha channel, then the only way
+        //to avoid seeing the tile underneath is to clear the rectangle
         if( context.globalAlpha == 1 && this.image.src.match('.png') ){
-
+            //clearing only the inside of the rectangle occupied
+            //by the png prevents edge flikering
             context.clearRect( 
                 position.x+1, 
                 position.y+1, 

src/tilesourcecollection.js

@@ -34,8 +34,8 @@ $.TileSourceCollection = function( tileSize, tileSources, rows, layout  ) {
         options.width = ( options.tileSize ) * tilesPerRow;
         options.height = ( options.tileSize ) * options.rows;
     } else {
-        options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
+        options.height = ( options.tileSize ) * tilesPerRow;
-        options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+        options.width = ( options.tileSize ) * options.rows;
     }
 
     options.tileOverlap = -options.tileMargin;

src/viewport.js

@@ -74,10 +74,10 @@ $.Viewport.prototype = {
         this.contentSize    = contentSize;
         this.contentAspectX = this.contentSize.x / this.contentSize.y;
         this.contentAspectY = this.contentSize.y / this.contentSize.x;
-        this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectX );
+        this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
-        this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+        this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY);
 
-        this.homeBounds = this.fitHeightBounds;
+        this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
         return this;
     },
 
@@ -334,12 +334,7 @@ $.Viewport.prototype = {
      * @param {Boolean} immediately
      */
     goHome: function( immediately ) {
-        if( this.contentSize.x <= this.contentSize.y ){
+        return this.fitBounds( this.homeBounds, immediately );
-            return this.fitVertically( immediately );
-        } else {
-            return this.fitHorizontally( immediately );
-        }
-        return this;
     },
 
     /**
@@ -363,7 +358,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.homeBounds, immediately );
+        this.fitBounds( this.fitHeightBounds, immediately );
         return this;
     },
 
@@ -388,7 +383,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.homeBounds, immediately );
+        this.fitBounds( this.fitWidthBounds, immediately );
         return this;
     },
 

www/tilesource-collection.html

@@ -5,13 +5,11 @@
     The image collection is a major hurdle for OpenSeadragon. It allows arbitrarily 
     large sets of tile sources, of mixed types, to be used to easily visualize the
     group as 'wall' or 'grid'.  Many core features are available for preview now, though
-    they may change soon. Many additional features are under development.
+    the
 </p>
 <p>
-    KNOWN ISSUE:<br/>
+    No doubt this makes OpenSeadragon into a whole new platform for deepzoom
-    This implementation does not support plain html rendering techniques, eg canvas 
+    image visualization.
-    is required for smooth, regular rendering.  The plain html image rendering support, 
-    for IE and small mobile devices should be done soon.
 </p>
 
 <div class="description">
@@ -22,15 +20,11 @@
 </div>
 <div class="demoarea">
     <div class="demoheading">
-        One row, mixed tile sources..
+        One row, horizontal..
     </div>
     <div id="example-tilesource-collection" 
          class="openseadragon" >
     </div>
-    <p>
-        No doubt this makes OpenSeadragon into a whole new platform for deepzoom
-        image visualization.
-    </p>
 <pre>
 OpenSeadragon({
     ...
@@ -66,7 +60,203 @@ OpenSeadragon({
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
-            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi"/*,
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
+        ]
+    });
+</script>
+
+
+
+
+<div class="description">
+    <h3>Two row tile source collection.</h3>
+    <p>
+        Multiple rows of tile sources visualized as a collection.
+    </p>
+</div>
+<div class="demoarea">
+    <div class="demoheading">
+        Two horizontal rows.
+    </div>
+    <div id="example-2row-tilesource-collection" 
+         class="openseadragon" >
+    </div>
+    <p>
+        
+    </p>
+<pre>
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     2, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    ...
+});</pre>
+</div>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id:                 "example-2row-tilesource-collection",
+        prefixUrl:          "/openseadragon/images/",
+        debugMode:          false, //if you want to see the render grid
+        
+        collectionMode:     true,
+        collectionRows:     2, 
+        collectionTileSize: 1024,
+        collectionTileMargin: 256,
+
+        //collectionLayout:   'vertical',
+        //panVertical:        false,
+        //panHorizontal:      false,
+        //defaultZoomLevel:   1,
+
+        /*The wrap options can be fun to give a sense of infinite results*/
+        //wrapHorizontal: true,
+        //wrapVertical: true,
+        
+        /*Tile sources can be mixed*/
+        tileSources: [
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
+        ]
+    });
+</script>
+
+
+
+
+<div class="description">
+    <h3>Two colum tile source collection.</h3>
+    <p>
+        Multiple columns of tile sources visualized as a collection.
+    </p>
+</div>
+<div class="demoarea">
+    <div class="demoheading">
+        Two vertical columns.
+    </div>
+    <div id="example-2column-tilesource-collection" 
+         class="openseadragon" >
+    </div>
+    <p>
+        
+    </p>
+<pre>
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     2, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    collectionLayout:   'vertical',
+    ...
+});</pre>
+</div>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id:                 "example-2column-tilesource-collection",
+        prefixUrl:          "/openseadragon/images/",
+        debugMode:          false, //if you want to see the render grid
+        
+        collectionMode:     true,
+        collectionRows:     2, 
+        collectionTileSize: 1024,
+        collectionTileMargin: 256,
+        collectionLayout:   'vertical',
+
+        //panVertical:        false,
+        //panHorizontal:      false,
+        //defaultZoomLevel:   1,
+
+        /*The wrap options can be fun to give a sense of infinite results*/
+        //wrapHorizontal: true,
+        //wrapVertical: true,
+        
+        /*Tile sources can be mixed*/
+        tileSources: [
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
+        ]
+    });
+</script>
+
+
+
+
+<div class="description">
+    <h3>Multirow, mixed tile source collection.</h3>
+    <p>
+        Multiple rows of mixed type tile sources visualized as a collection.
+    </p>
+</div>
+<div class="demoarea">
+    <div class="demoheading">
+        3 rows, mixed tiles sources.
+    </div>
+    <div id="example-mixed-tilesource-collection" 
+         class="openseadragon" >
+    </div>
+    <p>
+        
+    </p>
+<pre>
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     3, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    ...
+});</pre>
+</div>
+<script type="text/javascript">
+    var viewer = OpenSeadragon({
+        id:                 "example-mixed-tilesource-collection",
+        prefixUrl:          "/openseadragon/images/",
+        debugMode:          false, //if you want to see the render grid
+        
+        collectionMode:     true,
+        collectionRows:     3, 
+        collectionTileSize: 1024,
+        collectionTileMargin: 256,
+        //collectionLayout:   'vertical',
+
+        //panVertical:        false,
+        //panHorizontal:      false,
+        //defaultZoomLevel:   1,
+
+        /*The wrap options can be fun to give a sense of infinite results*/
+        //wrapHorizontal: true,
+        //wrapVertical: true,
+        
+        /*Tile sources can be mixed*/
+        tileSources: [
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
@@ -233,7 +423,7 @@ OpenSeadragon({
                 width:  2970
                 
             }]
-        }*//*,{
+        },{
             type: 'legacy-image-pyramid',
             levels: [{
                 url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011q.jpg',
@@ -505,7 +695,6 @@ OpenSeadragon({
                 width:  2970
                 
             }]
-        }*/]
+        }]
     });
 </script>
-

www/tilesource-custom.html

@@ -13,12 +13,6 @@
    you can always create a new tile source which implements the required 
    interfaces 'getTileUrl', 'configure', and 'supports'.
 </p>
-<p>
-    <em>Please note the examples on this page are sketches or outlines
-    and not functional examples because we do not have an available
-    service to provide a working example against.  If you have a service you
-    can provide an example to illustrate against please let us know.</em>
-</p>
 
 <div class="description">
     <h3>Inline Configuration for Custom Tile Sources</h3>
@@ -36,7 +30,10 @@
          class="openseadragon" >
     </div>
     <p>
-        Below is a make believe minimal inline configuration. Note that the 
+        Below is a  minimal inline configuration which pull tiles from a NASA 
+        Blue Marble tile set transformed into tiles hosted on Amazon S3 (
+        compliments of Michal Migurski 
+        - see http://mike.teczno.com/notes/blue-marble-tiles.html ). Note that the 
         default tileSize is available as a property of the tile source.
     </p>
     <pre>
@@ -84,8 +81,11 @@
          style='background-color:#aaa'>
     </div>
     <p>
-        Below is a make believe minimal inline configuration. Note that the 
+        Here is another inline example which makes use of a tile set
-        default tileSize is available as a property of the tile source.
+        created by Aaron Straup Cope ( see http://shapetiles.spum.org/about/ )
+        which provide a visualization of geotagged Flikr photos. Note in this
+        case we set blendTime to zero since png with alpha channel (transparency)
+        can look unusual during blending.
     </p>
     <pre>
     OpenSeadragon({