forked from brownhci/WebGazer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
89 lines (76 loc) · 2.85 KB
/
demo.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<TITLE>Simple Demonstration of how WebGazer.js works</TITLE>
</HEAD>
<BODY LANG="en-US" LINK="#0000ff" DIR="LTR">
<div id="mydiv">
<h1 style="color:#C0C0C0" align="right">
Click on a few locations within the screen<br>
while looking purposefully at the cursor.<br>
Both clicks and cursor movements<br>
make the predictions more accurate.
</h1>
</div>
<script src="build/webgazer.js"></script>
<script>
window.onload = function() {
webgazer.setRegression('ridge') /* currently must set regression and tracker */
.setTracker('clmtrackr')
.setGazeListener(function(data, clock) {
// console.log(data); /* data is an object containing an x and y key which are the x and y prediction coordinates (no bounds limiting) */
// console.log(clock); /* elapsed time in milliseconds since webgazer.begin() was called */
})
.begin()
.showPredictionPoints(true); /* shows a square every 100 milliseconds where current prediction is */
var width = 320;
var height = 240;
var topDist = '0px';
var leftDist = '0px';
var setup = function() {
var video = document.getElementById('webgazerVideoFeed');
video.style.display = 'block';
video.style.position = 'absolute';
video.style.top = topDist;
video.style.left = leftDist;
video.width = width;
video.height = height;
video.style.margin = '0px';
webgazer.params.imgWidth = width;
webgazer.params.imgHeight = height;
var overlay = document.createElement('canvas');
overlay.id = 'overlay';
overlay.style.position = 'absolute';
overlay.width = width;
overlay.height = height;
overlay.style.top = topDist;
overlay.style.left = leftDist;
overlay.style.margin = '0px';
document.body.appendChild(overlay);
var cl = webgazer.getTracker().clm;
function drawLoop() {
requestAnimFrame(drawLoop);
overlay.getContext('2d').clearRect(0,0,width,height);
if (cl.getCurrentPosition()) {
cl.draw(overlay);
}
}
drawLoop();
};
function checkIfReady() {
if (webgazer.isReady()) {
setup();
} else {
setTimeout(checkIfReady, 100);
}
}
setTimeout(checkIfReady,100);
};
window.onbeforeunload = function() {
//webgazer.end(); //Uncomment if you want to save the data even if you reload the page.
window.localStorage.clear(); //Comment out if you want to save data across different sessions
}
</script>
</BODY>
</HTML>