mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
297 lines
7.3 KiB
JavaScript
297 lines
7.3 KiB
JavaScript
const sources = {
|
|
"rainbow":"../data/testpattern.dzi",
|
|
"leaves":"../data/iiif_2_0_sizes/info.json",
|
|
"bblue":{
|
|
type:'image',
|
|
url: "../data/BBlue.png",
|
|
},
|
|
"duomo":"https://openseadragon.github.io/example-images/duomo/duomo.dzi",
|
|
}
|
|
const labels = {
|
|
rainbow: 'Rainbow Grid',
|
|
leaves: 'Leaves',
|
|
bblue: 'Blue B',
|
|
duomo: 'Duomo',
|
|
}
|
|
let viewer;
|
|
|
|
/**
|
|
* based on https://github.com/mrdoob/stats.js/ by @author mrdoob / http://mrdoob.com/
|
|
*/
|
|
|
|
class Stats{
|
|
constructor(){
|
|
this.mode = 0;
|
|
|
|
var container = this.container = document.createElement( 'div' );
|
|
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
|
|
container.addEventListener( 'click', function ( event ) {
|
|
|
|
event.preventDefault();
|
|
showPanel( ++ mode % container.children.length );
|
|
|
|
}, false );
|
|
|
|
|
|
this.dom = container;
|
|
|
|
this.started = false;
|
|
|
|
this.fpsPanel = this.addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
|
|
this.msPanel = this.addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
|
|
this.mspsPanel = this.addPanel( new Stats.Panel( 'MSPS', '#0f0', '#020' ) );
|
|
|
|
if ( window.performance && window.performance.memory ) {
|
|
|
|
this.memPanel = this.addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
|
|
|
|
}
|
|
|
|
this.showPanel( 0 );
|
|
}
|
|
|
|
|
|
//
|
|
|
|
addPanel( panel ) {
|
|
|
|
this.container.appendChild( panel.dom );
|
|
return panel;
|
|
|
|
}
|
|
|
|
showPanel( id ) {
|
|
|
|
for ( var i = 0; i < this.container.children.length; i ++ ) {
|
|
|
|
this.container.children[ i ].style.display = i === id ? 'block' : 'none';
|
|
|
|
}
|
|
|
|
this.mode = id;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
|
|
begin() {
|
|
|
|
this.beginTime = ( performance || Date ).now();
|
|
|
|
if(!this.started){
|
|
this.started = true;
|
|
this.prevTime = this.beginTime;
|
|
this.frames = 0;
|
|
this.cumulativeMS = 0;
|
|
}
|
|
}
|
|
|
|
end() {
|
|
|
|
this.frames ++;
|
|
|
|
var time = ( performance || Date ).now();
|
|
|
|
var interval = time - this.beginTime;
|
|
|
|
this.cumulativeMS += interval;
|
|
|
|
this.msPanel.update( interval, 200 );
|
|
|
|
if ( time >= this.prevTime + 1000 ) {
|
|
|
|
this.fpsPanel.update( ( this.frames * 1000 ) / ( time - this.prevTime ), 130 );
|
|
|
|
this.mspsPanel.update( ( this.cumulativeMS * 1000 ) / ( time - this.prevTime ), 1100 );
|
|
|
|
this.prevTime = time;
|
|
this.frames = 0;
|
|
this.cumulativeMS = 0;
|
|
|
|
if ( this.memPanel ) {
|
|
|
|
var memory = performance.memory;
|
|
this.memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return time;
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
this.beginTime = this.end();
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
Stats.Panel = function ( name, fg, bg ) {
|
|
|
|
var min = Infinity, max = 0, round = Math.round;
|
|
var PR = round( window.devicePixelRatio || 1 );
|
|
|
|
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
|
|
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
|
|
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
|
|
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.width = WIDTH;
|
|
canvas.height = HEIGHT;
|
|
canvas.style.cssText = 'width:80px;height:48px';
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
|
|
context.textBaseline = 'top';
|
|
|
|
context.fillStyle = bg;
|
|
context.fillRect( 0, 0, WIDTH, HEIGHT );
|
|
|
|
context.fillStyle = fg;
|
|
context.fillText( name, TEXT_X, TEXT_Y );
|
|
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
|
|
|
context.fillStyle = bg;
|
|
context.globalAlpha = 0.9;
|
|
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
|
|
|
return {
|
|
|
|
dom: canvas,
|
|
|
|
update: function ( value, maxValue ) {
|
|
|
|
min = Math.min( min, value );
|
|
max = Math.max( max, value );
|
|
|
|
context.fillStyle = bg;
|
|
context.globalAlpha = 1;
|
|
context.fillRect( 0, 0, WIDTH, GRAPH_Y );
|
|
context.fillStyle = fg;
|
|
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
|
|
|
|
context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
|
|
|
|
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
|
|
|
|
context.fillStyle = bg;
|
|
context.globalAlpha = 0.9;
|
|
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
(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);
|
|
|
|
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;
|
|
|
|
OpenSeadragon.World.prototype.update = function(){
|
|
statsUpdate.begin();
|
|
origUpdate.call(this, ...arguments);
|
|
statsUpdate.end();
|
|
};
|
|
|
|
OpenSeadragon.World.prototype.draw = function(){
|
|
statsDraw.begin();
|
|
origDraw.call(this, ...arguments);
|
|
statsDraw.end();
|
|
}
|
|
|
|
})();
|
|
|
|
|
|
$('#create-drawer').on('click',function(){
|
|
let drawerType = $('#select-drawer').val();
|
|
let num = Math.floor($('#input-number').val());
|
|
run(drawerType, num);
|
|
});
|
|
|
|
function run(drawerType, num) {
|
|
if(viewer){
|
|
viewer.destroy();
|
|
}
|
|
viewer = window.viewer = makeViewer(drawerType);
|
|
let tileSources = makeTileSources(num);
|
|
|
|
|
|
|
|
tileSources.forEach((ts, i) => {
|
|
viewer.addTiledImage({
|
|
tileSource: ts,
|
|
x: (i % 10) / 20,
|
|
y: Math.floor(i / 10) / 20,
|
|
width: 1,
|
|
opacity: (i % 3) === 0 ? 0.4 : 1
|
|
});
|
|
});
|
|
|
|
let movingLeft = false;
|
|
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));
|
|
|
|
}, 1000);
|
|
}
|
|
|
|
function makeViewer(drawerType){
|
|
let viewer = OpenSeadragon({
|
|
id: "drawer",
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
minZoomImageRatio:0.01,
|
|
maxZoomPixelRatio:100,
|
|
smoothTileEdgesMinZoom:1.1,
|
|
crossOriginPolicy: 'Anonymous',
|
|
ajaxWithCredentials: false,
|
|
drawer:drawerType,
|
|
blendTime:0
|
|
});
|
|
|
|
return viewer;
|
|
}
|
|
|
|
function makeTileSources(num){
|
|
|
|
let keys = Object.keys(sources);
|
|
|
|
let indices = Array.from(Array(num).keys());
|
|
|
|
return indices.map(index => {
|
|
let ts = sources[keys[index % keys.length]];
|
|
return ts;
|
|
})
|
|
|
|
}
|
|
|