0.9.90 adds support for a debug mode and real heterogeneous collection visualizations. straight html div/image support for both features is in process but incomplete

build.properties

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

build.xml

@@ -32,6 +32,7 @@
             <file name="src/tilesource.js" />
             <file name="src/dzitilesource.js" />
             <file name="src/legacytilesource.js" />
+            <file name="src/tilesourcecollection.js" />
             <file name="src/button.js" />
             <file name="src/buttongroup.js" />
             <file name="src/rectangle.js" />
@@ -65,14 +66,17 @@
         <publish page='tilesource-iiif' title='IIIF Tile Source | '/>
         <publish page='tilesource-legacy' title='Legacy Tile Sources | '/>
         <publish page='tilesource-sequence' title='Tile Source Sequence | '/>
+        <publish page='tilesource-collection' title='Tile Source Collections | '/>
 
         <publish page='ui-binding-custom-buttons' title='Binding Custom Buttons | '/>
-        <publish page='ui-collections' title='Image Reference Strip | '/>
+        <publish page='ui-reference-strip' title='Image Reference Strip | '/>
         <publish page='ui-toolbar' title='Toolbar | '/>
         <publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
 
         <publish page='workspace-dzi' title='Workspace - DZI | '/>
 
+        <publish page='developer-debug-mode' title='Developer Tools - Debug Mode | '/>
+
         <copy todir='${WWW}' file='openseadragon.js' />
     </target>
 
@@ -104,6 +108,7 @@
                     <replacetokens>
                         <token key="EXAMPLE" value='${@{page}.html}'/>
                         <token key="TITLE" value='@{title}'/>
+                        <token key="VERSION" value="${VERSION}"/>
                     </replacetokens>
                 </filterchain>
             </copy>
@@ -113,6 +118,7 @@
                     <replacetokens>
                         <token key="EXAMPLE" value='${index.html}'/>
                         <token key="TITLE" value=''/>
+                        <token key="VERSION" value="${VERSION}"/>
                     </replacetokens>
                 </filterchain>
             </copy>

openseadragon.js

