From 6efc348b8aa63b6812e70bbd6338362fe6108c5c Mon Sep 17 00:00:00 2001 From: thatcher Date: Thu, 31 Jan 2013 12:30:13 -0500 Subject: [PATCH] finished collection support for html drawers --- build.properties | 2 +- openseadragon.js | 65 +++++----- src/drawer.js | 11 +- src/tile.js | 33 +++-- src/tilesourcecollection.js | 4 +- src/viewport.js | 17 +-- www/tilesource-collection.html | 223 ++++++++++++++++++++++++++++++--- www/tilesource-custom.html | 18 +-- 8 files changed, 288 insertions(+), 85 deletions(-) diff --git a/build.properties b/build.properties index 4c235715..1406432c 100644 --- a/build.properties +++ b/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} diff --git a/openseadragon.js b/openseadragon.js index 3e624f55..c53f6d6f 100644 --- a/openseadragon.js +++ b/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.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows; + options.height = ( options.tileSize ) * tilesPerRow; + 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 ), - size = this.size.apply( Math.ceil ) - containerSize = $.getElementSize( container ); + var 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"; - this.style.bottom = "0px"; - 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 ); + if ( this.element.parentNode != container ) { + container.appendChild( this.element ); + } + + 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.tilesPerRow ), + tile.y + ( tile.x * collectionTileSource.rows ) : + 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.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); + this.fitWidthBounds = 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.fitVertically( immediately ); - } else { - return this.fitHorizontally( immediately ); - } - return this; + return this.fitBounds( this.homeBounds, immediately ); }, /** @@ -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; }, diff --git a/src/drawer.js b/src/drawer.js index 54aa6fca..26e7ecd3 100644 --- a/src/drawer.js +++ b/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.tilesPerRow ), + tile.y + ( tile.x * collectionTileSource.rows ) : + 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" ), diff --git a/src/tile.js b/src/tile.js index 3e609f23..8b1b5b20 100644 --- a/src/tile.js +++ b/src/tile.js @@ -78,9 +78,7 @@ $.Tile.prototype = { */ drawHTML: function( container ) { - var position = this.position.apply( Math.floor ), - size = this.size.apply( Math.ceil ) - containerSize = $.getElementSize( container ); + var 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"; - this.style.bottom = "0px"; - 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 ); + if ( this.element.parentNode != container ) { + container.appendChild( this.element ); + } + + 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, diff --git a/src/tilesourcecollection.js b/src/tilesourcecollection.js index def1e571..2537321e 100644 --- a/src/tilesourcecollection.js +++ b/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.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows; + options.height = ( options.tileSize ) * tilesPerRow; + options.width = ( options.tileSize ) * options.rows; } options.tileOverlap = -options.tileMargin; diff --git a/src/viewport.js b/src/viewport.js index 9ecf5274..bb9179fd 100644 --- a/src/viewport.js +++ b/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.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); + this.fitWidthBounds = 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.fitVertically( immediately ); - } else { - return this.fitHorizontally( immediately ); - } - return this; + return this.fitBounds( this.homeBounds, immediately ); }, /** @@ -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; }, diff --git a/www/tilesource-collection.html b/www/tilesource-collection.html index db6cc82d..da68e3a9 100644 --- a/www/tilesource-collection.html +++ b/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

- KNOWN ISSUE:
- 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. + No doubt this makes OpenSeadragon into a whole new platform for deepzoom + image visualization.

@@ -22,15 +20,11 @@
- One row, mixed tile sources.. + One row, horizontal..
-

- No doubt this makes OpenSeadragon into a whole new platform for deepzoom - image visualization. - 

 OpenSeadragon({
     ...
@@ -46,7 +40,7 @@ OpenSeadragon({
         id:                 "example-tilesource-collection",
         prefixUrl:          "/openseadragon/images/",
         debugMode:          false, //if you want to see the render grid
-        
+
         collectionMode:     true,
         collectionRows:     1, 
         collectionTileSize: 1024,
@@ -66,13 +60,209 @@ 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", 
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
+        ]
+    });
+
+
+
+
+
+

+    
Two row tile source collection.

+    

+        Multiple rows of tile sources visualized as a collection.
+    

+

+

+    

+        Two horizontal rows.
+    

+    

+    

+    

+        
+    

+
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     2, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    ...
+});

+

+
+
+
+
+
+

+    
Two colum tile source collection.

+    

+        Multiple columns of tile sources visualized as a collection.
+    

+

+

+    

+        Two vertical columns.
+    

+    

+    

+    

+        
+    

+
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     2, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    collectionLayout:   'vertical',
+    ...
+});

+

+
+
+
+
+
+

+    
Multirow, mixed tile source collection.

+    

+        Multiple rows of mixed type tile sources visualized as a collection.
+    

+

+

+    

+        3 rows, mixed tiles sources.
+    

+    

+    

+    

+        
+    

+
+OpenSeadragon({
+    ...
+    collectionMode:     true,
+    collectionRows:     3, 
+    collectionTileSize: 1024,
+    collectionTileMargin: 256,
+    ...
+});

+

+
-
+
\ No newline at end of file
diff --git a/www/tilesource-custom.html b/www/tilesource-custom.html
index 5d7787b3..6a091c46 100644
--- a/www/tilesource-custom.html
+++ b/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'.
 

-

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

 
 

     
Inline Configuration for Custom Tile Sources

@@ -36,7 +30,10 @@
          class="openseadragon" >
     

     

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

     
@@ -84,8 +81,11 @@
          style='background-color:#aaa'>

- Below is a make believe minimal inline configuration. Note that the - default tileSize is available as a property of the tile source. + Here is another inline example which makes use of a tile set + 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. 

     OpenSeadragon({