From 5b6a2f5873b9fe584e86c83065aefb27d7d22b8f Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 26 Feb 2013 10:19:48 -0500 Subject: [PATCH 1/6] basic implementation of issue #2 --- src/button.js | 4 +-- src/drawer.js | 4 +-- src/openseadragon.js | 67 +++++++++++++++++++++++++++++++++++++++++++- src/viewer.js | 18 ++++++------ 4 files changed, 79 insertions(+), 14 deletions(-) diff --git a/src/button.js b/src/button.js index a73e42c0..4b98faf3 100644 --- a/src/button.js +++ b/src/button.js @@ -242,9 +242,9 @@ $.extend( $.Button.prototype, $.EventHandler.prototype, { function scheduleFade( button ) { - window.setTimeout(function(){ + $.requestAnimationFrame(function(){ updateFade( button ); - }, 20 ); + }); } function updateFade( button ) { diff --git a/src/drawer.js b/src/drawer.js index ed9e588c..2fe5c4ba 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1018,9 +1018,9 @@ function finishLoadingImage( image, callback, successful, jobid ){ if ( jobid ) { window.clearTimeout( jobid ); } - window.setTimeout( function() { + $.requestAnimationFrame( function() { callback( image.src, successful ? image : null); - }, 1 ); + }); } diff --git a/src/openseadragon.js b/src/openseadragon.js index af41bf6a..d1a0e5a6 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -488,7 +488,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ zoomPerScroll: 1.2, zoomPerSecond: 2.0, animationTime: 1.5, - blendTime: 1.5, + blendTime: 1.0, alwaysBlend: false, autoHideControls: true, immediateRender: false, @@ -1679,6 +1679,71 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ }; + // Adding support for HTML5's requestAnimationFrame as suggested by acdha + // implementation taken from matt synders post here:s + // http://mattsnider.com/cross-browser-and-legacy-supported-requestframeanimation/ + (function( w ) { + + // most browsers have an implementation + w.requestAnimationFrame = w.requestAnimationFrame || + w.mozRequestAnimationFrame || + w.webkitRequestAnimationFrame || + w.msRequestAnimationFrame; + + w.cancelAnimationFrame = w.cancelAnimationFrame || + w.mozCancelAnimationFrame || + w.webkitCancelAnimationFrame || + w.msCancelAnimationFrame; + + + // polyfill, when necessary + if ( w.requestAnimationFrame ) { + //we cant assign $.requestAnimationFrame directly to $.requestAnimationFrame + //without getting Illegal Invocation errors in webkit so call in a + //wrapper + $.requestAnimationFrame = function( callback ){ + return w.requestAnimationFrame( callback ); + }; + $.cancelAnimationFrame = function( requestId ){ + return w.cancelAnimationFrame( requestId ); + }; + } else { + var aAnimQueue = [], + iRequestId = 0, + iIntervalId; + + // create a mock requestAnimationFrame function + $.requestAnimationFrame = function( callback ) { + aAnimQueue.push( [ ++iRequestId, callback ] ); + + if ( !iIntervalId ) { + iIntervalId = setInterval( function() { + if ( aAnimQueue.length ) { + aAnimQueue.shift( )[ 1 ](+new Date()); + } else { + // don't continue the interval, if unnecessary + clearInterval( iIntervalId ); + iIntervalId = undefined; + } + }, 1000 / 50); // estimating support for 50 frames per second + } + + return iRequestId; + }; + + // create a mock cancelAnimationFrame function + $.cancelAnimationFrame = function( requestId ) { + // find the request ID and remove it + for ( var i = 0, j = aAnimQueue.length; i < j; i += 1 ) { + if ( aAnimQueue[ i ][ 0 ] === requestId ) { + aAnimQueue.splice( i, 1 ); + return; + } + } + }; + } + })( window ); + /** * @private * @inner diff --git a/src/viewer.js b/src/viewer.js index bbcd2fd3..2a6cf9dc 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -234,9 +234,9 @@ $.Viewer = function( options ) { ); } - window.setTimeout( function(){ + $.requestAnimationFrame( function(){ beginControlsAutoHide( _this ); - }, 1 ); // initial fade out + } ); // initial fade out }; @@ -1079,9 +1079,9 @@ function scheduleUpdate( viewer, updateFunc, prevUpdateTime ){ deltaTime; if ( THIS[ viewer.hash ].animating ) { - return window.setTimeout( function(){ + return $.requestAnimationFrame( function(){ updateFunc( viewer ); - }, 1 ); + } ); } currentTime = +new Date(); @@ -1090,17 +1090,17 @@ function scheduleUpdate( viewer, updateFunc, prevUpdateTime ){ targetTime = prevUpdateTime + 1000 / 60; deltaTime = Math.max( 1, targetTime - currentTime ); - return window.setTimeout( function(){ + return $.requestAnimationFrame( function(){ updateFunc( viewer ); - }, deltaTime ); + } ); } //provides a sequence in the fade animation function scheduleControlsFade( viewer ) { - window.setTimeout( function(){ + $.requestAnimationFrame( function(){ updateControlsFade( viewer ); - }, 20); + }); } @@ -1394,7 +1394,7 @@ function endZooming() { function scheduleZoom( viewer ) { - window.setTimeout( $.delegate( viewer, doZoom ), 10 ); + $.requestAnimationFrame( $.delegate( viewer, doZoom ) ); } From 6d3ddd809576aca5611d998da10b38f1df8be2a0 Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 26 Feb 2013 16:52:05 -0500 Subject: [PATCH 2/6] by feel, best performance, changed immediateRender to true, springStiffness to 7 - issue #2 --- src/openseadragon.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index d1a0e5a6..5afc960a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -481,21 +481,21 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ maxZoomLevel: null, //UI RESPONSIVENESS AND FEEL - springStiffness: 5.0, + springStiffness: 7.0, clickTimeThreshold: 300, clickDistThreshold: 5, zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, animationTime: 1.5, - blendTime: 1.0, + blendTime: 0, alwaysBlend: false, - autoHideControls: true, - immediateRender: false, + immediateRender: true, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE preserveViewport: false, //SEQUENCE + autoHideControls: true, showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE From 807cdd337cb64fe312c662694be1a270e0918754 Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 26 Feb 2013 22:44:25 -0500 Subject: [PATCH 3/6] cant set blendTime to 0, causes strange behavior in navigator and lip tile sources. should have made the basic config changes in #2 and #3 in a diferent branch related to #4. will do before pulling --- src/openseadragon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 5afc960a..48525402 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -488,15 +488,15 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ zoomPerScroll: 1.2, zoomPerSecond: 2.0, animationTime: 1.5, - blendTime: 0, + blendTime: 0.5, alwaysBlend: false, immediateRender: true, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE preserveViewport: false, //SEQUENCE - autoHideControls: true, showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE + autoHideControls: true, controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY From 2819ff14e52b4187fd0e76a5561489d9e2fd25e4 Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 26 Feb 2013 23:23:48 -0500 Subject: [PATCH 4/6] reverting a couple changes to core openseadragon options unrelated to issue #2 . will explore these in #4 were they have already been referenced. --- src/openseadragon.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 48525402..35336f83 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -481,7 +481,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ maxZoomLevel: null, //UI RESPONSIVENESS AND FEEL - springStiffness: 7.0, + springStiffness: 5.0, clickTimeThreshold: 300, clickDistThreshold: 5, zoomPerClick: 2.0, @@ -490,17 +490,17 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ animationTime: 1.5, blendTime: 0.5, alwaysBlend: false, - immediateRender: true, + autoHideControls: true, + immediateRender: false, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE preserveViewport: false, //SEQUENCE showNavigationControl: true, //ZOOM/HOME/FULL/SEQUENCE - autoHideControls: true, controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY - + //VIEWPORT NAVIGATOR SETTINGS showNavigator: true, //promoted to default in 0.9.64 navigatorElement: null, From e56632c96fe71d27729856a4741525c8ca9d3076 Mon Sep 17 00:00:00 2001 From: thatcher Date: Thu, 28 Feb 2013 15:56:50 -0500 Subject: [PATCH 5/6] blendTime needs to be equal to animationTime to avoid blurred images --- src/openseadragon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 35336f83..85c88464 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -488,7 +488,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ zoomPerScroll: 1.2, zoomPerSecond: 2.0, animationTime: 1.5, - blendTime: 0.5, + blendTime: 1.5, alwaysBlend: false, autoHideControls: true, immediateRender: false, From b560a06c3087fa1749318c961306e399ba5c36a6 Mon Sep 17 00:00:00 2001 From: thatcher Date: Thu, 28 Feb 2013 16:19:04 -0500 Subject: [PATCH 6/6] correcting comment per ventero's review --- src/openseadragon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 85c88464..c70d7a7b 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -1698,7 +1698,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ // polyfill, when necessary if ( w.requestAnimationFrame ) { - //we cant assign $.requestAnimationFrame directly to $.requestAnimationFrame + //we cant assign window.requestAnimationFrame directly to $.requestAnimationFrame //without getting Illegal Invocation errors in webkit so call in a //wrapper $.requestAnimationFrame = function( callback ){