stats-gl 2.3.1 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.cjs +12 -11
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +12 -11
- package/dist/main.js.map +1 -1
- package/dist/panel.cjs +85 -26
- package/dist/panel.cjs.map +1 -1
- package/dist/panel.js +85 -26
- package/dist/panel.js.map +1 -1
- package/dist/stats-gl.d.ts +5 -1
- package/lib/main.ts +20 -16
- package/lib/panel.ts +113 -33
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -3,8 +3,8 @@ const panel = require("./panel.cjs");
|
|
|
3
3
|
const _Stats = class _Stats2 {
|
|
4
4
|
constructor({
|
|
5
5
|
trackGPU = false,
|
|
6
|
-
logsPerSecond =
|
|
7
|
-
samplesLog =
|
|
6
|
+
logsPerSecond = 30,
|
|
7
|
+
samplesLog = 60,
|
|
8
8
|
samplesGraph = 10,
|
|
9
9
|
precision = 2,
|
|
10
10
|
minimal = false,
|
|
@@ -25,6 +25,7 @@ const _Stats = class _Stats2 {
|
|
|
25
25
|
this.totalFps = 0;
|
|
26
26
|
this.gpuPanel = null;
|
|
27
27
|
this.gpuPanelCompute = null;
|
|
28
|
+
this.averageFps = { logs: [], graph: [] };
|
|
28
29
|
this.averageCpu = { logs: [], graph: [] };
|
|
29
30
|
this.averageGpu = { logs: [], graph: [] };
|
|
30
31
|
this.averageGpuCompute = { logs: [], graph: [] };
|
|
@@ -243,19 +244,19 @@ const _Stats = class _Stats2 {
|
|
|
243
244
|
endInternal() {
|
|
244
245
|
this.frames++;
|
|
245
246
|
const time = (performance || Date).now();
|
|
247
|
+
const elapsed = time - this.prevTime;
|
|
246
248
|
if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
|
|
247
|
-
|
|
248
|
-
this.
|
|
249
|
+
const fps = Math.round(this.frames * 1e3 / elapsed);
|
|
250
|
+
this.addToAverage(fps, this.averageFps);
|
|
251
|
+
this.updatePanel(this.fpsPanel, this.averageFps, 0);
|
|
252
|
+
this.updatePanel(this.msPanel, this.averageCpu, this.precision);
|
|
253
|
+
this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
|
|
249
254
|
if (this.gpuPanelCompute) {
|
|
250
255
|
this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
|
|
251
256
|
}
|
|
257
|
+
this.frames = 0;
|
|
252
258
|
this.prevCpuTime = time;
|
|
253
|
-
}
|
|
254
|
-
if (time >= this.prevTime + 1e3) {
|
|
255
|
-
const fps = this.frames * 1e3 / (time - this.prevTime);
|
|
256
|
-
this.fpsPanel.update(fps, fps, 100, 100, 0);
|
|
257
259
|
this.prevTime = time;
|
|
258
|
-
this.frames = 0;
|
|
259
260
|
}
|
|
260
261
|
return time;
|
|
261
262
|
}
|
|
@@ -283,7 +284,7 @@ const _Stats = class _Stats2 {
|
|
|
283
284
|
this.isRunningCPUProfiling = false;
|
|
284
285
|
}
|
|
285
286
|
}
|
|
286
|
-
updatePanel(panel2, averageArray) {
|
|
287
|
+
updatePanel(panel2, averageArray, precision = 2) {
|
|
287
288
|
if (averageArray.logs.length > 0) {
|
|
288
289
|
let sumLog = 0;
|
|
289
290
|
let max = 0.01;
|
|
@@ -302,7 +303,7 @@ const _Stats = class _Stats2 {
|
|
|
302
303
|
}
|
|
303
304
|
}
|
|
304
305
|
if (panel2) {
|
|
305
|
-
panel2.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph,
|
|
306
|
+
panel2.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
|
|
306
307
|
}
|
|
307
308
|
}
|
|
308
309
|
}
|
package/dist/main.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats","panel","Panel"],"mappings":";;AAgCA,MAAM,SAAN,MAAMA,QAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats","panel","Panel"],"mappings":"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"}
|
package/dist/main.js
CHANGED
|
@@ -2,8 +2,8 @@ import { Panel } from "./panel.js";
|
|
|
2
2
|
const _Stats = class _Stats2 {
|
|
3
3
|
constructor({
|
|
4
4
|
trackGPU = false,
|
|
5
|
-
logsPerSecond =
|
|
6
|
-
samplesLog =
|
|
5
|
+
logsPerSecond = 30,
|
|
6
|
+
samplesLog = 60,
|
|
7
7
|
samplesGraph = 10,
|
|
8
8
|
precision = 2,
|
|
9
9
|
minimal = false,
|
|
@@ -24,6 +24,7 @@ const _Stats = class _Stats2 {
|
|
|
24
24
|
this.totalFps = 0;
|
|
25
25
|
this.gpuPanel = null;
|
|
26
26
|
this.gpuPanelCompute = null;
|
|
27
|
+
this.averageFps = { logs: [], graph: [] };
|
|
27
28
|
this.averageCpu = { logs: [], graph: [] };
|
|
28
29
|
this.averageGpu = { logs: [], graph: [] };
|
|
29
30
|
this.averageGpuCompute = { logs: [], graph: [] };
|
|
@@ -242,19 +243,19 @@ const _Stats = class _Stats2 {
|
|
|
242
243
|
endInternal() {
|
|
243
244
|
this.frames++;
|
|
244
245
|
const time = (performance || Date).now();
|
|
246
|
+
const elapsed = time - this.prevTime;
|
|
245
247
|
if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
|
|
246
|
-
|
|
247
|
-
this.
|
|
248
|
+
const fps = Math.round(this.frames * 1e3 / elapsed);
|
|
249
|
+
this.addToAverage(fps, this.averageFps);
|
|
250
|
+
this.updatePanel(this.fpsPanel, this.averageFps, 0);
|
|
251
|
+
this.updatePanel(this.msPanel, this.averageCpu, this.precision);
|
|
252
|
+
this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
|
|
248
253
|
if (this.gpuPanelCompute) {
|
|
249
254
|
this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
|
|
250
255
|
}
|
|
256
|
+
this.frames = 0;
|
|
251
257
|
this.prevCpuTime = time;
|
|
252
|
-
}
|
|
253
|
-
if (time >= this.prevTime + 1e3) {
|
|
254
|
-
const fps = this.frames * 1e3 / (time - this.prevTime);
|
|
255
|
-
this.fpsPanel.update(fps, fps, 100, 100, 0);
|
|
256
258
|
this.prevTime = time;
|
|
257
|
-
this.frames = 0;
|
|
258
259
|
}
|
|
259
260
|
return time;
|
|
260
261
|
}
|
|
@@ -282,7 +283,7 @@ const _Stats = class _Stats2 {
|
|
|
282
283
|
this.isRunningCPUProfiling = false;
|
|
283
284
|
}
|
|
284
285
|
}
|
|
285
|
-
updatePanel(panel, averageArray) {
|
|
286
|
+
updatePanel(panel, averageArray, precision = 2) {
|
|
286
287
|
if (averageArray.logs.length > 0) {
|
|
287
288
|
let sumLog = 0;
|
|
288
289
|
let max = 0.01;
|
|
@@ -301,7 +302,7 @@ const _Stats = class _Stats2 {
|
|
|
301
302
|
}
|
|
302
303
|
}
|
|
303
304
|
if (panel) {
|
|
304
|
-
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph,
|
|
305
|
+
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
|
|
305
306
|
}
|
|
306
307
|
}
|
|
307
308
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats"],"mappings":";AAgCA,MAAM,SAAN,MAAMA,QAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats"],"mappings":"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"}
|
package/dist/panel.cjs
CHANGED
|
@@ -5,6 +5,7 @@ class Panel {
|
|
|
5
5
|
this.name = name;
|
|
6
6
|
this.fg = fg;
|
|
7
7
|
this.bg = bg;
|
|
8
|
+
this.gradient = null;
|
|
8
9
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
9
10
|
this.WIDTH = 90 * this.PR;
|
|
10
11
|
this.HEIGHT = 48 * this.PR;
|
|
@@ -15,45 +16,103 @@ class Panel {
|
|
|
15
16
|
this.GRAPH_WIDTH = 84 * this.PR;
|
|
16
17
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
17
18
|
this.canvas = document.createElement("canvas");
|
|
18
|
-
this.canvas.width =
|
|
19
|
-
this.canvas.height =
|
|
19
|
+
this.canvas.width = this.WIDTH;
|
|
20
|
+
this.canvas.height = this.HEIGHT;
|
|
20
21
|
this.canvas.style.width = "90px";
|
|
21
|
-
this.canvas.style.position = "absolute";
|
|
22
22
|
this.canvas.style.height = "48px";
|
|
23
|
+
this.canvas.style.position = "absolute";
|
|
23
24
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
24
25
|
this.context = this.canvas.getContext("2d");
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
|
|
34
|
-
this.
|
|
35
|
-
|
|
26
|
+
this.initializeCanvas();
|
|
27
|
+
}
|
|
28
|
+
createGradient() {
|
|
29
|
+
if (!this.context)
|
|
30
|
+
throw new Error("No context");
|
|
31
|
+
const gradient = this.context.createLinearGradient(
|
|
32
|
+
0,
|
|
33
|
+
this.GRAPH_Y,
|
|
34
|
+
0,
|
|
35
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
36
|
+
);
|
|
37
|
+
let startColor;
|
|
38
|
+
const endColor = this.fg;
|
|
39
|
+
switch (this.fg.toLowerCase()) {
|
|
40
|
+
case "#0ff":
|
|
41
|
+
startColor = "#006666";
|
|
42
|
+
break;
|
|
43
|
+
case "#0f0":
|
|
44
|
+
startColor = "#006600";
|
|
45
|
+
break;
|
|
46
|
+
case "#ff0":
|
|
47
|
+
startColor = "#666600";
|
|
48
|
+
break;
|
|
49
|
+
case "#e1e1e1":
|
|
50
|
+
startColor = "#666666";
|
|
51
|
+
break;
|
|
52
|
+
default:
|
|
53
|
+
startColor = this.bg;
|
|
54
|
+
break;
|
|
36
55
|
}
|
|
56
|
+
gradient.addColorStop(0, startColor);
|
|
57
|
+
gradient.addColorStop(1, endColor);
|
|
58
|
+
return gradient;
|
|
37
59
|
}
|
|
38
|
-
|
|
39
|
-
let min = Infinity, max = 0;
|
|
60
|
+
initializeCanvas() {
|
|
40
61
|
if (!this.context)
|
|
41
62
|
return;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
63
|
+
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
|
|
64
|
+
this.context.textBaseline = "top";
|
|
65
|
+
this.gradient = this.createGradient();
|
|
45
66
|
this.context.fillStyle = this.bg;
|
|
46
|
-
this.context.
|
|
47
|
-
this.context.
|
|
67
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
68
|
+
this.context.fillStyle = this.fg;
|
|
69
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
48
70
|
this.context.fillStyle = this.fg;
|
|
49
|
-
this.context.
|
|
50
|
-
this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
|
|
51
|
-
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
|
|
71
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
52
72
|
this.context.fillStyle = this.bg;
|
|
53
73
|
this.context.globalAlpha = 0.9;
|
|
54
|
-
this.context.fillRect(this.GRAPH_X
|
|
74
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
75
|
+
}
|
|
76
|
+
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
|
|
77
|
+
if (!this.context || !this.gradient)
|
|
78
|
+
return;
|
|
79
|
+
const min = Math.min(Infinity, value);
|
|
80
|
+
const max = Math.max(maxValue, value);
|
|
81
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
82
|
+
this.context.globalAlpha = 1;
|
|
83
|
+
this.context.fillStyle = this.bg;
|
|
84
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
85
|
+
this.context.fillStyle = this.fg;
|
|
86
|
+
this.context.fillText(
|
|
87
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
88
|
+
max.toFixed(decimals)
|
|
89
|
+
)})`,
|
|
90
|
+
this.TEXT_X,
|
|
91
|
+
this.TEXT_Y
|
|
92
|
+
);
|
|
93
|
+
this.context.drawImage(
|
|
94
|
+
this.canvas,
|
|
95
|
+
this.GRAPH_X + this.PR,
|
|
96
|
+
this.GRAPH_Y,
|
|
97
|
+
this.GRAPH_WIDTH - this.PR,
|
|
98
|
+
this.GRAPH_HEIGHT,
|
|
99
|
+
this.GRAPH_X,
|
|
100
|
+
this.GRAPH_Y,
|
|
101
|
+
this.GRAPH_WIDTH - this.PR,
|
|
102
|
+
this.GRAPH_HEIGHT
|
|
103
|
+
);
|
|
104
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
105
|
+
if (columnHeight > 0) {
|
|
106
|
+
this.context.globalAlpha = 1;
|
|
107
|
+
this.context.fillStyle = this.gradient;
|
|
108
|
+
this.context.fillRect(
|
|
109
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
110
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
111
|
+
this.PR,
|
|
112
|
+
columnHeight
|
|
113
|
+
);
|
|
114
|
+
}
|
|
55
115
|
}
|
|
56
116
|
}
|
|
57
|
-
;
|
|
58
117
|
exports.Panel = Panel;
|
|
59
118
|
//# sourceMappingURL=panel.cjs.map
|
package/dist/panel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";;AAAA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/panel.js
CHANGED
|
@@ -3,6 +3,7 @@ class Panel {
|
|
|
3
3
|
this.name = name;
|
|
4
4
|
this.fg = fg;
|
|
5
5
|
this.bg = bg;
|
|
6
|
+
this.gradient = null;
|
|
6
7
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
7
8
|
this.WIDTH = 90 * this.PR;
|
|
8
9
|
this.HEIGHT = 48 * this.PR;
|
|
@@ -13,46 +14,104 @@ class Panel {
|
|
|
13
14
|
this.GRAPH_WIDTH = 84 * this.PR;
|
|
14
15
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
15
16
|
this.canvas = document.createElement("canvas");
|
|
16
|
-
this.canvas.width =
|
|
17
|
-
this.canvas.height =
|
|
17
|
+
this.canvas.width = this.WIDTH;
|
|
18
|
+
this.canvas.height = this.HEIGHT;
|
|
18
19
|
this.canvas.style.width = "90px";
|
|
19
|
-
this.canvas.style.position = "absolute";
|
|
20
20
|
this.canvas.style.height = "48px";
|
|
21
|
+
this.canvas.style.position = "absolute";
|
|
21
22
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
22
23
|
this.context = this.canvas.getContext("2d");
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
this.
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
|
|
24
|
+
this.initializeCanvas();
|
|
25
|
+
}
|
|
26
|
+
createGradient() {
|
|
27
|
+
if (!this.context)
|
|
28
|
+
throw new Error("No context");
|
|
29
|
+
const gradient = this.context.createLinearGradient(
|
|
30
|
+
0,
|
|
31
|
+
this.GRAPH_Y,
|
|
32
|
+
0,
|
|
33
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
34
|
+
);
|
|
35
|
+
let startColor;
|
|
36
|
+
const endColor = this.fg;
|
|
37
|
+
switch (this.fg.toLowerCase()) {
|
|
38
|
+
case "#0ff":
|
|
39
|
+
startColor = "#006666";
|
|
40
|
+
break;
|
|
41
|
+
case "#0f0":
|
|
42
|
+
startColor = "#006600";
|
|
43
|
+
break;
|
|
44
|
+
case "#ff0":
|
|
45
|
+
startColor = "#666600";
|
|
46
|
+
break;
|
|
47
|
+
case "#e1e1e1":
|
|
48
|
+
startColor = "#666666";
|
|
49
|
+
break;
|
|
50
|
+
default:
|
|
51
|
+
startColor = this.bg;
|
|
52
|
+
break;
|
|
34
53
|
}
|
|
54
|
+
gradient.addColorStop(0, startColor);
|
|
55
|
+
gradient.addColorStop(1, endColor);
|
|
56
|
+
return gradient;
|
|
35
57
|
}
|
|
36
|
-
|
|
37
|
-
let min = Infinity, max = 0;
|
|
58
|
+
initializeCanvas() {
|
|
38
59
|
if (!this.context)
|
|
39
60
|
return;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
61
|
+
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
|
|
62
|
+
this.context.textBaseline = "top";
|
|
63
|
+
this.gradient = this.createGradient();
|
|
43
64
|
this.context.fillStyle = this.bg;
|
|
44
|
-
this.context.
|
|
45
|
-
this.context.
|
|
65
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
66
|
+
this.context.fillStyle = this.fg;
|
|
67
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
46
68
|
this.context.fillStyle = this.fg;
|
|
47
|
-
this.context.
|
|
48
|
-
this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
|
|
49
|
-
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
|
|
69
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
50
70
|
this.context.fillStyle = this.bg;
|
|
51
71
|
this.context.globalAlpha = 0.9;
|
|
52
|
-
this.context.fillRect(this.GRAPH_X
|
|
72
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
73
|
+
}
|
|
74
|
+
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
|
|
75
|
+
if (!this.context || !this.gradient)
|
|
76
|
+
return;
|
|
77
|
+
const min = Math.min(Infinity, value);
|
|
78
|
+
const max = Math.max(maxValue, value);
|
|
79
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
80
|
+
this.context.globalAlpha = 1;
|
|
81
|
+
this.context.fillStyle = this.bg;
|
|
82
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
83
|
+
this.context.fillStyle = this.fg;
|
|
84
|
+
this.context.fillText(
|
|
85
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
86
|
+
max.toFixed(decimals)
|
|
87
|
+
)})`,
|
|
88
|
+
this.TEXT_X,
|
|
89
|
+
this.TEXT_Y
|
|
90
|
+
);
|
|
91
|
+
this.context.drawImage(
|
|
92
|
+
this.canvas,
|
|
93
|
+
this.GRAPH_X + this.PR,
|
|
94
|
+
this.GRAPH_Y,
|
|
95
|
+
this.GRAPH_WIDTH - this.PR,
|
|
96
|
+
this.GRAPH_HEIGHT,
|
|
97
|
+
this.GRAPH_X,
|
|
98
|
+
this.GRAPH_Y,
|
|
99
|
+
this.GRAPH_WIDTH - this.PR,
|
|
100
|
+
this.GRAPH_HEIGHT
|
|
101
|
+
);
|
|
102
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
103
|
+
if (columnHeight > 0) {
|
|
104
|
+
this.context.globalAlpha = 1;
|
|
105
|
+
this.context.fillStyle = this.gradient;
|
|
106
|
+
this.context.fillRect(
|
|
107
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
108
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
109
|
+
this.PR,
|
|
110
|
+
columnHeight
|
|
111
|
+
);
|
|
112
|
+
}
|
|
53
113
|
}
|
|
54
114
|
}
|
|
55
|
-
;
|
|
56
115
|
export {
|
|
57
116
|
Panel
|
|
58
117
|
};
|
package/dist/panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/stats-gl.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ declare class Panel {
|
|
|
4
4
|
name: string;
|
|
5
5
|
fg: string;
|
|
6
6
|
bg: string;
|
|
7
|
+
gradient: CanvasGradient | null;
|
|
7
8
|
PR: number;
|
|
8
9
|
WIDTH: number;
|
|
9
10
|
HEIGHT: number;
|
|
@@ -14,6 +15,8 @@ declare class Panel {
|
|
|
14
15
|
GRAPH_WIDTH: number;
|
|
15
16
|
GRAPH_HEIGHT: number;
|
|
16
17
|
constructor(name: string, fg: string, bg: string);
|
|
18
|
+
private createGradient;
|
|
19
|
+
private initializeCanvas;
|
|
17
20
|
update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals?: number): void;
|
|
18
21
|
}
|
|
19
22
|
|
|
@@ -57,6 +60,7 @@ declare class Stats {
|
|
|
57
60
|
private msPanel;
|
|
58
61
|
private gpuPanel;
|
|
59
62
|
private gpuPanelCompute;
|
|
63
|
+
private averageFps;
|
|
60
64
|
private averageCpu;
|
|
61
65
|
private averageGpu;
|
|
62
66
|
private averageGpuCompute;
|
|
@@ -94,7 +98,7 @@ declare class Stats {
|
|
|
94
98
|
} | null, averageArray: {
|
|
95
99
|
logs: number[];
|
|
96
100
|
graph: number[];
|
|
97
|
-
}): void;
|
|
101
|
+
}, precision?: number): void;
|
|
98
102
|
get domElement(): HTMLDivElement;
|
|
99
103
|
patchThreeRenderer(renderer: any): void;
|
|
100
104
|
}
|
package/lib/main.ts
CHANGED
|
@@ -65,6 +65,7 @@ class Stats {
|
|
|
65
65
|
private gpuPanel: Panel | null = null;
|
|
66
66
|
private gpuPanelCompute: Panel | null = null;
|
|
67
67
|
|
|
68
|
+
private averageFps: AverageData = { logs: [], graph: [] };
|
|
68
69
|
private averageCpu: AverageData = { logs: [], graph: [] };
|
|
69
70
|
private averageGpu: AverageData = { logs: [], graph: [] };
|
|
70
71
|
private averageGpuCompute: AverageData = { logs: [], graph: [] };
|
|
@@ -73,8 +74,8 @@ class Stats {
|
|
|
73
74
|
|
|
74
75
|
constructor({
|
|
75
76
|
trackGPU = false,
|
|
76
|
-
logsPerSecond =
|
|
77
|
-
samplesLog =
|
|
77
|
+
logsPerSecond = 30,
|
|
78
|
+
samplesLog = 60,
|
|
78
79
|
samplesGraph = 10,
|
|
79
80
|
precision = 2,
|
|
80
81
|
minimal = false,
|
|
@@ -106,6 +107,7 @@ class Stats {
|
|
|
106
107
|
this.setupEventListeners();
|
|
107
108
|
}
|
|
108
109
|
|
|
110
|
+
|
|
109
111
|
private initializeDOM(): void {
|
|
110
112
|
this.dom.style.cssText = `
|
|
111
113
|
position: fixed;
|
|
@@ -356,27 +358,29 @@ class Stats {
|
|
|
356
358
|
|
|
357
359
|
this.frames++;
|
|
358
360
|
const time = (performance || Date).now();
|
|
361
|
+
const elapsed = time - this.prevTime;
|
|
359
362
|
|
|
363
|
+
// Calculate FPS more frequently based on logsPerSecond
|
|
360
364
|
if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
|
|
361
|
-
|
|
362
|
-
|
|
365
|
+
// Calculate FPS and round to nearest integer
|
|
366
|
+
const fps = Math.round((this.frames * 1000) / elapsed);
|
|
367
|
+
|
|
368
|
+
// Add to FPS averages
|
|
369
|
+
this.addToAverage(fps, this.averageFps);
|
|
370
|
+
|
|
371
|
+
// Update all panels
|
|
372
|
+
this.updatePanel(this.fpsPanel, this.averageFps, 0);
|
|
373
|
+
this.updatePanel(this.msPanel, this.averageCpu, this.precision);
|
|
374
|
+
this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
|
|
363
375
|
|
|
364
376
|
if (this.gpuPanelCompute) {
|
|
365
377
|
this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
|
|
366
378
|
}
|
|
367
379
|
|
|
380
|
+
// Reset frame counter for next interval
|
|
381
|
+
this.frames = 0;
|
|
368
382
|
this.prevCpuTime = time;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
if (time >= this.prevTime + 1000) {
|
|
372
|
-
|
|
373
|
-
const fps = (this.frames * 1000) / (time - this.prevTime);
|
|
374
|
-
|
|
375
|
-
this.fpsPanel.update(fps, fps, 100, 100, 0);
|
|
376
|
-
|
|
377
383
|
this.prevTime = time;
|
|
378
|
-
this.frames = 0;
|
|
379
|
-
|
|
380
384
|
}
|
|
381
385
|
|
|
382
386
|
return time;
|
|
@@ -425,7 +429,7 @@ class Stats {
|
|
|
425
429
|
|
|
426
430
|
}
|
|
427
431
|
|
|
428
|
-
updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }) {
|
|
432
|
+
updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }, precision = 2) {
|
|
429
433
|
|
|
430
434
|
if (averageArray.logs.length > 0) {
|
|
431
435
|
|
|
@@ -455,7 +459,7 @@ class Stats {
|
|
|
455
459
|
}
|
|
456
460
|
|
|
457
461
|
if (panel) {
|
|
458
|
-
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph,
|
|
462
|
+
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
|
|
459
463
|
}
|
|
460
464
|
|
|
461
465
|
}
|
package/lib/panel.ts
CHANGED
|
@@ -4,6 +4,7 @@ class Panel {
|
|
|
4
4
|
name: string;
|
|
5
5
|
fg: string;
|
|
6
6
|
bg: string;
|
|
7
|
+
gradient: CanvasGradient | null;
|
|
7
8
|
PR: number;
|
|
8
9
|
WIDTH: number;
|
|
9
10
|
HEIGHT: number;
|
|
@@ -15,10 +16,10 @@ class Panel {
|
|
|
15
16
|
GRAPH_HEIGHT: number;
|
|
16
17
|
|
|
17
18
|
constructor(name: string, fg: string, bg: string) {
|
|
18
|
-
|
|
19
19
|
this.name = name;
|
|
20
20
|
this.fg = fg;
|
|
21
21
|
this.bg = bg;
|
|
22
|
+
this.gradient = null;
|
|
22
23
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
23
24
|
|
|
24
25
|
this.WIDTH = 90 * this.PR;
|
|
@@ -31,57 +32,136 @@ class Panel {
|
|
|
31
32
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
32
33
|
|
|
33
34
|
this.canvas = document.createElement('canvas');
|
|
34
|
-
this.canvas.width =
|
|
35
|
-
this.canvas.height =
|
|
35
|
+
this.canvas.width = this.WIDTH;
|
|
36
|
+
this.canvas.height = this.HEIGHT;
|
|
36
37
|
this.canvas.style.width = '90px';
|
|
37
|
-
this.canvas.style.position = 'absolute';
|
|
38
38
|
this.canvas.style.height = '48px';
|
|
39
|
+
this.canvas.style.position = 'absolute';
|
|
39
40
|
this.canvas.style.cssText = 'width:90px;height:48px';
|
|
40
41
|
|
|
41
42
|
this.context = this.canvas.getContext('2d');
|
|
43
|
+
this.initializeCanvas();
|
|
44
|
+
}
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.
|
|
49
|
-
|
|
50
|
-
this.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
private createGradient(): CanvasGradient {
|
|
47
|
+
if (!this.context) throw new Error('No context');
|
|
48
|
+
|
|
49
|
+
const gradient = this.context.createLinearGradient(
|
|
50
|
+
0,
|
|
51
|
+
this.GRAPH_Y,
|
|
52
|
+
0,
|
|
53
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
let startColor: string;
|
|
57
|
+
const endColor: string = this.fg;
|
|
58
|
+
|
|
59
|
+
switch (this.fg.toLowerCase()) {
|
|
60
|
+
case '#0ff': // Cyan
|
|
61
|
+
startColor = '#006666'; // Dark Cyan
|
|
62
|
+
break;
|
|
63
|
+
case '#0f0': // Green
|
|
64
|
+
startColor = '#006600'; // Dark Green
|
|
65
|
+
break;
|
|
66
|
+
case '#ff0': // Yellow
|
|
67
|
+
startColor = '#666600'; // Dark Yellow
|
|
68
|
+
break;
|
|
69
|
+
case '#e1e1e1': // Light Gray
|
|
70
|
+
startColor = '#666666'; // Medium Gray
|
|
71
|
+
break;
|
|
72
|
+
default:
|
|
73
|
+
startColor = this.bg;
|
|
74
|
+
break;
|
|
57
75
|
}
|
|
58
76
|
|
|
59
|
-
|
|
77
|
+
gradient.addColorStop(0, startColor);
|
|
78
|
+
gradient.addColorStop(1, endColor);
|
|
60
79
|
|
|
61
|
-
|
|
62
|
-
|
|
80
|
+
return gradient;
|
|
81
|
+
}
|
|
63
82
|
|
|
83
|
+
private initializeCanvas() {
|
|
64
84
|
if (!this.context) return;
|
|
65
85
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
maxGraph = Math.max(maxGraph, valueGraph);
|
|
86
|
+
this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
|
|
87
|
+
this.context.textBaseline = 'top';
|
|
69
88
|
|
|
89
|
+
// Create gradient
|
|
90
|
+
this.gradient = this.createGradient();
|
|
91
|
+
|
|
92
|
+
// Fill background
|
|
70
93
|
this.context.fillStyle = this.bg;
|
|
71
|
-
this.context.
|
|
72
|
-
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
73
|
-
this.context.fillStyle = this.fg;
|
|
74
|
-
this.context.fillText(value.toFixed(decimals) + ' ' + this.name + ' (' + min.toFixed(decimals) + '-' + parseFloat(max.toFixed(decimals)) + ')', this.TEXT_X, this.TEXT_Y);
|
|
94
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
75
95
|
|
|
76
|
-
|
|
96
|
+
// Draw text
|
|
97
|
+
this.context.fillStyle = this.fg;
|
|
98
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
77
99
|
|
|
78
|
-
|
|
100
|
+
// Draw initial graph area
|
|
101
|
+
this.context.fillStyle = this.fg;
|
|
102
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
79
103
|
|
|
104
|
+
// Apply semi-transparent background
|
|
80
105
|
this.context.fillStyle = this.bg;
|
|
81
106
|
this.context.globalAlpha = 0.9;
|
|
107
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
update(
|
|
111
|
+
value: number,
|
|
112
|
+
valueGraph: number,
|
|
113
|
+
maxValue: number,
|
|
114
|
+
maxGraph: number,
|
|
115
|
+
decimals = 0
|
|
116
|
+
) {
|
|
117
|
+
if (!this.context || !this.gradient) return;
|
|
118
|
+
|
|
119
|
+
const min = Math.min(Infinity, value);
|
|
120
|
+
const max = Math.max(maxValue, value);
|
|
121
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
82
122
|
|
|
83
|
-
|
|
123
|
+
// Clear and redraw background
|
|
124
|
+
this.context.globalAlpha = 1;
|
|
125
|
+
this.context.fillStyle = this.bg;
|
|
126
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
127
|
+
|
|
128
|
+
// Draw text
|
|
129
|
+
this.context.fillStyle = this.fg;
|
|
130
|
+
this.context.fillText(
|
|
131
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
132
|
+
max.toFixed(decimals)
|
|
133
|
+
)})`,
|
|
134
|
+
this.TEXT_X,
|
|
135
|
+
this.TEXT_Y
|
|
136
|
+
);
|
|
137
|
+
|
|
138
|
+
// Shift the graph left
|
|
139
|
+
this.context.drawImage(
|
|
140
|
+
this.canvas,
|
|
141
|
+
this.GRAPH_X + this.PR,
|
|
142
|
+
this.GRAPH_Y,
|
|
143
|
+
this.GRAPH_WIDTH - this.PR,
|
|
144
|
+
this.GRAPH_HEIGHT,
|
|
145
|
+
this.GRAPH_X,
|
|
146
|
+
this.GRAPH_Y,
|
|
147
|
+
this.GRAPH_WIDTH - this.PR,
|
|
148
|
+
this.GRAPH_HEIGHT
|
|
149
|
+
);
|
|
150
|
+
|
|
151
|
+
// Draw new column with gradient
|
|
152
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
153
|
+
|
|
154
|
+
if (columnHeight > 0) {
|
|
155
|
+
this.context.globalAlpha = 1;
|
|
156
|
+
this.context.fillStyle = this.gradient;
|
|
157
|
+
this.context.fillRect(
|
|
158
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
159
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
160
|
+
this.PR,
|
|
161
|
+
columnHeight
|
|
162
|
+
);
|
|
163
|
+
}
|
|
84
164
|
}
|
|
85
|
-
}
|
|
165
|
+
}
|
|
86
166
|
|
|
87
|
-
export { Panel };
|
|
167
|
+
export { Panel };
|