GazeTK

/*

 * Copyright 2015 Thies Pfeiffer and Dimitri Heil and Kevin Taron

 * Blinker is distributed under the terms of the GNU General Public License

 * 

 * This file is part of Blinker.

 * 

 * Blinker is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 * 

 * Blinker is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

 * GNU General Public License for more details.

 * 

 * You should have received a copy of the GNU General Public License

 * along with Blinker. If not, see <http://www.gnu.org/licenses/>.

 */

self.port.on('blickBrowserSettings', function(settings){ blickBrowserSettings = eval(settings); populatePanel(); });

self.port.on('loadSettings', loadSettings);

var blickBrowserSettings;

function loadSettings(){

        console.log("getSettings");

        self.port.emit("getAllSettings","null");

}

function populatePanel(){

        //loadSettings();

        $("#main").empty();

        console.log("populating panel....");

        $("#main").append("<strong>EyeTracker is: "+blickBrowserSettings['eyeTracker']+"</strong><br />");

        $("#main").append("<input type='checkbox' id='privacyMode'><label for='privacyMode'>Privacy Mode</label><br />");

        if (blickBrowserSettings['privacyMode'] == true){

                $("#privacyMode").prop('checked', true);

        }                

        $("#privacyMode").click(function() { blickBrowserSettings['privacyMode'] = $('#privacyMode').is(':checked'); console.log("privacyMode: "+blickBrowserSettings['privacyMode']); writeSettings(); });

        $("#main").append("<input type='checkbox' id='gazeEmulation'><label for='gazeEmulation'>GAZE Emulation</label><br />");

        if (blickBrowserSettings['gazeEmulation'] == true){

                $("#gazeEmulation").prop('checked', true);

        }        

        $("#gazeEmulation").click(function() { blickBrowserSettings['gazeEmulation'] = $('#gazeEmulation').is(':checked'); console.log("gazeEmulation: "+blickBrowserSettings['gazeEmulation']); writeSettings(); });

        $("#main").append("<input type='checkbox' id='gazeCrosshair'><label for='gazeCrosshair'>Show Cross</label><br />");

        if (blickBrowserSettings['gazeCrosshair'] == true){

                $("#gazeCrosshair").prop('checked', true);

        }        

        $("#gazeCrosshair").click(function() { blickBrowserSettings['gazeCrosshair'] = $('#gazeCrosshair').is(':checked'); console.log("gazeCrosshair: "+blickBrowserSettings['gazeCrosshair']); writeSettings(); });

        $("#main").append("<input type='checkbox' id='debugInformation'><label for='debugInformation'>Append status-info to mouse</label><br />");

        if (blickBrowserSettings['debugInformation'] == true){

                $("#debugInformation").prop('checked', true);

        }

        $("#debugInformation").click(function(){ blickBrowserSettings['debugInformation'] = $('#debugInformation').is(':checked'); console.log("debugInformation: "+blickBrowserSettings['debugInformation']); writeSettings(); });

        $("#main").append("<hr>");

        $("#main").append("<input type='checkbox' id='scrollAtBorders'><label for='scrollAtBorders'>Scroll at borders</label><br />");

        if (blickBrowserSettings['scrollAtBorders'] == true){

                $("#scrollAtBorders").prop('checked', true);

        }

        $("#scrollAtBorders").click(function(){ blickBrowserSettings['scrollAtBorders'] = $('#scrollAtBorders').is(':checked'); console.log("scrollAtBorders: "+blickBrowserSettings['scrollAtBorders']); writeSettings(); });

        $("#main").append("Scrolling threshold <input type='number' id='scrollThreshold' value='"+blickBrowserSettings['scrollThreshold']+"'><br />");

        $("#scrollThreshold").css("width","50px");

        $("#scrollThreshold").change(function(){ blickBrowserSettings['scrollThreshold'] = parseInt($('#scrollThreshold').val()); console.log("scrollThreshold: "+blickBrowserSettings['scrollThreshold']); writeSettings(); });        

        $("#main").append("Scrolling speed <input type='number' id='scrollSpeed' value='"+blickBrowserSettings['scrollSpeed']+"'><br />");

        $("#scrollSpeed").css("width","50px");

        $("#scrollSpeed").change(function(){ blickBrowserSettings['scrollSpeed'] = parseInt($('#scrollSpeed').val()); console.log("scrollSpeed: "+blickBrowserSettings['scrollSpeed']); writeSettings(); });

        $("#main").append("<hr>");

        $("#main").append("<input type='checkbox' id='explicitMode'><label for='explicitMode'>Explicit Mode</label><br />");

        if (blickBrowserSettings['explicitMode'] == true){

                $("#explicitMode").prop('checked', true);

        }

        $("#explicitMode").click(function(){ blickBrowserSettings['explicitMode'] = $('#explicitMode').is(':checked'); console.log("explicitMode: "+blickBrowserSettings['explicitMode']); writeSettings(); });

        $("#main").append("<input type='checkbox' id='autoReadingMode'><label for='autoReadingMode'>Automatic Reading Mode</label><br />");

        if (blickBrowserSettings['autoReadingMode'] == true){

                $("#autoReadingMode").prop('checked', true);

        }

        $("#autoReadingMode").click(function(){ blickBrowserSettings['autoReadingMode'] = $('#autoReadingMode').is(':checked'); console.log("autoReadingMode: "+blickBrowserSettings['autoReadingMode']); writeSettings(); });

        $("#main").append("Fixation Duration <input type='number' id='autoReadingModeThreshold' value='"+blickBrowserSettings['autoReadingModeThreshold']+"'><br />");

        $("#autoReadingModeThreshold").css("width","50px");

        $("#autoReadingModeThreshold").change(function(){ blickBrowserSettings['autoReadingModeThreshold'] = parseInt($('#autoReadingModeThreshold').val()); console.log("autoReadingModeThreshold: "+blickBrowserSettings['autoReadingModeThreshold']); writeSettings(); });

        $("#main").append("max. GazeMoving Radius <input type='number' id='autoReadingModeDistance' value='"+blickBrowserSettings['autoReadingModeDistance']+"'><br />");

        $("#autoReadingModeDistance").css("width","50px");

        $("#autoReadingModeDistance").change(function(){ blickBrowserSettings['autoReadingModeDistance'] = parseInt($('#autoReadingModeDistance').val()); console.log("autoReadingModeDistance: "+blickBrowserSettings['autoReadingModeDistance']); writeSettings(); });

        $("#main").append("<hr>");        

        $("#main").append( 'Top Edge: <select id="topEdge"><option '+( (blickBrowserSettings.topEdge == "initiateGesture") ? "selected" : "")+' value="initiateGesture">Initiate gaze gesture</option><option '+( (blickBrowserSettings.topEdge == "toggleScrolling") ? "selected" : "")+' value="toggleScrolling">Toggle scrolling</option><option '+( (blickBrowserSettings.topEdge == "showControlBar") ? "selected" : "")+' value="showControlBar">Show control bar</option><option '+(blickBrowserSettings.topEdge == "clearDivs" ? "selected":"")+' value="clearDivs">Clear gaze elements</option><option '+(blickBrowserSettings.topEdge == "toggleReadingMode" ? "selected":"")+' value="toggleReadingMode">Toggle reading mode</option><option  '+(blickBrowserSettings.topEdge == "none" ? "selected":"")+' value="none">None</option></select><br />');

        $("#topEdge").change(function(){ blickBrowserSettings.topEdge = $('#topEdge').val(); console.log("topEdge: "+blickBrowserSettings.topEdge); writeSettings(); });

        $("#main").append("Top Edge Tolerance <input type='number' id='topEdgeTolerance' value='"+blickBrowserSettings['topEdgeTolerance']+"'><br />");

        $("#topEdgeTolerance").css("width","50px");

        $("#topEdgeTolerance").change(function(){ blickBrowserSettings['topEdgeTolerance'] = parseInt($('#topEdgeTolerance').val()); console.log("topEdgeTolerance: "+blickBrowserSettings['topEdgeTolerance']); writeSettings(); });

        $("#main").append("<hr>");

        $("#main").append( 'Left Edge: <select id="leftEdge"><option '+( (blickBrowserSettings.leftEdge == "initiateGesture") ? "selected" : "")+' value="initiateGesture">Initiate gaze gesture</option><option '+( (blickBrowserSettings.leftEdge == "toggleScrolling") ? "selected" : "")+' value="toggleScrolling">Toggle scrolling</option><option '+( (blickBrowserSettings.leftEdge == "showControlBar") ? "selected" : "")+' value="showControlBar">Show control bar</option><option '+(blickBrowserSettings.leftEdge == "clearDivs" ? "selected":"")+' value="clearDivs">Clear gaze elements</option><option '+(blickBrowserSettings.leftEdge == "toggleReadingMode" ? "selected":"")+' value="toggleReadingMode">Toggle reading mode</option><option  '+(blickBrowserSettings.leftEdge == "none" ? "selected":"")+' value="none">None</option></select><br />');

        $("#leftEdge").change(function(){ blickBrowserSettings.leftEdge = $('#leftEdge').val(); console.log("leftEdge: "+blickBrowserSettings.leftEdge); writeSettings(); });

        $("#main").append("Left Edge Tolerance <input type='number' id='leftEdgeTolerance' value='"+blickBrowserSettings['leftEdgeTolerance']+"'><br />");

        $("#leftEdgeTolerance").css("width","50px");

        $("#leftEdgeTolerance").change(function(){ blickBrowserSettings['leftEdgeTolerance'] = parseInt($('#leftEdgeTolerance').val()); console.log("leftEdgeTolerance: "+blickBrowserSettings['leftEdgeTolerance']); writeSettings(); });

        $("#main").append("<hr>");

        $("#main").append( 'Right Edge: <select id="rightEdge"><option '+( (blickBrowserSettings.rightEdge == "initiateGesture") ? "selected" : "")+' value="initiateGesture">Initiate gaze gesture</option><option '+( (blickBrowserSettings.rightEdge == "toggleScrolling") ? "selected" : "")+' value="toggleScrolling">Toggle scrolling</option><option '+( (blickBrowserSettings.rightEdge == "showControlBar") ? "selected" : "")+' value="showControlBar">Show control bar</option><option '+(blickBrowserSettings.rightEdge == "clearDivs" ? "selected":"")+' value="clearDivs">Clear gaze elements</option><option '+(blickBrowserSettings.rightEdge == "toggleReadingMode" ? "selected":"")+' value="toggleReadingMode">Toggle reading mode</option><option  '+(blickBrowserSettings.rightEdge == "none" ? "selected":"")+' value="none">None</option></select><br />');

        $("#rightEdge").change(function(){ blickBrowserSettings.rightEdge = $('#rightEdge').val(); console.log("rightEdge: "+blickBrowserSettings.rightEdge); writeSettings(); });

        $("#main").append("Right Edge Tolerance <input type='number' id='rightEdgeTolerance' value='"+blickBrowserSettings['rightEdgeTolerance']+"'><br />");

        $("#rightEdgeTolerance").css("width","50px");

        $("#rightEdgeTolerance").change(function(){ blickBrowserSettings['rightEdgeTolerance'] = parseInt($('#rightEdgeTolerance').val()); console.log("rightEdgeTolerance: "+blickBrowserSettings['rightEdgeTolerance']); writeSettings(); });

        $("#main").append("<hr>");

        $("#main").append( 'Selection Mode: <select id="selectionMode"><option '+( (blickBrowserSettings.selectionMode == "isFixated") ? "selected" : "")+' value="isFixated">Fixation</option><option '+(blickBrowserSettings.selectionMode == "gazeEnter" ? "selected":"")+' value="gazeEnter">Gaze</option></select><br />');

        $("#selectionMode").change(function(){ blickBrowserSettings.selectionMode = $('#selectionMode').val(); console.log("selectionMode: "+blickBrowserSettings.selectionMode); writeSettings(); });

        $("#main").append("Gaze Confirmation Steps <input type='number' id='gazeConfirmationSteps' value='"+blickBrowserSettings['gazeConfirmationSteps']+"'><br />");

        $("#gazeConfirmationSteps").css("width","50px");

        $("#gazeConfirmationSteps").change(function(){ blickBrowserSettings['gazeConfirmationSteps'] = parseInt($('#gazeConfirmationSteps').val()); console.log("gazeConfirmationSteps: "+blickBrowserSettings['gazeConfirmationSteps']); writeSettings(); });

        $("#main").append("Gaze Confirmation Size <input type='number' id='gazeConfirmationSize' value='"+blickBrowserSettings['gazeConfirmationSize']+"'><br />");

        $("#gazeConfirmationSize").css("width","50px");

        $("#gazeConfirmationSize").change(function(){ blickBrowserSettings['gazeConfirmationSize'] = parseInt($('#gazeConfirmationSize').val()); console.log("gazeConfirmationSize: "+blickBrowserSettings['gazeConfirmationSize']); writeSettings(); });

        $("#main").append("<input type='checkbox' id='showLeftGazeLinkOption'><label for='showLeftGazeLinkOption'>Show left gaze link option Mode</label><br />");

        if (blickBrowserSettings.showLeftGazeLinkOption === true){

                $("#showLeftGazeLinkOption").prop('checked', true);

        }

        $("#showLeftGazeLinkOption").click(function(){ blickBrowserSettings['showLeftGazeLinkOption'] = $('#showLeftGazeLinkOption').is(':checked'); console.log("showLeftGazeLinkOption: "+blickBrowserSettings['showLeftGazeLinkOption']); writeSettings(); });

        $("#main").append("Fixation Threshold <input type='number' id='fixationThreshold' value='"+blickBrowserSettings['fixationThreshold']+"'><br />");

        $("#fixationThreshold").css("width","50px");

        $("#fixationThreshold").change(function(){ blickBrowserSettings['fixationThreshold'] = parseInt($('#fixationThreshold').val()); console.log("fixationThreshold: "+blickBrowserSettings['fixationThreshold']); writeSettings(); });

        $("#main").append("Saccade length <input type='number' id='saccadeLength' value='"+blickBrowserSettings['saccadeLength']+"'><br />");

        $("#saccadeLength").css("width","50px");

        $("#saccadeLength").change(function(){ blickBrowserSettings['saccadeLength'] = parseInt($('#saccadeLength').val()); console.log("saccadeLength: "+blickBrowserSettings['saccadeLength']); writeSettings(); });

        saccadeLength

        $("#main").append("<hr>");

        $("#main").append("Gaze Smoothing History <input type='number' id='gazeSmoothingHistory' value='"+blickBrowserSettings['gazeSmoothingHistory']+"'><br />");

        $("#gazeSmoothingHistory").css("width","50px");

        $("#gazeSmoothingHistory").change(function(){ blickBrowserSettings['gazeSmoothingHistory'] = parseInt($('#gazeSmoothingHistory').val()); console.log("gazeSmoothingHistory: "+blickBrowserSettings['gazeSmoothingHistory']); writeSettings(); });

        $("#main").append("<button id='checkCalibration'>Check Calibration</button><br />");

        $("#checkCalibration").click(toggleCheckCalibration);

        $("#main").append("Gaze Offset X <input type='number' id='gazeOffsetX' value='"+blickBrowserSettings['gazeOffsetX']+"'><br />");

        $("#gazeOffsetX").css("width","50px");

        $("#gazeOffsetX").change(function(){ blickBrowserSettings['gazeOffsetX'] = parseInt($('#gazeOffsetX').val()); console.log("gazeOffsetX: "+blickBrowserSettings['gazeOffsetX']); writeSettings(); });

        $("#main").append("Gaze Offset Y <input type='number' id='gazeOffsetY' value='"+blickBrowserSettings['gazeOffsetY']+"'><br />");

        $("#gazeOffsetY").css("width","50px");

        $("#gazeOffsetY").change(function(){ blickBrowserSettings['gazeOffsetY'] = parseInt($('#gazeOffsetY').val()); console.log("gazeOffsetY: "+blickBrowserSettings['gazeOffsetY']); writeSettings(); });

        if (blickBrowserSettings['eyeTracker'] == "eyetribe"){

                $("#main").append("<button id='calibrate'>Calibrate</button><br />");

                $("#calibrate").click(toggleCalibrate);

        }

        $("#main").append("<button id='tutorial'>Tutorial</button><br />");

        $("#tutorial").click(openTutorial);

        $("#main").append("<button id='gazeElements'>HTML-Element Settings</button><br />");

        $("#gazeElements").click(openHTMLSettings);

        blickBrowserSettings.showLeftGazeLinkOption

}

function writeSettings(){

        self.port.emit('writeSettings',blickBrowserSettings);        

}

function toggleCheckCalibration(){

        self.port.emit('toggleCheckCalibration','noop');        

}

function toggleCalibrate(){

        self.port.emit('toggleCalibrate','noop');        

}

function openTutorial() {

        self.port.emit('openTutorial','noop');        

}

function openHTMLSettings() {

        self.port.emit('openHTMLSettings', 'noop');

}