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

This commit is contained in:
thatcher 2013-01-23 23:00:11 -05:00
parent ab35e86776
commit 15c35c93fd
15 changed files with 1234 additions and 113 deletions

View File

@ -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}

View File

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

View File

@ -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,
collectionScroll: 'horizontal',
collectionRows: 3, //or columns depending on layout
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 ));
(function( $ ){
}( OpenSeadragon ));(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,10 +3660,29 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
this.canvas.innerHTML = "";
THIS[ this.hash ].prevContainerSize = $.getElementSize( this.container );
if( this.collectionMode ){
this.source = new $.TileSourceCollection({
rows: this.collectionRows,
layout: this.collectionLayout,
tileSize: this.collectionTileSize,
tileSources: this.tileSources,
tileMargin: this.collectionTileMargin
});
this.viewport = this.viewport ? this.viewport : new $.Viewport({
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,
@ -3663,19 +3694,27 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
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 ){
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 + "," +
this.y + "," +
this.width + "x" +
this.height +
Math.round(this.x*100) + "," +
Math.round(this.y*100) + "," +
Math.round(this.width*100) + "x" +
Math.round(this.height*100) +
"]";
}
};
@ -7823,6 +7975,7 @@ $.Drawer = function( options ) {
//internal state / configurable settings
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,13 +8841,81 @@ 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
// front and defining the appropriate 'draw' function
if( drawer.debugMode ){
try{
drawDebugInfo( drawer, tile, lastDrawn.length, i );
}catch(e){
$.console.error(e);
}
}
//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 {
@ -8702,8 +8924,69 @@ function drawTiles( drawer, lastDrawn ){
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( $ ){

View File

@ -73,6 +73,7 @@ $.Drawer = function( options ) {
//internal state / configurable settings
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,13 +939,81 @@ 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
// front and defining the appropriate 'draw' function
if( drawer.debugMode ){
try{
drawDebugInfo( drawer, tile, lastDrawn.length, i );
}catch(e){
$.console.error(e);
}
}
//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 {
@ -952,6 +1022,67 @@ function drawTiles( drawer, lastDrawn ){
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 ));

View File

@ -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){

View File

@ -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,
collectionScroll: 'horizontal',
collectionRows: 3, //or columns depending on layout
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'
},

View File

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

View File

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

111
src/tilesourcecollection.js Normal file
View File

@ -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 ));

View File

@ -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,10 +355,29 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
this.canvas.innerHTML = "";
THIS[ this.hash ].prevContainerSize = $.getElementSize( this.container );
if( this.collectionMode ){
this.source = new $.TileSourceCollection({
rows: this.collectionRows,
layout: this.collectionLayout,
tileSize: this.collectionTileSize,
tileSources: this.tileSources,
tileMargin: this.collectionTileMargin
});
this.viewport = this.viewport ? this.viewport : new $.Viewport({
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,
@ -366,19 +389,27 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
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 ){
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

View File

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

View File

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

View File

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

View File

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

View File

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