f3d9715455
This CL makes some Sky demos more interesting and adds an fps-widget to see how fast they run. R=esprehn@chromium.org Review URL: https://codereview.chromium.org/803283006
65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
<!--
|
|
// Copyright 2015 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
|
|
<sky-element name="fps-counter" attributes="showHistory:boolean">
|
|
<template>
|
|
<template if="{{ showHistory }}">
|
|
<template repeat="{{ history }}">
|
|
<div>{{ }} ms</div>
|
|
</template>
|
|
<div>max = {{ max }} ms</div>
|
|
</template>
|
|
<div>fps = {{ framerate }} Hz</div>
|
|
</template>
|
|
<script>
|
|
var kMaxDeltaLength = 10;
|
|
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.framerate = "...";
|
|
this.max = 0;
|
|
this.lastTimeStamp = 0;
|
|
this.rafId = 0;
|
|
this.currentDeltaIndex = 0;
|
|
this.deltas = new Array(kMaxDeltaLength);
|
|
for (var i = 0; i < kMaxDeltaLength; ++i)
|
|
this.deltas[i] = 0;
|
|
this.history = new Array(kMaxDeltaLength);
|
|
for (var i = 0; i < kMaxDeltaLength; ++i)
|
|
this.history[i] = 0;
|
|
}
|
|
attached() {
|
|
this.scheduleTick();
|
|
}
|
|
detached() {
|
|
cancelAnimationFrame(this.rafId);
|
|
this.rafId = 0;
|
|
}
|
|
scheduleTick() {
|
|
this.rafId = requestAnimationFrame(this.tick.bind(this));
|
|
}
|
|
tick(timeStamp) {
|
|
this.scheduleTick();
|
|
var lastTimeStamp = this.lastTimeStamp;
|
|
this.lastTimeStamp = timeStamp;
|
|
if (!lastTimeStamp)
|
|
return;
|
|
var delta = timeStamp - lastTimeStamp;
|
|
this.deltas[this.currentDeltaIndex++ % kMaxDeltaLength] = delta;
|
|
for (var i = 0; i < kMaxDeltaLength; ++i) {
|
|
var value = this.deltas[(i + this.currentDeltaIndex) % kMaxDeltaLength];
|
|
this.history[i] = value.toFixed(2);
|
|
}
|
|
var sum = this.deltas.reduce(function(a, b) { return a + b }, 0);
|
|
var avg = sum / kMaxDeltaLength;
|
|
this.framerate = (1000 / avg).toFixed(2);
|
|
this.max = Math.max(delta, this.max).toFixed(2);
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|