@@ -1,5 +1,5 @@
 /**
- * @version  OpenSeadragon 0.9.82
+ * @version  OpenSeadragon 0.9.90
  *
  * @fileOverview 
  * <h2>
@@ -468,7 +468,6 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             tileHost:               null,
              
             //INTERFACE FEATURES
-            debugMode:              true,
             animationTime:          1.5,
             blendTime:              0.1,
             alwaysBlend:            false,
@@ -478,6 +477,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             wrapVertical:           false,
             panHorizontal:          true,
             panVertical:            true,
+
             visibilityRatio:        0.5,
             springStiffness:        5.0,
             clickTimeThreshold:     300,
@@ -485,19 +485,21 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
+            
             showNavigationControl:  true,
             showSequenceControl:    true,
             controlsFadeDelay:      2000,
             controlsFadeLength:     1500,
             mouseNavEnabled:        true,
+            preserveViewport:       false,
+            defaultZoomLevel:       0, 
+
             showNavigator:          true, //promoted to default in 0.9.64
             navigatorElement:       null,
             navigatorHeight:        null,
             navigatorWidth:         null,
             navigatorPosition:      null,
             navigatorSizeRatio:     0.2,
-            preserveViewport:       false,
-            defaultZoomLevel:       0, 
 
             showReferenceStrip:          false, 
             referenceStripScroll:       'horizontal',
@@ -508,8 +510,10 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             referenceStripSizeRatio:     0.2,
 
             //COLLECTION VISUALIZATION SETTINGS
-            collectionRows:         3,
+            collectionRows:         3, //or columns depending on layout
-            collectionScroll:       'horizontal',
+            collectionLayout:       'horizontal', //vertical
+            collectionMode:         false,
+            collectionTileSize:     800,
 
             //EVENT RELATED CALLBACKS
             onPageChange:           null, 
@@ -560,7 +564,11 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
                     HOVER:  '/images/next_hover.png',
                     DOWN:   '/images/next_pressed.png'
                 }
-            }
+            },
+
+            //DEVELOPER SETTINGS
+            debugMode:              false,
+            debugGridColor:         '#437AB2'
         },
 
 
@@ -3295,8 +3303,7 @@ $.Control.prototype = {
         return -1;
     };
 
-}( OpenSeadragon ));
+}( OpenSeadragon ));(function( $ ){
-(function( $ ){
      
 // dictionary from hash to private properties
 var THIS = {},
@@ -3391,6 +3398,11 @@ $.Viewer = function( options ) {
         viewport:       null,
         navigator:      null, 
 
+        //A collection viewport is a seperate viewport used to provide 
+        //simultanious rendering of sets of tiless
+        collectionViewport:     null,
+        collectionDrawer:       null,
+
         //UI image resources
         //TODO: rename navImages to uiImages
         navImages:      null,
@@ -3648,34 +3660,61 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         this.canvas.innerHTML = "";
         THIS[ this.hash ].prevContainerSize = $.getElementSize( this.container );
 
-        if( source ){
-            this.source = source;
-        }
 
-        this.viewport = this.viewport ? this.viewport : new $.Viewport({
+        if( this.collectionMode ){
-            containerSize:      THIS[ this.hash ].prevContainerSize, 
+            this.source = new $.TileSourceCollection({
-            contentSize:        this.source.dimensions, 
+                rows: this.collectionRows,
-            springStiffness:    this.springStiffness,
+                layout: this.collectionLayout,
-            animationTime:      this.animationTime,
+                tileSize: this.collectionTileSize,
-            minZoomImageRatio:  this.minZoomImageRatio,
+                tileSources: this.tileSources,
-            maxZoomPixelRatio:  this.maxZoomPixelRatio,
+                tileMargin: this.collectionTileMargin
-            visibilityRatio:    this.visibilityRatio,
+            });
-            wrapHorizontal:     this.wrapHorizontal,
+            this.viewport = this.viewport ? this.viewport : new $.Viewport({
-            wrapVertical:       this.wrapVertical
+                collectionMode:         true,
-        });
+                collectionTileSource:   this.source,
+                containerSize:          THIS[ this.hash ].prevContainerSize, 
+                contentSize:            this.source.dimensions, 
+                springStiffness:        this.springStiffness,
+                animationTime:          this.animationTime,
+                minZoomImageRatio:      1,
+                maxZoomPixelRatio:      1
+            });
+        }else{
+            if( source ){
+                this.source = source;
+            }
+            this.viewport = this.viewport ? this.viewport : new $.Viewport({
+                containerSize:      THIS[ this.hash ].prevContainerSize, 
+                contentSize:        this.source.dimensions, 
+                springStiffness:    this.springStiffness,
+                animationTime:      this.animationTime,
+                minZoomImageRatio:  this.minZoomImageRatio,
+                maxZoomPixelRatio:  this.maxZoomPixelRatio,
+                visibilityRatio:    this.visibilityRatio,
+                wrapHorizontal:     this.wrapHorizontal,
+                wrapVertical:       this.wrapVertical
+            });
+        }
         
         if( this.preserveVewport ){
             
             this.viewport.resetContentSize( this.source.dimensions );
 
-        } else if( this.defaultZoomLevel ){
+        } else if( this.defaultZoomLevel || this.collectionMode ){
-
-            this.viewport.zoomTo( 
-                this.defaultZoomLevel, 
-                this.viewport.getCenter(),  
-                true
-            );
 
+            if( this.collectionMode ){
+                /*this.viewport.zoomTo( 
+                    ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, 
+                    this.viewport.getCenter(),
+                    true
+                );*/
+            }else{
+                this.viewport.zoomTo( 
+                    this.defaultZoomLevel, 
+                    this.viewport.getCenter(),  
+                    true
+                );
+            }
         }
 
         this.drawer = new $.Drawer({
@@ -3691,7 +3730,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio
+            minPixelRatio:      this.minPixelRatio,
+            debugMode:          this.debugMode,
+            debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured
@@ -4729,7 +4770,7 @@ $.Navigator = function( options ){
         style.overflow      = 'hidden';
         style.border        = '2px solid #900';
         //TODO: IE doesnt like this property being set
-        try{ style.outline  = '2px auto #900'; }catch(e){/*ignore*/}
+        //try{ style.outline  = '2px auto #909'; }catch(e){/*ignore*/}
         style.background    = 'transparent';
         style.float         = 'left'; //Webkit
         style.cssFloat      = 'left'; //Firefox
@@ -4763,7 +4804,7 @@ $.Navigator = function( options ){
             _this.viewer.setControlsEnabled( true );
             (function( style ){
                 style.border        = '2px solid #437AB2';
-                style.outline       = '2px auto #437AB2';
+                //style.outline       = '2px auto #437AB2';
             }( this.element.style ));
 
         },
@@ -4771,7 +4812,7 @@ $.Navigator = function( options ){
             _this.viewer.setControlsEnabled( false );
             (function( style ){
                 style.border        = '2px solid #900';
-                style.outline       = '2px auto #900';
+                //style.outline       = '2px auto #900';
             }( this.element.style ));
         },
         keyHandler:         function(tracker, keyCode, shiftKey){
@@ -5177,7 +5218,7 @@ $.Point.prototype = {
      *  vector components
      */
     toString: function() {
-        return "(" + this.x + "," + this.y + ")";
+        return "(" + Math.round(this.x) + "," + Math.round(this.y) + ")";
     }
 };
 
@@ -6180,6 +6221,117 @@ function configureFromObject( tileSource, configuration ){
 
 };
 
+}( OpenSeadragon ));
+
+(function( $ ){
+    
+/**
+ * @class
+ * @extends OpenSeadragon.TileSourceCollection
+ */ 
+$.TileSourceCollection = function( tileSize, tileSources, rows, layout  ) {
+    
+    
+    if( $.isPlainObject( tileSize ) ){
+        options = tileSize;
+    }else{
+        options = {
+            tileSize: arguments[ 0 ],
+            tileSources: arguments[ 1 ],
+            rows: arguments[ 2 ],
+            layout: arguments[ 3 ]
+        };
+    }
+
+    if( !options.layout ){
+        options.layout = 'horizontal';
+    }
+
+    var minLevel = 0,
+        levelSize = 1.0,
+        tilesPerRow = Math.ceil( options.tileSources.length / options.rows ),
+        longSide = tilesPerRow >= options.rows ?
+            tilesPerRow :
+            options.rows
+
+    if( 'horizontal' == options.layout ){
+        options.width = ( options.tileSize ) * tilesPerRow;
+        options.height = ( options.tileSize ) * options.rows;
+    } else {
+        options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
+        options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+    }
+
+    options.tileOverlap = -options.tileMargin;
+    options.tilesPerRow = tilesPerRow;
+
+    //Set min level to avoid loading sublevels since collection is a
+    //different kind of abstraction
+
+    while( levelSize  <  ( options.tileSize ) * longSide ){
+        //$.console.log( '%s levelSize %s minLevel %s', options.tileSize * longSide, levelSize, minLevel );
+        levelSize = levelSize * 2.0;
+        minLevel++;
+    }
+    options.minLevel = minLevel;
+
+    //for( var name in options ){
+    //    $.console.log( 'Collection %s %s', name, options[ name ] ); 
+    //}
+
+    $.TileSource.apply( this, [ options ] );
+
+};
+
+$.extend( $.TileSourceCollection.prototype, $.TileSource.prototype, {
+
+    /**
+     * @function
+     * @param {Number} level
+     * @param {Number} x
+     * @param {Number} y
+     */
+    getTileBounds: function( level, x, y ) {
+        var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
+            px = this.tileSize * x - this.tileOverlap,
+            py = this.tileSize * y - this.tileOverlap,
+            sx = this.tileSize + 1 * this.tileOverlap,
+            sy = this.tileSize + 1 * this.tileOverlap,
+            scale = 1.0 / dimensionsScaled.x;
+
+        sx = Math.min( sx, dimensionsScaled.x - px );
+        sy = Math.min( sy, dimensionsScaled.y - py );
+
+        return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
+    },
+
+    /**
+     * 
+     * @function
+     * @name OpenSeadragon.TileSourceCollection.prototype.configure
+     */
+    configure: function( data, url ){
+        return
+    },
+
+
+    /**
+     * @function
+     * @name OpenSeadragon.TileSourceCollection.prototype.getTileUrl
+     * @param {Number} level
+     * @param {Number} x
+     * @param {Number} y
+     */
+    getTileUrl: function( level, x, y ) {
+        //$.console.log([  level, '/', x, '_', y ].join( '' ));
+        return null;
+    }
+
+
+    
+});
+
+
 }( OpenSeadragon ));
 
 
@@ -6748,10 +6900,10 @@ $.Rect.prototype = {
      */
     toString: function() {
         return "[" + 
-            this.x + "," + 
+            Math.round(this.x*100) + "," + 
-            this.y + "," + 
+            Math.round(this.y*100) + "," + 
-            this.width + "x" +
+            Math.round(this.width*100) + "x" +
-            this.height + 
+            Math.round(this.height*100) + 
         "]";
     }
 };
@@ -7822,7 +7974,8 @@ $.Drawer = function( options ) {
         updateAgain:    true,
 
         //internal state / configurable settings 
-        overlays:       [],
+        overlays:           [],
+        collectionOverlays: {},
 
         //configurable settings
         maxImageCacheCount: $.DEFAULT_SETTINGS.maxImageCacheCount,
@@ -7833,7 +7986,8 @@ $.Drawer = function( options ) {
         immediateRender:    $.DEFAULT_SETTINGS.immediateRender,
         blendTime:          $.DEFAULT_SETTINGS.blendTime,
         alwaysBlend:        $.DEFAULT_SETTINGS.alwaysBlend,
-        minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio
+        minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio,
+        debugMode:          $.DEFAULT_SETTINGS.debugMode
 
     }, options );
 
@@ -7879,7 +8033,7 @@ $.Drawer = function( options ) {
             }( this, this.overlays[ i ] ));
 
         } else if ( $.isFunction( this.overlays[ i ] ) ){
-            
+            //TODO
         }
     }
 
