OLD | NEW |
| (Empty) |
1 #!mojo mojo:sky_viewer | |
2 <!-- | |
3 // Copyright 2015 The Chromium Authors. All rights reserved. | |
4 // Use of this source code is governed by a BSD-style license that can be | |
5 // found in the LICENSE file. | |
6 --> | |
7 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | |
8 | |
9 <sky-element name="fps-counter" attributes="showHistory:boolean"> | |
10 <template> | |
11 <template if="{{ showHistory }}"> | |
12 <template repeat="{{ deltas }}"> | |
13 <div>{{ roundedValue }} ms</div> | |
14 </template> | |
15 <div>max = {{ max }} ms</div> | |
16 </template> | |
17 <div>fps = {{ frameRate }} Hz</div> | |
18 </template> | |
19 <script> | |
20 const kMaxDeltaLength = 10; | |
21 | |
22 class Delta { | |
23 constructor(value) { | |
24 this.value = value; | |
25 this.roundedValue = value.toFixed(2); | |
26 Object.preventExtensions(this); | |
27 } | |
28 } | |
29 | |
30 module.exports = class extends SkyElement { | |
31 created() { | |
32 this.frameRate = "..."; | |
33 this.max = 0; | |
34 this.sum = 0; | |
35 this.lastTimeStamp = 0; | |
36 this.rafId = 0; | |
37 this.deltas = []; | |
38 for (var i = 0; i < kMaxDeltaLength; ++i) | |
39 this.deltas[i] = new Delta(0); | |
40 } | |
41 attached() { | |
42 this.scheduleTick(); | |
43 } | |
44 detached() { | |
45 cancelAnimationFrame(this.rafId); | |
46 this.rafId = 0; | |
47 } | |
48 scheduleTick() { | |
49 this.rafId = requestAnimationFrame(this.tick.bind(this)); | |
50 } | |
51 tick(timeStamp) { | |
52 this.scheduleTick(); | |
53 var lastTimeStamp = this.lastTimeStamp; | |
54 this.lastTimeStamp = timeStamp; | |
55 if (!lastTimeStamp) | |
56 return; | |
57 var delta = new Delta(timeStamp - lastTimeStamp); | |
58 var removedDelta = this.deltas.shift(); | |
59 this.deltas.push(delta); | |
60 this.sum -= removedDelta.value; | |
61 this.sum += delta.value; | |
62 var avg = this.sum / this.deltas.length; | |
63 this.frameRate = (1000 / avg).toFixed(2); | |
64 this.max = Math.max(delta.value, this.max).toFixed(2); | |
65 } | |
66 }.register(); | |
67 </script> | |
68 </sky-element> | |
OLD | NEW |