mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
some overlays work that had be be completed before finishing tile layers. added brief example of how to how host tiles of zoom.it
This commit is contained in:
thatcher
parent
aecf576c06
commit
855e753225
@ -6,7 +6,7 @@
|
||||
PROJECT: openseadragon
|
||||
BUILD_MAJOR: 0
|
||||
BUILD_MINOR: 9
|
||||
BUILD_ID: 107
|
||||
BUILD_ID: 111
|
||||
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
|
||||
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
|
||||
|
||||
|
||||
@ -62,7 +62,6 @@
|
||||
|
||||
<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 | '/>
|
||||
@ -70,6 +69,7 @@
|
||||
<publish page='tilesource-tms' title='Tiled Map Service Tile Source | '/>
|
||||
<publish page='tilesource-iiif' title='IIIF Tile Source | '/>
|
||||
<publish page='tilesource-legacy' title='Legacy Tile Sources | '/>
|
||||
<publish page='tilesource-zoomit' title='Zoom.it Tile Sources | '/>
|
||||
<publish page='tilesource-sequence' title='Tile Source Sequence | '/>
|
||||
<publish page='tilesource-collection' title='Tile Source Collections | '/>
|
||||
|
||||
@ -78,6 +78,7 @@
|
||||
<publish page='ui-toolbar' title='Toolbar | '/>
|
||||
<publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
|
||||
<publish page='ui-zoom-and-pan' title='Viewport Zoom and Pan | '/>
|
||||
<publish page='ui-overlays' title='Overlays |'/>
|
||||
|
||||
<publish page='developer-debug-mode' title='Developer Tools - Debug Mode | '/>
|
||||
|
||||
|
||||
116
openseadragon.js
116
openseadragon.js
@ -1,7 +1,7 @@
|
||||
/*globals OpenSeadragon */
|
||||
|
||||
/**
|
||||
* @version OpenSeadragon 0.9.107
|
||||
* @version OpenSeadragon 0.9.111
|
||||
*
|
||||
* @fileOverview
|
||||
* <h2>
|
||||
@ -3721,16 +3721,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
}
|
||||
|
||||
if( this.preserveVewport ){
|
||||
|
||||
this.viewport.resetContentSize( this.source.dimensions );
|
||||
|
||||
}
|
||||
|
||||
this.source.overlays = this.source.overlays || [];
|
||||
|
||||
this.drawer = new $.Drawer({
|
||||
source: this.source,
|
||||
viewport: this.viewport,
|
||||
element: this.canvas,
|
||||
overlays: this.overlays,
|
||||
overlays: [].concat( this.overlays ).concat( this.source.overlays ),
|
||||
maxImageCacheCount: this.maxImageCacheCount,
|
||||
imageLoaderLimit: this.imageLoaderLimit,
|
||||
minZoomImageRatio: this.minZoomImageRatio,
|
||||
@ -3832,8 +3832,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
* @return {OpenSeadragon.Viewer} Chainable.
|
||||
*/
|
||||
close: function ( ) {
|
||||
|
||||
if( this.drawer ){
|
||||
this.drawer.clearOverlays();
|
||||
}
|
||||
|
||||
this.source = null;
|
||||
this.drawer = null;
|
||||
|
||||
this.viewport = this.preserveViewport ? this.viewport : null;
|
||||
//this.profiler = null;
|
||||
this.canvas.innerHTML = "";
|
||||
@ -8400,6 +8406,16 @@ $.Tile.prototype = {
|
||||
|
||||
if ( element.parentNode ) {
|
||||
element.parentNode.removeChild( element );
|
||||
//this should allow us to preserve overlays when required between
|
||||
//pages
|
||||
if( element.prevElementParent ){
|
||||
style.display = 'none';
|
||||
//element.prevElementParent.insertBefore(
|
||||
// element,
|
||||
// element.prevNextSibling
|
||||
//);
|
||||
document.body.appendChild( element );
|
||||
}
|
||||
}
|
||||
|
||||
style.top = "";
|
||||
@ -8424,6 +8440,9 @@ $.Tile.prototype = {
|
||||
size;
|
||||
|
||||
if ( element.parentNode != container ) {
|
||||
//save the source parent for later if we need it
|
||||
element.prevElementParent = element.parentNode;
|
||||
element.prevNextSibling = element.nextSibling;
|
||||
container.appendChild( element );
|
||||
}
|
||||
|
||||
@ -8442,6 +8461,7 @@ $.Tile.prototype = {
|
||||
style.left = position.x + "px";
|
||||
style.top = position.y + "px";
|
||||
style.position = "absolute";
|
||||
style.display = 'block';
|
||||
|
||||
if ( scales ) {
|
||||
style.width = size.x + "px";
|
||||
@ -8586,22 +8606,46 @@ $.Drawer = function( options ) {
|
||||
|
||||
(function( _this, overlay ){
|
||||
|
||||
var link = document.createElement("a"),
|
||||
rect = new $.Rect(
|
||||
overlay.x,
|
||||
overlay.y,
|
||||
var element = null,
|
||||
rect = ( overlay.height && overlay.width ) ? new $.Rect(
|
||||
overlay.x || overlay.px,
|
||||
overlay.y || overlay.py,
|
||||
overlay.width,
|
||||
overlay.height
|
||||
) : new $.Point(
|
||||
overlay.x || overlay.px,
|
||||
overlay.y || overlay.py
|
||||
),
|
||||
id = Math.floor(Math.random()*10000000);
|
||||
id = overlay.id ?
|
||||
overlay.id :
|
||||
"openseadragon-overlay-"+Math.floor(Math.random()*10000000);
|
||||
|
||||
link.href = "#/overlay/"+id;
|
||||
link.id = id;
|
||||
link.className = overlay.className ?
|
||||
element = $.getElement(overlay.id);
|
||||
if( !element ){
|
||||
element = document.createElement("a");
|
||||
element.href = "#/overlay/"+id;
|
||||
}
|
||||
element.id = id;
|
||||
element.className = element.className + " " + ( overlay.className ?
|
||||
overlay.className :
|
||||
"openseadragon-overlay";
|
||||
"openseadragon-overlay"
|
||||
);
|
||||
|
||||
_this.overlays[ i ] = new $.Overlay( link, rect );
|
||||
|
||||
if(overlay.px !== undefined){
|
||||
//if they specified 'px' so its in pixel coordinates so
|
||||
//we need to translate to viewport coordinates
|
||||
rect = _this.viewport.imageToViewportRectangle( rect );
|
||||
}
|
||||
if( overlay.placement ){
|
||||
_this.overlays[ i ] = new $.Overlay(
|
||||
element,
|
||||
_this.viewport.pointFromPixel(rect),
|
||||
$.OverlayPlacement[overlay.placement.toUpperCase()]
|
||||
);
|
||||
}else{
|
||||
_this.overlays[ i ] = new $.Overlay( element, rect );
|
||||
}
|
||||
|
||||
}( this, this.overlays[ i ] ));
|
||||
|
||||
@ -10164,6 +10208,50 @@ $.Viewport.prototype = {
|
||||
).plus(
|
||||
bounds.getTopLeft()
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from Seajax viewer coordinate
|
||||
* system to image coordinate system
|
||||
*/
|
||||
viewportToImageCoordinates: function(viewerX, viewerY) {
|
||||
return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from image coordinate system to
|
||||
* Seajax viewer coordinate system
|
||||
*/
|
||||
imageToViewportCoordinates: function( imageX, imageY ) {
|
||||
return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from a rectanlge which describes a portion of
|
||||
* the image in pixel coordinates to OpenSeadragon viewport
|
||||
* rectangle coordinates.
|
||||
*/
|
||||
imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
|
||||
var coordA,
|
||||
coordB,
|
||||
rect;
|
||||
if( arguments.length == 1 ){
|
||||
//they passed a rectangle instead of individual components
|
||||
rect = imageX;
|
||||
return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
|
||||
}
|
||||
coordA = this.imageToViewportCoordinates(
|
||||
imageX, imageY
|
||||
);
|
||||
coordB = this.imageToViewportCoordinates(
|
||||
pixelWidth, pixelHeight
|
||||
);
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordA.x + coordB.x,
|
||||
coordA.y + coordB.y
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -113,22 +113,46 @@ $.Drawer = function( options ) {
|
||||
|
||||
(function( _this, overlay ){
|
||||
|
||||
var link = document.createElement("a"),
|
||||
rect = new $.Rect(
|
||||
overlay.x,
|
||||
overlay.y,
|
||||
var element = null,
|
||||
rect = ( overlay.height && overlay.width ) ? new $.Rect(
|
||||
overlay.x || overlay.px,
|
||||
overlay.y || overlay.py,
|
||||
overlay.width,
|
||||
overlay.height
|
||||
) : new $.Point(
|
||||
overlay.x || overlay.px,
|
||||
overlay.y || overlay.py
|
||||
),
|
||||
id = Math.floor(Math.random()*10000000);
|
||||
id = overlay.id ?
|
||||
overlay.id :
|
||||
"openseadragon-overlay-"+Math.floor(Math.random()*10000000);
|
||||
|
||||
link.href = "#/overlay/"+id;
|
||||
link.id = id;
|
||||
link.className = overlay.className ?
|
||||
element = $.getElement(overlay.id);
|
||||
if( !element ){
|
||||
element = document.createElement("a");
|
||||
element.href = "#/overlay/"+id;
|
||||
}
|
||||
element.id = id;
|
||||
element.className = element.className + " " + ( overlay.className ?
|
||||
overlay.className :
|
||||
"openseadragon-overlay";
|
||||
"openseadragon-overlay"
|
||||
);
|
||||
|
||||
_this.overlays[ i ] = new $.Overlay( link, rect );
|
||||
|
||||
if(overlay.px !== undefined){
|
||||
//if they specified 'px' so its in pixel coordinates so
|
||||
//we need to translate to viewport coordinates
|
||||
rect = _this.viewport.imageToViewportRectangle( rect );
|
||||
}
|
||||
if( overlay.placement ){
|
||||
_this.overlays[ i ] = new $.Overlay(
|
||||
element,
|
||||
_this.viewport.pointFromPixel(rect),
|
||||
$.OverlayPlacement[overlay.placement.toUpperCase()]
|
||||
);
|
||||
}else{
|
||||
_this.overlays[ i ] = new $.Overlay( element, rect );
|
||||
}
|
||||
|
||||
}( this, this.overlays[ i ] ));
|
||||
|
||||
|
||||
@ -100,6 +100,16 @@
|
||||
|
||||
if ( element.parentNode ) {
|
||||
element.parentNode.removeChild( element );
|
||||
//this should allow us to preserve overlays when required between
|
||||
//pages
|
||||
if( element.prevElementParent ){
|
||||
style.display = 'none';
|
||||
//element.prevElementParent.insertBefore(
|
||||
// element,
|
||||
// element.prevNextSibling
|
||||
//);
|
||||
document.body.appendChild( element );
|
||||
}
|
||||
}
|
||||
|
||||
style.top = "";
|
||||
@ -124,6 +134,9 @@
|
||||
size;
|
||||
|
||||
if ( element.parentNode != container ) {
|
||||
//save the source parent for later if we need it
|
||||
element.prevElementParent = element.parentNode;
|
||||
element.prevNextSibling = element.nextSibling;
|
||||
container.appendChild( element );
|
||||
}
|
||||
|
||||
@ -142,6 +155,7 @@
|
||||
style.left = position.x + "px";
|
||||
style.top = position.y + "px";
|
||||
style.position = "absolute";
|
||||
style.display = 'block';
|
||||
|
||||
if ( scales ) {
|
||||
style.width = size.x + "px";
|
||||
|
||||
@ -402,16 +402,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
}
|
||||
|
||||
if( this.preserveVewport ){
|
||||
|
||||
this.viewport.resetContentSize( this.source.dimensions );
|
||||
|
||||
}
|
||||
|
||||
this.source.overlays = this.source.overlays || [];
|
||||
|
||||
this.drawer = new $.Drawer({
|
||||
source: this.source,
|
||||
viewport: this.viewport,
|
||||
element: this.canvas,
|
||||
overlays: this.overlays,
|
||||
overlays: [].concat( this.overlays ).concat( this.source.overlays ),
|
||||
maxImageCacheCount: this.maxImageCacheCount,
|
||||
imageLoaderLimit: this.imageLoaderLimit,
|
||||
minZoomImageRatio: this.minZoomImageRatio,
|
||||
@ -513,8 +513,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
* @return {OpenSeadragon.Viewer} Chainable.
|
||||
*/
|
||||
close: function ( ) {
|
||||
|
||||
if( this.drawer ){
|
||||
this.drawer.clearOverlays();
|
||||
}
|
||||
|
||||
this.source = null;
|
||||
this.drawer = null;
|
||||
|
||||
this.viewport = this.preserveViewport ? this.viewport : null;
|
||||
//this.profiler = null;
|
||||
this.canvas.innerHTML = "";
|
||||
|
||||
@ -580,6 +580,50 @@ $.Viewport.prototype = {
|
||||
).plus(
|
||||
bounds.getTopLeft()
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from Seajax viewer coordinate
|
||||
* system to image coordinate system
|
||||
*/
|
||||
viewportToImageCoordinates: function(viewerX, viewerY) {
|
||||
return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from image coordinate system to
|
||||
* Seajax viewer coordinate system
|
||||
*/
|
||||
imageToViewportCoordinates: function( imageX, imageY ) {
|
||||
return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
|
||||
},
|
||||
|
||||
/**
|
||||
* Translates from a rectanlge which describes a portion of
|
||||
* the image in pixel coordinates to OpenSeadragon viewport
|
||||
* rectangle coordinates.
|
||||
*/
|
||||
imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
|
||||
var coordA,
|
||||
coordB,
|
||||
rect;
|
||||
if( arguments.length == 1 ){
|
||||
//they passed a rectangle instead of individual components
|
||||
rect = imageX;
|
||||
return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
|
||||
}
|
||||
coordA = this.imageToViewportCoordinates(
|
||||
imageX, imageY
|
||||
);
|
||||
coordB = this.imageToViewportCoordinates(
|
||||
pixelWidth, pixelHeight
|
||||
);
|
||||
return new $.Rect(
|
||||
coordA.x,
|
||||
coordA.y,
|
||||
coordA.x + coordB.x,
|
||||
coordA.y + coordB.y
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -85,6 +85,9 @@
|
||||
<li><a href='/openseadragon/examples/tilesource-custom/'>
|
||||
<span>Custom Tile Sources</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/tilesource-zoomit/'>
|
||||
<span>Pulling from Zoom.it</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -100,6 +103,9 @@
|
||||
<li><a href='/openseadragon/examples/ui-zoom-and-pan/'>
|
||||
<span>Zoom and Pan</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/ui-overlays/'>
|
||||
<span>Overlays</span>
|
||||
</a></li>
|
||||
<li><a href='/openseadragon/examples/ui-viewport-navigator/'>
|
||||
<span>Viewport Navigator</span>
|
||||
</a></li>
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<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/images/",
|
||||
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>
|
||||
@ -33,8 +33,9 @@
|
||||
OpenSeadragon({
|
||||
id: "example-xmlhttprequest-for-dzi",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
||||
showNavigator: true
|
||||
tileSources: [
|
||||
"/openseadragon/examples/images/highsmith/highsmith.dzi"
|
||||
]
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
|
||||
102
www/tilesource-zoomit.html
Normal file
102
www/tilesource-zoomit.html
Normal file
@ -0,0 +1,102 @@
|
||||
<h2>
|
||||
example: integrating with zoom.it tiles
|
||||
</h2>
|
||||
<p>
|
||||
Zoom it provides a simple service based way of loading images and serving
|
||||
out tiles. The Zoomit service is based on the DZI format.
|
||||
</p>
|
||||
<p>
|
||||
OpenSeadragon can render the DZI tiles and provide you all the features
|
||||
you can only get with OpenSeadragon.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="description">
|
||||
<h3>Pulling tiles from Zoom.it</h3>
|
||||
<p>
|
||||
If you are pulling image tiles from zoom it, please understand and
|
||||
respect any policy and copy rights of the image creator.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Example inline configuration for rendering dzi's hosted at zoom.it
|
||||
</div>
|
||||
<div id="example-zoomit-tilesource"
|
||||
class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-zoomit-tilesource",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
tileSources: [{
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2009",
|
||||
Url: "http://cache.zoom.it/content/WwI0_files/",
|
||||
TileSize: "254",
|
||||
Overlap: "1",
|
||||
Format: "jpg",
|
||||
ServerFormat: "Default",
|
||||
Size: {
|
||||
Width: "5816",
|
||||
Height: "3961"
|
||||
}
|
||||
}
|
||||
},{
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2009",
|
||||
Url: "http://static.seadragon.com/content/misc/carina-nebula_files/",
|
||||
TileSize: "254",
|
||||
Overlap: "1",
|
||||
Format: "jpg",
|
||||
ServerFormat: "Default",
|
||||
Size: {
|
||||
Width: "29566",
|
||||
Height: "14321"
|
||||
}
|
||||
}
|
||||
},{
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2009",
|
||||
Url: "http://static.seadragon.com/content/misc/milwaukee_files/",
|
||||
TileSize: "254",
|
||||
Overlap: "1",
|
||||
Format: "jpg",
|
||||
ServerFormat: "Default",
|
||||
Size: {
|
||||
Width: "15497",
|
||||
Height: "5378"
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
<p>Deep zoom is not available unless javascript is enabled.</p>
|
||||
<img src='../images/highsmith/01967v.jpg'
|
||||
height='600'/>
|
||||
</noscript>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Configuration is done via the 'tileSources' option ( or programatically ).
|
||||
</p>
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: [{
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2009",
|
||||
Url: "http://cache.zoom.it/content/WwI0_files/",
|
||||
TileSize: "254",
|
||||
Overlap: "1",
|
||||
Format: "jpg",
|
||||
ServerFormat: "Default",
|
||||
Size: {
|
||||
Width: "5816",
|
||||
Height: "3961"
|
||||
}
|
||||
}
|
||||
}]
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
523
www/ui-overlays.html
Normal file
523
www/ui-overlays.html
Normal file
@ -0,0 +1,523 @@
|
||||
<h2>example: overlays</h2>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
|
||||
|
||||
<div class="description">
|
||||
Overlays are an important mechanism for adding additional infomation channels
|
||||
in a deep zoom image. Below we present just a few examples of how to
|
||||
add some simple overlays.
|
||||
<p>
|
||||
( Tile source in this example is from Chronicling America
|
||||
at the <a href='http://www.loc.gov/'>Library of Congress</a> )
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Tile source overlays.
|
||||
</div>
|
||||
<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. <em>A tile source overlay
|
||||
is specific to the particular tile source.</em> So if you have a sequence of
|
||||
tile sources and want to over lay unique content on each, use this mechanism.
|
||||
</p>
|
||||
<div id="example-tilesource-overlay" class="openseadragon">
|
||||
<style>
|
||||
.navigator .highlight{
|
||||
opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
border: 2px solid #900;
|
||||
outline: none;
|
||||
background-color: #900;
|
||||
}
|
||||
.highlight{
|
||||
opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
border: 2px solid #0A7EbE;
|
||||
outline: 10px auto #0A7EbE;
|
||||
background-color: white;
|
||||
}
|
||||
.highlight:hover, .highlight:focus{
|
||||
filter: alpha(opacity=70);
|
||||
opacity: 0.7;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var chronicling_america_example = function( sequence ){
|
||||
return function(level, column, row){
|
||||
var px = 0;
|
||||
if (column!=0) {
|
||||
px = this.tileSize * column - this.tileOverlap;
|
||||
}
|
||||
var py = 0;
|
||||
if (row!=0) {
|
||||
py = this.tileSize * row - this.tileOverlap;
|
||||
}
|
||||
var scale = this.getLevelScale(level);
|
||||
var dimensionsScaled = this.dimensions.times(scale);
|
||||
|
||||
// find the dimension of the tile, adjust for no
|
||||
// overlap data on top and left edges
|
||||
var sx = this.tileSize + (column==0 ? 1 : 2) * this.tileOverlap;
|
||||
var sy = this.tileSize + (row==0 ? 1 : 2) * this.tileOverlap;
|
||||
|
||||
// adjust size for single-tile levels where the image
|
||||
// size is smaller than the regular tile size, and for
|
||||
// tiles on the bottom and right edges that would
|
||||
// exceed the image bounds.
|
||||
sx = Math.min(sx, dimensionsScaled.x - px);
|
||||
sy = Math.min(sy, dimensionsScaled.y - py);
|
||||
|
||||
var tile_width = parseInt(sx);
|
||||
var tile_height = parseInt(sy);
|
||||
|
||||
var x1 = parseInt(px / scale);
|
||||
var y1 = parseInt(py / scale);
|
||||
var x2 = parseInt((px + sx) / scale);
|
||||
var y2 = parseInt((py + sy) / scale);
|
||||
|
||||
return 'http://chroniclingamerica.loc.gov/lccn/sn85066387/1898-01-09/ed-1/seq-'+
|
||||
sequence+'/'+
|
||||
'image_'+tile_width+'x'+tile_height+
|
||||
'_from_'+x1+','+y1+
|
||||
'_to_'+x2+','+y2+'.jpg';
|
||||
};
|
||||
};
|
||||
|
||||
OpenSeadragon({
|
||||
id: "example-tilesource-overlay",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
tileSources: [{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
overlays: [{
|
||||
id: 'example-overlay',
|
||||
x: 0.33,
|
||||
y: 0.75,
|
||||
width: 0.2,
|
||||
height: 0.25,
|
||||
className: 'highlight'
|
||||
}],
|
||||
getTileUrl: chronicling_america_example(17)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(18)
|
||||
}],
|
||||
onPageChange: function() {
|
||||
//Tooltips
|
||||
setTimeout(bindtooltip, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
jQuery(function() {
|
||||
//Tooltips
|
||||
setTimeout(bindtooltip, 2000);
|
||||
});
|
||||
|
||||
function bindtooltip(){
|
||||
var tip = jQuery('#example-tip');
|
||||
jQuery("#example-overlay").hover(function(e){
|
||||
var mousex = e.pageX + 20, //Get X coodrinates
|
||||
mousey = e.pageY + 20, //Get Y coordinates
|
||||
tipWidth = tip.width(), //Find width of tooltip
|
||||
tipHeight = tip.height(), //Find height of tooltip
|
||||
|
||||
//Distance of element from the right edge of viewport
|
||||
tipVisX = $(window).width() - (mousex + tipWidth),
|
||||
//Distance of element from the bottom of viewport
|
||||
tipVisY = $(window).height() - (mousey + tipHeight);
|
||||
|
||||
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
|
||||
mousex = e.pageX - tipWidth - 20;
|
||||
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
|
||||
mousey = e.pageY - tipHeight - 20;
|
||||
}
|
||||
tip.css({ top: mousey, left: mousex, position: 'absolute' });
|
||||
tip.show().css({opacity: 0.8}); //Show tooltip
|
||||
}, function() {
|
||||
tip.hide(); //Hide tooltip
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<div id="example-tip" style='display:none;width:250px;background-color:#fff;'>
|
||||
<p>
|
||||
The overlay can provide a class name and id to bind additional events to.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
The relevant configuration options are shown below. Note the className and id attributes
|
||||
will be passed to the overlay element so you can use bind css styles and events to it.
|
||||
<em>Be sure to put your styles in the document head, inside the openseadragon viewer element,
|
||||
or apply them dynamically so they will persist when full screen mode is entered.</em>
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
tileSources: [{
|
||||
...
|
||||
overlays: [{
|
||||
id: 'example-overlay',
|
||||
x: 0.33,
|
||||
y: 0.75,
|
||||
width: 0.2,
|
||||
height: 0.25,
|
||||
className: 'highlight'
|
||||
}],
|
||||
...
|
||||
}]
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Viewport overlays.
|
||||
</div>
|
||||
<p>
|
||||
OpenSeadragon also supports overlays that persist accross image sequences.
|
||||
In this case the overlay is simply configured outside of the tileSource.
|
||||
</p>
|
||||
<p>
|
||||
This example also demonstrates the ability to configure the overlay position
|
||||
in terms of image pixel coordinates. The difference is infered by use of
|
||||
<strong>px</strong>, and <strong>py</strong>, instead of x and y.
|
||||
</p>
|
||||
<div id="example-viewport-overlay" class="openseadragon">
|
||||
<style>
|
||||
.filter{
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
background-color: #7FFF00;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "example-viewport-overlay",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
overlays: [{
|
||||
id: 'global-overlay-filter',
|
||||
px: 0,
|
||||
py: 0,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
className: 'filter'
|
||||
}],
|
||||
tileSources: [{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(19)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(20)
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
overlays: [{
|
||||
id: 'global-overlay-filter',
|
||||
px: 0,
|
||||
py: 0,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
className: 'filter'
|
||||
}],
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="demoarea">
|
||||
<div class="demoheading">
|
||||
Overlaying complex html.
|
||||
</div>
|
||||
<p>
|
||||
By default OpenSeadragon checks for an existing element in the DOM that
|
||||
matches the id of the overlay id (if one is specified). If that content
|
||||
is found, OpenSeadragon will use it for the overlay, otherwise it will create
|
||||
a link to ensure keyboard accesibilty to the target ( as in the examples above ).
|
||||
</p>
|
||||
<p>
|
||||
In this example we display some additional metadata to the right of the image itself.
|
||||
</p>
|
||||
<div id="complex-html-overlay" class="openseadragon">
|
||||
<script type="text/javascript">
|
||||
OpenSeadragon({
|
||||
id: "complex-html-overlay",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
showNavigator: false,
|
||||
preserveViewport: true,
|
||||
minZoomLevel: 1,
|
||||
overlays: [{
|
||||
minLevel: 8,
|
||||
px: 6425,
|
||||
py: 0,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
id: 'html-overlay'
|
||||
}],
|
||||
tileSources: [{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(1)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(2)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(3)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(4)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(5)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(6)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(7)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(8)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(9)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(10)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(11)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(11)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(12)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(13)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(14)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(15)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(16)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(17)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(18)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(19)
|
||||
},{
|
||||
minLevel: 8,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(20)
|
||||
}]
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.navigator .no-overlay-in-navigator{
|
||||
display:none;
|
||||
}
|
||||
#html-overlay{
|
||||
opacity: 0.7;
|
||||
color: #fff;
|
||||
filter: alpha(opacity=70);
|
||||
}
|
||||
#html-overlay .info{
|
||||
padding: 20px;
|
||||
}
|
||||
#html-overlay dt{
|
||||
font-weight: bold;
|
||||
}
|
||||
#html-overlay dl ul{
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
<div id='html-overlay' style=''>
|
||||
|
||||
<div class="info">
|
||||
<dl class="alt">
|
||||
<dt>Title: </dt>
|
||||
<dd>
|
||||
The San Francisco call. : (San Francisco [Calif.]) 1895-1913
|
||||
</dd>
|
||||
|
||||
<dt>Alternative Titles:</dt>
|
||||
<dd>
|
||||
<ul class="bullet_blue">
|
||||
<li> Call </li>
|
||||
<li>Call chronicle examiner</li>
|
||||
<li>Call-chronicle-examinerApr. 19, 1906 </li>
|
||||
<li>Sunday call <Dec. 5, 1901> </li>
|
||||
</ul>
|
||||
</dd>
|
||||
|
||||
<dt>Preceding Titles:</dt>
|
||||
<dd>
|
||||
<ul class="bullet_blue">
|
||||
<li><a href="http://chroniclingamerica.loc.gov/lccn/sn94052989/">The morning call. (San Francisco [Calif.]) 1878-1895</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
<a style=''
|
||||
href="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/">
|
||||
<img class="thumbnail"
|
||||
src="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/thumbnail.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre>
|
||||
OpenSeadragon({
|
||||
...
|
||||
preserveViewport: true,
|
||||
showNavigator: false,
|
||||
minZoomLevel: 1,
|
||||
overlays: [{
|
||||
px: 6425,
|
||||
py: 0,
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
id: 'html-overlay'
|
||||
}],
|
||||
tileSources: [{
|
||||
width: 6425,
|
||||
height: 8535,
|
||||
tileSize: 256,
|
||||
tileOverlap: 1,
|
||||
getTileUrl: chronicling_america_example(1)
|
||||
},{
|
||||
...
|
||||
}]
|
||||
...
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user