@@ -8687,23 +8841,152 @@ function drawOverlay( viewport, overlay, container ){
 
 function drawTiles( drawer, lastDrawn ){
     var i, 
-        tile;
+        tile,
+        tileKey,
+        viewer,
+        viewport,
+        position,
+        tileSource,
+        collectionTileSource;
 
     for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
         tile = lastDrawn[ i ];
 
-        //TODO: get rid of this if by determining the tile draw method once up
+        if( drawer.debugMode ){
-        //      front and defining the appropriate 'draw' function
+            try{
-        if ( USE_CANVAS ) {
+                drawDebugInfo( drawer, tile, lastDrawn.length, i );
-            tile.drawCanvas( drawer.context );
+            }catch(e){
-        } else {
+                $.console.error(e);
-            tile.drawHTML( drawer.canvas );
+            }
         }
         
-        tile.beingDrawn = true;
+        //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.tilesPerRow ),
+                tileSource = position < collectionTileSource.tileSources.length ?
+                    collectionTileSource.tileSources[ position ] :
+                    null;
+                //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+                if( tileSource ){
+                    drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
+                        element:               $.makeNeutralElement( "div" ),
+                        mouseNavEnabled:       false,
+                        showNavigator:         false,
+                        showSequenceControl:   false,
+                        showNavigationControl: false,
+                        //visibilityRatio:       1,
+                        //debugMode:             true,
+                        //debugGridColor:        'red',
+                        tileSources: [
+                            tileSource
+                        ]
+                    });
+                    
+                    (function(style){
+                        style['-webkit-box-reflect'] = 
+                            'below 0px -webkit-gradient('+
+                                'linear,left '+
+                                'top,left '+
+                                'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
+                            ')';
+                        style['border'] = '1px solid rgba(255,255,255,0.2)';
+                        //style['borderRight'] = '1px solid #fff';
+                    }(viewer.element.style));
+
+                    drawer.addOverlay(
+                        viewer.element,
+                        tile.bounds
+                    );  
+                }
+
+            }else{
+                viewer = drawer.collectionOverlays[ tileKey ];
+                if( viewer.viewport ){
+                    viewer.viewport.resize( tile.size, true );
+                    viewer.viewport.goHome( true );
+                }
+            }
+
+        } else {
+
+            if ( USE_CANVAS ) {
+                tile.drawCanvas( drawer.context );
+            } else {
+                tile.drawHTML( drawer.canvas );
+            }
+
+            tile.beingDrawn = true;
+        }
     }
 };
 
