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

improving custom tile source examples are work for layers begins being supported

Browse Source
This commit is contained in:
thatcher 2013-01-30 16:51:37 -05:00
parent 77e146f9ce
commit f6ee93b70c
11 changed files with 235 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.properties
View File

@ -6,7 +6,7 @@
PROJECT: openseadragon
BUILD_MAJOR: 0
BUILD_MINOR: 9
BUILD_ID: 90
BUILD_ID: 92
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}

98
openseadragon.js
View File

@ -1,5 +1,5 @@
/**
* @version OpenSeadragon 0.9.90
* @version OpenSeadragon 0.9.92
*
* @fileOverview
* <h2>
@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
zoomPerClick: 2.0,
zoomPerScroll: 1.2,
zoomPerSecond: 2.0,
showNavigationControl: true,
showSequenceControl: true,
controlsFadeDelay: 2000,
@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
maxImageCacheCount: 200,
minZoomImageRatio: 0.8,
maxZoomPixelRatio: 2,
timeout: 5000,
//INTERFACE RESOURCE SETTINGS
prefixUrl: null,
@ -3731,6 +3732,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
blendTime: this.blendTime,
alwaysBlend: this.alwaysBlend,
minPixelRatio: this.minPixelRatio,
timeout: this.timeout,
debugMode: this.debugMode,
debugGridColor: this.debugGridColor
});
@ -3933,8 +3935,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
bodyStyle.width = "100%";
bodyStyle.height = "100%";
canvasStyle.backgroundColor = "black";
canvasStyle.color = "white";
//canvasStyle.backgroundColor = "black";
//canvasStyle.color = "white";
//containerStyle.position = "fixed";
@ -4734,7 +4736,7 @@ $.Navigator = function( options ){
}
options = $.extend( true, {
navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio
sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio
}, options, {
element: this.element,
//These need to be overridden to prevent recursion since
@ -4882,8 +4884,8 @@ $.Navigator = function( options ){
this.element.style.width = options.width + 'px';
this.element.style.height = options.height + 'px';
} else {
this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px';
this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px';
this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
}
$.Viewer.apply( this, [ options ] );
@ -5743,7 +5745,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
}
dziPath = url.split('/');
dziName = dziPath.pop();
dziName = dziName.substring(0, dziName.indexOf('.'));
dziName = dziName.substring(0, dziName.lastIndexOf('.'));
dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/';
tilesUrl = dziPath;
if( host ){
@ -7656,7 +7658,8 @@ $.Tile.prototype = {
drawHTML: function( container ) {
var position = this.position.apply( Math.floor ),
size = this.size.apply( Math.ceil );
size = this.size.apply( Math.ceil )
containerSize = $.getElementSize( container );
if ( !this.loaded || !this.image ) {
$.console.warn(
@ -7680,10 +7683,19 @@ $.Tile.prototype = {
container.appendChild( this.element );
}
this.element.style.left = position.x + "px";
this.element.style.top = position.y + "px";
this.element.style.width = size.x + "px";
this.element.style.height = size.y + "px";
this.style.top = position.y + "px";
this.style.left = position.x + "px";
this.style.height = size.y + "px";
this.style.width = size.x + "px";
//this.style.right = ( containerSize.x - position.x ) + "px";
//this.style.bottom = ( containerSize.y - position.y ) + "px";
//when the entire container is filled by a single tile we need
//some additional stickyness so when animating container size
//the image stays fixed in position
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%";
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%";
$.setElementOpacity( this.element, this.opacity );
@ -7707,7 +7719,22 @@ $.Tile.prototype = {
return;
}
context.globalAlpha = this.opacity;
context.save();
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
context.clearRect(
position.x+1,
position.y+1,
size.x-2,
size.y-2
);
}
context.drawImage( this.image, position.x, position.y, size.x, size.y );
context.restore();
},
/**
@ -7902,8 +7929,7 @@ $.Tile.prototype = {
(function( $ ){
var TIMEOUT = 5000,
DEVICE_SCREEN = $.getWindowSize(),
var DEVICE_SCREEN = $.getWindowSize(),
BROWSER = $.Browser.vendor,
BROWSER_VERSION = $.Browser.version,
@ -7972,6 +7998,7 @@ $.Drawer = function( options ) {
midUpdate: false,
updateAgain: true,
//internal state / configurable settings
overlays: [],
collectionOverlays: {},
@ -7986,7 +8013,8 @@ $.Drawer = function( options ) {
blendTime: $.DEFAULT_SETTINGS.blendTime,
alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend,
minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio,
debugMode: $.DEFAULT_SETTINGS.debugMode
debugMode: $.DEFAULT_SETTINGS.debugMode,
timeout: $.DEFAULT_SETTINGS.timeout
}, options );
@ -8223,7 +8251,7 @@ $.Drawer.prototype = {
jobid = window.setTimeout( function(){
finishLoadingImage( image, complete, false, jobid );
}, TIMEOUT );
}, this.timeout );
loading = true;
image.src = src;
@ -8287,8 +8315,12 @@ function updateViewport( drawer ) {
//TODO
drawer.canvas.innerHTML = "";
if ( USE_CANVAS ) {
drawer.canvas.width = viewportSize.x;
drawer.canvas.height = viewportSize.y;
if( drawer.canvas.width != viewportSize.x ||
drawer.canvas.height != viewportSize.y
){
drawer.canvas.width = viewportSize.x;
drawer.canvas.height = viewportSize.y;
}
drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y );
}
@ -8893,9 +8925,9 @@ function drawTiles( drawer, lastDrawn ){
'below 0px -webkit-gradient('+
'linear,left '+
'top,left '+
'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+
')';
style['border'] = '1px solid rgba(255,255,255,0.2)';
style['border'] = '1px solid rgba(255,255,255,0.38)';
//style['borderRight'] = '1px solid #fff';
}(viewer.element.style));
@ -9067,6 +9099,7 @@ $.Viewport.prototype = {
this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
this.homeBounds = this.fitHeightBounds;
return this;
},
/**
@ -9252,6 +9285,7 @@ $.Viewport.prototype = {
bounds.y += dy;
this.fitBounds( bounds, immediately );
}
return this;
},
/**
@ -9260,6 +9294,7 @@ $.Viewport.prototype = {
*/
ensureVisible: function( immediately ) {
this.applyConstraints( immediately );
return this;
},
/**
@ -9297,7 +9332,7 @@ $.Viewport.prototype = {
newZoom = 1.0 / newBounds.width;
if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
this.panTo( center, immediately );
return;
return this;
}
referencePoint = oldBounds.getTopLeft().times(
@ -9312,6 +9347,7 @@ $.Viewport.prototype = {
);
this.zoomTo( newZoom, referencePoint, immediately );
return this;
},
/**
@ -9324,6 +9360,7 @@ $.Viewport.prototype = {
} else {
return this.fitHorizontally( immediately );
}
return this;
},
/**
@ -9348,6 +9385,7 @@ $.Viewport.prototype = {
}
this.fitBounds( this.homeBounds, immediately );
return this;
},
/**
@ -9372,6 +9410,7 @@ $.Viewport.prototype = {
}
this.fitBounds( this.homeBounds, immediately );
return this;
},
@ -9386,6 +9425,7 @@ $.Viewport.prototype = {
this.centerSpringY.target.value
);
this.panTo( center.plus( delta ), immediately );
return this;
},
/**
@ -9401,6 +9441,8 @@ $.Viewport.prototype = {
this.centerSpringX.springTo( center.x );
this.centerSpringY.springTo( center.y );
}
return this;
},
/**
@ -9408,6 +9450,7 @@ $.Viewport.prototype = {
*/
zoomBy: function( factor, refPoint, immediately ) {
this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
return this;
},
/**
@ -9415,15 +9458,18 @@ $.Viewport.prototype = {
*/
zoomTo: function( zoom, refPoint, immediately ) {
this.zoomPoint = refPoint instanceof $.Point ?
refPoint :
null;
if ( immediately ) {
this.zoomSpring.resetTo( zoom );
} else {
this.zoomSpring.springTo( zoom );
}
this.zoomPoint = refPoint instanceof $.Point ?
refPoint :
null;
return this;
},
/**
@ -9445,6 +9491,8 @@ $.Viewport.prototype = {
}
this.fitBounds( newBounds, true );
return this;
},
/**

21
src/drawer.js
View File

@ -1,8 +1,7 @@
(function( $ ){
var TIMEOUT = 5000,
DEVICE_SCREEN = $.getWindowSize(),
var DEVICE_SCREEN = $.getWindowSize(),
BROWSER = $.Browser.vendor,
BROWSER_VERSION = $.Browser.version,
@ -71,6 +70,7 @@ $.Drawer = function( options ) {
midUpdate: false,
updateAgain: true,
//internal state / configurable settings
overlays: [],
collectionOverlays: {},
@ -85,7 +85,8 @@ $.Drawer = function( options ) {
blendTime: $.DEFAULT_SETTINGS.blendTime,
alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend,
minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio,
debugMode: $.DEFAULT_SETTINGS.debugMode
debugMode: $.DEFAULT_SETTINGS.debugMode,
timeout: $.DEFAULT_SETTINGS.timeout
}, options );
@ -322,7 +323,7 @@ $.Drawer.prototype = {
jobid = window.setTimeout( function(){
finishLoadingImage( image, complete, false, jobid );
}, TIMEOUT );
}, this.timeout );
loading = true;
image.src = src;
@ -386,8 +387,12 @@ function updateViewport( drawer ) {
//TODO
drawer.canvas.innerHTML = "";
if ( USE_CANVAS ) {
drawer.canvas.width = viewportSize.x;
drawer.canvas.height = viewportSize.y;
if( drawer.canvas.width != viewportSize.x ||
drawer.canvas.height != viewportSize.y
){
drawer.canvas.width = viewportSize.x;
drawer.canvas.height = viewportSize.y;
}
drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y );
}
@ -992,9 +997,9 @@ function drawTiles( drawer, lastDrawn ){
'below 0px -webkit-gradient('+
'linear,left '+
'top,left '+
'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+
')';
style['border'] = '1px solid rgba(255,255,255,0.2)';
style['border'] = '1px solid rgba(255,255,255,0.38)';
//style['borderRight'] = '1px solid #fff';
}(viewer.element.style));

2
src/dzitilesource.js
View File

@ -112,7 +112,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
}
dziPath = url.split('/');
dziName = dziPath.pop();
dziName = dziName.substring(0, dziName.indexOf('.'));
dziName = dziName.substring(0, dziName.lastIndexOf('.'));
dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/';
tilesUrl = dziPath;
if( host ){

6
src/navigator.js
View File

@ -29,7 +29,7 @@ $.Navigator = function( options ){
}
options = $.extend( true, {
navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio
sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio
}, options, {
element: this.element,
//These need to be overridden to prevent recursion since
@ -177,8 +177,8 @@ $.Navigator = function( options ){
this.element.style.width = options.width + 'px';
this.element.style.height = options.height + 'px';
} else {
this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px';
this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px';
this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
}
$.Viewer.apply( this, [ options ] );

3
src/openseadragon.js
View File

@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
zoomPerClick: 2.0,
zoomPerScroll: 1.2,
zoomPerSecond: 2.0,
showNavigationControl: true,
showSequenceControl: true,
controlsFadeDelay: 2000,
@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
maxImageCacheCount: 200,
minZoomImageRatio: 0.8,
maxZoomPixelRatio: 2,
timeout: 5000,
//INTERFACE RESOURCE SETTINGS
prefixUrl: null,

35
src/tile.js
View File

@ -79,7 +79,8 @@ $.Tile.prototype = {
drawHTML: function( container ) {
var position = this.position.apply( Math.floor ),
size = this.size.apply( Math.ceil );
size = this.size.apply( Math.ceil )
containerSize = $.getElementSize( container );
if ( !this.loaded || !this.image ) {
$.console.warn(
@ -103,10 +104,19 @@ $.Tile.prototype = {
container.appendChild( this.element );
}
this.element.style.left = position.x + "px";
this.element.style.top = position.y + "px";
this.element.style.width = size.x + "px";
this.element.style.height = size.y + "px";
this.style.top = position.y + "px";
this.style.left = position.x + "px";
this.style.height = size.y + "px";
this.style.width = size.x + "px";
//this.style.right = ( containerSize.x - position.x ) + "px";
//this.style.bottom = ( containerSize.y - position.y ) + "px";
//when the entire container is filled by a single tile we need
//some additional stickyness so when animating container size
//the image stays fixed in position
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%";
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%";
$.setElementOpacity( this.element, this.opacity );
@ -130,7 +140,22 @@ $.Tile.prototype = {
return;
}
context.globalAlpha = this.opacity;
context.save();
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
context.clearRect(
position.x+1,
position.y+1,
size.x-2,
size.y-2
);
}
context.drawImage( this.image, position.x, position.y, size.x, size.y );
context.restore();
},
/**

5
src/viewer.js
View File

@ -426,6 +426,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
blendTime: this.blendTime,
alwaysBlend: this.alwaysBlend,
minPixelRatio: this.minPixelRatio,
timeout: this.timeout,
debugMode: this.debugMode,
debugGridColor: this.debugGridColor
});
@ -628,8 +629,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
bodyStyle.width = "100%";
bodyStyle.height = "100%";
canvasStyle.backgroundColor = "black";
canvasStyle.color = "white";
//canvasStyle.backgroundColor = "black";
//canvasStyle.color = "white";
//containerStyle.position = "fixed";

24
src/viewport.js
View File

@ -78,6 +78,7 @@ $.Viewport.prototype = {
this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
this.homeBounds = this.fitHeightBounds;
return this;
},
/**
@ -263,6 +264,7 @@ $.Viewport.prototype = {
bounds.y += dy;
this.fitBounds( bounds, immediately );
}
return this;
},
/**
@ -271,6 +273,7 @@ $.Viewport.prototype = {
*/
ensureVisible: function( immediately ) {
this.applyConstraints( immediately );
return this;
},
/**
@ -308,7 +311,7 @@ $.Viewport.prototype = {
newZoom = 1.0 / newBounds.width;
if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
this.panTo( center, immediately );
return;
return this;
}
referencePoint = oldBounds.getTopLeft().times(
@ -323,6 +326,7 @@ $.Viewport.prototype = {
);
this.zoomTo( newZoom, referencePoint, immediately );
return this;
},
/**
@ -335,6 +339,7 @@ $.Viewport.prototype = {
} else {
return this.fitHorizontally( immediately );
}
return this;
},
/**
@ -359,6 +364,7 @@ $.Viewport.prototype = {
}
this.fitBounds( this.homeBounds, immediately );
return this;
},
/**
@ -383,6 +389,7 @@ $.Viewport.prototype = {
}
this.fitBounds( this.homeBounds, immediately );
return this;
},
@ -397,6 +404,7 @@ $.Viewport.prototype = {
this.centerSpringY.target.value
);
this.panTo( center.plus( delta ), immediately );
return this;
},
/**
@ -412,6 +420,8 @@ $.Viewport.prototype = {
this.centerSpringX.springTo( center.x );
this.centerSpringY.springTo( center.y );
}
return this;
},
/**
@ -419,6 +429,7 @@ $.Viewport.prototype = {
*/
zoomBy: function( factor, refPoint, immediately ) {
this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
return this;
},
/**
@ -426,15 +437,18 @@ $.Viewport.prototype = {
*/
zoomTo: function( zoom, refPoint, immediately ) {
this.zoomPoint = refPoint instanceof $.Point ?
refPoint :
null;
if ( immediately ) {
this.zoomSpring.resetTo( zoom );
} else {
this.zoomSpring.springTo( zoom );
}
this.zoomPoint = refPoint instanceof $.Point ?
refPoint :
null;
return this;
},
/**
@ -456,6 +470,8 @@ $.Viewport.prototype = {
}
this.fitBounds( newBounds, true );
return this;
},
/**

8
www/tilesource-collection.html
View File

@ -42,7 +42,7 @@ OpenSeadragon({
});</pre>
</div>
<script type="text/javascript">
OpenSeadragon({
var viewer = OpenSeadragon({
id: "example-tilesource-collection",
prefixUrl: "/openseadragon",
//debugMode: true,
@ -54,13 +54,13 @@ OpenSeadragon({
collectionTileMargin: 256,
//collectionLayout: 'vertical',
//defaultZoomLevel: 1,
//wrapHorizontal: true,
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/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",
@ -227,7 +227,7 @@ OpenSeadragon({
width: 2970
}]
}/*,{
}*//*,{
type: 'legacy-image-pyramid',
levels: [{
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011q.jpg',

90
www/tilesource-custom.html
View File

@ -32,22 +32,102 @@
<div class="demoheading">
Example Inline Configuration for Custom Tile Sources
</div>
<div id="example-custom-tilesource"
class="openseadragon" >
</div>
<p>
Below is a make believe minimal inline configuration. Note that the
default tileSize is available as a property of the tile source.
</p>
<pre>
OpenSeadragon({
id: "example-inline-configuration",
id: "example-custom-tilesource",
prefixUrl: "/openseadragon",
showNavigator: true,
navigatorSizeRatio: 0.25,
tileSources: {
height: 1140,
width: 2450,
height: 512*256,
width: 512*256,
tileSize: 256,
minLevel: 8,
getTileUrl: function( level, x, y ){
return "http://example.org/imageservice/"+level+"/"+x+"/"+y+"/?tileSize="+this.tileSize
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+x+"-c"+y+".jpg";
}
}
});
</pre>
<script>
OpenSeadragon({
id: "example-custom-tilesource",
prefixUrl: "/openseadragon",
navigatorSizeRatio: 0.25,
wrapHorizontal: true,
tileSources: {
height: 512*256,
width: 512*256,
tileSize: 256,
minLevel: 8,
getTileUrl: function( level, x, y ){
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+y+"-c"+x+".jpg";
}
}
});
</script>
</div>
<div class="demoarea">
<div class="demoheading">
Another Inline Configuration for Custom Tile Sources
</div>
<div id="example2-custom-tilesource"
class="openseadragon"
style='background-color:#aaa'>
</div>
<p>
Below is a make believe minimal inline configuration. Note that the
default tileSize is available as a property of the tile source.
</p>
<pre>
OpenSeadragon({
id: "example2-custom-tilesource",
prefixUrl: "/openseadragon",
navigatorSizeRatio: 0.25,
tileSources: {
height: 512*256,
width: 512*256,
tileSize: 256,
minLevel: 8,
getTileUrl: function( level, x, y ){
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+x+"-c"+y+".jpg";
}
}
});
</pre>
<script>
OpenSeadragon({
id: "example2-custom-tilesource",
prefixUrl: "/openseadragon",
showNavigator: false,
blendTime: 0,
alwaysBlend: false,
//immediateRender: true,
wrapHorizontal: true,
tileSources: {
height: 1024*256,
width: 1024*256,
tileSize: 256,
minLevel: 9,
getTileUrl: function( level, x, y ){
function zeropad( i ) {
var n = String( i ),
m = 6 - n.length;
n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
return n.substr(0, 3) + "/" + n.substr(3);
};
return "http://s3.amazonaws.com/info.aaronland.tiles.shapetiles/"+(level-8)+"/"+zeropad(x)+"/"+zeropad(y)+".png";
}
}
});
</script>
</div>