-
Notifications
You must be signed in to change notification settings - Fork 9
/
recorder-gallery.html
106 lines (97 loc) · 2.75 KB
/
recorder-gallery.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<meta charset="utf-8">
<body></body>
<script src="js/lib/d3.v3.js"></script>
<script>
var gestures = [
// "data/gestures/boxing-1.json",
// "data/gestures/boxing-2.json",
// "data/gestures/boxing-3.json",
"data/gestures/dismiss-right-1.json",
"data/gestures/dismiss-right-2.json",
"data/gestures/dismiss-right-3.json",
"data/gestures/frolic-1.json",
"data/gestures/frolic-4.json",
"data/gestures/frolic-5.json",
"data/gestures/grabs-1.json",
"data/gestures/grabs-2.json",
"data/gestures/grabs-3.json",
// "data/gestures/one-hand-clapping-1.json",
// "data/gestures/one-hand-clapping-2.json",
// "data/gestures/one-hand-clapping-3.json",
"data/gestures/pinch-out-1.json",
"data/gestures/pinch-out-2.json",
"data/gestures/pinch-out-3.json",
"data/gestures/pinkywave-1.json",
"data/gestures/pinkywave-2.json",
"data/gestures/pinkywave-3.json",
"data/gestures/rotate-cw-1.json",
"data/gestures/rotate-cw-2.json",
"data/gestures/rotate-cw-3.json",
// "data/gestures/spiderman-1.json",
// "data/gestures/spiderman-2.json",
// "data/gestures/spiderman-3.json",
// "data/gestures/tickle-1.json",
// "data/gestures/tickle-2.json",
// "data/gestures/tickle-3.json",
];
gestures.forEach(portrait);
function portrait(url) {
var container = document.createElement("div");
document.body.appendChild(container);
d3.json(url, function(error, data) {
if (error) {
alert(error.statusText);
return
}
window.data = data;
var last = data.length-1;
var i = 0;
var duration = (data[last].timestamp - data[0].timestamp)/1000;
var step = duration/data.length;
d3.select(container).attr("class", "gesture").html(url + "<br/>");
var canvas = document.createElement("canvas");
canvas.width = 140;
canvas.height = 140;
container.appendChild(canvas);
var ctx = canvas.getContext("2d");
var x = d3.scale.linear().range([0,canvas.width]).domain([-200,200]);
var y = d3.scale.linear().range([canvas.height,0]).domain([0,400]);
function renderPointables(obj) {
ctx.fillStyle = "rgba(245,245,245,0.3)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#111";
if ("pointables" in obj) {
obj.pointables.forEach(function(p) {
var pos = p.tipPosition;
ctx.fillRect(x(pos[0]), y(pos[1]), 4, 4);
});
}
};
function run() {
if (i == last) i = 0;
renderPointables(data[i]);
i++;
setTimeout(run, step);
};
run();
});
};
</script>
<style>
html, body {
margin: 0;
padding: 0;
background: #e3e3e3;
font-size: 9px;
font-family: Helvetica, Arial, sans-serif;
}
.gesture {
float: left;
margin: 8px 0 0 8px;
border-radius: 8px;
}
canvas {
border-radius: 4px;
}
</style>