+
+function drawDebugInfo( drawer, tile, count, i ){
+
+    if ( USE_CANVAS ) {
+        drawer.context.lineWidth = 2;
+        drawer.context.font = 'small-caps bold 12px ariel';
+        drawer.context.strokeStyle = drawer.debugGridColor;
+        drawer.context.fillStyle = drawer.debugGridColor;
+        drawer.context.strokeRect( 
+            tile.position.x, 
+            tile.position.y, 
+            tile.size.x, 
+            tile.size.y 
+        );
+        if( tile.x == 0 && tile.y == 0 ){
+            drawer.context.fillText(
+                "Zoom: " + drawer.viewport.getZoom(),
+                tile.position.x, 
+                tile.position.y - 30
+            );
+            drawer.context.fillText(
+                "Pan: " + drawer.viewport.getBounds().toString(), 
+                tile.position.x, 
+                tile.position.y - 20
+            );
+        }
+        drawer.context.fillText(
+            "Level: " + tile.level,
+            tile.position.x + 10, 
+            tile.position.y + 20
+        );
+        drawer.context.fillText(
+            "Column: " + tile.x,
+            tile.position.x + 10, 
+            tile.position.y + 30
+        );
+        drawer.context.fillText(
+            "Row: " + tile.y,
+            tile.position.x + 10, 
+            tile.position.y + 40
+        );
+        drawer.context.fillText(
+            "Order: " + i + " of " + count,
+            tile.position.x + 10, 
+            tile.position.y + 50
+        );
+        drawer.context.fillText(
+            "Size: " + tile.size.toString(),
+            tile.position.x + 10, 
+            tile.position.y + 60
+        );
+        drawer.context.fillText(
+            "Position: " + tile.position.toString(),
+            tile.position.x + 10, 
+            tile.position.y + 70
+        );
+    }
+};
+
+
 }( OpenSeadragon ));
 
 (function( $ ){

src/drawer.js

@@ -72,7 +72,8 @@ $.Drawer = function( options ) {
         updateAgain:    true,
 
         //internal state / configurable settings 
-        overlays:       [],
+        overlays:           [],
+        collectionOverlays: {},
 
         //configurable settings
         maxImageCacheCount: $.DEFAULT_SETTINGS.maxImageCacheCount,
@@ -83,7 +84,8 @@ $.Drawer = function( options ) {
         immediateRender:    $.DEFAULT_SETTINGS.immediateRender,
         blendTime:          $.DEFAULT_SETTINGS.blendTime,
         alwaysBlend:        $.DEFAULT_SETTINGS.alwaysBlend,
-        minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio
+        minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio,
+        debugMode:          $.DEFAULT_SETTINGS.debugMode
 
     }, options );
 
@@ -129,7 +131,7 @@ $.Drawer = function( options ) {
             }( this, this.overlays[ i ] ));
 
         } else if ( $.isFunction( this.overlays[ i ] ) ){
-            
+            //TODO
         }
     }
 
