/
stats-panel.html
73 lines (66 loc) · 2.69 KB
/
stats-panel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="../components/stats-panel/index.js"></script>
<link rel="stylesheet" href="../styles.css">
<script>
AFRAME.registerComponent('generate-data', {
init() {
this.secs = 0
this.emitData = this.emitData.bind(this)
setInterval(this.emitData, 1000)
},
emitData() {
this.secs++;
const random = Math.floor(Math.random() * 100)
this.el.emit("event1", {secs: this.secs, random: random, wrapper: { nested: this.secs - 1}})
this.el.emit("event2", {data: this.secs * this.secs})
}
})
AFRAME.registerComponent('generate-rapid-data', {
init() {
this.secs = 0
this.emitData = this.emitData.bind(this)
setInterval(this.emitData, 10)
},
emitData() {
this.secs++;
const random = Math.floor(Math.random() * 100)
this.el.emit("event1", {secs: this.secs, random: random, wrapper: { nested: this.secs - 1}})
this.el.emit("event2", {data: this.secs * this.secs})
}
})
</script>
</head>
<body>
<div class="text-overlay">
<p>User-defined additional statistics, output in the style of A-Frame stats</p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/diarmidmackenzie/aframe-components/blob/main/component-usage/stats-panel.html">
view code
</a>
<a-scene stats
stats-panel="merge: false"
stats-group__1="label: First Group"
stats-group__2="label: Second Group"
stats-row__1="group: 1; event: event1; properties: secs; label: Seconds"
stats-row__2="group: 1; event: event1; properties: random; label: Random"
stats-row__3="group: 2; event: event2; properties: data; label: More data"
stats-row__4="group: 2; event: event1; properties: wrapper.nested, secs, random; label: More data"
generate-data>
<a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
<a-entity id="container" position = "0 0 -4" mouse-object-control>
<a-box position="-1 0.5 1" rotation="0 45 0" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E">
</a-sphere>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D">
</a-cylinder>
<a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" side="double"></a-plane>
</a-entity>
</a-scene>
</body>
</html>