sky/examples/fps-counter.sky

#!mojo mojo:sky_viewer
<!--
// 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="{{ deltas }}">
      <div>{{ roundedValue }} ms</div>
    </template>
    <div>max = {{ max }} ms</div>
  </template>
  <div>fps = {{ frameRate }} Hz</div>
</template>
<script>
const kMaxDeltaLength = 10;

class Delta {
  constructor(value) {
    this.value = value;
    this.roundedValue = value.toFixed(2);
    Object.preventExtensions(this);
  }
}

module.exports = class extends SkyElement {
  created() {
    this.frameRate = "...";
    this.max = 0;
    this.sum = 0;
    this.lastTimeStamp = 0;
    this.rafId = 0;
    this.deltas = [];
    for (var i = 0; i < kMaxDeltaLength; ++i)
      this.deltas[i] = new Delta(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 = new Delta(timeStamp - lastTimeStamp);
    var removedDelta = this.deltas.shift();
    this.deltas.push(delta);
    this.sum -= removedDelta.value;
    this.sum += delta.value;
    var avg = this.sum / this.deltas.length;
    this.frameRate = (1000 / avg).toFixed(2);
    this.max = Math.max(delta.value, this.max).toFixed(2);
  }
}.register();
</script>
</sky-element>