@@ -937,21 +939,150 @@ function drawOverlay( viewport, overlay, container ){
 
 function drawTiles( drawer, lastDrawn ){
     var i, 
-        tile;
+        tile,
+        tileKey,
+        viewer,
+        viewport,
+        position,
+        tileSource,
+        collectionTileSource;
 
     for ( i = lastDrawn.length - 1; i >= 0; i-- ) {
         tile = lastDrawn[ i ];
 
-        //TODO: get rid of this if by determining the tile draw method once up
+        if( drawer.debugMode ){
-        //      front and defining the appropriate 'draw' function
+            try{
-        if ( USE_CANVAS ) {
+                drawDebugInfo( drawer, tile, lastDrawn.length, i );
-            tile.drawCanvas( drawer.context );
+            }catch(e){
-        } else {
+                $.console.error(e);
-            tile.drawHTML( drawer.canvas );
+            }
         }
         
-        tile.beingDrawn = true;
+        //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.tilesPerRow ),
+                tileSource = position < collectionTileSource.tileSources.length ?
+                    collectionTileSource.tileSources[ position ] :
+                    null;
+                //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+                if( tileSource ){
+                    drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
+                        element:               $.makeNeutralElement( "div" ),
+                        mouseNavEnabled:       false,
+                        showNavigator:         false,
+                        showSequenceControl:   false,
+                        showNavigationControl: false,
+                        //visibilityRatio:       1,
+                        //debugMode:             true,
+                        //debugGridColor:        'red',
+                        tileSources: [
+                            tileSource
+                        ]
+                    });
+                    
+                    (function(style){
+                        style['-webkit-box-reflect'] = 
+                            'below 0px -webkit-gradient('+
+                                'linear,left '+
+                                'top,left '+
+                                'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
+                            ')';
+                        style['border'] = '1px solid rgba(255,255,255,0.2)';
+                        //style['borderRight'] = '1px solid #fff';
+                    }(viewer.element.style));
+
+                    drawer.addOverlay(
+                        viewer.element,
+                        tile.bounds
+                    );  
+                }
+
+            }else{
+                viewer = drawer.collectionOverlays[ tileKey ];
+                if( viewer.viewport ){
+                    viewer.viewport.resize( tile.size, true );
+                    viewer.viewport.goHome( true );
+                }
+            }
+
+        } else {
+
+            if ( USE_CANVAS ) {
+                tile.drawCanvas( drawer.context );
+            } else {
+                tile.drawHTML( drawer.canvas );
+            }
+
+            tile.beingDrawn = true;
+        }
     }
 };
 
+
+function drawDebugInfo( drawer, tile, count, i ){
+
+    if ( USE_CANVAS ) {
+        drawer.context.lineWidth = 2;
+        drawer.context.font = 'small-caps bold 12px ariel';
+        drawer.context.strokeStyle = drawer.debugGridColor;
+        drawer.context.fillStyle = drawer.debugGridColor;
+        drawer.context.strokeRect( 
+            tile.position.x, 
+            tile.position.y, 
+            tile.size.x, 
+            tile.size.y 
+        );
+        if( tile.x == 0 && tile.y == 0 ){
+            drawer.context.fillText(
+                "Zoom: " + drawer.viewport.getZoom(),
+                tile.position.x, 
+                tile.position.y - 30
+            );
+            drawer.context.fillText(
+                "Pan: " + drawer.viewport.getBounds().toString(), 
+                tile.position.x, 
+                tile.position.y - 20
+            );
+        }
+        drawer.context.fillText(
+            "Level: " + tile.level,
+            tile.position.x + 10, 
+            tile.position.y + 20
+        );
+        drawer.context.fillText(
+            "Column: " + tile.x,
+            tile.position.x + 10, 
+            tile.position.y + 30
+        );
+        drawer.context.fillText(
+            "Row: " + tile.y,
+            tile.position.x + 10, 
+            tile.position.y + 40
+        );
+        drawer.context.fillText(
+            "Order: " + i + " of " + count,
+            tile.position.x + 10, 
+            tile.position.y + 50
+        );
+        drawer.context.fillText(
+            "Size: " + tile.size.toString(),
+            tile.position.x + 10, 
+            tile.position.y + 60
+        );
+        drawer.context.fillText(
+            "Position: " + tile.position.toString(),
+            tile.position.x + 10, 
+            tile.position.y + 70
+        );
+    }
+};
+
+
 }( OpenSeadragon ));

src/navigator.js

