<!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>