update drawerperformance demo

test/demo/drawerperformance.js

@@ -15,6 +15,622 @@ const labels = {
 }
 let viewer;
 
+( function () {
+
+    // prepare base perf object
+    if ( typeof window.performance === 'undefined' ) {
+        window.performance = {};
+    }
+
+    if ( !window.performance.now ) {
+
+        var nowOffset = Date.now();
+
+        if ( performance.timing && performance.timing.navigationStart ) {
+            nowOffset = performance.timing.navigationStart;
+        }
+
+        window.performance.now = function now () {
+            return Date.now() - nowOffset;
+        };
+
+    }
+
+    if( !window.performance.mark ) {
+        window.performance.mark = function(){}
+    }
+
+    if( !window.performance.measure ) {
+        window.performance.measure = function(){}
+    }
+
+} )();
+
+/**
+ * @class rStats
+ * @param {rStats~Settings} [settings] Settings for the rStats instance.
+ */
+
+/**
+ * @typedef {Object} rStats~Settings
+ * @property {Array.<String>} [colours] An array of CSS colour values.
+ * @property {String} [CSSPath=''] Base URL where rStats.css is located.
+ * @property {Array.<String>} [css] URLs of CSS or font files to import.
+ * @property {Object.<String, rStats~CounterProperties>} [values] Properties to use for each counter.
+ * @property {Array.<Object>} [groups] Define groups of counters.
+ * @property {Array.<Object>} [fractions] Define stacked counters.
+ * @property {Array.<Object>} [plugins] Additional plugins.
+ */
+
+/**
+ * @typedef {Object} rStats~CounterProperties
+ * @property {String} [caption] Caption for this counter.
+ * @property {Boolean} [average=false] Whether the values should be averaged.
+ * @property {Number} [avgMs=1000] Duration for which the values should be averaged.
+ * @property {Number} [below] Value below which the graph should be highlighted.
+ * @property {Number} [over] Value over which the graph should be highlighted.
+ * @property {Boolean} [interpolate=true] Whether framerate should be interpolated.
+ */
+
+function rStats ( settings ) {
+
+    function iterateKeys ( array, callback ) {
+        var keys = Object.keys( array );
+        for ( var j = 0, l = keys.length; j < l; j++ ) {
+            callback( keys[ j ] );
+        }
+    }
+
+    function importCSS ( url ) {
+
+        var element = document.createElement( 'link' );
+        element.href = url;
+        element.rel = 'stylesheet';
+        element.type = 'text/css';
+        document.getElementsByTagName( 'head' )[ 0 ].appendChild( element );
+
+    }
+
+    var _settings = settings || {};
+    var _colours = _settings.colours || [ '#850700', '#c74900', '#fcb300', '#284280', '#4c7c0c' ];
+
+    var _cssFont = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300';
+    var _cssRStats = ( _settings.CSSPath ? _settings.CSSPath : '' ) + 'rStats.css';
+
+    var _css = _settings.css || [ _cssFont, _cssRStats ];
+    _css.forEach(function (uri) {
+        importCSS( uri );
+    });
+
+    if ( !_settings.values ) _settings.values = {};
+
+    var _base, _div, _elHeight = 10, _elWidth = 200;
+    var _perfCounters = {};
+
+
+    function Graph ( _dom, _id, _defArg ) {
+
+        var _def = _defArg || {};
+        var _canvas = document.createElement( 'canvas' ),
+            _ctx = _canvas.getContext( '2d' ),
+            _max = 0,
+            _current = 0;
+
+        var c = _def.color ? _def.color : '#666666';
+
+        var _dotCanvas = document.createElement( 'canvas' ),
+            _dotCtx = _dotCanvas.getContext( '2d' );
+        _dotCanvas.width = 1;
+        _dotCanvas.height = 2 * _elHeight;
+        _dotCtx.fillStyle = '#444444';
+        _dotCtx.fillRect( 0, 0, 1, 2 * _elHeight );
+        _dotCtx.fillStyle = c;
+        _dotCtx.fillRect( 0, _elHeight, 1, _elHeight );
+        _dotCtx.fillStyle = '#ffffff';
+        _dotCtx.globalAlpha = 0.5;
+        _dotCtx.fillRect( 0, _elHeight, 1, 1 );
+        _dotCtx.globalAlpha = 1;
+
+        var _alarmCanvas = document.createElement( 'canvas' ),
+            _alarmCtx = _alarmCanvas.getContext( '2d' );
+        _alarmCanvas.width = 1;
+        _alarmCanvas.height = 2 * _elHeight;
+        _alarmCtx.fillStyle = '#444444';
+        _alarmCtx.fillRect( 0, 0, 1, 2 * _elHeight );
+        _alarmCtx.fillStyle = '#b70000';
+        _alarmCtx.fillRect( 0, _elHeight, 1, _elHeight );
+        _alarmCtx.globalAlpha = 0.5;
+        _alarmCtx.fillStyle = '#ffffff';
+        _alarmCtx.fillRect( 0, _elHeight, 1, 1 );
+        _alarmCtx.globalAlpha = 1;
+
+        function _init () {
+
+            _canvas.width = _elWidth;
+            _canvas.height = _elHeight;
+            _canvas.style.width = _canvas.width + 'px';
+            _canvas.style.height = _canvas.height + 'px';
+            _canvas.className = 'rs-canvas';
+            _dom.appendChild( _canvas );
+
+            _ctx.fillStyle = '#444444';
+            _ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
+
+        }
+
+        function _draw ( v, alarm ) {
+            _current += ( v - _current ) * 0.1;
+            _max *= 0.99;
+            if ( _current > _max ) _max = _current;
+            _ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
+            if ( alarm ) {
+                _ctx.drawImage( _alarmCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
+            } else {
+                _ctx.drawImage( _dotCanvas, _canvas.width - 1, _canvas.height - _current * _canvas.height / _max - _elHeight );
+            }
+        }
+
+        _init();
+
+        return {
+            draw: _draw
+        };
+
+    }
+
+    function StackGraph ( _dom, _num ) {
+
+        var _canvas = document.createElement( 'canvas' ),
+            _ctx = _canvas.getContext( '2d' );
+
+        function _init () {
+
+            _canvas.width = _elWidth;
+            _canvas.height = _elHeight * _num;
+            _canvas.style.width = _canvas.width + 'px';
+            _canvas.style.height = _canvas.height + 'px';
+            _canvas.className = 'rs-canvas';
+            _dom.appendChild( _canvas );
+
+            _ctx.fillStyle = '#444444';
+            _ctx.fillRect( 0, 0, _canvas.width, _canvas.height );
+
+        }
+
+        function _draw ( v ) {
+            _ctx.drawImage( _canvas, 1, 0, _canvas.width - 1, _canvas.height, 0, 0, _canvas.width - 1, _canvas.height );
+            var th = 0;
+            iterateKeys( v, function ( j ) {
+                var h = v[ j ] * _canvas.height;
+                _ctx.fillStyle = _colours[ j ];
+                _ctx.fillRect( _canvas.width - 1, th, 1, h );
+                th += h;
+            } );
+        }
+
+        _init();
+
+        return {
+            draw: _draw
+        };
+
+    }
+
+    function PerfCounter ( id, group ) {
+
+        var _id = id,
+            _time,
+            _value = 0,
+            _total = 0,
+            _averageValue = 0,
+            _accumValue = 0,
+            _accumStart = performance.now(),
+            _accumSamples = 0,
+            _dom = document.createElement( 'div' ),
+            _spanId = document.createElement( 'span' ),
+            _spanValue = document.createElement( 'div' ),
+            _spanValueText = document.createTextNode( '' ),
+            _def = _settings ? _settings.values[ _id.toLowerCase() ] : null,
+            _graph = new Graph( _dom, _id, _def ),
+            _started = false;
+
+        _spanId.className = 'rs-counter-id';
+        _spanId.textContent = ( _def && _def.caption ) ? _def.caption : _id;
+
+        _spanValue.className = 'rs-counter-value';
+        _spanValue.appendChild( _spanValueText );
+
+        _dom.appendChild( _spanId );
+        _dom.appendChild( _spanValue );
+        if ( group ) group.div.appendChild( _dom );
+        else _div.appendChild( _dom );
+
+        _time = performance.now();
+
+        function _average ( v ) {
+            if ( _def && _def.average ) {
+                _accumValue += v;
+                _accumSamples++;
+                var t = performance.now();
+                if ( t - _accumStart >= ( _def.avgMs || 1000 ) ) {
+                    _averageValue = _accumValue / _accumSamples;
+                    _accumValue = 0;
+                    _accumStart = t;
+                    _accumSamples = 0;
+                }
+            }
+        }
+
+        function _start () {
+            _time = performance.now();
+            if( _settings.userTimingAPI ) performance.mark( _id + '-start' );
+            _started = true;
+        }
+
+        function _end () {
+            _value = performance.now() - _time;
+            if( _settings.userTimingAPI ) {
+                performance.mark( _id + '-end' );
+                if( _started ) {
+                    performance.measure( _id, _id + '-start', _id + '-end' );
+                }
+            }
+            _average( _value );
+        }
+
+        function _tick () {
+            _end();
+            _start();
+        }
+
+        function _draw () {
+            var v = ( _def && _def.average ) ? _averageValue : _value;
+            _spanValueText.nodeValue = Math.round( v * 100 ) / 100;
+            var a = ( _def && ( ( _def.below && _value < _def.below ) || ( _def.over && _value > _def.over ) ) );
+            _graph.draw( _value, a );
+            _dom.className = a ? 'rs-counter-base alarm' : 'rs-counter-base';
+
+        }
+
+        function _frame () {
+            var t = performance.now();
+            var e = t - _time;
+            _total++;
+            if ( e > 1000 ) {
+                if ( _def && _def.interpolate === false ) {
+                    _value = _total;
+                } else {
+                    _value = _total * 1000 / e;
+                }
+                _total = 0;
+                _time = t;
+                _average( _value );
+            }
+        }
+
+        function _set ( v ) {
+            _value = v;
+            _average( _value );
+        }
+
+        return {
+            set: _set,
+            start: _start,
+            tick: _tick,
+            end: _end,
+            frame: _frame,
+            value: function () {
+                return _value;
+            },
+            draw: _draw
+        };
+
+    }
+
+    function sample () {
+
+        var _value = 0;
+
+        function _set ( v ) {
+            _value = v;
+        }
+
+        return {
+            set: _set,
+            value: function () {
+                return _value;
+            }
+        };
+
+    }
+
+    function _perf ( idArg ) {
+
+        var id = idArg.toLowerCase();
+        if ( id === undefined ) id = 'default';
+        if ( _perfCounters[ id ] ) return _perfCounters[ id ];
+
+        var group = null;
+        if ( _settings && _settings.groups ) {
+            iterateKeys( _settings.groups, function ( j ) {
+                var g = _settings.groups[ parseInt( j, 10 ) ];
+                if ( !group && g.values.indexOf( id.toLowerCase() ) !== -1 ) {
+                    group = g;
+                }
+            } );
+        }
+
+        var p = new PerfCounter( id, group );
+        _perfCounters[ id ] = p;
+        return p;
+
+    }
+
+    function _init () {
+
+        if ( _settings.plugins ) {
+            if ( !_settings.values ) _settings.values = {};
+            if ( !_settings.groups ) _settings.groups = [];
+            if ( !_settings.fractions ) _settings.fractions = [];
+            for ( var j = 0; j < _settings.plugins.length; j++ ) {
+                _settings.plugins[ j ].attach( _perf );
+                iterateKeys( _settings.plugins[ j ].values, function ( k ) {
+                    _settings.values[ k ] = _settings.plugins[ j ].values[ k ];
+                } );
+                _settings.groups = _settings.groups.concat( _settings.plugins[ j ].groups );
+                _settings.fractions = _settings.fractions.concat( _settings.plugins[ j ].fractions );
+            }
+        } else {
+            _settings.plugins = {};
+        }
+
+        _base = document.createElement( 'div' );
+        _base.className = 'rs-base';
+        _div = document.createElement( 'div' );
+        _div.className = 'rs-container';
+        _div.style.height = 'auto';
+        _base.appendChild( _div );
+        document.body.appendChild( _base );
+
+        if ( !_settings ) return;
+
+        if ( _settings.groups ) {
+            iterateKeys( _settings.groups, function ( j ) {
+                var g = _settings.groups[ parseInt( j, 10 ) ];
+                var div = document.createElement( 'div' );
+                div.className = 'rs-group';
+                g.div = div;
+                var h1 = document.createElement( 'h1' );
+                h1.textContent = g.caption;
+                h1.addEventListener( 'click', function ( e ) {
+                    this.classList.toggle( 'hidden' );
+                    e.preventDefault();
+                }.bind( div ) );
+                _div.appendChild( h1 );
+                _div.appendChild( div );
+            } );
+        }
+
+        if ( _settings.fractions ) {
+            iterateKeys( _settings.fractions, function ( j ) {
+                var f = _settings.fractions[ parseInt( j, 10 ) ];
+                var div = document.createElement( 'div' );
+                div.className = 'rs-fraction';
+                var legend = document.createElement( 'div' );
+                legend.className = 'rs-legend';
+
+                var h = 0;
+                iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
+                    var p = document.createElement( 'p' );
+                    p.textContent = _settings.fractions[ j ].steps[ k ];
+                    p.style.color = _colours[ h ];
+                    legend.appendChild( p );
+                    h++;
+                } );
+                div.appendChild( legend );
+                div.style.height = h * _elHeight + 'px';
+                f.div = div;
+                var graph = new StackGraph( div, h );
+                f.graph = graph;
+                _div.appendChild( div );
+            } );
+        }
+
+    }
+
+    function _update () {
+
+        iterateKeys( _settings.plugins, function ( j ) {
+            _settings.plugins[ j ].update();
+        } );
+
+        iterateKeys( _perfCounters, function ( j ) {
+            _perfCounters[ j ].draw();
+        } );
+
+        if ( _settings && _settings.fractions ) {
+            iterateKeys( _settings.fractions, function ( j ) {
+                var f = _settings.fractions[ parseInt( j, 10 ) ];
+                var v = [];
+                var base = _perfCounters[ f.base.toLowerCase() ];
+                if ( base ) {
+                    base = base.value();
+                    iterateKeys( _settings.fractions[ j ].steps, function ( k ) {
+                        var s = _settings.fractions[ j ].steps[ parseInt( k, 10 ) ].toLowerCase();
+                        var val = _perfCounters[ s ];
+                        if ( val ) {
+                            v.push( val.value() / base );
+                        }
+                    } );
+                }
+                f.graph.draw( v );
+            } );
+        }
+
+        /*if( _height != _div.clientHeight ) {
+            _height = _div.clientHeight;
+            _base.style.height = _height + 2 * _elHeight + 'px';
+        console.log( _base.clientHeight );
+        }*/
+
+    }
+
+    _init();
+
+    return function ( id ) {
+        if ( id ) return _perf( id );
+        return {
+            element: _base,
+            update: _update
+        };
+    };
+
+}
+
+var glStats = function() {
+
+    var _rS = null;
+
+    var _totalDrawArraysCalls = 0,
+        _totalDrawElementsCalls = 0,
+        _totalUseProgramCalls = 0,
+        _totalFaces = 0,
+        _totalVertices = 0,
+        _totalPoints = 0,
+        _totalBindTexures = 0;
+
+        function _h( f, c ) {
+            return function() {
+                c.apply( this, arguments );
+                f.apply( this, arguments );
+            }
+        }
+    WebGLRenderingContext.prototype.drawArrays = _h( WebGLRenderingContext.prototype.drawArrays, function() {
+        _totalDrawArraysCalls++;
+        if( arguments[ 0 ] == this.POINTS ) _totalPoints += arguments[ 2 ];
+        else _totalVertices += arguments[ 2 ];
+    } );
+
+    WebGLRenderingContext.prototype.drawElements = _h( WebGLRenderingContext.prototype.drawElements, function() {
+        _totalDrawElementsCalls++;
+        _totalFaces += arguments[ 1 ] / 3;
+        _totalVertices += arguments[ 1 ];
+    } );
+
+    WebGLRenderingContext.prototype.useProgram = _h( WebGLRenderingContext.prototype.useProgram, function() {
+        _totalUseProgramCalls++;
+    } );
+
+    WebGLRenderingContext.prototype.bindTexture = _h( WebGLRenderingContext.prototype.bindTexture, function() {
+        _totalBindTexures++;
+    } );
+
+    var _values = {
+        allcalls: { over: 3000, caption: 'Calls (hook)' },
+        drawelements: { caption: 'drawElements (hook)' },
+        drawarrays: { caption: 'drawArrays (hook)' },
+    };
+
+    var _groups = [
+        { caption: 'WebGL', values: [ 'allcalls', 'drawelements', 'drawarrays', 'useprogram', 'bindtexture', 'glfaces', 'glvertices', 'glpoints' ] }
+    ];
+
+    var _fractions = [
+        { base: 'allcalls', steps: [ 'drawelements', 'drawarrays' ] }
+    ];
+
+    function _update() {
+        _rS( 'allcalls' ).set( _totalDrawArraysCalls + _totalDrawElementsCalls );
+        _rS( 'drawElements' ).set( _totalDrawElementsCalls );
+        _rS( 'drawArrays' ).set( _totalDrawArraysCalls );
+        _rS( 'bindTexture' ).set( _totalBindTexures );
+        _rS( 'useProgram' ).set( _totalUseProgramCalls );
+        _rS( 'glfaces' ).set( _totalFaces );
+        _rS( 'glvertices' ).set( _totalVertices );
+        _rS( 'glpoints' ).set( _totalPoints );
+    }
+
+    function _start() {
+        _totalDrawArraysCalls = 0;
+        _totalDrawElementsCalls = 0;
+        _totalUseProgramCalls = 0;
+        _totalFaces = 0;
+        _totalVertices = 0;
+        _totalPoints = 0;
+        _totalBindTexures = 0;
+    }
+
+    function _end() {}
+
+    function _attach( r ) {
+        _rS = r;
+    }
+
+    return {
+        update: _update,
+        start: _start,
+        end: _end,
+        attach: _attach,
+        values: _values,
+        groups: _groups,
+        fractions: _fractions
+    }
+
+}
+
+var threeStats = function( renderer ) {
+
+    var _rS = null;
+
+    var _values = {
+        'renderer.info.memory.geometries': { caption: 'Geometries' },
+        'renderer.info.memory.textures': { caption: 'Textures' },
+        'renderer.info.memory.programs': { caption: 'Programs' },
+        'renderer.info.render.calls': { caption: 'Calls' },
+        'renderer.info.render.faces': { caption: 'Faces', over: 1000 },
+        'renderer.info.render.points': { caption: 'Points' },
+        'renderer.info.render.vertices': { caption: 'Vertices' }
+    };
+
+    var _groups = [
+        { caption: 'Three.js - memory', values: [ 'renderer.info.memory.geometries', 'renderer.info.memory.programs', 'renderer.info.memory.textures' ] },
+        { caption: 'Three.js - render', values: [ 'renderer.info.render.calls', 'renderer.info.render.faces', 'renderer.info.render.points', 'renderer.info.render.vertices' ] }
+    ];
+
+    var _fractions = [];
+
+    function _update() {
+
+        _rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
+        _rS( 'renderer.info.memory.programs' ).set( renderer.info.memory.programs );
+        _rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
+        _rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
+        _rS( 'renderer.info.render.faces' ).set( renderer.info.render.faces );
+        _rS( 'renderer.info.render.points' ).set( renderer.info.render.points );
+        _rS( 'renderer.info.render.vertices' ).set( renderer.info.render.vertices );
+
+    }
+
+    function _start() {}
+
+    function _end() {}
+
+    function _attach( r ) {
+        _rS = r;
+    }
+
+    return {
+        update: _update,
+        start: _start,
+        end: _end,
+        attach: _attach,
+        values: _values,
+        groups: _groups,
+        fractions: _fractions
+    }
+
+}
+
 /**
  * based on https://github.com/mrdoob/stats.js/ by @author mrdoob / http://mrdoob.com/
  */