@@ -65,7 +65,7 @@ $.Navigator = function( options ){
         style.overflow      = 'hidden';
         style.border        = '2px solid #900';
         //TODO: IE doesnt like this property being set
-        try{ style.outline  = '2px auto #900'; }catch(e){/*ignore*/}
+        //try{ style.outline  = '2px auto #909'; }catch(e){/*ignore*/}
         style.background    = 'transparent';
         style.float         = 'left'; //Webkit
         style.cssFloat      = 'left'; //Firefox
@@ -99,7 +99,7 @@ $.Navigator = function( options ){
             _this.viewer.setControlsEnabled( true );
             (function( style ){
                 style.border        = '2px solid #437AB2';
-                style.outline       = '2px auto #437AB2';
+                //style.outline       = '2px auto #437AB2';
             }( this.element.style ));
 
         },
@@ -107,7 +107,7 @@ $.Navigator = function( options ){
             _this.viewer.setControlsEnabled( false );
             (function( style ){
                 style.border        = '2px solid #900';
-                style.outline       = '2px auto #900';
+                //style.outline       = '2px auto #900';
             }( this.element.style ));
         },
         keyHandler:         function(tracker, keyCode, shiftKey){

src/openseadragon.js

@@ -468,7 +468,6 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             tileHost:               null,
              
             //INTERFACE FEATURES
-            debugMode:              true,
             animationTime:          1.5,
             blendTime:              0.1,
             alwaysBlend:            false,
@@ -478,6 +477,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             wrapVertical:           false,
             panHorizontal:          true,
             panVertical:            true,
+
             visibilityRatio:        0.5,
             springStiffness:        5.0,
             clickTimeThreshold:     300,
@@ -485,19 +485,21 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
+            
             showNavigationControl:  true,
             showSequenceControl:    true,
             controlsFadeDelay:      2000,
             controlsFadeLength:     1500,
             mouseNavEnabled:        true,
+            preserveViewport:       false,
+            defaultZoomLevel:       0, 
+
             showNavigator:          true, //promoted to default in 0.9.64
             navigatorElement:       null,
             navigatorHeight:        null,
             navigatorWidth:         null,
             navigatorPosition:      null,
             navigatorSizeRatio:     0.2,
-            preserveViewport:       false,
-            defaultZoomLevel:       0, 
 
             showReferenceStrip:          false, 
             referenceStripScroll:       'horizontal',
@@ -508,8 +510,10 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             referenceStripSizeRatio:     0.2,
 
             //COLLECTION VISUALIZATION SETTINGS
-            collectionRows:         3,
+            collectionRows:         3, //or columns depending on layout
-            collectionScroll:       'horizontal',
+            collectionLayout:       'horizontal', //vertical
+            collectionMode:         false,
+            collectionTileSize:     800,
 
             //EVENT RELATED CALLBACKS
             onPageChange:           null, 
@@ -560,7 +564,11 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
                     HOVER:  '/images/next_hover.png',
                     DOWN:   '/images/next_pressed.png'
                 }
-            }
+            },
+
+            //DEVELOPER SETTINGS
+            debugMode:              false,
+            debugGridColor:         '#437AB2'
         },
 
 

src/point.js

@@ -135,7 +135,7 @@ $.Point.prototype = {
      *  vector components
      */
     toString: function() {
-        return "(" + this.x + "," + this.y + ")";
+        return "(" + Math.round(this.x) + "," + Math.round(this.y) + ")";
     }
 };
 

src/rectangle.js

@@ -105,10 +105,10 @@ $.Rect.prototype = {
      */
     toString: function() {
         return "[" + 
-            this.x + "," + 
+            Math.round(this.x*100) + "," + 
-            this.y + "," + 
+            Math.round(this.y*100) + "," + 
-            this.width + "x" +
+            Math.round(this.width*100) + "x" +
-            this.height + 
+            Math.round(this.height*100) + 
         "]";
     }
 };

src/tilesourcecollection.js

@@ -0,0 +1,111 @@
+
+(function( $ ){
+    
+/**
+ * @class
+ * @extends OpenSeadragon.TileSourceCollection
+ */ 
+$.TileSourceCollection = function( tileSize, tileSources, rows, layout  ) {
+    
+    
+    if( $.isPlainObject( tileSize ) ){
+        options = tileSize;
+    }else{
+        options = {
+            tileSize: arguments[ 0 ],
+            tileSources: arguments[ 1 ],
+            rows: arguments[ 2 ],
+            layout: arguments[ 3 ]
+        };
+    }
+
+    if( !options.layout ){
+        options.layout = 'horizontal';
+    }
+
+    var minLevel = 0,
+        levelSize = 1.0,
+        tilesPerRow = Math.ceil( options.tileSources.length / options.rows ),
+        longSide = tilesPerRow >= options.rows ?
+            tilesPerRow :
+            options.rows
+
+    if( 'horizontal' == options.layout ){
+        options.width = ( options.tileSize ) * tilesPerRow;
+        options.height = ( options.tileSize ) * options.rows;
+    } else {
+        options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
+        options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+    }
+
+    options.tileOverlap = -options.tileMargin;
+    options.tilesPerRow = tilesPerRow;
+
+    //Set min level to avoid loading sublevels since collection is a
+    //different kind of abstraction
+
+    while( levelSize  <  ( options.tileSize ) * longSide ){
+        //$.console.log( '%s levelSize %s minLevel %s', options.tileSize * longSide, levelSize, minLevel );
+        levelSize = levelSize * 2.0;
+        minLevel++;
+    }
+    options.minLevel = minLevel;
+
+    //for( var name in options ){
+    //    $.console.log( 'Collection %s %s', name, options[ name ] ); 
+    //}
+
+    $.TileSource.apply( this, [ options ] );
+
+};
+
+$.extend( $.TileSourceCollection.prototype, $.TileSource.prototype, {
+
+    /**
+     * @function
+     * @param {Number} level
+     * @param {Number} x
+     * @param {Number} y
+     */
+    getTileBounds: function( level, x, y ) {
+        var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
+            px = this.tileSize * x - this.tileOverlap,
+            py = this.tileSize * y - this.tileOverlap,
+            sx = this.tileSize + 1 * this.tileOverlap,
+            sy = this.tileSize + 1 * this.tileOverlap,
+            scale = 1.0 / dimensionsScaled.x;
+
+        sx = Math.min( sx, dimensionsScaled.x - px );
+        sy = Math.min( sy, dimensionsScaled.y - py );
+
+        return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
+    },
+
+    /**
+     * 
+     * @function
+     * @name OpenSeadragon.TileSourceCollection.prototype.configure
+     */
+    configure: function( data, url ){
+        return
+    },
+
+
+    /**
+     * @function
+     * @name OpenSeadragon.TileSourceCollection.prototype.getTileUrl
+     * @param {Number} level
+     * @param {Number} x
+     * @param {Number} y
+     */
+    getTileUrl: function( level, x, y ) {
+        //$.console.log([  level, '/', x, '_', y ].join( '' ));
+        return null;
+    }
+
+
+    
+});
+
+
+}( OpenSeadragon ));

