`EyeTracker` element

Action commands

Test commands

eyetracker.test.calibrated
eyetracker.test.ready

description

Creates an eye-tracking data collector.

syntax

newEyeTracker(ELEMENT_NAME: string, [OUT_OF: int], [LOOKED_AT: int])

ELEMENT_NAME: The name of the newly-created element.
[OUT_OF] (optional): the number of cycles
[LOOKED_AT] (optional): proportion of cycles

since

PennController 1.8

example(s)

```javascript newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) ) newTrial( newEyeTracker("tracker").calibrate(70) , newText("lookedAt", "").print() , newText("Left").css("padding","20vw").print("20vw", "40vh"), newText("Right").css("padding","20vw").print("60vw", "40vh") , getEyeTracker("tracker") .add( getText("Left") , getText("Right") ) .callback(function(x,y){ getText("lookedAt").text(`Looking at ${this.id} (${x},${y})`)._runPromises(); }) .start() , newSelector().add( getText("Left") , getText("Right") ).wait()) ``` + Will initiate eyetrackekr and display the name of the element being looked-at, along with the X and Y coordinates.

Action commands

`eyetracker.add`

syntax

.add()

description

Adds elements to be tracked.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker")
@        .calibrate(70)
@        .train(true)
@    ,
@    newButton("Click here first").print("20vw","40vh").wait().remove(), 
@    newButton("Now Click here").print("60vw","40vh").wait().remove()
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
@        .stopTraining()
$        .add( getText("Left") , getText("Right") )
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will add Left and Right as tracked elements.

↑ back to top

`eyetracker.calibrate`

syntax

.calibrate()

description

