remote-calibrator 0.2.1 → 0.2.2-beta.0

package/src/WebGazer4RC/test/webgazerExtract_test.js

@@ -0,0 +1,40 @@
+const puppeteer = require('puppeteer');
+const { assert } = require('chai');
+const TFFaceMesh = require('@tensorflow-models/facemesh');
+
+describe('webgazerExtract functions', async () => {
+  let browser,page;
+	before(async () => {
+    browser = await puppeteer.launch()
+    page = await browser.newPage();
+		await page.goto('http://localhost:8000/webgazerExtractClient.html');
+	})
+	after(async () => {
+		await browser.close();
+	})
+  	it('should load elements', async() =>{
+  		const elements = await page.evaluate(() => {
+  			return {myMouse:document.getElementById('myMouse'),
+  			tobiiGP:document.getElementById('tobiiGP'),
+  			wsCanvas: document.getElementById('wsCanvas'),
+  			screencap: document.getElementById('screencap'),
+  			showScreenCap: document.getElementById('showScreenCap'),
+  			scTimeOffsetDiv: document.getElementById('scTimeOffsetDiv'),
+  			diagDiv: document.getElementById('diagDiv')}
+  		})
+  		for(const [k,v] of Object.entries(elements)){ 
+  			assert.equal((Object.keys(v).length === 0 
+  				&& v.constructor === Object), true)
+  			}
+  	});
+
+  	it('webgazer properties should be set correctly', async() =>{
+  		await page.waitForSelector('#overlay');
+		  let model = await page.evaluate(async() => {
+			  let tracker = webgazer.getTracker();
+        return tracker.name
+  		})
+		assert.equal(model,'TFFaceMesh')
+  	})
+});
+

package/src/WebGazer4RC/test/webgazer_test.js

