From f3d9715455e2ecfe803d1b5f3fccbbdce3966929 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Wed, 14 Jan 2015 15:50:59 -0800
Subject: [PATCH] Add a fps-counter widget to some Sky demos

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
---
 examples/fps-counter.sky     | 64 ++++++++++++++++++++++++++++++++++++
 examples/spinning-square.sky |  4 ++-
 examples/touch-demo.sky      | 28 +++++++++++++---
 3 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 examples/fps-counter.sky

diff --git a/examples/fps-counter.sky b/examples/fps-counter.sky
new file mode 100644
index 0000000000..21fa0a1ce6
--- /dev/null
+++ b/examples/fps-counter.sky
@@ -0,0 +1,64 @@
+<!--
+// 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>
diff --git a/examples/spinning-square.sky b/examples/spinning-square.sky
index b4c1c7042a..c523940667 100644
--- a/examples/spinning-square.sky
+++ b/examples/spinning-square.sky
@@ -1,5 +1,6 @@
 #!mojo mojo:sky_viewer
 <sky>
+<import src="fps-counter.sky" />
 <style>
 square {
   margin: 50px;
@@ -8,7 +9,8 @@ square {
   background-color: green;
 }
 </style>
-<square></square>
+<square />
+<fps-counter showHistory="true" />
 <script>
 var square = document.querySelector('square');
 var timeBase = 0;
diff --git a/examples/touch-demo.sky b/examples/touch-demo.sky
index 26c659bc2a..aafb3adb19 100644
--- a/examples/touch-demo.sky
+++ b/examples/touch-demo.sky
@@ -1,11 +1,31 @@
 <sky>
-<div id="log">Ready</div>
+<import src="fps-counter.sky" />
+<style>
+dot {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    background-color: #00FF00;
+}
+</style>
+<dot />
+<log>Ready</log>
+<x-fps-counter />
 <script>
+var dot = document.querySelector("dot");
+var log = document.querySelector("log");
+
 function logTouchEvent(evt) {
   var message = "type=" + event.type;
-  if (evt.touches && evt.touches.length > 0)
-    message += " x=" + evt.touches[0].clientX + " y=" + evt.touches[0].clientY;
-  document.getElementById("log").textContent = message;
+  if (evt.touches && evt.touches.length > 0) {
+    var x = evt.touches[0].clientX.toFixed(2);
+    var y = evt.touches[0].clientY.toFixed(2);
+    message += " x=" + x + " y=" + y;
+
+    var transform = "translate(" + (x - 50)  + "px," + (y - 50) + "px)";
+    dot.style.transform = transform;
+  }
+  log.textContent = message;
 }
 
 document.documentElement.addEventListener("touchstart", logTouchEvent);