mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +03:00
Code Issues Projects Releases Wiki Activity

fixing some work in progress for collections visualizations

Browse Source
This commit is contained in:
thatcher 2013-01-30 20:23:45 -05:00
parent ae30208b36
commit 063bce8171
6 changed files with 97 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
openseadragon.js
View File

@ -3677,6 +3677,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
contentSize: this.source.dimensions, contentSize: this.source.dimensions,
springStiffness: this.springStiffness, springStiffness: this.springStiffness,
animationTime: this.animationTime, animationTime: this.animationTime,
showNavigator: false,
minZoomImageRatio: 1, minZoomImageRatio: 1,
maxZoomPixelRatio: 1 maxZoomPixelRatio: 1
}); });
@ -3731,14 +3732,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
immediateRender: this.immediateRender, immediateRender: this.immediateRender,
blendTime: this.blendTime, blendTime: this.blendTime,
alwaysBlend: this.alwaysBlend, alwaysBlend: this.alwaysBlend,
minPixelRatio: this.minPixelRatio, minPixelRatio: this.collectionMode ? 0 : this.minPixelRatio,
timeout: this.timeout, timeout: this.timeout,
debugMode: this.debugMode, debugMode: this.debugMode,
debugGridColor: this.debugGridColor debugGridColor: this.debugGridColor
}); });
//Instantiate a navigator if configured //Instantiate a navigator if configured
if ( this.showNavigator && ! this.navigator ){ if ( this.showNavigator && ! this.navigator && !this.collectionMode ){
this.navigator = new $.Navigator({ this.navigator = new $.Navigator({
id: this.navigatorElement, id: this.navigatorElement,
position: this.navigatorPosition, position: this.navigatorPosition,
@ -7675,35 +7676,48 @@ $.Tile.prototype = {
} }
if ( !this.element ) { if ( !this.element ) {
this.element = $.makeNeutralElement("img"); this.element = $.makeNeutralElement("img");
this.element.src = this.url; this.element.src = this.url;
this.style = this.element.style;
this.style = this.element.style;
this.style.position = "absolute"; this.style.position = "absolute";
this.style.msInterpolationMode = "nearest-neighbor"; this.style.msInterpolationMode = "nearest-neighbor";
} }
if ( this.element.parentNode != container ) { if ( this.element.parentNode != container ) {
container.appendChild( this.element ); container.appendChild( this.element );
} }
this.style.top = position.y + "px"; this.style.top = position.y + "px";
this.style.left = position.x + "px"; this.style.left = position.x + "px";
this.style.height = size.y + "px"; this.style.height = size.y + "px";
this.style.width = size.x + "px"; this.style.width = size.x + "px";
//this.style.right = ( containerSize.x - position.x ) + "px"; //EXPERIMENTAL - trying to figure out how to scale the container
//this.style.bottom = ( containerSize.y - position.y ) + "px"; // content during animation of the container size.
/*
//when the entire container is filled by a single tile we need if ( !this.element ) {
//some additional stickyness so when animating container size this.element = $.makeNeutralElement("div");
//the image stays fixed in position this.image = $.makeNeutralElement("img");
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%"; this.image.src = this.url;
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%"; this.image.style.height = '100%';
this.image.style.width = '100%';
this.image.style.msInterpolationMode = "nearest-neighbor";
this.element.appendChild( this.image );
this.style = this.element.style;
this.style.position = "absolute";
}
this.style.right = "0px";
this.style.bottom = "0px";
if ( size.y == containerSize.y || size.x == containerSize.x ){
this.style.right = position.x + "px";
this.style.bottom = position.y + "px";
}
*/
$.setElementOpacity( this.element, this.opacity ); $.setElementOpacity( this.element, this.opacity );
}, },
/** /**
@ -7726,6 +7740,7 @@ $.Tile.prototype = {
context.globalAlpha = this.opacity; context.globalAlpha = this.opacity;
context.save(); context.save();
if( context.globalAlpha == 1 && this.image.src.match('.png') ){ if( context.globalAlpha == 1 && this.image.src.match('.png') ){
context.clearRect( context.clearRect(
@ -8569,12 +8584,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
function loadTile( drawer, tile, time ) { function loadTile( drawer, tile, time ) {
tile.loading = drawer.loadImage( if( drawer.viewport.collectionMode ){
tile.url, drawer.midUpdate = false;
function( image ){ onTileLoad( drawer, tile, time );
onTileLoad( drawer, tile, time, image ); } else {
} tile.loading = drawer.loadImage(
); tile.url,
function( image ){
onTileLoad( drawer, tile, time, image );
}
);
}
}; };
function onTileLoad( drawer, tile, time, image ) { function onTileLoad( drawer, tile, time, image ) {
@ -8594,7 +8614,7 @@ function onTileLoad( drawer, tile, time, image ) {
if ( drawer.midUpdate ) { if ( drawer.midUpdate ) {
$.console.warn( "Tile load callback in middle of drawing routine." ); $.console.warn( "Tile load callback in middle of drawing routine." );
return; return;
} else if ( !image ) { } else if ( !image && !drawer.viewport.collectionMode ) {
$.console.log( "Tile %s failed to load: %s", tile, tile.url ); $.console.log( "Tile %s failed to load: %s", tile, tile.url );
tile.exists = false; tile.exists = false;
return; return;

19
src/drawer.js
View File

@ -636,12 +636,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
function loadTile( drawer, tile, time ) { function loadTile( drawer, tile, time ) {
tile.loading = drawer.loadImage( if( drawer.viewport.collectionMode ){
tile.url, drawer.midUpdate = false;
function( image ){ onTileLoad( drawer, tile, time );
onTileLoad( drawer, tile, time, image ); } else {
} tile.loading = drawer.loadImage(
); tile.url,
function( image ){
onTileLoad( drawer, tile, time, image );
}
);
}
}; };
function onTileLoad( drawer, tile, time, image ) { function onTileLoad( drawer, tile, time, image ) {
@ -661,7 +666,7 @@ function onTileLoad( drawer, tile, time, image ) {
if ( drawer.midUpdate ) { if ( drawer.midUpdate ) {
$.console.warn( "Tile load callback in middle of drawing routine." ); $.console.warn( "Tile load callback in middle of drawing routine." );
return; return;
} else if ( !image ) { } else if ( !image && !drawer.viewport.collectionMode ) {
$.console.log( "Tile %s failed to load: %s", tile, tile.url ); $.console.log( "Tile %s failed to load: %s", tile, tile.url );
tile.exists = false; tile.exists = false;
return; return;

42
src/tile.js
View File

@ -91,35 +91,48 @@ $.Tile.prototype = {
} }
if ( !this.element ) { if ( !this.element ) {
this.element = $.makeNeutralElement("img"); this.element = $.makeNeutralElement("img");
this.element.src = this.url; this.element.src = this.url;
this.style = this.element.style;
this.style = this.element.style;
this.style.position = "absolute"; this.style.position = "absolute";
this.style.msInterpolationMode = "nearest-neighbor"; this.style.msInterpolationMode = "nearest-neighbor";
} }
if ( this.element.parentNode != container ) { if ( this.element.parentNode != container ) {
container.appendChild( this.element ); container.appendChild( this.element );
} }
this.style.top = position.y + "px"; this.style.top = position.y + "px";
this.style.left = position.x + "px"; this.style.left = position.x + "px";
this.style.height = size.y + "px"; this.style.height = size.y + "px";
this.style.width = size.x + "px"; this.style.width = size.x + "px";
//this.style.right = ( containerSize.x - position.x ) + "px"; //EXPERIMENTAL - trying to figure out how to scale the container
//this.style.bottom = ( containerSize.y - position.y ) + "px"; // content during animation of the container size.
/*
//when the entire container is filled by a single tile we need if ( !this.element ) {
//some additional stickyness so when animating container size this.element = $.makeNeutralElement("div");
//the image stays fixed in position this.image = $.makeNeutralElement("img");
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%"; this.image.src = this.url;
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%"; this.image.style.height = '100%';
this.image.style.width = '100%';
this.image.style.msInterpolationMode = "nearest-neighbor";
this.element.appendChild( this.image );
this.style = this.element.style;
this.style.position = "absolute";
}
this.style.right = "0px";
this.style.bottom = "0px";
if ( size.y == containerSize.y || size.x == containerSize.x ){
this.style.right = position.x + "px";
this.style.bottom = position.y + "px";
}
*/
$.setElementOpacity( this.element, this.opacity ); $.setElementOpacity( this.element, this.opacity );
}, },
/** /**
@ -142,6 +155,7 @@ $.Tile.prototype = {
context.globalAlpha = this.opacity; context.globalAlpha = this.opacity;
context.save(); context.save();
if( context.globalAlpha == 1 && this.image.src.match('.png') ){ if( context.globalAlpha == 1 && this.image.src.match('.png') ){
context.clearRect( context.clearRect(

5
src/viewer.js
View File

@ -371,6 +371,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
contentSize: this.source.dimensions, contentSize: this.source.dimensions,
springStiffness: this.springStiffness, springStiffness: this.springStiffness,
animationTime: this.animationTime, animationTime: this.animationTime,
showNavigator: false,
minZoomImageRatio: 1, minZoomImageRatio: 1,
maxZoomPixelRatio: 1 maxZoomPixelRatio: 1
}); });
@ -425,14 +426,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
immediateRender: this.immediateRender, immediateRender: this.immediateRender,
blendTime: this.blendTime, blendTime: this.blendTime,
alwaysBlend: this.alwaysBlend, alwaysBlend: this.alwaysBlend,
minPixelRatio: this.minPixelRatio, minPixelRatio: this.collectionMode ? 0 : this.minPixelRatio,
timeout: this.timeout, timeout: this.timeout,
debugMode: this.debugMode, debugMode: this.debugMode,
debugGridColor: this.debugGridColor debugGridColor: this.debugGridColor
}); });
//Instantiate a navigator if configured //Instantiate a navigator if configured
if ( this.showNavigator && ! this.navigator ){ if ( this.showNavigator && ! this.navigator && !this.collectionMode ){
this.navigator = new $.Navigator({ this.navigator = new $.Navigator({
id: this.navigatorElement, id: this.navigatorElement,
position: this.navigatorPosition, position: this.navigatorPosition,

14
www/tilesource-collection.html
View File

@ -45,17 +45,23 @@ OpenSeadragon({
var viewer = OpenSeadragon({ var viewer = OpenSeadragon({
id: "example-tilesource-collection", id: "example-tilesource-collection",
prefixUrl: "/openseadragon/images/", prefixUrl: "/openseadragon/images/",
//debugMode: true, debugMode: false, //if you want to see the render grid
showNavigator: false,
minPixelRatio: 0.0,
collectionMode: true, collectionMode: true,
collectionRows: 1, collectionRows: 1,
collectionTileSize: 1024, collectionTileSize: 1024,
collectionTileMargin: 256, collectionTileMargin: 256,
//collectionLayout: 'vertical', //collectionLayout: 'vertical',
//panVertical: false,
//panHorizontal: false,
//defaultZoomLevel: 1, //defaultZoomLevel: 1,
wrapHorizontal: true,
/*The wrap options can be fun to give a sense of infinite results*/
//wrapHorizontal: true,
//wrapVertical: true, //wrapVertical: true,
/*Tile sources can be mixed*/
tileSources: [ tileSources: [
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi", "/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/05955.dzi",

3
www/tilesource-custom.html
View File

@ -44,6 +44,7 @@
id: "example-custom-tilesource", id: "example-custom-tilesource",
prefixUrl: "/openseadragon", prefixUrl: "/openseadragon",
navigatorSizeRatio: 0.25, navigatorSizeRatio: 0.25,
wrapHorizontal: true,
tileSources: { tileSources: {
height: 512*256, height: 512*256,
width: 512*256, width: 512*256,
@ -91,7 +92,6 @@
... ...
showNavigator: false, showNavigator: false,
blendTime: 0, blendTime: 0,
alwaysBlend: false,
wrapHorizontal: true, wrapHorizontal: true,
tileSources: { tileSources: {
height: 1024*256, height: 1024*256,
@ -119,7 +119,6 @@
prefixUrl: "/openseadragon/images/", prefixUrl: "/openseadragon/images/",
showNavigator: false, showNavigator: false,
blendTime: 0, blendTime: 0,
alwaysBlend: false,
wrapHorizontal: true, wrapHorizontal: true,
tileSources: { tileSources: {
height: 1024*256, height: 1024*256,