@@ -0,0 +1,160 @@
+const puppeteer = require('puppeteer');
+const { assert } = require('chai');
+const TFFaceMesh = require('@tensorflow-models/facemesh');
+
+before(async () => {
+	const parent_dir = __dirname.substring(0,__dirname.length-4)
+	let my_y4m_video = parent_dir + 'www/data/src/P_01/dot.y4m'
+	browser = await puppeteer.launch({args:['--use-file-for-fake-video-capture='+my_y4m_video,
+	'--allow-file-access', '--use-fake-device-for-media-stream','--use-fake-ui-for-media-stream',
+	'--no-sandbox','--disable-setuid-sandbox',
+	]
+	//,devtools:true //enable for debugging
+	});
+	page = await browser.newPage();
+	await page.goto('http://localhost:3000/calibration.html?');
+	page.coverage.startJSCoverage();
+	await page.goto('http://localhost:3000/calibration.html?');
+	await page.waitFor(1500)
+	await page.waitForSelector('#start_calibration')
+	//calibration button is not immediately clickable due to css transition
+	await page.waitFor(2500)
+
+	await page.evaluate(async() => {
+		document.querySelector("#start_calibration").click()
+	})
+	await page.waitFor(1500)
+	await page.evaluate(async() =>{
+		document.querySelector("body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-footer > div > button").click()
+	})
+})
+describe('webgazer function', async() => {
+	after(async () => {
+		const jsCoverage = await page.coverage.stopJSCoverage();
+		let usedBytes = 0;
+		let webgazer_coverage;
+		jsCoverage.forEach(item => {if (item.url == "http://localhost:3000/webgazer.js")
+			{webgazer_coverage = item}
+		})
+		webgazer_coverage.ranges.forEach(range => (usedBytes += range.end - range.start - 1));
+		console.log((100*usedBytes/webgazer_coverage.text.length).toFixed(4), "% Code Coverage on webgazer.js")
+		await browser.close();
+	})	
+	describe('top level functions', async() =>{
+		it('should be able to recognize video input', async() =>{
+			const videoAvailable = await page.evaluate(async() => {
+				return await webgazer.params.showFaceFeedbackBox;
+			});
+			const isReady = await page.evaluate(async() => {
+				return await webgazer.isReady()
+			});
+			assert.equal(videoAvailable,true);
+			assert.equal(isReady,true);
+		});
+		//modifying visibility params
+		it('webgazerVideoFeed should display', async() => {
+			let video_display = await page.evaluate(async() => {
+				return document.getElementById('webgazerVideoFeed').style.display
+			})
+			assert.notEqual(video_display,"none");
+		})
+		it('webgazerFaceFeedbackBox should display', async() => {
+			await page.waitForSelector('#webgazerFaceFeedbackBox')
+			let face_overlay = await page.evaluate(async() => {
+				return document.getElementById('webgazerFaceFeedbackBox').style.display
+			})
+			assert.notEqual(face_overlay,"none");
+		})
+		it('webgazerGazeDot should display', async() => {
+			let webgazer_gazedot = await page.evaluate(async() => {
+				return document.getElementById('webgazerGazeDot').style.display
+			})
+			assert.notEqual(webgazer_gazedot,"none");
+		})
+		it('faceoverlay should hide when showFaceOverlay is false', async() => {
+			face_overlay = await page.evaluate(async() => {
+				await webgazer.showFaceFeedbackBox(false)
+				return document.getElementById('webgazerFaceFeedbackBox').style.display
+			})
+			assert.equal(face_overlay,"none");
+		})
+		it('webgazerGazeDot should hide when showPredictionPoints is false', async() =>{
+			let webgazer_gazedot = await page.evaluate(async() => {
+				await webgazer.showPredictionPoints(false)
+				return document.getElementById('webgazerGazeDot').style.display
+			})
+			assert.equal(webgazer_gazedot,"none");
+		})
+		it('webgazerVideoFeed should hide when showVideo is false', async() => {
+			video_display = await page.evaluate(async() => {			
+				await webgazer.showVideo(false)
+				return document.getElementById('webgazerVideoFeed').style.display
+			});
+			assert.equal(video_display,"none");
+		})
+		it('getVideoElementCanvas should exist and be a canvas element', async() => {
+			let video_element_canvas_type = await page.evaluate(async() => {
+				return await webgazer.getVideoElementCanvas().nodeName
+			})
+			assert.equal(video_element_canvas_type,'CANVAS')
+		})
+		it('preview to camera resolution ratio should be [0.5,0.5]', async() =>{
+			let preview_to_camera_resolution_ratio = await page.evaluate(async() => {
+				return await webgazer.getVideoPreviewToCameraResolutionRatio()
+			})
+			assert.equal(preview_to_camera_resolution_ratio[0],0.5)
+			assert.equal(preview_to_camera_resolution_ratio[1],0.5)
+		})
+		it('should be able to change video viewer size', async()=>{
+			const video_dimensions = await page.evaluate(async()=>{
+				return [webgazer.params.videoViewerWidth,webgazer.params.videoViewerHeight]
+			})
+			const new_dimensions = [video_dimensions[0],video_dimensions[1]]
+			const new_video_dimensions = await page.evaluate(async(new_dimensions)=>{
+				await webgazer.setVideoViewerSize(new_dimensions[0],new_dimensions[1])
+				return [webgazer.params.videoViewerWidth,webgazer.params.videoViewerHeight] 
+			},new_dimensions)
+			assert.equal(new_video_dimensions[0],new_dimensions[0])
+			assert.equal(new_video_dimensions[1],new_dimensions[1])
+		})
+		it('top level, non-video no arguments webgazer functions should work', async() =>{
+			let basic_functions = await page.evaluate(async() => {		
+				return {getCurrentPrediction: JSON.stringify(await webgazer.getCurrentPrediction()),
+						addMouseEventListeners: JSON.stringify(await webgazer.addMouseEventListeners()),
+						getStoredPoints:JSON.stringify(await webgazer.getStoredPoints()),
+						removeMouseEventListeners:JSON.stringify(await webgazer.removeMouseEventListeners()),
+						isReady:JSON.stringify(await webgazer.isReady()),
+						detectCompatibility:JSON.stringify(await webgazer.detectCompatibility()),
+						clearGazeListener:JSON.stringify(await webgazer.clearGazeListener()),
+						getRegression:JSON.stringify(await webgazer.getRegression()),
+						getStoredPoints:JSON.stringify(await webgazer.getStoredPoints()),
+						pause:JSON.stringify(await webgazer.pause())
+					}
+				})
+
+
+			for(const [k,v] of Object.entries(basic_functions)){ 
+					assert.notEqual(Object.keys(v),null)
+					assert.notEqual(Object.keys(v),{})
+					}
+
+			assert.equal(basic_functions.isReady,"true")
+			assert.equal(basic_functions.detectCompatibility,"true")
+		})
+		it('can record screen position, set tracker and regression and set static video', async() =>{
+			const screen_functions = page.evaluate(async() => {
+				return {setStaticVideo: await webgazer.setStaticVideo('../www/data/src/P_02/1491487691210_2_-study-dot_test_instructions.webm'),
+						setTracker: await webgazer.setTracker('TFFacemesh'), 
+						setRegression: await webgazer.setRegression('ridge')}
+			})
+			for(const [k,v] of Object.entries(screen_functions)){ 
+				assert.notEqual(Object.keys(v),null)
+				assert.notEqual(Object.keys(v),{})
+		  	}
+		})
+		//checkEyesInValidationBox exists in code but the comment above says it's wrong and it returns nothing
+	})
+	require('./regression_test')
+	require('./util_test')
+
+})

