mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
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:
parent
ab35e86776
commit
15c35c93fd
@ -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}
|
||||
|
||||
|
@ -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>
|
||||
|
383
openseadragon.js
383
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,
|
||||
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,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({
|
||||
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.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,
|
||||
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 ){
|
||||
|
||||
this.viewport.zoomTo(
|
||||
this.defaultZoomLevel,
|
||||
this.viewport.getCenter(),
|
||||
true
|
||||
);
|
||||
} 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) +
|
||||
"]";
|
||||
}
|
||||
};
|
||||
@ -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
|
||||
// front and defining the appropriate 'draw' function
|
||||
if ( USE_CANVAS ) {
|
||||
tile.drawCanvas( drawer.context );
|
||||
} else {
|
||||
tile.drawHTML( drawer.canvas );
|
||||
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));
|
||||
|
||||
tile.beingDrawn = true;
|
||||
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( $ ){
|
||||
|
153
src/drawer.js
153
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
|
||||
// front and defining the appropriate 'draw' function
|
||||
if ( USE_CANVAS ) {
|
||||
tile.drawCanvas( drawer.context );
|
||||
} else {
|
||||
tile.drawHTML( drawer.canvas );
|
||||
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));
|
||||
|
||||
tile.beingDrawn = true;
|
||||
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 ));
|
||||
|
@ -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){
|
||||
|
@ -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'
|
||||
},
|
||||
|
||||
|
||||
|
@ -135,7 +135,7 @@ $.Point.prototype = {
|
||||
* vector components
|
||||
*/
|
||||
toString: function() {
|
||||
return "(" + this.x + "," + this.y + ")";
|
||||
return "(" + Math.round(this.x) + "," + Math.round(this.y) + ")";
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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
111
src/tilesourcecollection.js
Normal 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 ));
|
@ -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({
|
||||
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.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,
|
||||
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 ){
|
||||
|
||||
this.viewport.zoomTo(
|
||||
this.defaultZoomLevel,
|
||||
this.viewport.getCenter(),
|
||||
true
|
||||
);
|
||||
} 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
|
||||
|
@ -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>
|
||||
|
||||
|
||||
|
39
www/developer-debug-mode.html
Normal file
39
www/developer-debug-mode.html
Normal 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>
|
@ -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>
|
505
www/tilesource-collection.html
Normal file
505
www/tilesource-collection.html
Normal 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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<h2>example: tilesource collections</h2>
|
||||
<h2>example: tilesource reference strip</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
Loading…
Reference in New Issue
Block a user