Calibrates the eye-tracker so that threshold% of the estimated looks fall on the target.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
$    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker").add( getText("Left") , getText("Right") ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)
@
@newTrial(
$    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Right").css("padding","20vw").print("20vw", "40vh"),
@    newText("Left").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker").add( getText("Left") , getText("Right") ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will go through a calibration phase at the beginning of the first eye-tracking trial. The second eye-tracking trial will begin with a central button: if fewer than 70% of the estimated looks fall on the button during the 3s fixation time-window, it will go through a calibration phase again.

↑ back to top

`eyetracker.callback`

syntax

.callback()

description

Tell the script to continuously execute the specified javascript function as long as an element is being looked at.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("lookedAt", "").print()
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
@        .add( getText("Left") , getText("Right") )
$        .callback(function(x,y){ getText("lookedAt")
$                                 .text(`Looking ${this.id} (${x},${y})`)._runPromises(); })
@        .start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will display the name of the element being looked-at, along with the X and Y coordinates.

↑ back to top

`eyetracker.hideFeedback`

syntax

.hideFeedback()

description

Hides the red dot estimating your looks.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker").add( getText("Left") , getText("Right") ).showFeedback().start()
@    ,
$    newTimer(1000).callback( getEyeTracker("tracker").hideFeedback() ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will still show the red dot after calibration for 1 second, and hide it after that delay (assuming no selection has been made in the meantime).

↑ back to top

`eyetracker.log`

syntax

.log()

description

Tell the EyeTracker element to send the collected data points to the PHP script provided by EyeTrackerURL at the end of the trial.

example

click to expand

newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
newTrial(
    newEyeTracker("tracker").calibrate(70)
    ,
    newText("lookedAt", "").print()
    ,
    newText("Left").css("padding","20vw").print("20vw", "40vh"),
    newText("Right").css("padding","20vw").print("60vw", "40vh")
    ,
    getEyeTracker("tracker")
        .add( getText("Left") , getText("Right") )
        .callback(function(x,y){ getText("lookedAt").text(`Looking at ${this.id} (${x},${y})`)._runPromises(); })
        .start()
    ,
    newSelector().add( getText("Left") , getText("Right") ).wait()
    ,
    getEyeTracker("tracker")
        .log()
)

↑ back to top

`eyetracker.showFeedback`

syntax

.showFeedback()

description

Shows the red dot estimating your looks, which is hidden by default after calibration.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
@        .add( getText("Left") , getText("Right") )
$        .showFeedback()
@        .start()
@    ,
@    newTimer(1000).callback( getEyeTracker("tracker").hideFeedback() ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will still show the red dot after calibration for 1 second, and hide it after that delay (assuming no selection has been made in the meantime).

↑ back to top

`eyetracker.start`

syntax

.start()

description

Starts tracking which element is being looked at.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker").add( getText("Left") , getText("Right") ).showFeedback().start()
@    ,
$    newTimer(1000).callback( getEyeTracker("tracker").hideFeedback() ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will start tracking looks to the Left and Right elements after they are printed.

↑ back to top

`eyetracker.stop`

syntax

.stop()

description

Stops tracking which element is being looked at.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker").calibrate(70)
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker").add( getText("Left") , getText("Right") ).showFeedback().start()
@    ,
$    newTimer(1000).callback( getEyeTracker("tracker").stop() ).start()
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will stop tracking looks after 1 second.

↑ back to top

`eyetracker.stopTraining`

syntax

.stopTraining()

description

Stops using mouse movements and clicks to train the model that estimates looks.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker")
@        .calibrate(70)
@        .train(true)
@    ,
@    newButton("Click here first").print("20vw","40vh").wait().remove(), 
@    newButton("Now Click here").print("60vw","40vh").wait().remove()
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
$        .stopTraining()
@        .add( getText("Left") , getText("Right") )
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will keep training the model after calibration, so that the participant’s successive clicks on the buttons will be used to refine the model, and will stop using mouse events to train the model once Left and Right* show up on the page.

↑ back to top

`eyetracker.train`

syntax

.train()

description

Starts using mouse movements and clicks to train the model that estimates looks. Pass true as a parameter to make the red dot visible.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker")
@        .calibrate(70)
$        .train(true)
@    ,
@    newButton("Click here first").print("20vw","40vh").wait().remove(), 
@    newButton("Now Click here").print("60vw","40vh").wait().remove()
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
@        .stopTraining()
@        .add( getText("Left") , getText("Right") )
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will keep training the model after calibration with visual feedback (the red dot) so that the participant’s successive clicks on the buttons will be used to refine the model, and will stop using mouse events to train the model once Left and Right show up on the page.

↑ back to top

`eyetracker.trainOnMouseMove`

syntax

.trainOnMouseMove()

description

Tells the model to use mouse movements for its estimations or, if you pass false, to NOT use them.

example

click to expand


@newTrial( newButton("Start").print().wait(newEyeTracker().test.ready()) )
@
@newTrial(
@    newEyeTracker("tracker")
@        .calibrate(70)
@        .train(true)
$        .trainOnMouseMove(false)
@    ,
@    newButton("Click here first").print("20vw","40vh").wait().remove(), 
@    newButton("Now Click here").print("60vw","40vh").wait().remove()
@    ,
@    newText("Left").css("padding","20vw").print("20vw", "40vh"),
@    newText("Right").css("padding","20vw").print("60vw", "40vh")
@    ,
@    getEyeTracker("tracker")
@        .stopTraining()
@        .add( getText("Left") , getText("Right") )
@    ,
@    newSelector().add( getText("Left") , getText("Right") ).wait()
@)

Will keep training the model after calibration but will only use the mouse clicks on the buttons, and NOT the mouse movements toward them, to refine the model.

↑ back to top

Test commands

`eyetracker.test.calibrated`

syntax

.test.calibrated()

description

Tests whether the EyeTracker went through a calibration procedure (regardless of whether it was successful).

example

click to expand

getEyeTracker("tracker")
    .test.calibrated()
    .failure( getVar("useTracker").set(false))

If the eyetracker is not calibrated, tracker won’t be used in this example.

↑ back to top

`eyetracker.test.ready`

syntax

.test.ready()

description

Tests whether the participant has granted webGazer access to their webcam, as required by the EyeTracker.

example

click to expand


@newButton("Start")
@    .print()
$    .wait( newEyeTracker().test.ready()
$        .failure( newText("Please grant access to your webcam").print() )
@    )

Adds a button onto the page and wait for the participant to click it. The presence of the EyeTracker element inside wait also triggers the webcam-access request. The test will only be successful after access has been granted: only then will a click on the button be validated.
If the participant clicks the button before granting access to the webcam, they will see a message inviting them to do so.

↑ back to top

EyeTracker element

description

syntax

since

example(s)

Action commands

Test commands

Table of contents

`EyeTracker` element