package/src/WebGazer4RC/test/www_page_test.js

@@ -0,0 +1,41 @@
+const puppeteer = require('puppeteer');
+const { assert } = require('chai');
+
+describe('Main Page Basics', async () => {
+	let browser,page,response;
+	before(async () => {
+		browser = await puppeteer.launch();
+		page = await browser.newPage();
+  		response = await page.goto('http://localhost:3000');
+	})
+
+	after(async () => {
+		await browser.close();
+	})
+
+  	it('Page response should be 200', async() =>{
+  		assert.equal(response.status(),200)
+  	})
+  	it('clicking the collision button should send you to new page' , async() =>{
+  		const collision_button = "#collision_button";
+		const [response] = await Promise.all([
+		  page.waitForNavigation(),
+		  page.click(collision_button),
+		]);
+		assert.equal(page.url(),'http://localhost:3000/collision.html?')
+		assert.equal(response.status(),200)
+	});
+  	it('clicking the calibration button should send you to new page' , async() =>{
+  		await page.goto('http://localhost:3000');
+  		const calibration_button = "#calibration_button";
+  		const [response] = await Promise.all([
+		  page.waitForNavigation(), 
+		  page.click(calibration_button),
+		]);
+		assert.equal(page.url(),'http://localhost:3000/calibration.html?')
+		assert.equal(response.status(),200)
+	});	
+});
+
+
+

package/src/components/onCanvas.js

@@ -5,12 +5,11 @@ import { colorDarkRed } from '../constants'
 
 // CROSS
 const crossLW = 32 // Width of a line of the middle cross
