Adjust UI, smoothen data, add fixation method

2021-07-21T13_18_30_969Z-debug.log

@@ -0,0 +1,35 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose config Skipping project config: /home/pwpg20/.npmrc. (matches userconfig)
+5 verbose run-script [ 'prestart', 'start', 'poststart' ]
+6 info lifecycle [email protected]~prestart: [email protected]
+7 info lifecycle [email protected]~start: [email protected]
+8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
+9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/pwpg20/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/local/go/bin:/snap/bin
+10 verbose lifecycle [email protected]~start: CWD: /home/pwpg20
+11 silly lifecycle [email protected]~start: Args: [ '-c', 'PORT=10020 react-scripts start' ]
+12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
+13 info lifecycle [email protected]~start: Failed to exec start script
+14 verbose stack Error: [email protected] start: `PORT=10020 react-scripts start`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
+14 verbose stack     at EventEmitter.emit (events.js:315:20)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
+14 verbose stack     at ChildProcess.emit (events.js:315:20)
+14 verbose stack     at maybeClose (internal/child_process.js:1021:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
+15 verbose pkgid [email protected]
+16 verbose cwd /home/pwpg20
+17 verbose Linux 4.4.0-210-generic
+18 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+19 verbose node v12.18.3
+20 verbose npm  v6.14.6
+21 error code ELIFECYCLE
+22 error errno 1
+23 error [email protected] start: `PORT=10020 react-scripts start`
+23 error Exit status 1
+24 error Failed at the [email protected] start script.
+24 error This is probably not a problem with npm. There is likely additional logging output above.
+25 verbose exit [ 1, true ]

package.json

@@ -2,6 +2,7 @@
   "name": "surv-eye",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -15,7 +16,7 @@
   },
   "scripts": {
     "start": "set PORT=10020 && react-scripts start",
-    "build": "react-scripts build",
+    "build": "PORT=10020 react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { WebGazeContext } from './context/WebGazeContext';
 import { click } from "./functions/click";
 import MainApp from './Main';
+import { convertAngleToPx } from "./functions/convertAngleToPx";
 
 import './css/App.css';
 
@@ -14,19 +15,85 @@ class WebGazeLoader extends React.Component {
   constructor() {
     super();
     this.state = {
-      context: { x: -1, y: -1 }
+      context: { x: -1, y: -1 },
+      dataNull: true, 
+      fixRange: convertAngleToPx(4.17), // target size?
+      fixTime: 1, // how many seconds a fixation should last
+      fixPoint: { x: -1, y: -1, time: Math.floor(Date.now() / 1000) },
+      fixation: false,
+      gazeData:[]
     };
   }
+
+
+  checkFixation() {
+            let withinXCoordinates = (this.state.context.x >= this.state.fixPoint.x - this.state.fixRange) && (this.state.context.x <= this.state.fixPoint.x + this.state.fixRange);
+            let withinYCoordinates = (this.state.context.y >= this.state.fixPoint.y - this.state.fixRange) && (this.state.context.y <= this.state.fixPoint.y + this.state.fixRange);
+            let aboveFixationMin = Math.floor(Date.now() / 1000) - this.state.fixPoint.time >= this.state.fixTime;
+            if (withinXCoordinates && withinYCoordinates) {
+                if (aboveFixationMin && !this.state.fixation) {
+                    this.setState({ fixation: true });
+                    console.log("FIXATING");
+                }
+            } else {
+                this.setState({ fixPoint: { x: this.state.context.x, y: this.state.context.y, time: Math.floor(Date.now() / 1000) } })
+                this.setState({ fixation: false });
+            }
+
+}
+
+
+displaySmoothenedDataPoints(data, averaged) {
+
+if (this.state.gazeData.length < averaged) {
+  let updatedData = this.state.gazeData;
+  updatedData.push({x: data.x, y: data.y});
+  this.setState({gazeData: updatedData});
+
+} else {
+
+  let summedX = 0; 
+  let summedY = 0;
+
+  for (let i = 0; i < averaged; i ++) {
+    summedX += this.state.gazeData[i].x;
+    summedY += this.state.gazeData[i].y;
+  }
 
+  let averagedX = summedX / averaged; 
+  let averagedY = summedY / averaged; 
+
+  this.setState({ context: webgazer.util.bound({x: averagedX, y:averagedY}) });
+  this.setState({gazeData: [{x: data.x, y:data.y}]});
+  document.getElementById("gaze-dot").style.transform = "translate3d(" + this.state.context.x + "px, " + this.state.context.y + "px, 0px)";
+}        
+
+
+}
 
   handleScriptLoad() {
     webgazer.setGazeListener((data, elapsedTime) => {
       if (data == null) {
+        console.log("NO gaze detected");
+
+        if (document.getElementById("INTRO") !== null) {
+          click("INTRO");
+          this.setState({dataNull: false});
+          console.log(this.state.dataNull);
+        }
+
+
+        // For debugging: set to true. For usability study: debatable
+        webgazer.showPredictionPoints(false);
+        webgazer.showVideo(false);
+        webgazer.showFaceOverlay(false);
+        webgazer.showFaceFeedbackBox(false);
 
-        click("INTRO");
         return;
       }
-      this.setState({ context: webgazer.util.bound(data) });
+      this.displaySmoothenedDataPoints(data, 8);
+
+      this.checkFixation();
 
     }).saveDataAcrossSessions(false).begin();
   }
@@ -45,6 +112,7 @@ class WebGazeLoader extends React.Component {
             onError={this.handleScriptError.bind(this)}
           />
           <MainApp />
+          <div style={this.state.fixation ? {borderColor: "rgb(255, 63, 137)"} : {borderColor: "rgb(76, 63, 255)"}} id ="gaze-dot"/>
 
         </WebGazeContext.Provider>
       </div>