[READ-ONLY] Mirror of https://github.com/flo-bit/gaze-controls. automatically scroll up and down a website while reading by tracking users gaze
flo-bit.github.io/gaze-controls/
body-controls
bookmarklet
gaze-tracking
webgazer-js
added bookmarklet
+86
-48
+48
bookmark.js
+48
bookmark.js
···
1
+
javascript: (function () {
2
+
var script = document.createElement("script");
3
+
script.onload = function () {
4
+
let allData = [];
5
+
webgazer.showPredictionPoints(false);
6
+
webgazer.showVideo(false);
7
+
webgazer
8
+
.setGazeListener(function (data) {
9
+
if (data == null) {
10
+
return;
11
+
}
12
+
allData.push({
13
+
x: data.x / window.innerWidth,
14
+
y: data.y / window.innerHeight,
15
+
});
16
+
if (allData.length > 20) {
17
+
allData.shift();
18
+
}
19
+
let avgX = 0,
20
+
avgY = 0;
21
+
for (let i = 0; i < allData.length; i++) {
22
+
avgX += allData[i].x;
23
+
avgY += allData[i].y;
24
+
}
25
+
avgX /= allData.length;
26
+
avgY /= allData.length;
27
+
let point = document.getElementById("point");
28
+
if (point == undefined) {
29
+
point = document.createElement("div");
30
+
point.id = "point";
31
+
point.style =
32
+
"position:fixed;width:30px;height:30px;border-radius:50%;background-color:rgba(0, 0, 0, 0.2);border:0.5px solid black;";
33
+
document.body.appendChild(point);
34
+
}
35
+
point.style.left = avgX * 100 + "%";
36
+
point.style.top = avgY * 100 + "%";
37
+
if (avgY > 0.7) {
38
+
window.scrollBy(0, 2);
39
+
}
40
+
if (avgY < 0.3) {
41
+
window.scrollBy(0, -2);
42
+
}
43
+
})
44
+
.begin();
45
+
};
46
+
script.src = "//flo-bit.github.io/gaze-controls/webgazer.js";
47
+
document.head.appendChild(script);
48
+
})();
+38
-48
index.html
+38
-48
index.html
···
5
5
<body>
6
6
<script>
7
7
let allData = [];
8
-
9
8
webgazer.showPredictionPoints(false);
10
9
webgazer.showVideo(false);
11
-
webgazer.setGazeListener(updateGaze);
12
-
webgazer.begin();
13
-
14
-
function updateGaze(data, ellapsedTime) {
15
-
if (data == null) {
16
-
return;
17
-
}
18
-
var xprediction = data.x / window.innerWidth;
19
-
var yprediction = data.y / window.innerHeight;
20
-
console.log(xprediction + ", " + yprediction);
21
-
22
-
allData.push({ x: xprediction, y: yprediction });
23
-
24
-
if (allData.length > 20) {
25
-
allData.shift();
26
-
}
27
-
let avgX = 0;
28
-
let avgY = 0;
29
-
for (let i = 0; i < allData.length; i++) {
30
-
avgX += allData[i].x;
31
-
avgY += allData[i].y;
32
-
}
33
-
avgX /= allData.length;
34
-
avgY /= allData.length;
35
-
36
-
let point = document.getElementById("point");
37
-
point.style.left = avgX * 100 + "%";
38
-
point.style.top = avgY * 100 + "%";
39
-
40
-
if (avgY > 0.7) {
41
-
window.scrollBy(0, 2);
42
-
}
43
-
if (avgY < 0.3) {
44
-
window.scrollBy(0, -2);
45
-
}
46
-
}
10
+
webgazer
11
+
.setGazeListener(function (data) {
12
+
if (data == null) {
13
+
return;
14
+
}
15
+
allData.push({
16
+
x: data.x / window.innerWidth,
17
+
y: data.y / window.innerHeight,
18
+
});
19
+
if (allData.length > 20) {
20
+
allData.shift();
21
+
}
22
+
let avgX = 0,
23
+
avgY = 0;
24
+
for (let i = 0; i < allData.length; i++) {
25
+
avgX += allData[i].x;
26
+
avgY += allData[i].y;
27
+
}
28
+
avgX /= allData.length;
29
+
avgY /= allData.length;
30
+
let point = document.getElementById("point");
31
+
if (point == undefined) {
32
+
point = document.createElement("div");
33
+
point.id = "point";
34
+
point.style =
35
+
"position:fixed;width:30px;height:30px;border-radius:50%;background-color:rgba(0, 0, 0, 0.2);border:0.5px solid black;";
36
+
document.body.appendChild(point);
37
+
}
38
+
point.style.left = avgX * 100 + "%";
39
+
point.style.top = avgY * 100 + "%";
40
+
if (avgY > 0.7) {
41
+
window.scrollBy(0, 2);
42
+
}
43
+
if (avgY < 0.3) {
44
+
window.scrollBy(0, -2);
45
+
}
46
+
})
47
+
.begin();
47
48
</script>
48
49
49
-
<div
50
-
id="point"
51
-
style="
52
-
position: fixed;
53
-
width: 30px;
54
-
height: 30px;
55
-
border-radius: 50%;
56
-
background-color: rgba(0, 0, 0, 0.2);
57
-
border: 0.5px solid black;
58
-
"
59
-
></div>
60
50
<div
61
51
style="
62
52
width: 500px;