eyereader/script.js at master · athsiao/eyereader · GitHub

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
/* This is the code for the eye tracking implemented using
* GazeCloud API; details about GazeCloud here:
* See README.md for reference material on the API
*/

// Calibration is complete
GazeCloudAPI.OnCalibrationComplete = function(){
    console.log('gaze Calibration Complete')
}

// If camera access is denied
GazeCloudAPI.OnCamDenied = function(){
    console.log('camera access denied')
}

// Error messages
GazeCloudAPI.OnError = function (msg) {
    console.log('err: ' + msg)
}

// Users can click to recalibrate in real time
// # TODO : Add message to let user know about this feature
GazeCloudAPI.UseClickRecalibration = true;

// Starts eye tracking
GazeCloudAPI.StartEyeTracking();

// Draws a circle around where we are looking right now, for demonstration purposes
function draw(gazeX, gazeY) {

    // Finds canvas on HTML document
    var canvas = document.getElementById('circle');

    // Always same size as window
    const resize = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    resize()

    // Draws the circle
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // Uses user's eye position
        var X = gazeX;
        var Y = gazeY;
        var R = 45;

        // Draws a path
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#db7575';
        ctx.stroke();
    }
}

// IFrame = PDF viewer
var myIframe = document.getElementById('iframe');
var y = 0;

// Every time the GazeCloud API gets a result for where the user is looking
GazeCloudAPI.OnResult = function (GazeData, y) {

    /* IMPORTANT VARIABLES ||
    *** used in current implementation

    GazeData.state
        0   : valid gaze data
        -1  : face tracking lost
        1   : gaze data uncalibrated

    GazeData.docX
        // gaze x in document coordinates

    GazeData.docY
        // gaze y in document coordinates

    GazeData.GazeX ***
        // gaze x in screen coordinates

    GazeData.GazeY ***
        // gaze y in screen coodinates

    GazeData.time
        // current timestamp
    */

    // Draws a circle around the current location using gaze data
    draw(GazeData.GazeX, GazeData.GazeY);

    // Scrolls up or down depending on if gaze is high or low enough on the screen
    if (GazeData.GazeY > 700) {
        window.scrollBy(0,50);
    } else if (GazeData.GazeY < 300) {
        window.scrollBy(0,-50);
    }

}