@@ -191,51 +807,84 @@ Stats.Panel = function ( name, fg, bg ) {
 };
 
 
-(function(){
+    // let fpscontainer = $('<div>',{style:'position:fixed;top:0;left:0;'}).appendTo('body');
+    // let labels=$('<div>',{style:'display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;'}).appendTo(fpscontainer);
+    // $('<label>').text('FPS').appendTo(labels);
+    // $('<label>').text('Update (ms)').appendTo(labels);
+    // $('<label>').text('Draw (ms)').appendTo(labels);
+    // var statsFPS=new Stats();
+    // statsFPS.begin();
+    // $(statsFPS.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
+    // requestAnimationFrame(function loop(){statsFPS.update();requestAnimationFrame(loop)});
 
+    // var statsUpdate=new Stats();
+    // $(statsUpdate.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
+    // statsUpdate.showPanel(2);
 
-    let fpscontainer = $('<div>',{style:'position:fixed;top:0;left:0;'}).appendTo('body');
+    // var statsDraw=new Stats();
-    let labels=$('<div>',{style:'display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;'}).appendTo(fpscontainer);
+    // $(statsDraw.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
-    $('<label>').text('FPS').appendTo(labels);
+    // statsDraw.showPanel(2);
-    $('<label>').text('Update (ms)').appendTo(labels);
-    $('<label>').text('Draw (ms)').appendTo(labels);
-    var statsFPS=new Stats();
-    statsFPS.begin();
-    $(statsFPS.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
-    requestAnimationFrame(function loop(){statsFPS.update();requestAnimationFrame(loop)});
-
-    var statsUpdate=new Stats();
-    $(statsUpdate.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
-    statsUpdate.showPanel(2);
-
-    var statsDraw=new Stats();
-    $(statsDraw.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
-    statsDraw.showPanel(2);
 
     let origUpdate = OpenSeadragon.World.prototype.update;
     let origDraw = OpenSeadragon.World.prototype.draw;
 
+    let glS = new glStats();
+    let rS = new rStats( {
+        values: {
+            frame: { caption: 'Total frame time (ms)', over: 16 },
+            fps: { caption: 'Framerate (FPS)', below: 30 },
+            raf: { caption: 'Time since last rAF (ms)' },
+            rstats: { caption: 'rStats update (ms)' }
+        },
+        groups: [
+            { caption: 'Framerate', values: [ 'fps', 'raf' ] },
+            { caption: 'Frame Budget', values: [ 'frame', 'update','draw','other'] }
+        ],
+        fractions: [
+            { base: 'frame', steps: [ 'update', 'draw', 'other' ] }
+        ],
+        plugins: [
+            // tS,
+            glS
+        ]
+    } );
+
     OpenSeadragon.World.prototype.update = function(){
-        statsUpdate.begin();
+        // statsUpdate.begin();
+        rS( 'frame' ).end();
+        rS('other').end();
+        rS( 'frame' ).start();
+        glS.start();
+
+        rS( 'rAF' ).tick();
+        rS( 'FPS' ).frame();
+        rS('update').start();
         origUpdate.call(this, ...arguments);
-        statsUpdate.end();
+        // statsUpdate.end();
+        rS('update').end();
     };
 
     OpenSeadragon.World.prototype.draw = function(){
-        statsDraw.begin();
+        // statsDraw.begin();
+        rS('draw').start();
         origDraw.call(this, ...arguments);
-        statsDraw.end();
+        // statsDraw.end();
+        rS('draw').end();
+        rS('other').start();
+        rS().update();
     }
 
-})();
+// })();
 
 
 $('#create-drawer').on('click',function(){
     let drawerType = $('#select-drawer').val();
     let num = Math.floor($('#input-number').val());
+    rS('other').start();
     run(drawerType, num);
 });
 
+
 function run(drawerType, num) {
     if(viewer){
         viewer.destroy();
@@ -254,13 +903,17 @@ function run(drawerType, num) {
             opacity: (i % 3) === 0 ? 0.4 : 1
         });
     });
+    window.setTimeout(()=>viewer.viewport.goHome(), 500);
 
     let movingLeft = false;
-    window.setInterval(()=>{
+    if(window.interval){
+        window.clearInterval(window.interval);
+    }
+    window.interval = window.setInterval(()=>{
         let m = movingLeft ? 1 : -1;
         movingLeft = m === -1;
         let dist = viewer.viewport.getBounds().width;
-        viewer.viewport.panBy(new OpenSeadragon.Point( dist * m/4, 0));
+        viewer.viewport.panBy(new OpenSeadragon.Point( dist * m/40, 0));
 
     }, 1000);
 }

test/demo/rstats.css

@@ -0,0 +1,87 @@
+.alarm{
+    color: #b70000;
+    text-shadow: 0 0 0 #b70000,
+                 0 0 1px #fff,
+                 0 0 1px #fff,
+                 0 0 2px #fff,
+                 0 0 2px #fff,
+                 0 0 3px #fff,
+                 0 0 3px #fff,
+                 0 0 4px #fff,
+                 0 0 4px #fff;
+}
+
+.rs-base{
+    position: absolute;
+    z-index: 10000;
+    padding: 10px;
+    background-color: #222;
+    font-size: 10px;
+    line-height: 1.2em;
+    width: 350px;
+    font-family: 'Roboto Condensed', tahoma, sans-serif;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    color:white;
+}
+
+.rs-base h1{
+    margin: 0;
+    padding: 0;
+    font-size: 1.4em;
+    color: #fff;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+.rs-base div.rs-group{
+    margin-bottom: 10px;
+}
+
+.rs-base div.rs-group.hidden{
+    display: none;
+}
+
+.rs-base div.rs-fraction{
+    position: relative;
+    margin-bottom: 5px;
+}
+
+.rs-base div.rs-fraction p{
+    width: 120px;
+    text-align: right;
+    margin: 0;
+    padding: 0;
+}
+
+.rs-base div.rs-legend{
+    position: absolute;
+    line-height: 1em;
+}
+
+.rs-base div.rs-counter-base{
+    position: relative;
+    margin: 2px 0;
+    height: 1em;
+}
+
+.rs-base span.rs-counter-id{
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.rs-base div.rs-counter-value{
+    position: absolute;
+    left: 90px;
+    width: 30px;
+    height: 1em;
+    top: 0;
+    text-align: right;
+}
+
+.rs-base canvas.rs-canvas{
+    position: absolute;
+    right: 0;
+}

test/demo/webgldemodrawer.js

@@ -37,92 +37,6 @@
 
 (function( $ ){
 
-    // internal class Mat3: implements matrix operations
-    // Modified from https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html
-   class Mat3{
-       constructor(values){
-           if(!values) {
-               values = [
-                   0, 0, 0,
-                   0, 0, 0,
-                   0, 0, 0
-               ];
-           }
-
-           this.values = values;
-       }
-
-       static makeIdentity(){
-           return new Mat3([
-               1, 0, 0,
-               0, 1, 0,
-               0, 0, 1
-           ]);
-       }
-
-       static makeTranslation(tx, ty) {
-           return new Mat3([
-               1, 0, 0,
-               0, 1, 0,
-               tx, ty, 1,
-           ]);
-       }
-
-       static makeRotation(angleInRadians) {
-           var c = Math.cos(angleInRadians);
-           var s = Math.sin(angleInRadians);
-           return new Mat3([
-               c, -s, 0,
-               s, c, 0,
-               0, 0, 1,
-           ]);
-       }
-
-       static makeScaling(sx, sy) {
-           return new Mat3([
-               sx, 0, 0,
-               0, sy, 0,
-               0, 0, 1,
-           ]);
-       }
-
-       multiply(other) {
-           let a = this.values;
-           let b = other.values;
-
-           var a00 = a[0 * 3 + 0];
-           var a01 = a[0 * 3 + 1];
-           var a02 = a[0 * 3 + 2];
-           var a10 = a[1 * 3 + 0];
-           var a11 = a[1 * 3 + 1];
-           var a12 = a[1 * 3 + 2];
-           var a20 = a[2 * 3 + 0];
-           var a21 = a[2 * 3 + 1];
-           var a22 = a[2 * 3 + 2];
-           var b00 = b[0 * 3 + 0];
-           var b01 = b[0 * 3 + 1];
-           var b02 = b[0 * 3 + 2];
-           var b10 = b[1 * 3 + 0];
-           var b11 = b[1 * 3 + 1];
-           var b12 = b[1 * 3 + 2];
-           var b20 = b[2 * 3 + 0];
-           var b21 = b[2 * 3 + 1];
-           var b22 = b[2 * 3 + 2];
-           return new Mat3([
-               b00 * a00 + b01 * a10 + b02 * a20,
-               b00 * a01 + b01 * a11 + b02 * a21,
-               b00 * a02 + b01 * a12 + b02 * a22,
-               b10 * a00 + b11 * a10 + b12 * a20,
-               b10 * a01 + b11 * a11 + b12 * a21,
-               b10 * a02 + b11 * a12 + b12 * a22,
-               b20 * a00 + b21 * a10 + b22 * a20,
-               b20 * a01 + b21 * a11 + b22 * a21,
-               b20 * a02 + b21 * a12 + b22 * a22,
-           ]);
-       }
-
-   }
-
     /**
      * @class WebGLDrawer
      * @memberof OpenSeadragon
@@ -279,9 +193,9 @@
 
              let flipMultiplier = this.viewport.flipped ? -1 : 1;
              // calculate view matrix for viewer
-            let posMatrix = Mat3.makeTranslation(-viewport.center.x, -viewport.center.y);
+             let posMatrix = $.Mat3.makeTranslation(-viewport.center.x, -viewport.center.y);
-            let scaleMatrix = Mat3.makeScaling(2 / viewport.bounds.width * flipMultiplier, -2 / viewport.bounds.height);
+             let scaleMatrix = $.Mat3.makeScaling(2 / viewport.bounds.width * flipMultiplier, -2 / viewport.bounds.height);
-            let rotMatrix = Mat3.makeRotation(-viewport.rotation);
+             let rotMatrix = $.Mat3.makeRotation(-viewport.rotation);
              let viewMatrix = scaleMatrix.multiply(rotMatrix).multiply(posMatrix);
 
              gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -345,10 +259,10 @@
                  let imageRotation = tiledImage.getRotation(true);
                  // if needed, handle the tiledImage being rotated
                  if( imageRotation % 360 !== 0){
-                    let imageRotationMatrix = Mat3.makeRotation(-imageRotation * Math.PI / 180);
+                     let imageRotationMatrix = $.Mat3.makeRotation(-imageRotation * Math.PI / 180);
                      let imageCenter = tiledImage.getBoundsNoRotate(true).getCenter();
-                    let t1 = Mat3.makeTranslation(imageCenter.x, imageCenter.y);
+                     let t1 = $.Mat3.makeTranslation(imageCenter.x, imageCenter.y);
-                    let t2 = Mat3.makeTranslation(-imageCenter.x, -imageCenter.y);
+                     let t2 = $.Mat3.makeTranslation(-imageCenter.x, -imageCenter.y);
 
                      // update the view matrix to account for this image's rotation
                      let localMatrix = t1.multiply(imageRotationMatrix).multiply(t2);
@@ -575,7 +489,7 @@
              let w = right - x;
              let h = bottom - y;
 
-            let matrix = new Mat3([
+             let matrix = new $.Mat3([
                  w, 0, 0,
                  0, h, 0,
                  x, y, 1,
@@ -583,11 +497,11 @@
 
              if(tile.flipped){
                  // flip the tile around the center of the unit quad
-                let t1 = Mat3.makeTranslation(0.5, 0);
+                 let t1 = $.Mat3.makeTranslation(0.5, 0);
-                let t2 = Mat3.makeTranslation(-0.5, 0);
+                 let t2 = $.Mat3.makeTranslation(-0.5, 0);
 
                  // update the view matrix to account for this image's rotation
-                let localMatrix = t1.multiply(Mat3.makeScaling(-1, 1)).multiply(t2);
+                 let localMatrix = t1.multiply($.Mat3.makeScaling(-1, 1)).multiply(t2);
                  matrix = matrix.multiply(localMatrix);
              }
 
@@ -801,7 +715,7 @@
              gl.enableVertexAttribArray(this._secondPass.aTexturePosition);
 
              // set the matrix that transforms the framebuffer to clip space
-            let matrix = Mat3.makeScaling(2, 2).multiply(Mat3.makeTranslation(-0.5, -0.5));
+             let matrix = $.Mat3.makeScaling(2, 2).multiply($.Mat3.makeTranslation(-0.5, -0.5));
              gl.uniformMatrix3fv(this._secondPass.uMatrix, false, matrix.values);
          }
 
@@ -960,8 +874,6 @@
              } catch (e){
                  $.console.error('Error uploading image data to WebGL', e);
              }
-
-
          }
 
          _imageUnloadedHandler(event){
@@ -1235,4 +1147,5 @@
 
 
 
-}( OpenSeadragon ));
+ }( OpenSeadragon ));
+