-
Notifications
You must be signed in to change notification settings - Fork 2
/
mouse.html
86 lines (77 loc) · 2.47 KB
/
mouse.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
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="controls">
<input id="recordingLength" type="text" value="3000" name="recordingLength">
<button id="as" type="button" onclick="dump('readings');">Save</button>
<button id="recordRed" type="button" onclick="record('red');">Record red</button>
<button id="recordGren" type="button" onclick="record('blue');">Record green</button>
<button id="recordBlue" type="button" onclick="record('green');">Record blue</button>
</div>
<div>
<canvas id="myCanvas" width="1024" height="600"></canvas>
</div>
<script>
var readings = {
red: []
,green: []
,blue: []
};
var x = 0;
var y = 0;
function dump(name) {
var r = readings;
var l = Math.min(r.red.length, r.green.length, r.blue.length);
var out = [];
for (var i=0; i<l; i++) {
out.push({red: r.red[i], green: r.green[i], blue: r.blue[i]});
}
// Put the object into storage
localStorage.setItem(name, JSON.stringify(out));
}
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function recordXY(channel) {
var coords = { x: x, y: y};
readings[channel].push(coords); // array of arrays (2d array)
var message = 'Channel ' + channel + 'position: ' + x + ',' + y;
writeMessage(canvas, message);
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
x = mousePos.x;
y = mousePos.y;
}, false);
function record(channel) {
var recordingLength = parseInt(document.getElementById('recordingLength').value);
var recordInterval = setInterval(recordXY, 1000/60.0, channel);
setTimeout(function() {
clearInterval(recordInterval);
writeMessage(canvas, 'Recording complete for ' + channel + ' channel.');
}, recordingLength);
}
</script>
</body>
</html>