Webgazer: Usage example code: usewebgazer.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8">
<TITLE>Program that uses WebGazer.js</TITLE>

<script src="https://webgazer.cs.brown.edu/webgazer.js"></script>

<script>
/*
 * Simple program that uses WebGazer.js
 *
 * Based on https://webgazer.cs.brown.edu/demo.html by Jeff Huang
 *
 * Must run on a remote server, and access via https not http. //*1 Setup, caveats
 * Could also download webgazer.js from http://webgazer.cs.brown.edu and put it where above 'script src=' statement will find it.
 */

function inTarget (data) { //*2 Respond to new gaze: Test for hit 
    // Weird offset determined empirically, other dimensions match our HTML
    const xoffset = -200
    return data && data.x > 500+xoffset && data.x < 500+xoffset+200 && data.y > 300 && data.y < 300+200
}

/*
 * Called whenever we get new gaze data
 * data = object containing an x and y key which are the x and y prediction coordinates (no bounds limiting)
 * clock = elapsed time in milliseconds since webgazer.begin() was called
 */
var lastHit = 0
function gaze (data, clock) { //*2
    const delay = 400 // ms
    
    if (data==null) return;

    if (inTarget (data)) { //*2
        target1.style.color = "red" //*3 Change color
	target1.style.background = "black" //*3

	lastHit = clock //*4 Time delay so user will notice the color change
    }
    else {
	// Time delay is just so user will notice the color change
	if (clock-lastHit > delay) { //*4
	    target1.style.color = "black" //*3
	    target1.style.background = "white" //*3
	}
    }
}

window.onload = function() { //*5 Chaining of OOP methods
    webgazer.setGazeListener(gaze) //*5
        .showPredictionPoints(true) /* shows a square every 100 milliseconds where current prediction is */ //*5
	.begin() //*5
};
</script>
</head>

<BODY LANG="en-US" LINK="#0000ff" DIR="LTR">
    <div>
        <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>

    <div id="target1" style="position:absolute; border-style:solid; border-color:red; right:500px; top:300px; height:200px; width:200px">
	<h2>Try me!</h2>
    </div>
</BODY>
</HTML>
[download file]