Permalink
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (167 sloc) 6.3 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Tests performance of multiple, potentially active, OpenSeadragons.
No sample data due to immaterial rights, sorry.
Adjust "scale_tiles" and "6448" and "9101" to your own tile data.
To get a lot of data, duplicate the same tiles by hard-linking:
for D in `seq 0 199`; do cp -R -l scale_tiles scale_tiles_$D ; done
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dragon Scale</title>
<link rel="stylesheet" type="text/css" href="quack.css" />
<script src="openseadragon.min.js"></script>
<script>
var dragons = [];
var dormantDragons = [];
var maxDragons = 9999;
var tileIndex = 0;
var maxTileIndex = 199;
var springTime = 1500; // OpenSeadragon default
var triggerTime = 300; // Should be < springTime / dragons.length but beware performance
var triggerCount = 0;
function updateCount() {
var countSpan = document.getElementById('dragonCount');
countSpan.innerHTML = dragons.length == 1 ? "1 dragon" : dragons.length + " dragons";
}
function getTileSource() {
var ts = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "scale/scale_tiles_" + tileIndex + "/",
Format: "png",
Overlap: "4",
TileSize: "256",
Size: {
Width: "6448",
Height: "9101"
}
}
}
if (tileIndex > maxTileIndex) {
tileIndex = 0;
}
return ts;
}
// Wake a dormant dragon
function wakeDragon() {
// Show div
var dragonDiv = document.getElementById("dragon" + (dragons.length));
dragonDiv.style.display = 'block';
// Wake dragon
var dragon = dormantDragons.pop();
dragon.open(getTileSource());
dragons.push(dragon);
updateCount();
}
// Add a single dragon to the page
function addDragon() {
// Add div
var den = document.getElementById('dragonDen');
var newDragonDiv = document.createElement('div');
newDragonDiv.setAttribute('id', 'dragon' + dragons.length);
newDragonDiv.setAttribute('class', 'openseadragon');
den.appendChild(newDragonDiv);
// Assign dragon
var dragon = OpenSeadragon({
id: "dragon" + dragons.length,
maxZoomLevel: 16,
animationTime: 1.5,
zoomPerSecond: 1.5,
showNavigator: false,
wrapHorizontal: false,
tileSources: getTileSource()
});
dragons.push(dragon);
updateCount();
}
// Add count dragons to the page
function add(count) {
var count = Math.min(maxDragons - dragons.length, count);
for (var i = 0 ; i < count ; i++) {
if (dormantDragons.length > 0) {
wakeDragon();
} else {
addDragon();
}
}
}
// Add count dragons to the page
function removeD(count) {
count = Math.min(count, dragons.length);
for (var i = 0 ; i < count ; i++) {
// First make dragon dormant
dragons[dragons.length-1].close();
dormantDragons.push(dragons.pop());
// Then hide the div
var dragonDiv = document.getElementById("dragon" + (dragons.length));
dragonDiv.style.display = 'none';
// dragonDiv.parentNode.removeChild(dragonDiv);
}
updateCount();
}
// Reset to default views
function reset() {
for (var i = 0 ; i < dragons.length ; i++) {
var dragon = dragons[i];
dragon.viewport.goHome(true);
}
}
function pokeDragon(dragon) {
var zoom = Math.random() * 8 + 1;
var origo = dragon.viewport.getCenter(false);
var x = origo.x;
var y = origo.y;
dragon.viewport.zoomTo(zoom, new OpenSeadragon.Point(x, y), false);
dragon.viewport.panTo(new OpenSeadragon.Point(Math.random(), Math.random()));
}
// Zoom in/out a little bit
function motion() {
for (var i = 0 ; i < dragons.length ; i++) {
pokeDragon(dragons[i]);
}
}
function live() {
if (document.getElementById('liveCheck').checked) {
every = springTime / triggerTime; // what if this is not a whole number?
for (var i = triggerCount ; i < dragons.length ; i += every) {
pokeDragon(dragons[i]);
}
triggerCount++;
if (triggerCount >= every) {
triggerCount = 0;
}
}
}
function init() {
add(1);
window.setInterval("live()", triggerTime);
}
</script>
<style>
.openseadragon {
width: 200px;
height: 300px;
border: 2px solid #8888ff;
margin-right: 1em;
margin-bottom: 1em;
float: left;
}
</style>
</head>
<body class="previewpage" onLoad="init();">
<h1>Dragon Scale</span></h1>
<p>OpenSeadragon scaling test with <span id="dragonCount">0 dragons</span></p>
<div class="moreless">
<input type="button" onClick="removeD(10);" value="-10" />
<input type="button" onClick="removeD(1);" value="-1" />
<input type="button" onClick="add(1);" value="+1" />
<input type="button" onClick="add(10);" value="+10" />
<input type="button" onClick="motion();" value="poke" />
<input type="checkbox" id="liveCheck">live</input>
</div>
</p>
<div id="dragonDen"></div>
</body>
</html>