Commit f3d97154 authored by Adam Barth's avatar Adam Barth

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
parent c57eec3b
<!--
// 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>
#!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;
......
<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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment