-
Notifications
You must be signed in to change notification settings - Fork 9
/
recorder.html
112 lines (101 loc) · 3.29 KB
/
recorder.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
107
108
109
110
111
112
<!DOCTYPE html>
<!-- saved from url=(0113)file:///C:/Users/user1/AppData/Local/Temp/Temp1_Leap_Developer_Kit_0.7.1_Windows.zip/Leap_SDK/samples/Sample.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Leap Gesture Recorder</title>
<script>
var ws,
record = function() {};
// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
(typeof(MozWebSocket) != 'undefined')) {
WebSocket = MozWebSocket;
}
// Create the socket with event handlers
function init() {
var recording = false,
recorded = [];
//Create and open the socket
ws = new WebSocket("ws://localhost:6437/");
// On successful connection
ws.onopen = function(event) {
document.getElementById("main").style.visibility = "visible";
document.getElementById("connection").innerHTML = "<span class='good'>WebSocket connection open!</span>";
};
// On message received
ws.onmessage = function(event) {
var obj = JSON.parse(event.data);
if (recording) {
recorded.push(obj);
if (recorded.length % 12 == 0) document.getElementById("samplesize").innerHTML = recorded.length;
};
};
// On socket close
ws.onclose = function(event) {
ws = null;
style.visibility = "hidden";
document.getElementById("connection").innerHTML = "<span class='bad'>WebSocket connection</span> closed";
}
//On socket error
ws.onerror = function(event) {
alert("Received error");
};
var record_button = document.getElementById("recorder");
// On record press
record = function() {
// toggle recording
recording = !recording;
if (recording) {
record_button.value = "finish recording";
} else {
record_button.value = "record gesture";
document.getElementById("samplesize").innerHTML = recorded.length;
// print out results if finished recording
var html = "<textarea>[\n";
recorded.forEach(function(obj) {
html += JSON.stringify(obj, undefined, 0);
html += ",\n";
});
html = html.slice(0,html.length-2);
html += "\n]</textarea>";
document.getElementById("output").innerHTML = html;
}
// reset recorded data
recorded = [];
};
}
</script>
</head>
<body onload="init();">
<h1>Leap Gesture Recorder</h1>
<p>A utility for recording a few seconds of data from a Leap Motion sensor.</p>
<p><strong>Press the record button to begin recording a gesture.</strong><br/>Click it again to output the collected data as JSON text on the page.</p>
<p>You can use the data to visualize and analyze a single gesture,<br/>or create a database of gestures to test gesture detection routines. The easiest way is to copy+paste to a JSON file.</p>
<p>Check out the <a href="recorder-gallery.html">gallery</a> and <a href="recorder-diagnostic.html">diagnostic</a> demos.</p>
<p id="connection">WebSocket connection open!</p>
<div id="main" style="visibility: visible;">
<input type="button" value="record gesture" onclick="record()" id="recorder"></input><strong id="samplesize">0</strong> samples recorded
<div id="output" style="font-size: 10px"></div>
</div>
</body>
<style>
body {
font-family: sans-serif;
font-size: 13px;
}
p {
width: 500px;
}
.good {
color: green;
font-weight: bold;
}
.bad {
color: red;
font-weight: bold;
}
textarea {
height: 400px;
width: 600px;
}
</style>
</html>