src/viewer.js

@@ -1,4 +1,3 @@
-
 (function( $ ){
      
 // dictionary from hash to private properties
@@ -94,6 +93,11 @@ $.Viewer = function( options ) {
         viewport:       null,
         navigator:      null, 
 
+        //A collection viewport is a seperate viewport used to provide 
+        //simultanious rendering of sets of tiless
+        collectionViewport:     null,
+        collectionDrawer:       null,
+
         //UI image resources
         //TODO: rename navImages to uiImages
         navImages:      null,
@@ -351,34 +355,61 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         this.canvas.innerHTML = "";
         THIS[ this.hash ].prevContainerSize = $.getElementSize( this.container );
 
-        if( source ){
-            this.source = source;
-        }
 
-        this.viewport = this.viewport ? this.viewport : new $.Viewport({
+        if( this.collectionMode ){
-            containerSize:      THIS[ this.hash ].prevContainerSize, 
+            this.source = new $.TileSourceCollection({
-            contentSize:        this.source.dimensions, 
+                rows: this.collectionRows,
-            springStiffness:    this.springStiffness,
+                layout: this.collectionLayout,
-            animationTime:      this.animationTime,
+                tileSize: this.collectionTileSize,
-            minZoomImageRatio:  this.minZoomImageRatio,
+                tileSources: this.tileSources,
-            maxZoomPixelRatio:  this.maxZoomPixelRatio,
+                tileMargin: this.collectionTileMargin
-            visibilityRatio:    this.visibilityRatio,
+            });
-            wrapHorizontal:     this.wrapHorizontal,
+            this.viewport = this.viewport ? this.viewport : new $.Viewport({
-            wrapVertical:       this.wrapVertical
+                collectionMode:         true,
-        });
+                collectionTileSource:   this.source,
+                containerSize:          THIS[ this.hash ].prevContainerSize, 
+                contentSize:            this.source.dimensions, 
+                springStiffness:        this.springStiffness,
+                animationTime:          this.animationTime,
+                minZoomImageRatio:      1,
+                maxZoomPixelRatio:      1
+            });
+        }else{
+            if( source ){
+                this.source = source;
+            }
+            this.viewport = this.viewport ? this.viewport : new $.Viewport({
+                containerSize:      THIS[ this.hash ].prevContainerSize, 
+                contentSize:        this.source.dimensions, 
+                springStiffness:    this.springStiffness,
+                animationTime:      this.animationTime,
+                minZoomImageRatio:  this.minZoomImageRatio,
+                maxZoomPixelRatio:  this.maxZoomPixelRatio,
+                visibilityRatio:    this.visibilityRatio,
+                wrapHorizontal:     this.wrapHorizontal,
+                wrapVertical:       this.wrapVertical
+            });
+        }
         
         if( this.preserveVewport ){
             
             this.viewport.resetContentSize( this.source.dimensions );
 
-        } else if( this.defaultZoomLevel ){
+        } else if( this.defaultZoomLevel || this.collectionMode ){
-
-            this.viewport.zoomTo( 
-                this.defaultZoomLevel, 
-                this.viewport.getCenter(),  
-                true
-            );
 
+            if( this.collectionMode ){
+                /*this.viewport.zoomTo( 
+                    ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, 
+                    this.viewport.getCenter(),
+                    true
+                );*/
+            }else{
+                this.viewport.zoomTo( 
+                    this.defaultZoomLevel, 
+                    this.viewport.getCenter(),  
+                    true
+                );
+            }
         }
 
         this.drawer = new $.Drawer({
@@ -394,7 +425,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio
+            minPixelRatio:      this.minPixelRatio,
+            debugMode:          this.debugMode,
+            debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured

www/base.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset='utf-8'>
 
-    <title>@TITLE@ OpenSeadragon</title>
+    <title>@TITLE@ OpenSeadragon @VERSION@</title>
 
     <link rel='stylesheet' 
           type='text/css'
@@ -112,11 +112,25 @@
                 <li><a href='/openseadragon/examples/tilesource-sequence/'>
                     <span>Image Sequence</span>
                 </a></li>
-                <li><a href='/openseadragon/examples/ui-collections/'>
+                <li><a href='/openseadragon/examples/ui-reference-strip/'>
                     <span>Image Reference Strip</span>
                 </a></li>
             </ul>
         </li>
+
+
+        <li>
+            <h3>Developer Tools</h3>
+            <p>
+                These settings can be useful for developers who are trying
+                to add features to OpenSeadragon or when troubleshooting.
+            </p>
+            <ul>
+                <li><a href='/openseadragon/examples/developer-debug-mode/'>
+                    <span>Debug Mode</span>
+                </a></li>
+            </ul>
+        </li>
     </ul>
     
     

www/developer-debug-mode.html

@@ -0,0 +1,39 @@
+<h2>developer: debug mode</h2>
+
+<div class="description">
+  Enabling developer mode provides some in-context information
+  about the tiles being drawn in a given viewport. <br/><br/>
+  Currently this is only implemented for browsers supporting 
+  HTML Canvas.
+</div>
+
+<div class="demoarea">
+    <div class="demoheading">
+        Seadragon in debug mode.
+        <span id='consolelog'></span>
+    </div>
+    <div id="contentDiv" class="openseadragon"></div>
+</div>
+
+<script type="text/javascript">
+    // Example
+    OpenSeadragon({
+        id:              "contentDiv",
+        prefixUrl:       "/openseadragon/",
+        tileSources:     "/openseadragon/examples/images/highsmith/highsmith.js",
+        showNavigator:   false, 
+        debugMode:       true
+    });
+</script>
+
+<p>
+The relevant configuration options are shown below.
+</p>
+
+<pre>
+    OpenSeadragon({
+        ...
+        debugMode:  true,
+        ...
+    });
+</pre>

www/index.html

@@ -19,15 +19,6 @@
     OpenSeadragon({
         id:              "contentDiv",
         prefixUrl:       "/openseadragon/",
-        tileSources:     "/openseadragon/examples/images/highsmith/highsmith.js"/*,
+        tileSources:     "/openseadragon/examples/images/highsmith/highsmith.js"
-        wrapVertical:    true,
-        wrapHorizontal:  true,
-        visibilityRatio: 0,
-        minPixelRatio:   1,
-        immediateRender: true,
-        minZoomImageRatio: 1,
-        maxZoomPixelRatio: 1,
-        showNavigationControl: false
-        */
     });
 </script>

www/tilesource-collection.html

@@ -0,0 +1,505 @@
+<h2>
+    example: tilesource-collection *NOTE* UNDER DEVELOPMENT
+</h2>
+<p>
+    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.
+</p>
+<p>
+    KNOWN ISSUE:<br/>
+    This implementation does not support plain html rendering techniques, eg canvas 
+    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">
+    <h3>A basic single row tile source collection.</h3>
+    <p>
+        Just a simple row of tile sources visualized as a collection.
+    </p>
+</div>
+<div class="demoarea">
+    <div class="demoheading">
+        One row, mixed tile sources..
+    </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({
+    ...
+    collectionMode:     true,
+    collectionRows:     1, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    ...
+});</pre>
+</div>
+<script type="text/javascript">
+    OpenSeadragon({
+        id:                 "example-tilesource-collection",
+        prefixUrl:          "/openseadragon",
+        //debugMode:          true,
+        showNavigator:      false,
+        minPixelRatio:      0.0,
+        collectionMode:     true,
+        collectionRows:     1, 
+        collectionTileSize: 1024,
+        collectionTileMargin: 256,
+        //collectionLayout:   'vertical',
+        //defaultZoomLevel:   1,
+        //wrapHorizontal: true,
+        //wrapVertical: true,
+        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", 
+        {
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0002q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0002r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0002v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0003q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0003r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0003v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0004q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0004r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0004v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0005q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0005r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0005v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0006q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0006r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0006v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0007q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0007r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0007v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0008q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0008r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0008v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0009q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0009r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0009v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0010q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0010r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0010v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        }/*,{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0012q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0012r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0012v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0013q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0013r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0013v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0014q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0014r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0014v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0015q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0015r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0015v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0016q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0016r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0016v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0017q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0017r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0017v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0018q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0018r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0018v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0019q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0019r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0019v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0020q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0020r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0020v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0021q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0021r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0021v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0022q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0022r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0022v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0023q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0023r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0023v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0024q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0024r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0024v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0025q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0025r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0025v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0026q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0026r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0026v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        },{
+            type: 'legacy-image-pyramid',
+            levels: [{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0027q.jpg',
+                height: 889,
+                width:  600
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0027r.jpg',
+                height: 2201,
+                width:  1485
+            },{
+                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0027v.jpg',
+                height: 4402,
+                width:  2970
+                
+            }]
+        }*/]
+    });
+</script>
+

www/ui-reference-strip.html

@@ -1,4 +1,4 @@
-<h2>example: tilesource collections</h2>
+<h2>example: tilesource reference strip</h2>
 
 <div class="description">
     <p>