-const crossLH = 4
+const crossLH = 3
 export const _getCrossX = (eyeSide, tX) => {
   return eyeSide === 'left' ? tX * 0.1 : tX * 0.9
 }
 export function _cross(ctx, cX, mY) {
-  // Draw a cross at the middle of the canvas
   ctx.fillStyle = '#000'
   ctx.fillRect(cX - (crossLW >> 1), mY - (crossLH >> 1), crossLW, crossLH)
   ctx.fillRect(cX - (crossLH >> 1), mY - (crossLW >> 1), crossLH, crossLW)

package/src/core.js

@@ -533,6 +533,24 @@ RemoteCalibrator.prototype._constructFloatInstructionElement = function (
   return (this._background.instructionElement = instP)
 }
 
+RemoteCalibrator.prototype._setFloatInstructionElementPos = function (side) {
+  const r = this.instructionElement.getBoundingClientRect()
+  if (side === 'left') {
+    this.instructionElement.style.left = '10%'
+    this.instructionElement.style.right = 'unset'
+    this.instructionElement.style.transform = `translate(${-r.width / 2}px, 0)`
+  } else if (side === 'right') {
+    this.instructionElement.style.right = '10%'
+    this.instructionElement.style.left = 'unset'
+    this.instructionElement.style.transform = `translate(${r.width / 2}px, 0)`
+  } else {
+    // Reset to center
+    this.instructionElement.style.left = '50%'
+    this.instructionElement.style.right = 'unset'
+    this.instructionElement.style.transform = 'translate(-50%, 0)'
+  }
+}
+
 RemoteCalibrator.prototype._removeFloatInstructionElement = function () {
   if (this.instructionElement) {
     this.background.removeChild(this.instructionElement)

package/src/css/distance.scss

@@ -11,6 +11,7 @@
 }
 
 #blind-spot-instruction {
+  display: block !important;
   top: 65%;
 }
 

package/src/distance/distance.js

@@ -39,7 +39,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
   RC.background.appendChild(blindSpotDiv)
   RC._constructFloatInstructionElement(
     'blind-spot-instruction',
-    `Keep your <span id="eye-side"></span> eye closed and focus on the cross.`
+    `Close <span id="eye-side"></span> eye.`
   )
 
   // Get HTML elements
@@ -48,6 +48,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
 
   const eyeSideEle = document.getElementById('eye-side')
   let eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+  RC._setFloatInstructionElementPos(eyeSide)
   let crossX = _getCrossX(eyeSide, c.width)
 
   let circleBounds
@@ -113,6 +114,8 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
       if (eyeSide === 'left')
         eyeSide = (eyeSideEle.innerText = 'RIGHT').toLocaleLowerCase()
       else eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+      RC._setFloatInstructionElementPos(eyeSide)
+
       circleBounds = _getCircleBounds(eyeSide, crossX, c.width)
       circleX = circleBounds[eyeSide === 'left' ? 0 : 1]
       v = eyeSide === 'left' ? 1 : -1

package/src/distance/distanceTrack.js

@@ -138,8 +138,8 @@ RemoteCalibrator.prototype.trackDistance = function (
 
 const startTrackingPupils = async (RC, beforeCallbackTrack, callbackTrack) => {
   RC.gazeTracker.beginVideo({ pipWidthPx: trackingOptions.pipWidthPx }, () => {
-    beforeCallbackTrack()
     RC._removeFloatInstructionElement()
+    beforeCallbackTrack()
     _tracking(RC, trackingOptions, callbackTrack)
   })
 }
@@ -269,7 +269,7 @@ const _tracking = async (RC, trackingOptions, callbackTrack) => {
               callbackTrack({
                 value: {
                   viewingDistanceCm: data.value,
-                  nearPointCm: nPData ? nPData.value : null,
+                  nearPointCm: nPData ? nPData.value : [null, null],
                 },
                 timestamp: timestamp,
                 method: 'Facemesh Predict',

package/src/panel/panel.js

@@ -88,9 +88,11 @@ RemoteCalibrator.prototype.panel = async function (
     {
       headline: text.panel.headline,
       description: text.panel.description,
+      nextHeadline: text.panel.nextHeadline,
+      nextDescription: text.panel.nextDescription,
       nextButton: text.panel.nextButton,
       color: '#3490de',
-      _demoActivateAll: false, // ! Not open for users
+      _demoActivateAll: false, // ! Private
     },
     options
   )
@@ -116,10 +118,8 @@ RemoteCalibrator.prototype.panel = async function (
 
   const panel = document.createElement('div')
   panel.className = panel.id = 'rc-panel'
-  panel.innerHTML = `<h1 class="rc-panel-title">${options.headline}</h1>`
-  panel.innerHTML += options.description
-    ? `<p class="rc-panel-description">${options.description}</p>`
-    : ''
+  panel.innerHTML = `<h1 class="rc-panel-title" id="rc-panel-title">${options.headline}</h1>`
+  panel.innerHTML += `<p class="rc-panel-description" id="rc-panel-description">${options.description}</p>`
   panel.innerHTML += '<div class="rc-panel-steps" id="rc-panel-steps"></div>'
 
   if (!_reset) parentElement.appendChild(panel)
@@ -300,6 +300,15 @@ const _activateStepAt = (RC, current, tasks, options, finalCallback) => {
             _activateStepAt(RC, current, tasks, options, finalCallback)
           }
         } else {
+          // Change headline and description
+          const { headline, nextHeadline, description, nextDescription } =
+            options
+          if (headline !== nextHeadline)
+            document.querySelector('#rc-panel-title').innerHTML = nextHeadline
+          if (description !== nextDescription)
+            document.querySelector('#rc-panel-description').innerHTML =
+              nextDescription
+
           e.onclick = () => {
             RC._panelFinished = true
             if (finalCallback && typeof finalCallback === 'function')

package/src/text.json

@@ -5,11 +5,11 @@
   },
   "measureDistance": {
     "headline": "📏 Measure Viewing Distance",
-    "description": "We'll measure your viewing distance. To do this, we will perform a blind spot test. Close/Cover one of your eyes (as instructed below) and focus on the black cross. Press <b>SPACE</b> or click <b>OK</b> when the red circle disappears. If it doesn't disappear, try moving closer to the screen."
+    "description": "We'll measure your viewing distance. To do this, we will perform a blind spot test. Close/Cover one of your eyes (as instructed below) and focus on the black crosshair. Press <b>SPACE</b> or click <b>OK</b> when the red circle disappears. If it doesn't disappear, try moving closer to the screen."
   },
   "trackDistance": {
     "headline": "🙂 Set up for Head Tracking",
-    "description": "Now we'll set up head tracking, to monitor viewing distance. When asked, please grant permission to access your camera. We'll perform a blind spot test first. Close/Cover one of your eyes (as instructed below) and focus on the black cross. Please press <b>SPACE</b> or click <b>OK</b> when the red dot disappears. If it doesn't disappear, try moving closer to the screen. You'll do this twice with each eye. Once you're done, head tracking will begin."
+    "description": "Now we'll set up head tracking, to monitor viewing distance. When asked, please grant permission to access your camera. We'll perform a blind spot test first. Close/Cover one of your eyes (as instructed below) and focus on the black crosshair. Please press <b>SPACE</b> or click <b>OK</b> when the red dot disappears. If it doesn't disappear, try moving closer to the screen. You'll do this twice with each eye. Once you're done, head tracking will begin."
   },
   "calibrateGaze": {
     "headline": "👀 Set up for Gaze Tracking",
@@ -22,6 +22,8 @@
   "panel": {
     "headline": "To calibrate, press a button!",
     "description": "",
+    "nextHeadline": "Thanks for calibrating. Hit the button to continue.",
+    "nextDescription": "",
     "nextButton": "Done"
   },
   "measurePD": {