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

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

@ -14,12 +14,18 @@
margin: 0; margin: 0;
} }
.controls {
position: absolute;
right: 10px;
top: 10px;
}
</style> </style>
<script> <script>
// ---------- // ----------
App = { App = {
itemCount: 20, itemCount: 5,
positionRange: 100, positionRange: 100,
sizeRange: 30, sizeRange: 30,
delay: 100, delay: 100,
@ -29,6 +35,7 @@
var self = this; var self = this;
this.index = 0; this.index = 0;
this.paused = false;
var tileSource = { var tileSource = {
Image: { Image: {
@ -56,29 +63,57 @@
}); });
this.viewer.addHandler('open', function() { this.viewer.addHandler('open', function() {
self.updateCount();
self.viewer.viewport.fitBounds(new OpenSeadragon.Rect(0, 0, self.viewer.viewport.fitBounds(new OpenSeadragon.Rect(0, 0,
self.positionRange + self.sizeRange, self.positionRange + self.sizeRange,
self.positionRange + self.sizeRange)); self.positionRange + self.sizeRange));
self.animate(); 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() { animate: function() {
var self = this; var self = this;
var item = this.viewer.world.getItemAt(this.index); if (!this.paused) {
item.setPosition(new OpenSeadragon.Point(Math.random() * this.positionRange, var item = this.viewer.world.getItemAt(this.index);
Math.random() * this.positionRange)); item.setPosition(new OpenSeadragon.Point(Math.random() * this.positionRange,
Math.random() * this.positionRange));
item.setWidth(Math.random() * this.sizeRange); item.setWidth(Math.random() * this.sizeRange);
this.index = (this.index + 1) % this.viewer.world.getItemCount(); this.index = (this.index + 1) % this.viewer.world.getItemCount();
}
setTimeout(function() { setTimeout(function() {
self.animate(); self.animate();
}, this.delay); }, this.delay);
},
// ----------
updateCount: function() {
$('.count').text(this.viewer.world.getItemCount());
} }
}; };
@ -91,5 +126,10 @@
</head> </head>
<body> <body>
<div id="contentDiv" class="openseadragon1"></div> <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> </body>
</html> </html>