mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
307 lines
11 KiB
JavaScript
307 lines
11 KiB
JavaScript
/**
|
|
* jspsych-webgazer-validate
|
|
* Josh de Leeuw
|
|
**/
|
|
|
|
jsPsych.plugins["webgazer-validate"] = (function() {
|
|
|
|
var plugin = {};
|
|
|
|
plugin.info = {
|
|
name: 'webgazer-validate',
|
|
description: '',
|
|
parameters: {
|
|
validation_points: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
default: [[10,10], [10,50], [10,90], [50,10], [50,50], [50,90], [90,10], [90,50], [90,90]]
|
|
},
|
|
validation_point_coordinates: {
|
|
type: jsPsych.plugins.parameterType.STRING,
|
|
default: 'percent' // options: 'percent', 'center-offset-pixels'
|
|
},
|
|
roi_radius: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
default: 200
|
|
},
|
|
randomize_validation_order: {
|
|
type: jsPsych.plugins.parameterType.BOOL,
|
|
default: false
|
|
},
|
|
time_to_saccade: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
default: 1000
|
|
},
|
|
validation_duration: {
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
default: 2000
|
|
},
|
|
point_size:{
|
|
type: jsPsych.plugins.parameterType.INT,
|
|
default: 20
|
|
},
|
|
show_validation_data: {
|
|
type: jsPsych.plugins.parameterType.BOOL,
|
|
default: false
|
|
}
|
|
}
|
|
}
|
|
|
|
plugin.trial = function(display_element, trial) {
|
|
|
|
var trial_data = {}
|
|
trial_data.raw_gaze = [];
|
|
trial_data.percent_in_roi = [];
|
|
trial_data.average_offset = [];
|
|
trial_data.validation_points = null;
|
|
|
|
var html = `
|
|
<div id='webgazer-validate-container' style='position: relative; width:100vw; height:100vh; overflow: hidden;'>
|
|
</div>`
|
|
|
|
display_element.innerHTML = html;
|
|
|
|
var wg_container = display_element.querySelector('#webgazer-validate-container');
|
|
|
|
var points_completed = -1;
|
|
var val_points = null;
|
|
var start = performance.now();
|
|
|
|
validate();
|
|
|
|
function validate(){
|
|
|
|
if(trial.randomize_validation_order){
|
|
val_points = jsPsych.randomization.shuffle(trial.validation_points);
|
|
} else {
|
|
val_points = trial.validation_points;
|
|
}
|
|
trial_data.validation_points = val_points;
|
|
points_completed = -1;
|
|
//jsPsych.extensions['webgazer'].resume();
|
|
jsPsych.extensions.webgazer.startSampleInterval();
|
|
//jsPsych.extensions.webgazer.showPredictions();
|
|
next_validation_point();
|
|
}
|
|
|
|
function next_validation_point(){
|
|
points_completed++;
|
|
if(points_completed == val_points.length){
|
|
validation_done();
|
|
} else {
|
|
var pt = val_points[points_completed];
|
|
validation_display(pt);
|
|
}
|
|
}
|
|
|
|
function validation_display(pt){
|
|
var pt_html = drawValidationPoint(pt[0], pt[1]);
|
|
wg_container.innerHTML = pt_html;
|
|
|
|
var pt_dom = wg_container.querySelector('.validation-point');
|
|
|
|
var br = pt_dom.getBoundingClientRect();
|
|
var x = br.left + br.width / 2;
|
|
var y = br.top + br.height / 2;
|
|
|
|
var pt_start_val = performance.now() + trial.time_to_saccade;
|
|
var pt_finish = pt_start_val + trial.validation_duration;
|
|
|
|
var pt_data = [];
|
|
|
|
var cancelGazeUpdate = jsPsych.extensions['webgazer'].onGazeUpdate(function(prediction){
|
|
if(performance.now() > pt_start_val){
|
|
pt_data.push({x: prediction.x, y: prediction.y, dx: prediction.x - x, dy: prediction.y - y, t: Math.round(prediction.t-start)});
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(function watch_dot(){
|
|
if(performance.now() < pt_finish){
|
|
requestAnimationFrame(watch_dot);
|
|
} else {
|
|
trial_data.raw_gaze.push(pt_data);
|
|
cancelGazeUpdate();
|
|
|
|
next_validation_point();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function drawValidationPoint(x,y){
|
|
if(trial.validation_point_coordinates == 'percent'){
|
|
return drawValidationPoint_PercentMode(x,y);
|
|
}
|
|
if(trial.validation_point_coordinates == 'center-offset-pixels'){
|
|
return drawValidationPoint_CenterOffsetMode(x,y);
|
|
}
|
|
}
|
|
|
|
function drawValidationPoint_PercentMode(x,y){
|
|
return `<div class="validation-point" style="width:${trial.point_size}px; height:${trial.point_size}px; border-radius:${trial.point_size}px; border: 1px solid #000; background-color: #333; position: absolute; left:${x}%; top:${y}%;"></div>`
|
|
}
|
|
|
|
function drawValidationPoint_CenterOffsetMode(x,y){
|
|
return `<div class="validation-point" style="width:${trial.point_size}px; height:${trial.point_size}px; border-radius:${trial.point_size}px; border: 1px solid #000; background-color: #333; position: absolute; left:calc(50% - ${trial.point_size/2}px + ${x}px); top:calc(50% - ${trial.point_size/2}px + ${y}px);"></div>`
|
|
}
|
|
|
|
function drawCircle(target_x, target_y, dx, dy, r){
|
|
if(trial.validation_point_coordinates == 'percent'){
|
|
return drawCircle_PercentMode(target_x, target_y, dx, dy, r);
|
|
}
|
|
if(trial.validation_point_coordinates == 'center-offset-pixels'){
|
|
return drawCircle_CenterOffsetMode(target_x, target_y, dx, dy, r);
|
|
}
|
|
}
|
|
|
|
function drawCircle_PercentMode(target_x, target_y, dx, dy, r){
|
|
var html = `
|
|
<div class="validation-centroid" style="width:${r*2}px; height:${r*2}px; border: 2px dotted #ccc; border-radius: ${r}px; background-color: transparent; position: absolute; left:calc(${target_x}% + ${dx-r}px); top:calc(${target_y}% + ${dy-r}px);"></div>
|
|
`
|
|
return html;
|
|
}
|
|
|
|
function drawCircle_CenterOffsetMode(target_x, target_y, dx, dy, r){
|
|
var html = `
|
|
<div class="validation-centroid" style="width:${r*2}px; height:${r*2}px; border: 2px dotted #ccc; border-radius: ${r}px; background-color: transparent; position: absolute; left:calc(50% + ${target_x}px + ${dx-r}px); top:calc(50% + ${target_y}px + ${dy-r}px);"></div>
|
|
`
|
|
return html;
|
|
}
|
|
|
|
function drawRawDataPoint(target_x, target_y, dx, dy, ){
|
|
if(trial.validation_point_coordinates == 'percent'){
|
|
return drawRawDataPoint_PercentMode(target_x, target_y, dx, dy);
|
|
}
|
|
if(trial.validation_point_coordinates == 'center-offset-pixels'){
|
|
return drawRawDataPoint_CenterOffsetMode(target_x, target_y, dx, dy);
|
|
}
|
|
}
|
|
|
|
function drawRawDataPoint_PercentMode(target_x, target_y, dx, dy){
|
|
var color = Math.sqrt(dx*dx + dy*dy) <= trial.roi_radius ? '#afa' : '#faa';
|
|
return `<div class="raw-data-point" style="width:5px; height:5px; border-radius:5px; background-color: ${color}; opacity:0.8; position: absolute; left:calc(${target_x}% + ${dx-2}px); top:calc(${target_y}% + ${dy-2}px);"></div>`
|
|
}
|
|
|
|
function drawRawDataPoint_CenterOffsetMode(target_x, target_y, dx, dy){
|
|
var color = Math.sqrt(dx*dx + dy*dy) <= trial.roi_radius ? '#afa' : '#faa';
|
|
return `<div class="raw-data-point" style="width:5px; height:5px; border-radius:5px; background-color: ${color}; opacity:0.8; position: absolute; left:calc(50% + ${target_x}px + ${dx-2}px); top:calc(50% + ${target_y}px + ${dy-2}px);"></div>`
|
|
}
|
|
|
|
function median(arr){
|
|
var mid = Math.floor(arr.length/2);
|
|
var sorted_arr = arr.sort((a,b) => a-b);
|
|
if(arr.length % 2 == 0){
|
|
return sorted_arr[mid-1] + sorted_arr[mid] / 2;
|
|
} else {
|
|
return sorted_arr[mid];
|
|
}
|
|
}
|
|
|
|
function calculateGazeCentroid(gazeData){
|
|
|
|
var x_diff_m = gazeData.reduce(function(accumulator, currentValue, index){
|
|
accumulator += currentValue.dx;
|
|
if(index == gazeData.length-1){
|
|
return accumulator / gazeData.length;
|
|
} else {
|
|
return accumulator;
|
|
}
|
|
}, 0);
|
|
|
|
var y_diff_m = gazeData.reduce(function(accumulator, currentValue, index){
|
|
accumulator += currentValue.dy;
|
|
if(index == gazeData.length-1){
|
|
return accumulator / gazeData.length;
|
|
} else {
|
|
return accumulator;
|
|
}
|
|
}, 0);
|
|
|
|
var median_distance = median(gazeData.map(function(x){ return(Math.sqrt(Math.pow(x.dx-x_diff_m,2) + Math.pow(x.dy-y_diff_m,2)))}));
|
|
|
|
return {
|
|
x: x_diff_m,
|
|
y: y_diff_m,
|
|
r: median_distance
|
|
}
|
|
}
|
|
|
|
function calculatePercentInROI(gazeData){
|
|
var distances = gazeData.map(function(p){
|
|
return(Math.sqrt(Math.pow(p.dx,2) + Math.pow(p.dy,2)))
|
|
});
|
|
var sum_in_roi = distances.reduce(function(accumulator, currentValue){
|
|
if(currentValue <= trial.roi_radius){
|
|
accumulator++;
|
|
}
|
|
return accumulator;
|
|
}, 0);
|
|
var percent = sum_in_roi / gazeData.length * 100;
|
|
return percent;
|
|
}
|
|
|
|
function calculateSampleRate(gazeData){
|
|
var mean_diff = [];
|
|
for(var i=0; i<gazeData.length; i++){
|
|
if(gazeData[i].length > 1){
|
|
var t_diff = [];
|
|
for(var j=1; j<gazeData[i].length; j++){
|
|
t_diff.push(gazeData[i][j].t - gazeData[i][j-1].t)
|
|
}
|
|
mean_diff.push(t_diff.reduce(function(a,b) { return(a+b) },0) / t_diff.length);
|
|
}
|
|
}
|
|
if(mean_diff.length > 0){
|
|
return 1000 / (mean_diff.reduce(function(a,b) { return(a+b) }, 0) / mean_diff.length);
|
|
} else {
|
|
return null;
|
|
}
|
|
|
|
}
|
|
|
|
function validation_done(){
|
|
trial_data.samples_per_sec = calculateSampleRate(trial_data.raw_gaze).toFixed(2);
|
|
for(var i=0; i<trial.validation_points.length; i++){
|
|
trial_data.percent_in_roi[i] = calculatePercentInROI(trial_data.raw_gaze[i]);
|
|
trial_data.average_offset[i] = calculateGazeCentroid(trial_data.raw_gaze[i]);
|
|
}
|
|
if(trial.show_validation_data){
|
|
show_validation_data();
|
|
} else {
|
|
end_trial();
|
|
}
|
|
}
|
|
|
|
function show_validation_data(){
|
|
var html = '';
|
|
for(var i=0; i<trial.validation_points.length; i++){
|
|
html += drawValidationPoint(trial.validation_points[i][0], trial.validation_points[i][1]);
|
|
html += drawCircle(trial.validation_points[i][0], trial.validation_points[i][1], 0, 0, trial.roi_radius);
|
|
for(var j=0; j<trial_data.raw_gaze[i].length; j++){
|
|
html += drawRawDataPoint(trial.validation_points[i][0], trial.validation_points[i][1], trial_data.raw_gaze[i][j].dx, trial_data.raw_gaze[i][j].dy)
|
|
}
|
|
}
|
|
// debugging
|
|
html += '<button id="cont" style="position:absolute; top: 50%; left:calc(50% - 50px); width: 100px;" class="jspsych-btn">Continue</btn>';
|
|
wg_container.innerHTML = html;
|
|
wg_container.querySelector('#cont').addEventListener('click', end_trial);
|
|
jsPsych.extensions.webgazer.showPredictions();
|
|
}
|
|
|
|
// function to end trial when it is time
|
|
function end_trial() {
|
|
jsPsych.extensions.webgazer.stopSampleInterval();
|
|
|
|
// kill any remaining setTimeout handlers
|
|
jsPsych.pluginAPI.clearAllTimeouts();
|
|
|
|
// clear the display
|
|
display_element.innerHTML = '';
|
|
|
|
// move on to the next trial
|
|
jsPsych.finishTrial(trial_data);
|
|
};
|
|
|
|
};
|
|
|
|
return plugin;
|
|
})(); |