sky/examples/fps-counter.sky

<!--
// 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>