diff --git a/build.properties b/build.properties
index 4c235715..1406432c 100644
--- a/build.properties
+++ b/build.properties
@@ -6,7 +6,7 @@
PROJECT: openseadragon
BUILD_MAJOR: 0
BUILD_MINOR: 9
-BUILD_ID: 92
+BUILD_ID: 95
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
diff --git a/openseadragon.js b/openseadragon.js
index 3e624f55..c53f6d6f 100644
--- a/openseadragon.js
+++ b/openseadragon.js
@@ -6265,8 +6265,8 @@ $.TileSourceCollection = function( tileSize, tileSources, rows, layout ) {
options.width = ( options.tileSize ) * tilesPerRow;
options.height = ( options.tileSize ) * options.rows;
} else {
- options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
- options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+ options.height = ( options.tileSize ) * tilesPerRow;
+ options.width = ( options.tileSize ) * options.rows;
}
options.tileOverlap = -options.tileMargin;
@@ -7663,9 +7663,7 @@ $.Tile.prototype = {
*/
drawHTML: function( container ) {
- var position = this.position.apply( Math.floor ),
- size = this.size.apply( Math.ceil )
- containerSize = $.getElementSize( container );
+ var containerSize = $.getElementSize( container );
if ( !this.loaded || !this.image ) {
$.console.warn(
@@ -7675,6 +7673,7 @@ $.Tile.prototype = {
return;
}
+ /* EXISTING IMPLEMENTATION
if ( !this.element ) {
this.element = $.makeNeutralElement("img");
this.element.src = this.url;
@@ -7692,10 +7691,11 @@ $.Tile.prototype = {
this.style.left = position.x + "px";
this.style.height = size.y + "px";
this.style.width = size.x + "px";
+ */
//EXPERIMENTAL - trying to figure out how to scale the container
// content during animation of the container size.
- /*
+
if ( !this.element ) {
this.element = $.makeNeutralElement("div");
this.image = $.makeNeutralElement("img");
@@ -7708,14 +7708,16 @@ $.Tile.prototype = {
this.style = this.element.style;
this.style.position = "absolute";
}
- this.style.right = "0px";
- this.style.bottom = "0px";
- if ( size.y == containerSize.y || size.x == containerSize.x ){
- this.style.right = position.x + "px";
- this.style.bottom = position.y + "px";
- }
- */
- $.setElementOpacity( this.element, this.opacity );
+ if ( this.element.parentNode != container ) {
+ container.appendChild( this.element );
+ }
+
+ this.style.top = 100 * ( this.position.y / containerSize.y ) + "%";
+ this.style.left = 100 * ( this.position.x / containerSize.x ) + "%";
+ this.style.height = 100 * ( this.size.y / containerSize.y ) + "%";
+ this.style.width = 100 * ( this.size.x / containerSize.x ) + "%";
+
+ $.setElementOpacity( this.image, this.opacity );
},
@@ -7741,8 +7743,13 @@ $.Tile.prototype = {
context.save();
+ //if we are supposed to b rendering fully opaque rectangle,
+ //ie its done fading or fading is turned off, and if we are drawing
+ //an image with an alpha channel, then the only way
+ //to avoid seeing the tile underneath is to clear the rectangle
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
-
+ //clearing only the inside of the rectangle occupied
+ //by the png prevents edge flikering
context.clearRect(
position.x+1,
position.y+1,
@@ -8919,17 +8926,22 @@ function drawTiles( drawer, lastDrawn ){
//We dont actually 'draw' a collection tile, rather its used to house
//an overlay which does the drawing in its own viewport
if( drawer.viewport.collectionMode ){
+
tileKey = tile.x + '/' + tile.y;
viewport = drawer.viewport;
collectionTileSource = viewport.collectionTileSource;
+
if( !drawer.collectionOverlays[ tileKey ] ){
+
position = collectionTileSource.layout == 'horizontal' ?
- tile.x + ( tile.y * collectionTileSource.tilesPerRow ) :
- tile.y + ( tile.x * collectionTileSource.tilesPerRow ),
+ tile.y + ( tile.x * collectionTileSource.rows ) :
+ tile.x + ( tile.y * collectionTileSource.rows ),
+
tileSource = position < collectionTileSource.tileSources.length ?
collectionTileSource.tileSources[ position ] :
null;
- //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+
+ //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position);
if( tileSource ){
drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
element: $.makeNeutralElement( "div" ),
@@ -9120,10 +9132,10 @@ $.Viewport.prototype = {
this.contentSize = contentSize;
this.contentAspectX = this.contentSize.x / this.contentSize.y;
this.contentAspectY = this.contentSize.y / this.contentSize.x;
- this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectX );
- this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+ this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+ this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY);
- this.homeBounds = this.fitHeightBounds;
+ this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
return this;
},
@@ -9380,12 +9392,7 @@ $.Viewport.prototype = {
* @param {Boolean} immediately
*/
goHome: function( immediately ) {
- if( this.contentSize.x <= this.contentSize.y ){
- return this.fitVertically( immediately );
- } else {
- return this.fitHorizontally( immediately );
- }
- return this;
+ return this.fitBounds( this.homeBounds, immediately );
},
/**
@@ -9409,7 +9416,7 @@ $.Viewport.prototype = {
this.centerSpringY.update();
}
- this.fitBounds( this.homeBounds, immediately );
+ this.fitBounds( this.fitHeightBounds, immediately );
return this;
},
@@ -9434,7 +9441,7 @@ $.Viewport.prototype = {
this.centerSpringY.update();
}
- this.fitBounds( this.homeBounds, immediately );
+ this.fitBounds( this.fitWidthBounds, immediately );
return this;
},
diff --git a/src/drawer.js b/src/drawer.js
index 54aa6fca..26e7ecd3 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -971,17 +971,22 @@ function drawTiles( drawer, lastDrawn ){
//We dont actually 'draw' a collection tile, rather its used to house
//an overlay which does the drawing in its own viewport
if( drawer.viewport.collectionMode ){
+
tileKey = tile.x + '/' + tile.y;
viewport = drawer.viewport;
collectionTileSource = viewport.collectionTileSource;
+
if( !drawer.collectionOverlays[ tileKey ] ){
+
position = collectionTileSource.layout == 'horizontal' ?
- tile.x + ( tile.y * collectionTileSource.tilesPerRow ) :
- tile.y + ( tile.x * collectionTileSource.tilesPerRow ),
+ tile.y + ( tile.x * collectionTileSource.rows ) :
+ tile.x + ( tile.y * collectionTileSource.rows ),
+
tileSource = position < collectionTileSource.tileSources.length ?
collectionTileSource.tileSources[ position ] :
null;
- //$.console.log("Rendering collection tile [%s] %s", position, tileKey);
+
+ //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position);
if( tileSource ){
drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({
element: $.makeNeutralElement( "div" ),
diff --git a/src/tile.js b/src/tile.js
index 3e609f23..8b1b5b20 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -78,9 +78,7 @@ $.Tile.prototype = {
*/
drawHTML: function( container ) {
- var position = this.position.apply( Math.floor ),
- size = this.size.apply( Math.ceil )
- containerSize = $.getElementSize( container );
+ var containerSize = $.getElementSize( container );
if ( !this.loaded || !this.image ) {
$.console.warn(
@@ -90,6 +88,7 @@ $.Tile.prototype = {
return;
}
+ /* EXISTING IMPLEMENTATION
if ( !this.element ) {
this.element = $.makeNeutralElement("img");
this.element.src = this.url;
@@ -107,10 +106,11 @@ $.Tile.prototype = {
this.style.left = position.x + "px";
this.style.height = size.y + "px";
this.style.width = size.x + "px";
+ */
//EXPERIMENTAL - trying to figure out how to scale the container
// content during animation of the container size.
- /*
+
if ( !this.element ) {
this.element = $.makeNeutralElement("div");
this.image = $.makeNeutralElement("img");
@@ -123,14 +123,16 @@ $.Tile.prototype = {
this.style = this.element.style;
this.style.position = "absolute";
}
- this.style.right = "0px";
- this.style.bottom = "0px";
- if ( size.y == containerSize.y || size.x == containerSize.x ){
- this.style.right = position.x + "px";
- this.style.bottom = position.y + "px";
- }
- */
- $.setElementOpacity( this.element, this.opacity );
+ if ( this.element.parentNode != container ) {
+ container.appendChild( this.element );
+ }
+
+ this.style.top = 100 * ( this.position.y / containerSize.y ) + "%";
+ this.style.left = 100 * ( this.position.x / containerSize.x ) + "%";
+ this.style.height = 100 * ( this.size.y / containerSize.y ) + "%";
+ this.style.width = 100 * ( this.size.x / containerSize.x ) + "%";
+
+ $.setElementOpacity( this.image, this.opacity );
},
@@ -156,8 +158,13 @@ $.Tile.prototype = {
context.save();
+ //if we are supposed to b rendering fully opaque rectangle,
+ //ie its done fading or fading is turned off, and if we are drawing
+ //an image with an alpha channel, then the only way
+ //to avoid seeing the tile underneath is to clear the rectangle
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
-
+ //clearing only the inside of the rectangle occupied
+ //by the png prevents edge flikering
context.clearRect(
position.x+1,
position.y+1,
diff --git a/src/tilesourcecollection.js b/src/tilesourcecollection.js
index def1e571..2537321e 100644
--- a/src/tilesourcecollection.js
+++ b/src/tilesourcecollection.js
@@ -34,8 +34,8 @@ $.TileSourceCollection = function( tileSize, tileSources, rows, layout ) {
options.width = ( options.tileSize ) * tilesPerRow;
options.height = ( options.tileSize ) * options.rows;
} else {
- options.height = ( options.tileSize + ( options.tileMargin * 2 ) ) * tilesPerRow;
- options.width = ( options.tileSize + ( options.tileMargin * 2 ) ) * options.rows;
+ options.height = ( options.tileSize ) * tilesPerRow;
+ options.width = ( options.tileSize ) * options.rows;
}
options.tileOverlap = -options.tileMargin;
diff --git a/src/viewport.js b/src/viewport.js
index 9ecf5274..bb9179fd 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -74,10 +74,10 @@ $.Viewport.prototype = {
this.contentSize = contentSize;
this.contentAspectX = this.contentSize.x / this.contentSize.y;
this.contentAspectY = this.contentSize.y / this.contentSize.x;
- this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectX );
- this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+ this.fitWidthBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
+ this.fitHeightBounds = new $.Rect( 0, 0, this.contentAspectY, this.contentAspectY);
- this.homeBounds = this.fitHeightBounds;
+ this.homeBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
return this;
},
@@ -334,12 +334,7 @@ $.Viewport.prototype = {
* @param {Boolean} immediately
*/
goHome: function( immediately ) {
- if( this.contentSize.x <= this.contentSize.y ){
- return this.fitVertically( immediately );
- } else {
- return this.fitHorizontally( immediately );
- }
- return this;
+ return this.fitBounds( this.homeBounds, immediately );
},
/**
@@ -363,7 +358,7 @@ $.Viewport.prototype = {
this.centerSpringY.update();
}
- this.fitBounds( this.homeBounds, immediately );
+ this.fitBounds( this.fitHeightBounds, immediately );
return this;
},
@@ -388,7 +383,7 @@ $.Viewport.prototype = {
this.centerSpringY.update();
}
- this.fitBounds( this.homeBounds, immediately );
+ this.fitBounds( this.fitWidthBounds, immediately );
return this;
},
diff --git a/www/tilesource-collection.html b/www/tilesource-collection.html
index db6cc82d..da68e3a9 100644
--- a/www/tilesource-collection.html
+++ b/www/tilesource-collection.html
@@ -5,13 +5,11 @@
The image collection is a major hurdle for OpenSeadragon. It allows arbitrarily
large sets of tile sources, of mixed types, to be used to easily visualize the
group as 'wall' or 'grid'. Many core features are available for preview now, though
- they may change soon. Many additional features are under development.
+ the
</p>
<p>
- KNOWN ISSUE:<br/>
- This implementation does not support plain html rendering techniques, eg canvas
- is required for smooth, regular rendering. The plain html image rendering support,
- for IE and small mobile devices should be done soon.
+ No doubt this makes OpenSeadragon into a whole new platform for deepzoom
+ image visualization.
</p>
<div class="description">
@@ -22,15 +20,11 @@
</div>
<div class="demoarea">
<div class="demoheading">
- One row, mixed tile sources..
+ One row, horizontal..
</div>
<div id="example-tilesource-collection"
class="openseadragon" >
</div>
- <p>
- No doubt this makes OpenSeadragon into a whole new platform for deepzoom
- image visualization.
- </p>
<pre>
OpenSeadragon({
...
@@ -46,7 +40,7 @@ OpenSeadragon({
id: "example-tilesource-collection",
prefixUrl: "/openseadragon/images/",
debugMode: false, //if you want to see the render grid
-
+
collectionMode: true,
collectionRows: 1,
collectionTileSize: 1024,
@@ -66,13 +60,209 @@ OpenSeadragon({
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
- "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi"/*,
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
"/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",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
+ ]
+ });
+</script>
+
+
+
+
+<div class="description">
+ <h3>Two row tile source collection.</h3>
+ <p>
+ Multiple rows of tile sources visualized as a collection.
+ </p>
+</div>
+<div class="demoarea">
+ <div class="demoheading">
+ Two horizontal rows.
+ </div>
+ <div id="example-2row-tilesource-collection"
+ class="openseadragon" >
+ </div>
+ <p>
+
+ </p>
+<pre>
+OpenSeadragon({
+ ...
+ collectionMode: true,
+ collectionRows: 2,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+ ...
+});</pre>
+</div>
+<script type="text/javascript">
+ var viewer = OpenSeadragon({
+ id: "example-2row-tilesource-collection",
+ prefixUrl: "/openseadragon/images/",
+ debugMode: false, //if you want to see the render grid
+
+ collectionMode: true,
+ collectionRows: 2,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+
+ //collectionLayout: 'vertical',
+ //panVertical: false,
+ //panHorizontal: false,
+ //defaultZoomLevel: 1,
+
+ /*The wrap options can be fun to give a sense of infinite results*/
+ //wrapHorizontal: true,
+ //wrapVertical: true,
+
+ /*Tile sources can be mixed*/
+ 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"
+ ]
+ });
+</script>
+
+
+
+
+<div class="description">
+ <h3>Two colum tile source collection.</h3>
+ <p>
+ Multiple columns of tile sources visualized as a collection.
+ </p>
+</div>
+<div class="demoarea">
+ <div class="demoheading">
+ Two vertical columns.
+ </div>
+ <div id="example-2column-tilesource-collection"
+ class="openseadragon" >
+ </div>
+ <p>
+
+ </p>
+<pre>
+OpenSeadragon({
+ ...
+ collectionMode: true,
+ collectionRows: 2,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+ collectionLayout: 'vertical',
+ ...
+});</pre>
+</div>
+<script type="text/javascript">
+ var viewer = OpenSeadragon({
+ id: "example-2column-tilesource-collection",
+ prefixUrl: "/openseadragon/images/",
+ debugMode: false, //if you want to see the render grid
+
+ collectionMode: true,
+ collectionRows: 2,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+ collectionLayout: 'vertical',
+
+ //panVertical: false,
+ //panHorizontal: false,
+ //defaultZoomLevel: 1,
+
+ /*The wrap options can be fun to give a sense of infinite results*/
+ //wrapHorizontal: true,
+ //wrapVertical: true,
+
+ /*Tile sources can be mixed*/
+ 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"
+ ]
+ });
+</script>
+
+
+
+
+<div class="description">
+ <h3>Multirow, mixed tile source collection.</h3>
+ <p>
+ Multiple rows of mixed type tile sources visualized as a collection.
+ </p>
+</div>
+<div class="demoarea">
+ <div class="demoheading">
+ 3 rows, mixed tiles sources.
+ </div>
+ <div id="example-mixed-tilesource-collection"
+ class="openseadragon" >
+ </div>
+ <p>
+
+ </p>
+<pre>
+OpenSeadragon({
+ ...
+ collectionMode: true,
+ collectionRows: 3,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+ ...
+});</pre>
+</div>
+<script type="text/javascript">
+ var viewer = OpenSeadragon({
+ id: "example-mixed-tilesource-collection",
+ prefixUrl: "/openseadragon/images/",
+ debugMode: false, //if you want to see the render grid
+
+ collectionMode: true,
+ collectionRows: 3,
+ collectionTileSize: 1024,
+ collectionTileMargin: 256,
+ //collectionLayout: 'vertical',
+
+ //panVertical: false,
+ //panHorizontal: false,
+ //defaultZoomLevel: 1,
+
+ /*The wrap options can be fun to give a sense of infinite results*/
+ //wrapHorizontal: true,
+ //wrapVertical: true,
+
+ /*Tile sources can be mixed*/
+ tileSources: [
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
+ "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi",
{
type: 'legacy-image-pyramid',
levels: [{
@@ -233,7 +423,7 @@ OpenSeadragon({
width: 2970
}]
- }*//*,{
+ },{
type: 'legacy-image-pyramid',
levels: [{
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011q.jpg',
@@ -505,7 +695,6 @@ OpenSeadragon({
width: 2970
}]
- }*/]
+ }]
});
-</script>
-
+</script>
\ No newline at end of file
diff --git a/www/tilesource-custom.html b/www/tilesource-custom.html
index 5d7787b3..6a091c46 100644
--- a/www/tilesource-custom.html
+++ b/www/tilesource-custom.html
@@ -13,12 +13,6 @@
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>
@@ -36,7 +30,10 @@
class="openseadragon" >
</div>
<p>
- Below is a make believe minimal inline configuration. Note that the
+ Below is a minimal inline configuration which pull tiles from a NASA
+ Blue Marble tile set transformed into tiles hosted on Amazon S3 (
+ compliments of Michal Migurski
+ - see http://mike.teczno.com/notes/blue-marble-tiles.html ). Note that the
default tileSize is available as a property of the tile source.
</p>
<pre>
@@ -84,8 +81,11 @@
style='background-color:#aaa'>
</div>
<p>
- Below is a make believe minimal inline configuration. Note that the
- default tileSize is available as a property of the tile source.
+ Here is another inline example which makes use of a tile set
+ created by Aaron Straup Cope ( see http://shapetiles.spum.org/about/ )
+ which provide a visualization of geotagged Flikr photos. Note in this
+ case we set blendTime to zero since png with alpha channel (transparency)
+ can look unusual during blending.
</p>
<pre>
OpenSeadragon({