mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-01-19 17:21:50 +03:00
Substantial rework of TileSource and Viewer.openTileSource to allow simpler introspect of the intended TileSource implementation based on the configuration object details. Also major www updates to simplify and unify the informational site by building it via simple templates. Improved examples and documentation. Added support for xml, json, jsonp, and inline configuration of supported tile sources.
This commit is contained in:
thatcher
parent
107a5efabf
commit
c41f6a464e
1
bin/.gitignore
vendored
Normal file
1
bin/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
pnp
|
||||
62
bin/dzi.py
Executable file
62
bin/dzi.py
Executable file
@ -0,0 +1,62 @@
|
||||
#!/usr/bin/env python
|
||||
# -*- coding: utf-8 -*-
|
||||
import os
|
||||
import deepzoom
|
||||
import urllib
|
||||
import re
|
||||
|
||||
MAX_PAGES = 10
|
||||
PAGE_COUNT = {}
|
||||
|
||||
|
||||
def ensure_dir( filename ):
|
||||
directory = os.path.dirname( filename )
|
||||
if not os.path.exists( directory ):
|
||||
os.makedirs( directory )
|
||||
|
||||
|
||||
# Create Deep Zoom Image creator with weird parameters
|
||||
creator = deepzoom.ImageCreator(
|
||||
tile_size = 512,
|
||||
tile_overlap = 2,
|
||||
image_quality = 1,
|
||||
tile_format = "tif",
|
||||
resize_filter = "antialias"
|
||||
)
|
||||
|
||||
tiff_list = open( 'tiffs.txt', 'r' )\
|
||||
.read()\
|
||||
.split( '\n' )
|
||||
|
||||
for tiff_url in tiff_list:
|
||||
|
||||
parts = re.match(
|
||||
r'http://lcweb2\.loc\.gov/master/pnp/ppmsca/(\d*)/(\d*)/(\d*)u\.tif',
|
||||
tiff_url
|
||||
).groups()
|
||||
|
||||
id = parts[ 1 ]
|
||||
fileid = parts[ 2 ]
|
||||
|
||||
if id not in PAGE_COUNT:
|
||||
PAGE_COUNT[ id ] = 0
|
||||
|
||||
path = tiff_url.replace( 'http://lcweb2.loc.gov/master/', '' )
|
||||
dzi_files = path.replace( 'u.tif', '_files' )
|
||||
|
||||
if PAGE_COUNT[ id ] < MAX_PAGES\
|
||||
and not os.path.exists( dzi_files ):
|
||||
|
||||
print 'making directory: %s' % os.path.dirname( path )
|
||||
ensure_dir( path )
|
||||
|
||||
print 'downloading master tiff: %s' % tiff_url
|
||||
tiff_file = open( path, 'wb' )
|
||||
tiff_file.write( urllib.urlopen( tiff_url ).read() )
|
||||
tiff_file.close()
|
||||
|
||||
print 'creating dzi: %s' % path
|
||||
# Create Deep Zoom image pyramid from source
|
||||
creator.create( path, path.replace( 'u.tif', '.dzi' ) )
|
||||
|
||||
PAGE_COUNT[ id ] += 1
|
||||
2513
bin/tiffs.txt
Normal file
2513
bin/tiffs.txt
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@
|
||||
PROJECT: openseadragon
|
||||
BUILD_MAJOR: 0
|
||||
BUILD_MINOR: 9
|
||||
BUILD_ID: 50
|
||||
BUILD_ID: 64
|
||||
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
|
||||
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
|
||||
|
||||
|
||||
48
build.xml
48
build.xml
@ -1,7 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Version: $Id: build.xml 495 2011-07-07 20:14:37Z chth $ -->
|
||||
<project name="openseadragon"
|
||||
default="build">
|
||||
default="www">
|
||||
|
||||
<tstamp/>
|
||||
|
||||
@ -52,9 +52,24 @@
|
||||
</filterchain>
|
||||
<filelist refid="openseadragon.javascript" />
|
||||
</concat>
|
||||
</target>
|
||||
|
||||
|
||||
<target name='www' depends='build'>
|
||||
<echo>| Compiling OpenSeadragon Web Site </echo>
|
||||
<publish page='overlay-highlights' title='Overlay Highlights | '/>
|
||||
|
||||
<publish page='tilesource-custom' title='Custom Tile Source | '/>
|
||||
<publish page='tilesource-dzi' title='DZI Tile Source | '/>
|
||||
<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='ui-binding-custom-buttons' title='Binding Custom Buttons | '/>
|
||||
<publish page='ui-toolbar' title='Toolbar | '/>
|
||||
<publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
|
||||
|
||||
<copy todir='${WWW}' file='openseadragon.js' />
|
||||
|
||||
</target>
|
||||
|
||||
|
||||
@ -71,4 +86,33 @@
|
||||
</java>
|
||||
</target>
|
||||
|
||||
|
||||
<macrodef name='publish'>
|
||||
<attribute name='page'/>
|
||||
<attribute name='title'/>
|
||||
<sequential>
|
||||
<loadfile property='@{page}.html' srcfile='www/@{page}.html' />
|
||||
<mkdir dir='${WWW}/examples/@{page}'/>
|
||||
<copy file='www/base.html'
|
||||
tofile="${WWW}/examples/@{page}/index.html"
|
||||
overwrite='true'>
|
||||
<filterchain>
|
||||
<replacetokens>
|
||||
<token key="EXAMPLE" value='${@{page}.html}'/>
|
||||
<token key="TITLE" value='@{title}'/>
|
||||
</replacetokens>
|
||||
</filterchain>
|
||||
</copy>
|
||||
<loadfile property='index.html' srcfile='www/index.html' />
|
||||
<copy file='www/base.html' tofile="${WWW}/index.html" overwrite='true'>
|
||||
<filterchain>
|
||||
<replacetokens>
|
||||
<token key="EXAMPLE" value='${index.html}'/>
|
||||
<token key="TITLE" value=''/>
|
||||
</replacetokens>
|
||||
</filterchain>
|
||||
</copy>
|
||||
</sequential>
|
||||
</macrodef>
|
||||
|
||||
</project>
|
||||
1129
openseadragon.js
1129
openseadragon.js
File diff suppressed because it is too large
Load Diff
@ -15,7 +15,7 @@ var TIMEOUT = 5000,
|
||||
),
|
||||
|
||||
USE_CANVAS = SUBPIXEL_RENDERING
|
||||
&& !( DEVICE_SCREEN.x < 600 || DEVICE_SCREEN.y < 600 )
|
||||
&& !( DEVICE_SCREEN.x <= 400 || DEVICE_SCREEN.y <= 400 )
|
||||
&& !( navigator.appVersion.match( 'Mobile' ) )
|
||||
&& $.isFunction( document.createElement( "canvas" ).getContext );
|
||||
|
||||
|
||||
@ -18,14 +18,27 @@
|
||||
$.DziTileSource = function( width, height, tileSize, tileOverlap, tilesUrl, fileFormat, displayRects ) {
|
||||
var i,
|
||||
rect,
|
||||
level;
|
||||
level,
|
||||
options;
|
||||
|
||||
$.TileSource.call( this, width, height, tileSize, tileOverlap, null, null );
|
||||
if( $.isPlainObject( width ) ){
|
||||
options = width;
|
||||
}else{
|
||||
options = {
|
||||
width: arguments[ 0 ],
|
||||
height: arguments[ 1 ],
|
||||
tileSize: arguments[ 2 ],
|
||||
tileOverlap: arguments[ 3 ],
|
||||
tilesUrl: arguments[ 4 ],
|
||||
fileFormat: arguments[ 5 ],
|
||||
dispRects: arguments[ 6 ]
|
||||
};
|
||||
}
|
||||
|
||||
this._levelRects = {};
|
||||
this.tilesUrl = tilesUrl;
|
||||
this.fileFormat = fileFormat;
|
||||
this.displayRects = displayRects;
|
||||
this.tilesUrl = options.tilesUrl;
|
||||
this.fileFormat = options.fileFormat;
|
||||
this.displayRects = options.displayRects;
|
||||
|
||||
if ( this.displayRects ) {
|
||||
for ( i = this.displayRects.length - 1; i >= 0; i-- ) {
|
||||
@ -39,10 +52,79 @@ $.DziTileSource = function( width, height, tileSize, tileOverlap, tilesUrl, file
|
||||
}
|
||||
}
|
||||
|
||||
$.TileSource.apply( this, [ options ] );
|
||||
|
||||
};
|
||||
|
||||
$.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
|
||||
|
||||
|
||||
/**
|
||||
* Determine if the data and/or url imply the image service is supported by
|
||||
* this tile source.
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.supports
|
||||
* @param {Object|Array} data
|
||||
* @param {String} optional - url
|
||||
*/
|
||||
supports: function( data, url ){
|
||||
return (
|
||||
data.Image &&
|
||||
"http://schemas.microsoft.com/deepzoom/2008" == data.Image.xmlns
|
||||
) || (
|
||||
data.documentElement &&
|
||||
"Image" == data.documentElement.tagName &&
|
||||
"http://schemas.microsoft.com/deepzoom/2008" ==
|
||||
data.documentElement.namespaceURI
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.configure
|
||||
* @param {Object|XMLDocument} configuration - the raw configuration
|
||||
* @param {String} dataUrl - the url the data was retreived from if any.
|
||||
* @return {Array} args - positional arguments required and/or optional
|
||||
* for this tile sources constructor
|
||||
*/
|
||||
configure: function( configuration, dataUrl ){
|
||||
|
||||
var dziPath,
|
||||
dziName,
|
||||
tilesUrl,
|
||||
options,
|
||||
host;
|
||||
|
||||
if( configuration instanceof XMLDocument ){
|
||||
|
||||
options = configureFromXML( this, configuration );
|
||||
|
||||
}else if( 'object' == $.type( configuration) ){
|
||||
|
||||
options = configureFromObject( this, configuration );
|
||||
}
|
||||
|
||||
if( dataUrl && !options.tilesUrl ){
|
||||
if( !( 'http' == dataUrl.substring( 0, 4 ) ) ){
|
||||
host = location.protocol + '//' + location.host;
|
||||
}
|
||||
dziPath = dataUrl.split('/');
|
||||
dziName = dziPath.pop();
|
||||
dziName = dziName.substring(0, dziName.indexOf('.'));
|
||||
dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/';
|
||||
tilesUrl = dziPath;
|
||||
if( host ){
|
||||
tilesUrl = host + tilesUrl;
|
||||
}
|
||||
options.tilesUrl = tilesUrl;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.getTileUrl
|
||||
@ -54,6 +136,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
|
||||
return [ this.tilesUrl, level, '/', x, '_', y, '.', this.fileFormat ].join( '' );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.tileExists
|
||||
@ -103,5 +186,146 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function configureFromXML( tileSource, xmlDoc ){
|
||||
|
||||
if ( !xmlDoc || !xmlDoc.documentElement ) {
|
||||
throw new Error( $.getString( "Errors.Xml" ) );
|
||||
}
|
||||
|
||||
var root = xmlDoc.documentElement,
|
||||
rootName = root.tagName,
|
||||
conf = null,
|
||||
displayRects = [],
|
||||
dispRectNodes,
|
||||
dispRectNode,
|
||||
rectNode,
|
||||
sizeNode,
|
||||
i;
|
||||
|
||||
if ( rootName == "Image" ) {
|
||||
|
||||
try {
|
||||
sizeNode = root.getElementsByTagName( "Size" )[ 0 ];
|
||||
conf = {
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
Format: root.getAttribute( "Format" ),
|
||||
DisplayRect: null,
|
||||
Overlap: parseInt( root.getAttribute( "Overlap" ) ),
|
||||
TileSize: parseInt( root.getAttribute( "TileSize" ) ),
|
||||
Size: {
|
||||
Height: parseInt( sizeNode.getAttribute( "Height" ) ),
|
||||
Width: parseInt( sizeNode.getAttribute( "Width" ) )
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if ( !$.imageFormatSupported( conf.Image.Format ) ) {
|
||||
throw new Error(
|
||||
$.getString( "Errors.ImageFormat", conf.Image.Format.toUpperCase() )
|
||||
);
|
||||
}
|
||||
|
||||
dispRectNodes = root.getElementsByTagName( "DisplayRect" );
|
||||
for ( i = 0; i < dispRectNodes.length; i++ ) {
|
||||
dispRectNode = dispRectNodes[ i ];
|
||||
rectNode = dispRectNode.getElementsByTagName( "Rect" )[ 0 ];
|
||||
|
||||
displayRects.push({
|
||||
Rect: {
|
||||
X: parseInt( rectNode.getAttribute( "X" ) ),
|
||||
Y: parseInt( rectNode.getAttribute( "Y" ) ),
|
||||
Width: parseInt( rectNode.getAttribute( "Width" ) ),
|
||||
Height: parseInt( rectNode.getAttribute( "Height" ) ),
|
||||
MinLevel: 0, // ignore MinLevel attribute, bug in Deep Zoom Composer
|
||||
MaxLevel: parseInt( dispRectNode.getAttribute( "MaxLevel" ) )
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if( displayRects.length ){
|
||||
conf.Image.DisplayRect = displayRects;
|
||||
}
|
||||
|
||||
return configureFromObject( tileSource, conf );
|
||||
|
||||
} catch ( e ) {
|
||||
throw (e instanceof Error) ?
|
||||
e :
|
||||
new Error( $.getString("Errors.Dzi") );
|
||||
}
|
||||
} else if ( rootName == "Collection" ) {
|
||||
throw new Error( $.getString( "Errors.Dzc" ) );
|
||||
} else if ( rootName == "Error" ) {
|
||||
return processDZIError( root );
|
||||
}
|
||||
|
||||
throw new Error( $.getString( "Errors.Dzi" ) );
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function configureFromObject( tileSource, configuration ){
|
||||
var imageData = configuration.Image,
|
||||
tilesUrl = imageData.Url,
|
||||
fileFormat = imageData.Format,
|
||||
sizeData = imageData.Size,
|
||||
dispRectData = imageData.DisplayRect || [],
|
||||
width = parseInt( sizeData.Width ),
|
||||
height = parseInt( sizeData.Height ),
|
||||
tileSize = parseInt( imageData.TileSize ),
|
||||
tileOverlap = parseInt( imageData.Overlap ),
|
||||
dispRects = [],
|
||||
rectData,
|
||||
i;
|
||||
|
||||
//TODO: need to figure out out to better handle image format compatibility
|
||||
// which actually includes additional file formats like xml and pdf
|
||||
// and plain text for various tilesource implementations to avoid low
|
||||
// level errors.
|
||||
//
|
||||
// For now, just don't perform the check.
|
||||
//
|
||||
/*if ( !imageFormatSupported( fileFormat ) ) {
|
||||
throw new Error(
|
||||
$.getString( "Errors.ImageFormat", fileFormat.toUpperCase() )
|
||||
);
|
||||
}*/
|
||||
|
||||
for ( i = 0; i < dispRectData.length; i++ ) {
|
||||
rectData = dispRectData[ i ].Rect;
|
||||
|
||||
dispRects.push( new $.DisplayRect(
|
||||
parseInt( rectData.X ),
|
||||
parseInt( rectData.Y ),
|
||||
parseInt( rectData.Width ),
|
||||
parseInt( rectData.Height ),
|
||||
0, // ignore MinLevel attribute, bug in Deep Zoom Composer
|
||||
parseInt( rectData.MaxLevel )
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
width: width, /* width *required */
|
||||
height: height, /* height *required */
|
||||
tileSize: tileSize, /* tileSize *required */
|
||||
tileOverlap: tileOverlap, /* tileOverlap *required */
|
||||
minLevel: null, /* minLevel */
|
||||
maxLevel: null, /* maxLevel */
|
||||
tilesUrl: tilesUrl, /* tilesUrl */
|
||||
fileFormat: fileFormat, /* fileFormat */
|
||||
dispRects: dispRects /* dispRects */
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
@ -3,6 +3,12 @@
|
||||
|
||||
/**
|
||||
* For use by classes which want to support custom, non-browser events.
|
||||
* TODO: This is an aweful name! This thing represents an "event source",
|
||||
* not an "event handler". PLEASE change the to EventSource. Also please
|
||||
* change 'addHandler', 'removeHandler' and 'raiseEvent' to 'bind',
|
||||
* 'unbind', and 'trigger' respectively. Finally add a method 'one' which
|
||||
* automatically unbinds a listener after the first triggered event that
|
||||
* matches.
|
||||
* @class
|
||||
*/
|
||||
$.EventHandler = function() {
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
* resolution image and a high resolution image in standard web formats like
|
||||
* png or jpg.
|
||||
* @class
|
||||
* @param {Array} files An array of file descriptions, each is an object with
|
||||
* @param {Array} levels An array of file descriptions, each is an object with
|
||||
* a 'url', a 'width', and a 'height'. Overriding classes can expect more
|
||||
* properties but these properties are sufficient for this implementation.
|
||||
* Additionally, the files are required to be listed in order from
|
||||
* Additionally, the levels are required to be listed in order from
|
||||
* smallest to largest.
|
||||
* @property {Number} aspectRatio
|
||||
* @property {Number} dimensions
|
||||
@ -21,25 +21,85 @@
|
||||
* @property {Number} tileOverlap
|
||||
* @property {Number} minLevel
|
||||
* @property {Number} maxLevel
|
||||
* @property {Array} files
|
||||
* @property {Array} levels
|
||||
*/
|
||||
$.LegacyTileSource = function( files ) {
|
||||
var width = files[ files.length - 1 ].width,
|
||||
height = files[ files.length - 1 ].height;
|
||||
$.LegacyTileSource = function( levels ) {
|
||||
|
||||
$.TileSource.apply( this, [
|
||||
var options,
|
||||
width,
|
||||
height,
|
||||
Math.max( height, width ), //tileSize
|
||||
0, //overlap
|
||||
0, //mimLevel
|
||||
files.length - 1 //maxLevel
|
||||
] );
|
||||
height;
|
||||
|
||||
this.files = files;
|
||||
if( $.isArray( levels ) ){
|
||||
options = {
|
||||
type: 'legacy-image-pyramid',
|
||||
levels: levels
|
||||
};
|
||||
}
|
||||
|
||||
//clean up the levels to make sure we support all formats
|
||||
options.levels = filterFiles( options.levels );
|
||||
width = options.levels[ options.levels.length - 1 ].width;
|
||||
height = options.levels[ options.levels.length - 1 ].height;
|
||||
|
||||
$.extend( true, options, {
|
||||
width: width,
|
||||
height: height,
|
||||
tileSize: Math.max( height, width ),
|
||||
tileOverlap: 0,
|
||||
minLevel: 0,
|
||||
maxLevel: options.levels.length - 1
|
||||
});
|
||||
|
||||
$.TileSource.apply( this, [ options ] );
|
||||
|
||||
this.levels = options.levels;
|
||||
};
|
||||
|
||||
$.LegacyTileSource.prototype = {
|
||||
/**
|
||||
* Determine if the data and/or url imply the image service is supported by
|
||||
* this tile source.
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.supports
|
||||
* @param {Object|Array} data
|
||||
* @param {String} optional - url
|
||||
*/
|
||||
supports: function( data, url ){
|
||||
return (
|
||||
data.type &&
|
||||
"legacy-image-pyramid" == data.type
|
||||
) || (
|
||||
data.documentElement &&
|
||||
"legacy-image-pyramid" == data.documentElement.getAttribute('type')
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @function
|
||||
* @name OpenSeadragon.DziTileSource.prototype.configure
|
||||
* @param {Object|XMLDocument} configuration - the raw configuration
|
||||
* @param {String} dataUrl - the url the data was retreived from if any.
|
||||
* @return {Array} args - positional arguments required and/or optional
|
||||
* for this tile sources constructor
|
||||
*/
|
||||
configure: function( configuration, dataUrl ){
|
||||
|
||||
var options;
|
||||
|
||||
if( configuration instanceof XMLDocument ){
|
||||
|
||||
options = configureFromXML( this, configuration );
|
||||
|
||||
}else if( 'object' == $.type( configuration) ){
|
||||
|
||||
options = configureFromObject( this, configuration );
|
||||
}
|
||||
|
||||
return options;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* @function
|
||||
@ -49,8 +109,8 @@ $.LegacyTileSource.prototype = {
|
||||
var levelScale = NaN;
|
||||
if ( level >= this.minLevel && level <= this.maxLevel ){
|
||||
levelScale =
|
||||
this.files[ level ].width /
|
||||
this.files[ this.maxLevel ].width;
|
||||
this.levels[ level ].width /
|
||||
this.levels[ this.maxLevel ].width;
|
||||
}
|
||||
return levelScale;
|
||||
},
|
||||
@ -97,10 +157,10 @@ $.LegacyTileSource.prototype = {
|
||||
*/
|
||||
getTileBounds: function( level, x, y ) {
|
||||
var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
|
||||
px = ( x === 0 ) ? 0 : this.files[ level ].width,
|
||||
py = ( y === 0 ) ? 0 : this.files[ level ].height,
|
||||
sx = this.files[ level ].width,
|
||||
sy = this.files[ level ].height,
|
||||
px = ( x === 0 ) ? 0 : this.levels[ level ].width,
|
||||
py = ( y === 0 ) ? 0 : this.levels[ level ].height,
|
||||
sx = this.levels[ level ].width,
|
||||
sy = this.levels[ level ].height,
|
||||
scale = 1.0 / ( this.width >= this.height ?
|
||||
dimensionsScaled.y :
|
||||
dimensionsScaled.x
|
||||
@ -126,7 +186,7 @@ $.LegacyTileSource.prototype = {
|
||||
getTileUrl: function( level, x, y ) {
|
||||
var url = null;
|
||||
if( level >= this.minLevel && level <= this.maxLevel ){
|
||||
url = this.files[ level ].url;
|
||||
url = this.levels[ level ].url;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
@ -148,4 +208,104 @@ $.LegacyTileSource.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* This method removes any files from the Array which dont conform to our
|
||||
* basic requirements for a 'level' in the LegacyTileSource.
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function filterFiles( files ){
|
||||
var filtered = [],
|
||||
file,
|
||||
i;
|
||||
for( i = 0; i < files.length; i++ ){
|
||||
file = files[ i ];
|
||||
if( file.height &&
|
||||
file.width &&
|
||||
file.url && (
|
||||
file.url.toLowerCase().match(/^.*\.(png|jpg|jpeg|gif)$/) || (
|
||||
file.mimetype &&
|
||||
file.mimetype.toLowerCase().match(/^.*\/(png|jpg|jpeg|gif)$/)
|
||||
)
|
||||
) ){
|
||||
//This is sufficient to serve as a level
|
||||
filtered.push({
|
||||
url: file.url,
|
||||
width: Number( file.width ),
|
||||
height: Number( file.height )
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return filtered.sort(function(a,b){
|
||||
return a.height - b.height;
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function configureFromXML( tileSource, xmlDoc ){
|
||||
|
||||
if ( !xmlDoc || !xmlDoc.documentElement ) {
|
||||
throw new Error( $.getString( "Errors.Xml" ) );
|
||||
}
|
||||
|
||||
var root = xmlDoc.documentElement,
|
||||
rootName = root.tagName,
|
||||
conf = null,
|
||||
levels = [],
|
||||
level,
|
||||
i;
|
||||
|
||||
if ( rootName == "image" ) {
|
||||
|
||||
try {
|
||||
conf = {
|
||||
type: root.getAttribute( "type" ),
|
||||
levels: []
|
||||
};
|
||||
|
||||
levels = root.getElementsByTagName( "level" );
|
||||
for ( i = 0; i < levels.length; i++ ) {
|
||||
level = levels[ i ];
|
||||
|
||||
conf.levels .push({
|
||||
url: level.getAttribute( "url" ),
|
||||
width: parseInt( level.getAttribute( "width" ) ),
|
||||
height: parseInt( level.getAttribute( "height" ) )
|
||||
});
|
||||
}
|
||||
|
||||
return configureFromObject( tileSource, conf );
|
||||
|
||||
} catch ( e ) {
|
||||
throw (e instanceof Error) ?
|
||||
e :
|
||||
new Error( 'Unknown error parsing Legacy Image Pyramid XML.' );
|
||||
}
|
||||
} else if ( rootName == "collection" ) {
|
||||
throw new Error( 'Legacy Image Pyramid Collections not yet supported.' );
|
||||
} else if ( rootName == "error" ) {
|
||||
throw new Error( 'Error: ' + xmlDoc );
|
||||
}
|
||||
|
||||
throw new Error( 'Unknown element ' + rootName );
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function configureFromObject( tileSource, configuration ){
|
||||
|
||||
return configuration.levels;
|
||||
|
||||
};
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
@ -470,7 +470,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
//INTERFACE FEATURES
|
||||
debugMode: true,
|
||||
animationTime: 1.5,
|
||||
blendTime: 0.5,
|
||||
blendTime: 0.1,
|
||||
alwaysBlend: false,
|
||||
autoHideControls: true,
|
||||
immediateRender: false,
|
||||
@ -490,13 +490,17 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
controlsFadeDelay: 2000,
|
||||
controlsFadeLength: 1500,
|
||||
mouseNavEnabled: true,
|
||||
showNavigator: false,
|
||||
showNavigator: true, //promoted to default in 0.9.64
|
||||
navigatorElement: null,
|
||||
navigatorHeight: null,
|
||||
navigatorWidth: null,
|
||||
navigatorPosition: null,
|
||||
navigatorSizeRatio: 0.25,
|
||||
preserveViewport: false,
|
||||
defaultZoomLevel: 0,
|
||||
|
||||
//EVENT RELATED CALLBACKS
|
||||
onPageChange: null,
|
||||
|
||||
//PERFORMANCE SETTINGS
|
||||
minPixelRatio: 0.5,
|
||||
@ -1178,7 +1182,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
//TODO: very bad...Why check every time using try/catch when
|
||||
// we could determine once at startup which activeX object
|
||||
// was supported. This will have significant impact on
|
||||
// performance for IE Browsers
|
||||
// performance for IE Browsers DONE
|
||||
for ( i = 0; i < ACTIVEX.length; i++ ) {
|
||||
try {
|
||||
request = new ActiveXObject( ACTIVEX[ i ] );
|
||||
@ -1212,30 +1216,39 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @throws {Error}
|
||||
*/
|
||||
makeAjaxRequest: function( url, callback ) {
|
||||
var async = typeof( callback ) == "function",
|
||||
|
||||
|
||||
|
||||
var async = true,
|
||||
request = $.createAjaxRequest(),
|
||||
actual,
|
||||
options,
|
||||
i;
|
||||
|
||||
if ( async ) {
|
||||
actual = callback;
|
||||
callback = function() {
|
||||
window.setTimeout(
|
||||
$.createCallback( null, actual, request ),
|
||||
1
|
||||
);
|
||||
|
||||
if( $.isPlainObject( url ) ){
|
||||
options.async = options.async || async;
|
||||
}else{
|
||||
options = {
|
||||
url: url,
|
||||
async: $.isFunction( callback ),
|
||||
success: callback,
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
if ( options.async ) {
|
||||
/** @ignore */
|
||||
request.onreadystatechange = function() {
|
||||
if ( request.readyState == 4) {
|
||||
request.onreadystatechange = new function() { };
|
||||
callback();
|
||||
options.success( request );
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
request.open( "GET", url, async );
|
||||
request.open( "GET", options.url, options.async );
|
||||
request.send( null );
|
||||
} catch (e) {
|
||||
$.console.log(
|
||||
@ -1247,12 +1260,16 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
request.onreadystatechange = null;
|
||||
request = null;
|
||||
|
||||
if ( async ) {
|
||||
callback();
|
||||
if ( options.error && $.isFunction( options.error ) ) {
|
||||
options.error( request );
|
||||
}
|
||||
}
|
||||
|
||||
return async ? null : request;
|
||||
if( !options.async && $.isFunction( options.success ) ){
|
||||
options.success( request );
|
||||
}
|
||||
|
||||
return options.async ? null : request;
|
||||
},
|
||||
|
||||
|
||||
@ -1302,7 +1319,10 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
|
||||
script = document.createElement( "script" );
|
||||
|
||||
script.async = "async";
|
||||
//TODO: having an issue with async info requests
|
||||
if( undefined !== options.async || false !== options.async ){
|
||||
script.async = "async";
|
||||
}
|
||||
|
||||
if ( options.scriptCharset ) {
|
||||
script.charset = options.scriptCharset;
|
||||
@ -1335,18 +1355,22 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
|
||||
|
||||
/**
|
||||
* Loads a Deep Zoom Image description from a url or XML string and
|
||||
* provides a callback hook for the resulting Document
|
||||
* Loads a Deep Zoom Image description from a url, XML string or JSON string
|
||||
* and provides a callback hook for the resulting Document
|
||||
* @function
|
||||
* @name OpenSeadragon.createFromDZI
|
||||
* @param {String} xmlUrl
|
||||
* @param {String} xmlString
|
||||
* @param {Function} callback
|
||||
* @deprecated
|
||||
*/
|
||||
createFromDZI: function( dzi, callback, tileHost ) {
|
||||
var async = typeof ( callback ) == "function",
|
||||
xmlUrl = dzi.substring(0,1) != '<' ? dzi : null,
|
||||
xmlString = xmlUrl ? null : dzi,
|
||||
dziUrl = (
|
||||
dzi.substring(0,1) != '<' &&
|
||||
dzi.substring(0,1) != '{'
|
||||
) ? dzi : null,
|
||||
dziString = dziUrl ? null : dzi,
|
||||
error = null,
|
||||
urlParts,
|
||||
filename,
|
||||
@ -1359,16 +1383,23 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
|
||||
tilesUrl = tileHost + "/_files/";
|
||||
|
||||
} else if( xmlUrl ) {
|
||||
} else if( dziUrl ) {
|
||||
|
||||
urlParts = xmlUrl.split( '/' );
|
||||
urlParts = dziUrl.split( '/' );
|
||||
filename = urlParts[ urlParts.length - 1 ];
|
||||
if( filename.match(/_dzi\.js$/) ){
|
||||
//for jsonp dzi specification, the '_dzi' needs to be removed
|
||||
//from the filename to be consistent with the spec
|
||||
filename = filename.replace('_dzi.js', '.js');
|
||||
}
|
||||
|
||||
lastDot = filename.lastIndexOf( '.' );
|
||||
|
||||
if ( lastDot > -1 ) {
|
||||
urlParts[ urlParts.length - 1 ] = filename.slice( 0, lastDot );
|
||||
}
|
||||
|
||||
|
||||
tilesUrl = urlParts.join( '/' ) + "_files/";
|
||||
|
||||
}
|
||||
@ -1386,17 +1417,17 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
}
|
||||
|
||||
if ( async ) {
|
||||
if ( xmlString ) {
|
||||
if ( dziString ) {
|
||||
window.setTimeout( function() {
|
||||
var source = finish( processDZIXml, parseXml( xmlString ) );
|
||||
var source = finish( processDZIXml, $.parseXml( xmlString ) );
|
||||
// call after finish sets error
|
||||
callback( source, error );
|
||||
}, 1);
|
||||
} else {
|
||||
if( xmlUrl.match(/\.js$/) ){
|
||||
callbackName = xmlUrl.split( '/' ).pop().replace('.js','_dzi');
|
||||
if( dziUrl.match(/_dzi\.js$/) ){
|
||||
callbackName = dziUrl.split( '/' ).pop().replace('.js','');
|
||||
$.jsonp({
|
||||
url: xmlUrl,
|
||||
url: dziUrl,
|
||||
callbackName: callbackName,
|
||||
callback: function( imageData ){
|
||||
var source = finish( processDZIJSON, imageData.Image );
|
||||
@ -1404,7 +1435,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$.makeAjaxRequest( xmlUrl, function( xhr ) {
|
||||
$.makeAjaxRequest( dziUrl, function( xhr ) {
|
||||
var source = finish( processDZIResponse, xhr );
|
||||
// call after finish sets error
|
||||
callback( source, error );
|
||||
@ -1415,17 +1446,72 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( xmlString ) {
|
||||
if ( dziString ) {
|
||||
return finish(
|
||||
processDZIXml,
|
||||
parseXml( xmlString )
|
||||
$.parseXml( dziString )
|
||||
);
|
||||
} else {
|
||||
return finish(
|
||||
processDZIResponse,
|
||||
$.makeAjaxRequest( xmlUrl )
|
||||
$.makeAjaxRequest( dziUrl )
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses an XML string into a DOM Document.
|
||||
* @function
|
||||
* @name OpenSeadragon.parseXml
|
||||
* @param {String} string
|
||||
* @returns {Document}
|
||||
*/
|
||||
parseXml: function( string ) {
|
||||
//TODO: yet another example where we can determine the correct
|
||||
// implementation once at start-up instead of everytime we use
|
||||
// the function. DONE.
|
||||
if ( window.ActiveXObject ) {
|
||||
|
||||
$.parseXml = function( string ){
|
||||
var xmlDoc = null,
|
||||
parser;
|
||||
|
||||
xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
|
||||
xmlDoc.async = false;
|
||||
xmlDoc.loadXML( string );
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
} else if ( window.DOMParser ) {
|
||||
|
||||
$.parseXml = function( string ){
|
||||
var xmlDoc = null,
|
||||
parser;
|
||||
|
||||
parser = new DOMParser();
|
||||
xmlDoc = parser.parseFromString( string, "text/xml" );
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
} else {
|
||||
throw new Error( "Browser doesn't support XML DOM." );
|
||||
}
|
||||
|
||||
return $.parseXml( string );
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Reports whether the image format is supported for tiling in this
|
||||
* version.
|
||||
* @function
|
||||
* @name OpenSeadragon.imageFormatSupported
|
||||
* @param {String} [extension]
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
imageFormatSupported: function( extension ) {
|
||||
extension = extension ? extension : "";
|
||||
return !!FILEFORMATS[ extension.toLowerCase() ];
|
||||
}
|
||||
|
||||
});
|
||||
@ -1587,6 +1673,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @function
|
||||
* @param {XMLHttpRequest} xhr
|
||||
* @param {String} tilesUrl
|
||||
* @deprecated
|
||||
*/
|
||||
function processDZIResponse( xhr, tilesUrl ) {
|
||||
var status,
|
||||
@ -1606,7 +1693,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
if ( xhr.responseXML && xhr.responseXML.documentElement ) {
|
||||
doc = xhr.responseXML;
|
||||
} else if ( xhr.responseText ) {
|
||||
doc = parseXml( xhr.responseText );
|
||||
doc = $.parseXml( xhr.responseText );
|
||||
}
|
||||
|
||||
return processDZIXml( doc, tilesUrl );
|
||||
@ -1618,6 +1705,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @function
|
||||
* @param {Document} xmlDoc
|
||||
* @param {String} tilesUrl
|
||||
* @deprecated
|
||||
*/
|
||||
function processDZIXml( xmlDoc, tilesUrl ) {
|
||||
|
||||
@ -1651,6 +1739,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @function
|
||||
* @param {Element} imageNode
|
||||
* @param {String} tilesUrl
|
||||
* @deprecated
|
||||
*/
|
||||
function processDZI( imageNode, tilesUrl ) {
|
||||
var fileFormat = imageNode.getAttribute( "Format" ),
|
||||
@ -1701,6 +1790,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @function
|
||||
* @param {Element} imageNode
|
||||
* @param {String} tilesUrl
|
||||
* @deprecated
|
||||
*/
|
||||
function processDZIJSON( imageData, tilesUrl ) {
|
||||
var fileFormat = imageData.Format,
|
||||
@ -1748,6 +1838,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
* @function
|
||||
* @param {Document} errorNode
|
||||
* @throws {Error}
|
||||
* @deprecated
|
||||
*/
|
||||
function processDZIError( errorNode ) {
|
||||
var messageNode = errorNode.getElementsByTagName( "Message" )[ 0 ],
|
||||
@ -1756,61 +1847,6 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
|
||||
throw new Error(message);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reports whether the image format is supported for tiling in this
|
||||
* version.
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
* @param {String} [extension]
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
function imageFormatSupported( extension ) {
|
||||
extension = extension ? extension : "";
|
||||
return !!FILEFORMATS[ extension.toLowerCase() ];
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses an XML string into a DOM Document.
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
* @name OpenSeadragon.parseXml
|
||||
* @param {String} string
|
||||
* @returns {Document}
|
||||
*/
|
||||
function parseXml( string ) {
|
||||
//TODO: yet another example where we can determine the correct
|
||||
// implementation once at start-up instead of everytime we use
|
||||
// the function. DONE.
|
||||
if ( window.ActiveXObject ) {
|
||||
|
||||
$.parseXml = function( string ){
|
||||
var xmlDoc = null,
|
||||
parser;
|
||||
|
||||
xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
|
||||
xmlDoc.async = false;
|
||||
xmlDoc.loadXML( string );
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
} else if ( window.DOMParser ) {
|
||||
|
||||
$.parseXml = function( string ){
|
||||
var xmlDoc = null,
|
||||
parser;
|
||||
|
||||
parser = new DOMParser();
|
||||
xmlDoc = parser.parseFromString( string, "text/xml" );
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
} else {
|
||||
throw new Error( "Browser doesn't support XML DOM." );
|
||||
}
|
||||
|
||||
return $.parseXml( string );
|
||||
};
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
@ -3,33 +3,136 @@
|
||||
|
||||
|
||||
/**
|
||||
* The TileSource contains the most basic implementation required to create a
|
||||
* smooth transition between layer in an image pyramid. It has only a single key
|
||||
* interface that must be implemented to complete it key functionality:
|
||||
* 'getTileUrl'. It also has several optional interfaces that can be
|
||||
* implemented if a new TileSource wishes to support configuration via a simple
|
||||
* object or array ('configure') and if the tile source supports or requires
|
||||
* configuration via retreival of a document on the network ala AJAX or JSONP,
|
||||
* ('getImageInfo').
|
||||
* <br/>
|
||||
* By default the image pyramid is split into N layers where the images longest
|
||||
* side in M (in pixels), where N is the smallest integer which satisfies
|
||||
* <strong>2^(N+1) >= M</strong>.
|
||||
* @class
|
||||
* @param {Number} width
|
||||
* @extends OpenSeadragon.EventHandler
|
||||
* @param {Number|Object|Array|String} width
|
||||
* If more than a single argument is supplied, the traditional use of
|
||||
* positional parameters is supplied and width is expected to be the width
|
||||
* source image at it's max resolution in pixels. If a single argument is supplied and
|
||||
* it is an Object or Array, the construction is assumed to occur through
|
||||
* the extending classes implementation of 'configure'. Finally if only a
|
||||
* single argument is supplied and it is a String, the extending class is
|
||||
* expected to implement 'getImageInfo' and 'configure'.
|
||||
* @param {Number} height
|
||||
* Width of the source image at max resolution in pixels.
|
||||
* @param {Number} tileSize
|
||||
* The size of the tiles to assumed to make up each pyramid layer in pixels.
|
||||
* Tile size determines the point at which the image pyramid must be
|
||||
* divided into a matrix of smaller images.
|
||||
* @param {Number} tileOverlap
|
||||
* The number of pixels each tile is expected to overlap touching tiles.
|
||||
* @param {Number} minLevel
|
||||
* The minimum level to attempt to load.
|
||||
* @param {Number} maxLevel
|
||||
* The maximum level to attempt to load.
|
||||
* @property {Number} aspectRatio
|
||||
* @property {Number} dimensions
|
||||
* Ratio of width to height
|
||||
* @property {OpenSeadragon.Point} dimensions
|
||||
* Vector storing x and y dimensions ( width and height respectively ).
|
||||
* @property {Number} tileSize
|
||||
* The size of the image tiles used to compose the image.
|
||||
* @property {Number} tileOverlap
|
||||
* The overlap in pixels each tile shares with it's adjacent neighbors.
|
||||
* @property {Number} minLevel
|
||||
* The minimum pyramid level this tile source supports or should attempt to load.
|
||||
* @property {Number} maxLevel
|
||||
* The maximum pyramid level this tile source supports or should attempt to load.
|
||||
*/
|
||||
$.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLevel ) {
|
||||
this.aspectRatio = width / height;
|
||||
this.dimensions = new $.Point( width, height );
|
||||
this.tileSize = tileSize ? tileSize : 0;
|
||||
this.tileOverlap = tileOverlap ? tileOverlap : 0;
|
||||
this.minLevel = minLevel ? minLevel : 0;
|
||||
this.maxLevel = maxLevel ? maxLevel :
|
||||
Math.ceil(
|
||||
Math.log( Math.max( width, height ) ) /
|
||||
Math.log( 2 )
|
||||
var _this = this,
|
||||
callback = null,
|
||||
readyHandler = null,
|
||||
args = arguments,
|
||||
options,
|
||||
i;
|
||||
|
||||
if( $.isPlainObject( width ) ){
|
||||
options = width;
|
||||
}else{
|
||||
options = {
|
||||
width: args[0],
|
||||
height: args[1],
|
||||
tileSize: args[2],
|
||||
tileOverlap: args[3],
|
||||
minlevel: args[4],
|
||||
maxLevel: args[5]
|
||||
};
|
||||
}
|
||||
|
||||
//Tile sources supply some events, namely 'ready' when they must be configured
|
||||
//by asyncronously fetching their configuration data.
|
||||
$.EventHandler.call( this );
|
||||
|
||||
//we allow options to override anything we dont treat as
|
||||
//required via idiomatic options or which is functionally
|
||||
//set depending on the state of the readiness of this tile
|
||||
//source
|
||||
$.extend( true, this, options );
|
||||
|
||||
//Any functions that are passed as arguments are bound to the ready callback
|
||||
for( i = 0; i < arguments.length; i++ ){
|
||||
if( $.isFunction( arguments[i] ) ){
|
||||
callback = arguments[ i ];
|
||||
this.addHandler( 'ready', function( placeHolderSource, readySource ){
|
||||
callback( readySource );
|
||||
});
|
||||
//only one callback per constructor
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if( 'string' == $.type( arguments[ 0 ] ) ){
|
||||
//in case the getImageInfo method is overriden and/or implies an
|
||||
//async mechanism set some safe defaults first
|
||||
this.aspectRatio = 1;
|
||||
this.dimensions = new $.Point( 10, 10 );
|
||||
this.tileSize = 0;
|
||||
this.tileOverlap = 0;
|
||||
this.minLevel = 0;
|
||||
this.maxLevel = 0;
|
||||
this.ready = false;
|
||||
//configuration via url implies the extending class
|
||||
//implements and 'configure'
|
||||
this.getImageInfo( arguments[ 0 ] );
|
||||
|
||||
} else {
|
||||
|
||||
//explicit configuration via positional args in constructor
|
||||
//or the more idiomatic 'options' object
|
||||
this.ready = true;
|
||||
this.aspectRatio = ( options.width && options.height ) ?
|
||||
( options.width / options.height ) : 1;
|
||||
this.dimensions = new $.Point( options.width, options.height );
|
||||
this.tileSize = options.tileSize ? options.tileSize : 0;
|
||||
this.tileOverlap = options.tileOverlap ? options.tileOverlap : 0;
|
||||
this.minLevel = options.minLevel ? options.minLevel : 0;
|
||||
this.maxLevel = options.maxLevel ? options.maxLevel : (
|
||||
( options.width && options.height ) ? Math.ceil(
|
||||
Math.log( Math.max( options.width, options.height ) ) /
|
||||
Math.log( 2 )
|
||||
) : 0
|
||||
);
|
||||
if( callback && $.isFunction( callback ) ){
|
||||
callback( this );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
$.TileSource.prototype = {
|
||||
|
||||
/**
|
||||
@ -98,6 +201,107 @@ $.TileSource.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Responsible for retrieving, and caching the
|
||||
* image metadata pertinent to this TileSources implementation.
|
||||
* @function
|
||||
* @param {String} url
|
||||
* @throws {Error}
|
||||
*/
|
||||
getImageInfo: function( url ) {
|
||||
var _this = this,
|
||||
url = url,
|
||||
error,
|
||||
callbackName,
|
||||
callback,
|
||||
readySource,
|
||||
options,
|
||||
urlParts,
|
||||
filename,
|
||||
lastDot,
|
||||
tilesUrl;
|
||||
|
||||
|
||||
if( url ) {
|
||||
urlParts = url.split( '/' );
|
||||
filename = urlParts[ urlParts.length - 1 ];
|
||||
lastDot = filename.lastIndexOf( '.' );
|
||||
if ( lastDot > -1 ) {
|
||||
urlParts[ urlParts.length - 1 ] = filename.slice( 0, lastDot );
|
||||
}
|
||||
}
|
||||
|
||||
callback = function( data ){
|
||||
var $TileSource = $.TileSource.determineType( _this, data, url );
|
||||
options = $TileSource.prototype.configure.apply( _this, [ data, url ]);
|
||||
readySource = new $TileSource( options );
|
||||
_this.ready = true;
|
||||
_this.raiseEvent( 'ready', readySource );
|
||||
};
|
||||
|
||||
if( url.match(/\.js$/) ){
|
||||
//TODO: Its not very flexible to require tile sources to end jsonp
|
||||
// request for info with a url that ends with '.js' but for
|
||||
// now it's the only way I see to distinguish uniformly.
|
||||
callbackName = url.split( '/' ).pop().replace('.js','');
|
||||
$.jsonp({
|
||||
url: url,
|
||||
async: false,
|
||||
callbackName: callbackName,
|
||||
callback: callback
|
||||
});
|
||||
} else {
|
||||
//TODO: struggling a little with TileSource rewrite to make info
|
||||
// requests work asyncronously. For now I'm opting to make
|
||||
// all xhr info request syncronous.
|
||||
$.makeAjaxRequest( url, function( xhr ) {
|
||||
var data = processResponse( xhr );
|
||||
callback( data );
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Responsible determining if a the particular TileSource supports the
|
||||
* data format ( and allowed to apply logic against the url the data was
|
||||
* loaded from, if any ). Overriding implementations are expected to do
|
||||
* something smart with data and / or url to determine support. Also
|
||||
* understand that iteration order of TileSources is not guarunteed so
|
||||
* please make sure your data or url is expressive enough to ensure a simple
|
||||
* and sufficient mechanisim for clear determination.
|
||||
* @function
|
||||
* @param {String|Object|Array|Document} data
|
||||
* @param {String} url - the url the data was loaded
|
||||
* from if any.
|
||||
* @return {Boolean}
|
||||
*/
|
||||
supports: function( data, url ) {
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Responsible for parsing and configuring the
|
||||
* image metadata pertinent to this TileSources implementation.
|
||||
* This method is not implemented by this class other than to throw an Error
|
||||
* announcing you have to implement it. Because of the variety of tile
|
||||
* server technologies, and various specifications for building image
|
||||
* pyramids, this method is here to allow easy integration.
|
||||
* @function
|
||||
* @param {String|Object|Array|Document} data
|
||||
* @param {String} url - the url the data was loaded
|
||||
* from if any.
|
||||
* @return {Array} args - Returns an array containing the normalized values
|
||||
* of the positional parameters for the constructor of the implementing
|
||||
* tile source.
|
||||
* @throws {Error}
|
||||
*/
|
||||
configure: function( data, url ) {
|
||||
throw new Error( "Method not implemented." );
|
||||
},
|
||||
|
||||
/**
|
||||
* Responsible for retriving the url which will return an image for the
|
||||
* region speified by the given x, y, and level components.
|
||||
* This method is not implemented by this class other than to throw an Error
|
||||
* announcing you have to implement it. Because of the variety of tile
|
||||
* server technologies, and various specifications for building image
|
||||
@ -129,4 +333,73 @@ $.TileSource.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.extend( true, $.TileSource.prototype, $.EventHandler.prototype );
|
||||
|
||||
|
||||
/**
|
||||
* Decides whether to try to process the response as xml, json, or hand back
|
||||
* the text
|
||||
* @eprivate
|
||||
* @inner
|
||||
* @function
|
||||
* @param {XMLHttpRequest} xhr - the completed network request
|
||||
*/
|
||||
function processResponse( xhr ){
|
||||
var responseText = xhr.responseText,
|
||||
status = xhr.status,
|
||||
statusText,
|
||||
data;
|
||||
|
||||
if ( !xhr ) {
|
||||
throw new Error( $.getString( "Errors.Security" ) );
|
||||
} else if ( xhr.status !== 200 && xhr.status !== 0 ) {
|
||||
status = xhr.status;
|
||||
statusText = ( status == 404 ) ?
|
||||
"Not Found" :
|
||||
xhr.statusText;
|
||||
throw new Error( $.getString( "Errors.Status", status, statusText ) );
|
||||
}
|
||||
|
||||
if( responseText.match(/\s*<.*/) ){
|
||||
try{
|
||||
data = ( xhr.responseXML && xhr.responseXML.documentElement ) ?
|
||||
xhr.responseXML :
|
||||
$.parseXml( responseText );
|
||||
} catch (e){
|
||||
data = xhr.responseText;
|
||||
}
|
||||
}else if( responseText.match(/\s*[\{\[].*/) ){
|
||||
data = eval( responseText );
|
||||
}else{
|
||||
data = responseText;
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Determines the TileSource Implementation by introspection of OpenSeadragon
|
||||
* namespace, calling each TileSource implementation of 'isType'
|
||||
* @eprivate
|
||||
* @inner
|
||||
* @function
|
||||
* @param {Object|Array} data - the tile source configuration object
|
||||
* @param {String} url - the url where the tile source configuration object was
|
||||
* loaded from, if any.
|
||||
*/
|
||||
$.TileSource.determineType = function( tileSource, data, url ){
|
||||
var property;
|
||||
for( property in OpenSeadragon ){
|
||||
if( property.match(/.+TileSource$/) &&
|
||||
$.isFunction( OpenSeadragon[ property ] ) &&
|
||||
$.isFunction( OpenSeadragon[ property ].prototype.supports ) &&
|
||||
OpenSeadragon[ property ].prototype.supports.call( tileSource, data, url )
|
||||
){
|
||||
return OpenSeadragon[ property ];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
176
src/viewer.js
176
src/viewer.js
@ -140,22 +140,19 @@ $.Viewer = function( options ) {
|
||||
}
|
||||
|
||||
if ( this.tileSources ){
|
||||
//tileSources is a complex option...
|
||||
//It can be a string, object, function, or an array of any of these.
|
||||
// - A String implies a DZI
|
||||
// - An Srray of Objects implies a simple image
|
||||
// - A Function implies a custom tile source callback
|
||||
// - An Array that is not an Array of simple Objects implies a sequence
|
||||
// of tile sources which can be any of the above
|
||||
// tileSources is a complex option...
|
||||
//
|
||||
// It can be a string, object, or an array of any of strings and objects.
|
||||
// At this point we only care about if it is an Array or not.
|
||||
//
|
||||
if( $.isArray( this.tileSources ) ){
|
||||
if( $.isPlainObject( this.tileSources[ 0 ] ) ){
|
||||
//This is a non-sequenced legacy tile source
|
||||
initialTileSource = this.tileSources;
|
||||
} else {
|
||||
//Sequenced tile source
|
||||
initialTileSource = this.tileSources[ 0 ];
|
||||
|
||||
//must be a sequence of tileSource since the first item
|
||||
//is a legacy tile source
|
||||
if( this.tileSources.length > 1 ){
|
||||
THIS[ this.hash ].sequenced = true;
|
||||
}
|
||||
initialTileSource = this.tileSources[ 0 ];
|
||||
} else {
|
||||
initialTileSource = this.tileSources;
|
||||
}
|
||||
@ -250,6 +247,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
* If the string is xml is simply parsed and opened, otherwise the string
|
||||
* is treated as an URL and an xml document is requested via ajax, parsed
|
||||
* and then opened in the viewer.
|
||||
* @deprecated - use 'open' instead.
|
||||
* @function
|
||||
* @name OpenSeadragon.Viewer.prototype.openDzi
|
||||
* @param {String} dzi and xml string or the url to a DZI xml document.
|
||||
@ -268,33 +266,66 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
},
|
||||
|
||||
/**
|
||||
* tileSources is a complex option...
|
||||
*
|
||||
* It can be a string, object, function, or an array of any of these:
|
||||
*
|
||||
* - A String implies a url used to determine the tileSource implementation
|
||||
* based on the file extension of url. JSONP is implied by *.js,
|
||||
* otherwise the url is retrieved as text and the resulting text is
|
||||
* introspected to determine if its json, xml, or text and parsed.
|
||||
* - An Object implies an inline configuration which has a single
|
||||
* property sufficient for being able to determine tileSource
|
||||
* implementation. If the object has a property which is a function
|
||||
* named 'getTileUrl', it is treated as a custom TileSource.
|
||||
* - An Array implies a one of two cases:
|
||||
* 1) Its a legacy tile source if it is an array of objects and at
|
||||
* least one object satisfies the conditions of having a 'height',
|
||||
* 'width', and 'url'.
|
||||
* 2) It's a sequence of tileSources, each item of which applying the
|
||||
* rules above independently
|
||||
* @function
|
||||
* @name OpenSeadragon.Viewer.prototype.openTileSource
|
||||
* @return {OpenSeadragon.Viewer} Chainable.
|
||||
*/
|
||||
openTileSource: function ( tileSource ) {
|
||||
var _this = this,
|
||||
customTileSource;
|
||||
customTileSource,
|
||||
readySource,
|
||||
$TileSource,
|
||||
options;
|
||||
|
||||
setTimeout(function(){
|
||||
if ( $.type( tileSource ) == 'string') {
|
||||
//Standard DZI format
|
||||
_this.openDzi( tileSource );
|
||||
} else if ( $.isArray( tileSource ) ){
|
||||
//Legacy image pyramid
|
||||
_this.open( new $.LegacyTileSource( tileSource ) );
|
||||
} else if ( $.isPlainObject( tileSource ) && $.isFunction( tileSource.getTileUrl ) ){
|
||||
//Custom tile source
|
||||
customTileSource = new $.TileSource(
|
||||
tileSource.width,
|
||||
tileSource.height,
|
||||
tileSource.tileSize,
|
||||
tileSource.tileOverlap,
|
||||
tileSource.minLevel,
|
||||
tileSource.maxLevel
|
||||
);
|
||||
customTileSource.getTileUrl = tileSource.getTileUrl;
|
||||
_this.open( customTileSource );
|
||||
//TODO: We cant assume a string implies a dzi since all
|
||||
//complete TileSource implementations should have a getInfo
|
||||
//which allows them to be configured via AJAX. Im not sure
|
||||
//if its better to use file extension or url pattern, or to
|
||||
//inspect the resulting info object.
|
||||
tileSource = new $.TileSource( tileSource, function( readySource ){
|
||||
_this.open( readySource );
|
||||
});
|
||||
|
||||
} else if ( $.isPlainObject( tileSource ) ){
|
||||
if( $.isFunction( tileSource.getTileUrl ) ){
|
||||
//Custom tile source
|
||||
customTileSource = new $.TileSource(
|
||||
tileSource.width,
|
||||
tileSource.height,
|
||||
tileSource.tileSize,
|
||||
tileSource.tileOverlap,
|
||||
tileSource.minLevel,
|
||||
tileSource.maxLevel
|
||||
);
|
||||
customTileSource.getTileUrl = tileSource.getTileUrl;
|
||||
_this.open( customTileSource );
|
||||
} else {
|
||||
//inline configuration
|
||||
$TileSource = $.TileSource.determineType( _this, tileSource );
|
||||
options = $TileSource.prototype.configure.apply( _this, [ tileSource ]);
|
||||
readySource = new $TileSource( options );
|
||||
_this.open( readySource );
|
||||
}
|
||||
} else {
|
||||
//can assume it's already a tile source implementation
|
||||
_this.open( tileSource );
|
||||
@ -346,8 +377,19 @@ $.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 ){
|
||||
|
||||
this.viewport.zoomTo(
|
||||
this.defaultZoomLevel,
|
||||
this.viewport.getCenter(),
|
||||
true
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
this.drawer = new $.Drawer({
|
||||
@ -890,6 +932,40 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
goToPage: function( page ){
|
||||
//page is a 1 based index so normalize now
|
||||
//page = page;
|
||||
if( this.tileSources.length > page ){
|
||||
|
||||
THIS[ this.hash ].sequence = page;
|
||||
|
||||
if( this.nextButton ){
|
||||
if( ( this.tileSources.length - 1 ) === page ){
|
||||
//Disable next button
|
||||
this.nextButton.disable();
|
||||
} else {
|
||||
this.nextButton.enable();
|
||||
}
|
||||
}
|
||||
if( this.previousButton ){
|
||||
if( page > 0 ){
|
||||
//Enable previous button
|
||||
this.previousButton.enable();
|
||||
} else {
|
||||
this.previousButton.disable();
|
||||
}
|
||||
}
|
||||
|
||||
this.openTileSource( this.tileSources[ page ] );
|
||||
}
|
||||
if( $.isFunction( this.onPageChange ) ){
|
||||
this.onPageChange({
|
||||
page: page,
|
||||
viewer: this
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1243,44 +1319,14 @@ function onFullPage() {
|
||||
|
||||
|
||||
function onPrevious(){
|
||||
var previous = THIS[ this.hash ].sequence - 1,
|
||||
preserveVewport = true;
|
||||
if( previous >= 0 ){
|
||||
|
||||
THIS[ this.hash ].sequence = previous;
|
||||
|
||||
if( 0 === previous ){
|
||||
//Disable previous button
|
||||
this.previousButton.disable();
|
||||
}
|
||||
if( this.tileSources.length > 0 ){
|
||||
//Enable next button
|
||||
this.nextButton.enable();
|
||||
}
|
||||
|
||||
this.openTileSource( this.tileSources[ previous ] );
|
||||
}
|
||||
var previous = THIS[ this.hash ].sequence - 1;
|
||||
this.goToPage( previous );
|
||||
};
|
||||
|
||||
|
||||
function onNext(){
|
||||
var next = THIS[ this.hash ].sequence + 1,
|
||||
preserveVewport = true;
|
||||
if( this.tileSources.length > next ){
|
||||
|
||||
THIS[ this.hash ].sequence = next;
|
||||
|
||||
if( ( this.tileSources.length - 1 ) === next ){
|
||||
//Disable next button
|
||||
this.nextButton.disable();
|
||||
}
|
||||
if( next > 0 ){
|
||||
//Enable previous button
|
||||
this.previousButton.enable();
|
||||
}
|
||||
|
||||
this.openTileSource( this.tileSources[ next ] );
|
||||
}
|
||||
var next = THIS[ this.hash ].sequence + 1;
|
||||
this.goToPage( next );
|
||||
};
|
||||
|
||||
|
||||
|
||||
166
www/base.html
Normal file
166
www/base.html
Normal file
@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
|
||||
<title>@TITLE@ OpenSeadragon</title>
|
||||
|
||||
<link rel='stylesheet'
|
||||
type='text/css'
|
||||
media='screen'
|
||||
href='/openseadragon/css/style.css'/>
|
||||
|
||||
<script src="/openseadragon/openseadragon.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="https://github.com/thatcher/openseadragon"><img
|
||||
style="position: absolute; top: 0; right: 0; border: 0;"
|
||||
src="/openseadragon/images/forkme_right_darkblue_121621.png"
|
||||
alt="Fork me on GitHub" /></a>
|
||||
<div id="container">
|
||||
<div class="download">
|
||||
<a href="https://github.com/thatcher/openseadragon/zipball/master">
|
||||
<img border="0" width="90" src="/openseadragon/images/zip.png"></a>
|
||||
<a href="https://github.com/thatcher/openseadragon/tarball/master">
|
||||
<img border="0" width="90" src="/openseadragon/images/tar.png"></a>
|
||||
</div>
|
||||
<h1>
|
||||
<a href="/openseadragon">OpenSeadragon</a>
|
||||
<span style='font-size:12px;float:left;margin-left:10px;'>
|
||||
Try it on the iPad! (new since 0.9)
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div class='navigation'>
|
||||
<ul>
|
||||
<li><a href='#additional-examples-and-features'
|
||||
>Additional Examples & Features</a></li>
|
||||
<li><a href='#dependencies'
|
||||
>Dependencies</a></li>
|
||||
<li><a href='#installing'
|
||||
>Installing</a></li>
|
||||
<li><a href='#api-documentation'
|
||||
>API Documentation</a></li>
|
||||
<li><a href='#download'
|
||||
>Download</a></li>
|
||||
<li><a href='#license'
|
||||
>License</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@EXAMPLE@
|
||||
|
||||
<h2 id='additional-examples-and-features'>
|
||||
Additional Examples & Features
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h3>Supported Tile Sources</h3>
|
||||
<p>
|
||||
OpenSeadragon supports several image serving protocols out of
|
||||
the box and is actively adding support for more. If the image
|
||||
serving protocol you need is not supported, you can always
|
||||
add support for yours using a custom tile source. <em>(Please help
|
||||
us add built-in support for your reqiured image serving
|
||||
protocol.)</em> Each supported protocol aims to allow configuration
|
||||
via XMLHTTPRequest, JSONP, as well as direct inline configuration.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='/openseadragon/examples/tilesource-dzi/'>
|
||||
<span>DZI (Deep Zoom Images)</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/tilesource-legacy/'>
|
||||
<span>Legacy Image Pyramids</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/tilesource-custom/'>
|
||||
<span>Custom Tile Sources</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Interface Elements and UI Customization</h3>
|
||||
<p>
|
||||
OpenSeadragon provides many optional interface elements which
|
||||
can be easily enabled via simple configuration settings.
|
||||
Additionally, OpenSeadragon aims to enable you to bind it's
|
||||
controls to entirely custom interfaces.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='/openseadragon/examples/ui-viewport-navigator/'>
|
||||
<span>Viewport Navigator</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/ui-toolbar/'>
|
||||
<span>Toolbar</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/ui-binding-custom-buttons/'>
|
||||
<span>Binding Custom Buttons</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Image Set Visualization Features</h3>
|
||||
<p>
|
||||
Visualizing image sets may be the most fertile area of future
|
||||
development in OpenSeadragon. It's very common that sets of
|
||||
related images are required to be presented in a way that
|
||||
allows a user to easily navigate through them.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='/openseadragon/examples/tilesource-sequence/'>
|
||||
<span>Image Sequence</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id='dependencies'>Dependencies</h2>
|
||||
<p>Currently there are no additional dependencies.</p>
|
||||
|
||||
<h2 id='installing'>Install</h2>
|
||||
<p>
|
||||
You can examine the source of this page to see how it's included in the page.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id='api-documentation'>API Documentation</h2>
|
||||
<p>Is available <a href='/openseadragon/docs/'>here</a>. The API
|
||||
documentation has not yet been closely aligned with our build / release cycle.
|
||||
We try to minimize backward incompatible API changes but during the 0.X
|
||||
release cycle are taking some liberty to do so when it makes sense. Please
|
||||
keep both of these caveats in mind when referencing the API documentation.</p>
|
||||
|
||||
<h2 id='download'>Download</h2>
|
||||
<p>
|
||||
You can download this project in either
|
||||
<a href="https://github.com/thatcher/openseadragon/zipball/master">zip</a> or
|
||||
<a href="https://github.com/thatcher/openseadragon/tarball/master">tar formats.
|
||||
</p>
|
||||
<p>
|
||||
You can also clone the project with <a href="http://git-scm.com">Git</a>
|
||||
by running:
|
||||
<pre>$ git clone git://github.com/thatcher/openseadragon</pre>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<h2 id='license'>License</h2>
|
||||
<p>The original license is a
|
||||
<a href='https://raw.github.com/thatcher/openseadragon/master/licenses/new-bsd.txt'
|
||||
>New BSD</a> style license.</p>
|
||||
<p>This project adds an
|
||||
<a href='https://raw.github.com/thatcher/openseadragon/master/licenses/mit.txt'
|
||||
>MIT</a> style license.
|
||||
</p>
|
||||
|
||||
<div class="footer">
|
||||
get the source code on GitHub : <a href="https://github.com/thatcher/openseadragon">thatcher/openseadragon</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
www/index.html
Normal file
33
www/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<h2>refactored</h2>
|
||||
|
||||
<div class="description">
|
||||
Fork of OpenSeadragon (from its mercurial repository). We are working to
|
||||
refactor the code base and see what happens from there. <br/><br/>
|
||||
<strong>Try it on the iPad! (new since 0.9)</strong>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Seadragon control with default properties
|
||||
<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"/*,
|
||||
wrapVertical: true,
|
||||
wrapHorizontal: true,
|
||||
visibilityRatio: 0,
|
||||
minPixelRatio: 1,
|
||||
immediateRender: true,
|
||||
minZoomImageRatio: 1,
|
||||
maxZoomPixelRatio: 1,
|
||||
showNavigationControl: false
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
64
www/overlay-highlights.html
Normal file
64
www/overlay-highlights.html
Normal file
@ -0,0 +1,64 @@
|
||||
<h2>example: highlights</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
Highlighted overlays are very useful for directing users attention to
|
||||
specific areas of interest, though the style is often decided based
|
||||
on the specific content being presented.
|
||||
</p>
|
||||
<p>
|
||||
OpenSeadragon makes it easy to declare highlighted areas and control
|
||||
the presentation through simple css mechanisms.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Try it on the iPad! (new since 0.9)</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Highlights
|
||||
</div>
|
||||
<div id="toolbarDiv" class="toolbar">
|
||||
<span style='float:right;margin:10px 20px 0 0'>
|
||||
| <a href="#">show highlights</a>
|
||||
| <a href="#">hide highlights</a>
|
||||
</span>
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
toolbar: "toolbarDiv",
|
||||
showNavigator: true,
|
||||
overlays: [{
|
||||
x: 0.45,
|
||||
y: 0.35,
|
||||
width: 0.08,
|
||||
height: 0.05,
|
||||
className: 'highlight'
|
||||
},{
|
||||
x: 0.22,
|
||||
y: 0.38,
|
||||
width: 0.1,
|
||||
height: 0.15,
|
||||
className: 'highlight'
|
||||
},{
|
||||
x: 0.65,
|
||||
y: 0.38,
|
||||
width: 0.1,
|
||||
height: 0.15,
|
||||
className: 'highlight'
|
||||
},{
|
||||
x: 0.45,
|
||||
y: 0.50,
|
||||
width: 0.08,
|
||||
height: 0.15,
|
||||
className: 'highlight'
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
53
www/tilesource-custom.html
Normal file
53
www/tilesource-custom.html
Normal file
@ -0,0 +1,53 @@
|
||||
<h2>example: custom tile sources</h2>
|
||||
|
||||
<p>
|
||||
A Custom Tile Source can be create via inline configuration by specifying
|
||||
a single function named 'getTileUrl', along with the required values for
|
||||
'height', 'width'. Optional values include 'tileSize', 'tileOverlap',
|
||||
'minLevel', and 'maxLevel'. Additionally, any default functions implemented
|
||||
by OpenSeadragon.TileSource can be overridden. Functionally this allows you
|
||||
to define a new TileSource implementation inline.
|
||||
</p>
|
||||
<p>
|
||||
Alternatively,
|
||||
you can always create a new tile source which implements the required
|
||||
interfaces 'getTileUrl', 'configure', and 'supports'.
|
||||
</p>
|
||||
<p>
|
||||
<em>Please note the examples on this page are sketches or outlines
|
||||
and not functional examples because we do not have an available
|
||||
service to provide a working example against. If you have a service you
|
||||
can provide an example to illustrate against please let us know.</em>
|
||||
</p>
|
||||
|
||||
<div class="description">
|
||||
<h3>Inline Configuration for Custom Tile Sources</h3>
|
||||
<p>
|
||||
Minimally, an inline configuration for a custom tile source only needs
|
||||
to implement the 'getTileUrl' interface and provide a height and width
|
||||
for the maximum resolution of the image.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example Inline Configuration for Custom Tile Sources
|
||||
</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",
|
||||
prefixUrl: "/openseadragon",
|
||||
showNavigator: true,
|
||||
tileSources: {
|
||||
height: 1140,
|
||||
width: 2450,
|
||||
getTileUrl: function( level, x, y ){
|
||||
return "http://example.org/imageservice/"+level+"/"+x+"/"+y+"/?tileSize="+this.tileSize
|
||||
}
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
207
www/tilesource-dzi.html
Normal file
207
www/tilesource-dzi.html
Normal file
@ -0,0 +1,207 @@
|
||||
<h2>
|
||||
example: deep zoom image support
|
||||
</h2>
|
||||
<p>
|
||||
The DZI (Deep Zoom Image) format is an
|
||||
xml specification maintained by Microsoft and described <a
|
||||
href='http://msdn.microsoft.com/en-us/library/cc645077(v=vs.95).aspx'>here</a>.
|
||||
</p>
|
||||
<p>
|
||||
OpenSeadragon has added supports for DZI format via AJAX ( XML/JSON ), JSONP,
|
||||
and as inline configuration ( using the json format ). The DZI specification
|
||||
does not officially describe a JSON format however the
|
||||
examples below illustrate how DZI xml is mapped to json following some
|
||||
simple conventions.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>XMLHTTPRequest for DZI XML or JSON</h3>
|
||||
<p>
|
||||
The DZI Format is implied by a tile source specified as a string
|
||||
and which has the </em>.dzi</em> extension. OpenSeadragon sniffs
|
||||
for whether the DZI is formatted as XML or JSON.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example XMLHTTPRequest for DZI ( XML or JSON )
|
||||
</div>
|
||||
<div id="example-xmlhttprequest-for-dzi"
|
||||
class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-xmlhttprequest-for-dzi",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<p>Deep zoom is not available unless javascript is enabled.</p>
|
||||
<img src='../images/highsmith/01967v.jpg'
|
||||
height='600'/>
|
||||
</noscript>
|
||||
</div>
|
||||
<p>
|
||||
Below is a sample DZI file formatted as XML.
|
||||
</p>
|
||||
<pre>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
|
||||
Format="jpg"
|
||||
Overlap="2"
|
||||
TileSize="256" >
|
||||
<Size Height="9221"
|
||||
Width="7026"/>
|
||||
</Image></pre>
|
||||
<p>
|
||||
And the equivalent sample DZI file formatted as JSON.
|
||||
</p>
|
||||
<pre>
|
||||
{
|
||||
"Image": {
|
||||
"xmlns": "http://schemas.microsoft.com/deepzoom/2008",
|
||||
"Format": "jpg",
|
||||
"Overlap": "2",
|
||||
"TileSize": "256",
|
||||
"Size": {
|
||||
"Height": "9221",
|
||||
"Width": "7026"
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>JSONP Request for DZI JSON</h3>
|
||||
<p>
|
||||
The DZI JSONP Format is implied by a tile source specified as a string
|
||||
and which has the </em>.js</em> extension. The remainder of the
|
||||
file name is expected to match the jsonp callback
|
||||
the example below illustrates
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example JSONPRequest for DZI JSON
|
||||
</div>
|
||||
<div id="example-jsonprequest-for-dzi-jsonp"
|
||||
class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-jsonprequest-for-dzi-jsonp",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.js",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<p>Deep zoom is not available unless javascript is enabled.</p>
|
||||
<img src='../images/highsmith/01967v.jpg'
|
||||
height='600'/>
|
||||
</noscript>
|
||||
</div>
|
||||
<p>
|
||||
Below is a sample DZI file formatted as JSONP.
|
||||
</p>
|
||||
<pre>
|
||||
highsmith({
|
||||
"Image": {
|
||||
"xmlns": "http://schemas.microsoft.com/deepzoom/2008",
|
||||
"Format": "jpg",
|
||||
"Overlap": "2",
|
||||
"TileSize": "256",
|
||||
"Size": {
|
||||
"Height": "9221",
|
||||
"Width": "7026"
|
||||
}
|
||||
}
|
||||
});</pre>
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.js",
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>Inline Configuration for DZI</h3>
|
||||
<p>
|
||||
Inline configuration is convenient as well because it avoids a potentially
|
||||
complicated JSON/XML Ajax request over the network. Just plop the equivalent
|
||||
json directly into 'tileSources' option.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example Inline Configuration for DZI
|
||||
</div>
|
||||
<div id="example-inline-configuration-for-dzi"
|
||||
class="openseadragon">
|
||||
</div>
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<p>
|
||||
Note however the non-standard dzi property 'Url' which we must supply
|
||||
explicitly since this is normally inferred by the path specified
|
||||
for the dzi XML/JSON/JSONP.
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: {
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
Url: "/openseadragon/examples/images/highsmith/highsmith_files/",
|
||||
Format: "jpg",
|
||||
Overlap: "2",
|
||||
TileSize: "256",
|
||||
Size: {
|
||||
Height: "9221",
|
||||
Width: "7026"
|
||||
}
|
||||
}
|
||||
}
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-inline-configuration-for-dzi",
|
||||
prefixUrl: "/openseadragon",
|
||||
showNavigator: true,
|
||||
tileSources: {
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
Url: "/openseadragon/examples/images/highsmith/highsmith_files/",
|
||||
Format: "jpg",
|
||||
Overlap: "2",
|
||||
TileSize: "256",
|
||||
Size: {
|
||||
Height: "9221",
|
||||
Width: "7026"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
16
www/tilesource-iiif.html
Normal file
16
www/tilesource-iiif.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!--
|
||||
/opt/djakota/target/lib/kdu_compress \
|
||||
-quiet \
|
||||
-i /opt/djakota/src/test/resources/images/01967u.tif \
|
||||
-o /opt/djakota/target/images/01967u.jp2 \
|
||||
-slope 51651,51337,51186,50804,50548,50232 \
|
||||
Clevels=7 \
|
||||
Cprecincts={256,256},{256,256},{128,128} \
|
||||
Clayers=6 \
|
||||
Corder=RPCL \
|
||||
ORGtparts=R \
|
||||
Cblk={32,32} \
|
||||
ORGgen_plt=yes \
|
||||
Creversible=yes \
|
||||
-jp2_space sRGB
|
||||
-->
|
||||
227
www/tilesource-legacy.html
Normal file
227
www/tilesource-legacy.html
Normal file
@ -0,0 +1,227 @@
|
||||
<h2>example: legacy image pyramids</h2>
|
||||
|
||||
<p>
|
||||
A "legacy image pyramid" (LIP) just means you can finally make use of your
|
||||
existing images without pregenerating or dynamically creating image tiles.
|
||||
Web developers have commonly created derivatives of various sizes
|
||||
that are intended for use for different web presentations or for download,
|
||||
like "thumbnail", "detail", and "best" etc. This is already a simple pyramid
|
||||
and you can use them to create a simple deep zoom presenation with OpenSeadragon!
|
||||
</p>
|
||||
|
||||
<div class="description">
|
||||
<h3>XMLHTTPRequest for LIP JSON</h3>
|
||||
<p>
|
||||
The LIP format is implied by a tile source specified as a string
|
||||
and which does not have the </em>.js</em> extension. The legacy image
|
||||
pyramid format does not currently have an xml serialization.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example XMLHTTPRequest for LIP ( XML or JSON )
|
||||
</div>
|
||||
<div id="example-xmlhttprequest"
|
||||
class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-xmlhttprequest",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<p>Deep zoom is not available unless javascript is enabled.</p>
|
||||
<img src='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
|
||||
height='600'/>
|
||||
</noscript>
|
||||
</div>
|
||||
<p>
|
||||
Below is a sample LIP file formatted as JSON.
|
||||
</p>
|
||||
<pre>
|
||||
{
|
||||
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
|
||||
}]
|
||||
}
|
||||
</pre>
|
||||
<p>
|
||||
Or the equivalent XML:
|
||||
</p>
|
||||
<pre>
|
||||
<image type='legacy-image-pyramid'>
|
||||
<level
|
||||
url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg'
|
||||
height='889'
|
||||
width='600'/>
|
||||
<level
|
||||
url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg'
|
||||
height='2201'
|
||||
width='1485'/>
|
||||
<level
|
||||
url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
|
||||
height='4402'
|
||||
width='2970'/>
|
||||
</image>
|
||||
</pre>
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>JSONP Request for LIP JSON</h3>
|
||||
<p>
|
||||
The LIP JSONP format is implied by a tile source specified as a string
|
||||
and which has the </em>.js</em> extension. The remainder of the
|
||||
file name is expected to match the jsonp callback
|
||||
the example below illustrates
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example JSONPRequest for DZI JSON
|
||||
</div>
|
||||
<div id="example-jsonprequest"
|
||||
class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-jsonprequest",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<p>Deep zoom is not available unless javascript is enabled.</p>
|
||||
<img src='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
|
||||
height='600'/>
|
||||
</noscript>
|
||||
</div>
|
||||
<p>
|
||||
Below is a sample DZI file formatted as JSONP.
|
||||
</p>
|
||||
<pre>
|
||||
rosen({
|
||||
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
|
||||
}]
|
||||
});</pre>
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>Inline Configuration for Legacy Tile Sources</h3>
|
||||
<p>
|
||||
We currently only support Legacy Tile Sources configured inline as the example
|
||||
below demonstrates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example Inline Configuration for Legacy Tile Sources
|
||||
</div>
|
||||
<div id="inline-configuration"
|
||||
class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "inline-configuration",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
tileSources: {
|
||||
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
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<p>
|
||||
The Legacy Tile Source has not been described as an official 'specification',
|
||||
though we would like to eventually create a specification for it because
|
||||
of how useful it can be to create interactive zoom interfaces using existing
|
||||
web derivatives. <em> As such it may change though the goal is to keep it very
|
||||
simple and similar to the examples provided below.</em>
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: {
|
||||
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
|
||||
|
||||
}]
|
||||
}
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
745
www/tilesource-sequence.html
Normal file
745
www/tilesource-sequence.html
Normal file
@ -0,0 +1,745 @@
|
||||
<h2>example: image sequence</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
It is not uncommon to have a sequence of images to present, and although
|
||||
it's easy enough to add a 'previous' and 'next' link on your page, it's
|
||||
especially nice to allow the user to navigate the image sequence without
|
||||
having leave the page.
|
||||
<br/><br/>
|
||||
OpenSeadragon now has support for an array of tile sources, including
|
||||
a previous and next button!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Basic Example w/ Default Settings ( Using Legacy Image Pyramid Example )
|
||||
</div>
|
||||
<div id="contentDiv1"
|
||||
class="openseadragon"></div>
|
||||
<hr/>
|
||||
<div class="demoheading">
|
||||
Preset Zoom Level ( Resets on Page Turn )<br/>
|
||||
Click on the navigator and alternate pressing keys 'w' and 's' to
|
||||
reproduce the effect of the referenced 'overlay' (depends on screen hertz
|
||||
refresh rate, most screens will display the effect).
|
||||
</div>
|
||||
<div id="contentDiv2"
|
||||
class="openseadragon"></div>
|
||||
<hr/>
|
||||
<div class="demoheading">
|
||||
Preserving the Viewport Zoom Level and Position for Image Sequences
|
||||
</div>
|
||||
<div id="contentDiv3"
|
||||
class="openseadragon"></div>
|
||||
<hr/>
|
||||
<div class="demoheading">
|
||||
Mixed Tile Source Example ( w/ Default Settings )
|
||||
</div>
|
||||
<div id="contentDiv4"
|
||||
class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "contentDiv1",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
tileSources: [{
|
||||
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
|
||||
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "contentDiv2",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
defaultZoomLevel: 1.05,
|
||||
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"
|
||||
]
|
||||
});
|
||||
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "contentDiv3",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
preserveViewport: true,
|
||||
tileSources: [{
|
||||
type: 'legacy-image-pyramid',
|
||||
levels: [{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801t.gif',
|
||||
height: 150,
|
||||
width: 116
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}]
|
||||
},{
|
||||
type: 'legacy-image-pyramid',
|
||||
levels: [{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090802q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090802r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090802v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}]
|
||||
},{
|
||||
type: 'legacy-image-pyramid',
|
||||
levels: [{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090803q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090803r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090803v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}]
|
||||
},{
|
||||
type: 'legacy-image-pyramid',
|
||||
levels: [{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090804q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090804r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090804v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "contentDiv4",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
tileSources: [{
|
||||
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/rpbaasm/0900/0908/090801t.gif',
|
||||
height: 150,
|
||||
width: 116
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}]
|
||||
},
|
||||
"/openseadragon/examples/images/highsmith/highsmith.dzi" ]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
/*
|
||||
// Example
|
||||
OpenSeadragon({
|
||||
id: "contentDiv0",
|
||||
prefixUrl: '/openseadragon',
|
||||
showNavigator: true,
|
||||
minPixelRatio: 0.7,
|
||||
maxImageCacheCount: 0,
|
||||
tileSources: [
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/31000/31018/0010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/23700/23762/0010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/22200/22293/0010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/17800/17808/0010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/13700/13705/00010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/12800/12834/00010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09924.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09925.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09926.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09927.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09928.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09929.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09930.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09931.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09932.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/09900/09924/09933.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0001.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0002.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0003.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0004.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0005.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0006.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0007.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0008.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0009.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/08700/08729/0010.dzi",
|
||||
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05954.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05955.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05956.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05957.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05958.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05959.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05960.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05961.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05962.dzi",
|
||||
"/openseadragon/examples/demo/pnp/ppmsca/05900/05954/05963.dzi"
|
||||
]
|
||||
});
|
||||
*/
|
||||
-->
|
||||
123
www/ui-binding-custom-buttons.html
Normal file
123
www/ui-binding-custom-buttons.html
Normal file
@ -0,0 +1,123 @@
|
||||
<h2>example: binding custom buttons</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
You can now bind to an entirely custom user interface by just passing
|
||||
the id of the elements you want treated as buttons! This is especially useful
|
||||
when you need to fully control the look and feel of the user interface.
|
||||
(New since 0.9.50)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Binding custom buttons.
|
||||
</div>
|
||||
<div id="toolbarDiv" class="toolbar">
|
||||
<span style='float:right;margin:10px 20px 0 0'>
|
||||
| <a id="zoom-in" href="#zoom-in">Zoom In</a>
|
||||
| <a id="zoom-out" href="#zoom-out">Zoom 0ut</a>
|
||||
| <a id="home" href="#home">Home</a>
|
||||
| <a id="full-page" href="#full-page">Full Page</a>
|
||||
</span>
|
||||
<span style='float:left;margin:10px 0 0 20px'>
|
||||
<
|
||||
<a id="previous" href="#previous-page">Previous</a>
|
||||
| <a id="next" href="#next-page">Next</a>
|
||||
>
|
||||
<span id='currentpage'> 1 of 3 </span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="contentDiv"
|
||||
class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "/openseadragon",
|
||||
toolbar: "toolbarDiv",
|
||||
zoomInButton: "zoom-in",
|
||||
zoomOutButton: "zoom-out",
|
||||
homeButton: "home",
|
||||
fullPageButton: "full-page",
|
||||
nextButton: "next",
|
||||
previousButton: "previous",
|
||||
showNavigator: true,
|
||||
tileSources: [{
|
||||
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/rpbaasm/0900/0908/090801t.gif',
|
||||
height: 150,
|
||||
width: 116
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
|
||||
height: 400,
|
||||
width: 310
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
|
||||
height: 860,
|
||||
width: 667
|
||||
},{
|
||||
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
|
||||
height: 1650,
|
||||
width: 1279
|
||||
|
||||
}],
|
||||
},
|
||||
"/openseadragon/examples/images/highsmith/highsmith.dzi"
|
||||
],
|
||||
onPageChange: function( data ){
|
||||
document.getElementById('currentpage').innerHTML = ( data.page + 1 ) + ' of 3';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>
|
||||
The relevant configuration options are shown below. Note the value for the options
|
||||
are the id of the element on the page to bind the button's action to.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
zoomInButton: "zoom-in",
|
||||
zoomOutButton: "zoom-out",
|
||||
homeButton: "home",
|
||||
fullPageButton: "full-page",
|
||||
nextButton: "next",
|
||||
previousButton: "previous",
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
|
||||
<p>
|
||||
Also note the interface in this example updates the current page numbers in the label
|
||||
"Page N of 3". This is achieved by making use of the provided callback 'onPageChange'
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
onPageChange: function( data ){
|
||||
document.getElementById('currentpage').innerHTML = ( data.page + 1 ) + ' of 3';
|
||||
}
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
0
www/ui-collections.html
Normal file
0
www/ui-collections.html
Normal file
0
www/ui-slideshow.html
Normal file
0
www/ui-slideshow.html
Normal file
39
www/ui-toolbar.html
Normal file
39
www/ui-toolbar.html
Normal file
@ -0,0 +1,39 @@
|
||||
<h2>example: toolbar</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
Although OpenSeadragon provides default buttons which are overlayed on the Viewport,
|
||||
there are many use cases where the presentation may require a more traditional
|
||||
'toolbar'. OpenSeadragon now allows you to very simply dock your controls
|
||||
inside any element on the page which the end user has presentation control over.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Toolbar
|
||||
</div>
|
||||
<div id="toolbarDiv" class="toolbar">
|
||||
<span style='float:right;margin:10px 20px 0 0'>
|
||||
| <a href="#">other tools</a>
|
||||
| <a href="#">other tools</a>
|
||||
</span>
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
toolbar: "toolbarDiv",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Most importantly the toolbar has additional logic which supports transitions between
|
||||
fullpage and normal mode. The user can style, including hiding, the toolbar in fullpage
|
||||
mode, even though its not otherwise related to the viewer / viewport DOM.
|
||||
</p>
|
||||
51
www/ui-viewport-navigator.html
Normal file
51
www/ui-viewport-navigator.html
Normal file
@ -0,0 +1,51 @@
|
||||
<h2>example: viewport navigator</h2>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
A viewport navigator allows the user to see the source image displayed
|
||||
as a reference image with a highlighted area showing which portion of
|
||||
the image they are currently viewing in the viewport. The navigator
|
||||
reuses the image sources provided by the viewport so no additional
|
||||
image derivatives are required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Viewport Navigator
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "contentDiv",
|
||||
prefixUrl: "/openseadragon",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
showNavigator: true
|
||||
});
|
||||
</script>
|
||||
|
||||
<p><em>(The viewport navigator is up for promotion as a default interface
|
||||
element for accessibility reasons but could be disabled if required.)</em>
|
||||
</p>
|
||||
<p>Mouse interactions scroll (zoom) and drag are now supported on
|
||||
the navigator!
|
||||
(New since 0.9.40)
|
||||
</p>
|
||||
<p>
|
||||
The viewport navigator is now keyboard acessible! Just tab into it,
|
||||
the highlight will change to blue-ish, and you can use the following keys:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>[ w, up arrow ]</strong> - move viewport <strong>up</strong></li>
|
||||
<li><strong>[ s, down arrow ]</strong> - move viewport <strong>down</strong></li>
|
||||
<li><strong>[ a, left arrow ]</strong> - move viewport <strong>left</strong></li>
|
||||
<li><strong>[ f, right arrow ]</strong> - move viewport <strong>right</strong></li>
|
||||
<li><strong>[ 0 ]</strong> - zoom / move viewport <strong>home</strong></li>
|
||||
<li><strong>[ - / _, shift+W, shift+up arrow ]</strong> - zoom viewport <strong>out</strong></li>
|
||||
<li><strong>[ = / +, shift+S, shift+down arrow ]</strong> - zoom viewport <strong>in</strong></li>
|
||||
</ul>
|
||||
<p>
|
||||
<em>* NOTE: Chrome and Safari do not support the arrow keys for the Navigator.</em>
|
||||
</p>
|
||||
Loading…
x
Reference in New Issue
Block a user