diff --git a/examples/deepzoom/example.json b/examples/deepzoom/example.json index da511a5670..a0991e4ee3 100644 --- a/examples/deepzoom/example.json +++ b/examples/deepzoom/example.json @@ -1,7 +1,14 @@ { - "title": "Deepzoom tiled image example", + "title": "Deep Zoom tiled image example", "exampleJs": ["main.js"], "about": { - "text": "Rendering a tiled image using the Deepzoom protocol." - } + "text": "Rendering a tiled image using the Deep Zoom protocol." + }, + "tests": [{ + "description": "data is loaded from the Deep Zoom server", + "idle": ["$('#map.geojs-map').data('data-geojs-map').onIdle"], + "tests": [ + "Object.keys($('#map.geojs-map').data('data-geojs-map').layers()[0]._activeTiles).length === 11" + ] + }] } diff --git a/examples/deepzoom/main.js b/examples/deepzoom/main.js index 4ee0b899c0..4701bfb801 100644 --- a/examples/deepzoom/main.js +++ b/examples/deepzoom/main.js @@ -1,63 +1,72 @@ /* globals utils */ -// Run after the DOM loads -$(function () { - 'use strict'; - - var query = utils.getQuery(); - - // custom tileLayer for deepzoom - var DeepZoom = function (arg) { - if (!(this instanceof DeepZoom)) { - return new DeepZoom(arg); - } - geo.tileLayer.call(this, arg); - - this._getTile = function (index, source) { - return geo.imageTile({ - index: index, - size: {x: this._options.tileWidth, y: this._options.tileHeight}, - queue: this._queue, - url: this._options.url(source || index) - }); - }; +// custom tileLayer for deepzoom +var DeepZoom = function (arg) { + if (!(this instanceof DeepZoom)) { + return new DeepZoom(arg); + } + geo.tileLayer.call(this, arg); + + this._getTile = function (index, source) { + return geo.imageTile({ + index: index, + size: { + x: this._options.tileWidth + this._options.tileOverlap.x * 2, + y: this._options.tileHeight + this._options.tileOverlap.y * 2 + }, + queue: this._queue, + url: this._options.url(source || index), + overlap: this._options.tileOverlap, + crossDomain: this._options.crossDomain + }); }; +}; +DeepZoom.defaults = $.extend({}, geo.tileLayer.defaults); +geo.inherit(DeepZoom, geo.tileLayer); +geo.registerLayer('deepzoom', DeepZoom); + +var query = utils.getQuery(); + +// You can specify a different Deep Zoom image via ?url=(url to dzi or xml) +var dzi_url = query.url || 'https://mars.nasa.gov/msl/multimedia/deepzoom/images/PIA19818/dzc_output.xml'; +var dzi_base = dzi_url.split('.').slice(0, -1).join('.') + '_files'; - // We know the size of the image we are requesting, and we want to use - // pixel coordinates on our map. - var sizeX = 103583, sizeY = 70014, tileSize = 256; +// Read the Deep Zoom image information. +$.get(dzi_url).then(function (dzi_info) { + // Parse the Deep Zoom image information to get the tile size, format, and + // image size. The actual tile images are (TileSize + 2 * Overlap) pixels in + // width and height. + var tileSize = +$('Image', dzi_info).attr('TileSize'), + tileOverlap = +$('Image', dzi_info).attr('Overlap') || 0, + format = $('Image', dzi_info).attr('Format'), + sizeX = +$('Image>Size', dzi_info).attr('Width'), + sizeY = +$('Image>Size', dzi_info).attr('Height'); + + // get some standard parameters for map and level in pixel-coordinate space var defaultParams = geo.util.pixelCoordinateParams( - '#map', sizeX, sizeY, tileSize, tileSize); - - DeepZoom.defaults = $.extend({}, geo.tileLayer.defaults, defaultParams.layer, { - levelOffset: 8, - url: function (index) { - return 'http://node15.cci.emory.edu/cgi-bin/iipsrv.fcgi?DeepZoom=/bigdata2/' + - 'PYRAMIDS/CDSA/ACC_Diagnostic/nationwidechildrens.org_ACC.diagnostic_images.' + - 'Level_1.304.4.0/TCGA-OR-A5J1-01Z-00-DX1.600C7D8C-F04C-4125-AF14-B1E76DC01A1E.' + - 'svs.dzi.tif_files/' + (index.level + 8) + '/' + index.x + '_' + index.y + '.jpg'; - } - }); - geo.inherit(DeepZoom, geo.tileLayer); - geo.registerLayer('tiledFish', DeepZoom); + '#map', sizeX, sizeY, tileSize, tileSize); + // Create a map object - var map = geo.map($.extend({}, defaultParams.map, { - node: '#map', - clampBoundsX: false, - clampBoundsY: false, - clampZoom: false, - zoom: 4 - })); - - // Add the osm layer with a custom tile url. - // We ask to use the quad.imageFixedScale feature, since the IIP server - // returns partial tiles at the right and bottom edges. If the tile server - // returns complete tiles that we need to crop, we would ask for the - // quad.imageCrop feature instead. + var map = geo.map(defaultParams.map); + map.createLayer( - 'tiledFish', { + 'deepzoom', $.extend({}, defaultParams.layer, { + // For testing, we can ask for a specific renderer renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined, - features: query.renderer ? undefined : ['quad.imageFixedScale'] - } + // We ask to use the quad.imageFixedScale feature, since the Deep Zoom + // server returns partial tiles at the right and bottom edges. If the + // tile server returned complete tiles that we need to crop, we would ask + // for the quad.imageCrop feature instead. + features: query.renderer ? undefined : ['quad.imageFixedScale'], + // Specify a custom url for tiles. Deep Zoom offsets the level by 8 + url: function (index) { + return dzi_base + '/' + (index.level + 8) + '/' + index.x + '_' + index.y + '.' + format; + }, + // Specify the tile overlap + tileOverlap: { + x: tileOverlap, + y: tileOverlap + } + }) ); }); diff --git a/examples/deepzoom/thumb.jpg b/examples/deepzoom/thumb.jpg index 8e9b58e8b1..a8717e031f 100644 Binary files a/examples/deepzoom/thumb.jpg and b/examples/deepzoom/thumb.jpg differ diff --git a/tests/headed-cases/examples.js b/tests/headed-cases/examples.js index a7866dc435..08209eabeb 100644 --- a/tests/headed-cases/examples.js +++ b/tests/headed-cases/examples.js @@ -80,13 +80,22 @@ describe('examples', function () { (test.idle || []).forEach(function (idleFunc) { var defer = ex$.Deferred(); deferreds.push(defer); - var idle = exampleWindow.eval(idleFunc); - if (!ex$.isFunction(idle)) { - idle = idle.then || idle.done; - } - idle(function () { - defer.resolve(); - }); + var interval; + interval = exampleWindow.setInterval(function () { + var idle; + try { + idle = exampleWindow.eval(idleFunc); + } catch (err) { } + if (idle) { + exampleWindow.clearInterval(interval); + if (!ex$.isFunction(idle)) { + idle = idle.then || idle.done; + } + idle(function () { + defer.resolve(); + }); + } + }, 10); }); (test.wait || []).forEach(function (waitCondition) { var defer = ex$.Deferred();