mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-01-19 17:21:50 +03:00
finished collection support for html drawers
This commit is contained in:
thatcher
parent
063bce8171
commit
6efc348b8a
@ -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}
|
||||
|
||||
|
||||
@ -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;
|
||||
},
|
||||
|
||||
|
||||
@ -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" ),
|
||||
|
||||
33
src/tile.js
33
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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
},
|
||||
|
||||
|
||||
@ -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/>
|
||||
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.
|
||||
</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({
|
||||
...
|
||||
@ -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"
|
||||
]
|
||||
});
|
||||
</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",
|
||||
"/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: [{
|
||||
@ -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>
|
||||
|
||||
</script>
|
||||
@ -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
|
||||
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.
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user