mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

Added pause and "add more" buttons to animation demo

Browse Source
This commit is contained in:
Ian Gilman 2014-12-19 15:55:24 -08:00
parent c9708399a1
commit c6b1efe85d
1 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
test/demo/item-animation.html
View File

@ -14,12 +14,18 @@
margin: 0;
}
.controls {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<script>
// ----------
App = {
itemCount: 20,
itemCount: 5,
positionRange: 100,
sizeRange: 30,
delay: 100,
@ -29,6 +35,7 @@
var self = this;
this.index = 0;
this.paused = false;
var tileSource = {
Image: {
@ -56,18 +63,40 @@
});
this.viewer.addHandler('open', function() {
self.updateCount();
self.viewer.viewport.fitBounds(new OpenSeadragon.Rect(0, 0,
self.positionRange + self.sizeRange,
self.positionRange + self.sizeRange));
self.animate();
});
var $pause = $('.toggle-pause').click(function() {
self.paused = !self.paused;
$pause.text(self.paused ? 'Play' : 'Pause');
});
$('.add').click(function() {
for (var i = 0; i < self.itemCount; i++) {
self.viewer.addTiledImage({
tileSource: tileSource,
x: Math.random() * self.positionRange,
y: Math.random() * self.positionRange,
width: Math.random() * self.sizeRange,
success: function() {
self.updateCount();
}
});
}
});
},
// ----------
animate: function() {
var self = this;
if (!this.paused) {
var item = this.viewer.world.getItemAt(this.index);
item.setPosition(new OpenSeadragon.Point(Math.random() * this.positionRange,
Math.random() * this.positionRange));
@ -75,10 +104,16 @@
item.setWidth(Math.random() * this.sizeRange);
this.index = (this.index + 1) % this.viewer.world.getItemCount();
}
setTimeout(function() {
self.animate();
}, this.delay);
},
// ----------
updateCount: function() {
$('.count').text(this.viewer.world.getItemCount());
}
};
@ -91,5 +126,10 @@
</head>
<body>
<div id="contentDiv" class="openseadragon1"></div>
<div class="controls">
<button class="toggle-pause">Pause</button>
<button class="add">Add More</button>
Image Count: <span class="count"></span>
</div>
</body>
</html>