OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
7 | 7 |
8 <sky-element name="fps-counter" attributes="showHistory:boolean"> | 8 <sky-element name="fps-counter" attributes="showHistory:boolean"> |
9 <template> | 9 <template> |
10 <template if="{{ showHistory }}"> | 10 <template if="{{ showHistory }}"> |
11 <template repeat="{{ history }}"> | 11 <template repeat="{{ history }}"> |
12 <div>{{ }} ms</div> | 12 <div>{{ }} ms</div> |
13 </template> | 13 </template> |
14 <div>max = {{ max }} ms</div> | 14 <div>max = {{ max }} ms</div> |
15 </template> | 15 </template> |
16 <div>fps = {{ framerate }} Hz</div> | 16 <div>fps = {{ framerate }} Hz</div> |
17 </template> | 17 </template> |
18 <script> | 18 <script> |
19 var kMaxDeltaLength = 10; | 19 var kMaxDeltaLength = 10; |
20 | 20 |
21 module.exports = class extends SkyElement { | 21 module.exports = class extends SkyElement { |
22 created() { | 22 created() { |
23 this.framerate = "..."; | 23 this.framerate = "..."; |
24 this.max = 0; | 24 this.max = 0; |
25 this.lastTimeStamp = 0; | 25 this.lastTimeStamp = 0; |
26 this.rafId = 0; | 26 this.rafId = 0; |
27 this.currentDeltaIndex = 0; | 27 this.currentDeltaIndex = 0; |
28 this.deltas = new Array(kMaxDeltaLength); | 28 this.deltas = new Array(kMaxDeltaLength); |
29 for (var i = 0; i < kMaxDeltaLength; ++i) | 29 this.deltas.fill(0); |
30 this.deltas[i] = 0; | |
31 this.history = new Array(kMaxDeltaLength); | 30 this.history = new Array(kMaxDeltaLength); |
32 for (var i = 0; i < kMaxDeltaLength; ++i) | 31 this.history.fill(0); |
33 this.history[i] = 0; | |
34 } | 32 } |
35 attached() { | 33 attached() { |
36 this.scheduleTick(); | 34 this.scheduleTick(); |
37 } | 35 } |
38 detached() { | 36 detached() { |
39 cancelAnimationFrame(this.rafId); | 37 cancelAnimationFrame(this.rafId); |
40 this.rafId = 0; | 38 this.rafId = 0; |
41 } | 39 } |
42 scheduleTick() { | 40 scheduleTick() { |
43 this.rafId = requestAnimationFrame(this.tick.bind(this)); | 41 this.rafId = requestAnimationFrame(this.tick.bind(this)); |
(...skipping 11 matching lines...) Expand all Loading... |
55 this.history[i] = value.toFixed(2); | 53 this.history[i] = value.toFixed(2); |
56 } | 54 } |
57 var sum = this.deltas.reduce(function(a, b) { return a + b }, 0); | 55 var sum = this.deltas.reduce(function(a, b) { return a + b }, 0); |
58 var avg = sum / kMaxDeltaLength; | 56 var avg = sum / kMaxDeltaLength; |
59 this.framerate = (1000 / avg).toFixed(2); | 57 this.framerate = (1000 / avg).toFixed(2); |
60 this.max = Math.max(delta, this.max).toFixed(2); | 58 this.max = Math.max(delta, this.max).toFixed(2); |
61 } | 59 } |
62 }.register(); | 60 }.register(); |
63 </script> | 61 </script> |
64 </sky-element> | 62 </sky-element> |
OLD | NEW |