remote-calibrator 0.2.1 → 0.2.2-beta.3

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/components/sound.js

@@ -0,0 +1,12 @@
+import { Synth } from 'tone'
+
+const feedbackSynth = new Synth({
+  oscillator: {
+    type: 'sine',
+  },
+  envelope: { attack: 0.001, decay: 0.001, sustain: 1, release: 0.001 },
+}).toDestination()
+
+export const soundFeedback = () => {
+  feedbackSynth.triggerAttackRelease(2000, 0.05)
+}

package/src/const.js

@@ -0,0 +1,8 @@
+import RemoteCalibrator from './core'
+
+RemoteCalibrator.prototype._CONST = Object.freeze({
+  CREDIT_TEXT: {
+    BLIND_SPOT_TEST: `As suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
+    CREDIT_CARD: `Credit card suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
+  },
+})

package/src/core.js

@@ -533,6 +533,30 @@ RemoteCalibrator.prototype._constructFloatInstructionElement = function (
   return (this._background.instructionElement = instP)
 }
 
+RemoteCalibrator.prototype._setFloatInstructionElementPos = function (
+  side,
+  yOffset = 16
+) {
+  // For blind spot test instructions
+  const r = this.instructionElement.getBoundingClientRect()
+  this.instructionElement.style.top = `calc(50% + ${yOffset + 10}px)`
+  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.top = 'unset'
+    this.instructionElement.style.transform = 'translate(-50%, 0)'
+  }
+}
+
 RemoteCalibrator.prototype._removeFloatInstructionElement = function () {
   if (this.instructionElement) {
     this.background.removeChild(this.instructionElement)
@@ -542,4 +566,16 @@ RemoteCalibrator.prototype._removeFloatInstructionElement = function () {
   return false
 }
 
+RemoteCalibrator.prototype._addCreditOnBackground = function (creditText) {
+  if (this.background === null) this._addBackground()
+
+  const p = document.createElement('p')
+  p.className = 'calibration-credit-text'
+  p.id = 'calibration-credit-text'
+  p.innerHTML = creditText
+  this.background.appendChild(p)
+
+  return p
+}
+
 export default RemoteCalibrator

package/src/css/distance.scss

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

package/src/css/main.css

@@ -82,3 +82,14 @@
 .swal2-container {
   z-index: 999997 !important;
 }
+
+/* -------------------------------------------------------------------------- */
+
+.calibration-credit-text {
+  position: fixed;
+  left: 3px;
+  bottom: 3px;
+  font-size: 0.9rem;
+  color: #999;
+  margin: 0;
+}

package/src/css/panel.scss

@@ -70,6 +70,7 @@
           padding: 0 0.3rem !important;
           margin: 0 !important;
           font-size: 1rem !important;
+          line-height: 170% !important;
 
           svg {
             width: 1rem;

package/src/distance/distance.js

@@ -15,6 +15,7 @@ import {
 } from '../components/onCanvas'
 import { bindKeys, unbindKeys } from '../components/keyBinder'
 import { addButtons } from '../components/buttons'
+import { soundFeedback } from '../components/sound'
 import text from '../text.json'
 
 const blindSpotHTML = `<canvas id="blind-spot-canvas"></canvas>`
@@ -39,8 +40,9 @@ 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.`
   )
+  RC._addCreditOnBackground(RC._CONST.CREDIT_TEXT.BLIND_SPOT_TEST)
 
   // Get HTML elements
   const c = document.querySelector('#blind-spot-canvas')
@@ -48,6 +50,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
 
   const eyeSideEle = document.getElementById('eye-side')
   let eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+  RC._setFloatInstructionElementPos(eyeSide, 16)
   let crossX = _getCrossX(eyeSide, c.width)
 
   let circleBounds
@@ -81,6 +84,8 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
 
   // SPACE
   const finishFunction = () => {
+    soundFeedback()
+
     tested += 1
     // Average
     dist.push(
@@ -113,6 +118,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, 16)
+
       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/index.js

@@ -1,5 +1,7 @@
 import RemoteCalibrator from './core'
 
+import './const'
+
 import './screenSize'
 import './displaySize'
 import './distance/distance'

package/src/panel/panel.js

@@ -88,9 +88,12 @@ RemoteCalibrator.prototype.panel = async function (
     {
       headline: text.panel.headline,
       description: text.panel.description,
+      showNextButton: false,
+      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 +119,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)
@@ -143,7 +144,8 @@ RemoteCalibrator.prototype.panel = async function (
     }
   }
 
-  steps.appendChild(_nextStepBlock(tasks.length, options))
+  if (options.showNextButton || options._demoActivateAll)
+    steps.appendChild(_nextStepBlock(tasks.length, options))
 
   // Activate the first one
   let current = { index: 0, finished: [] }
@@ -168,7 +170,7 @@ RemoteCalibrator.prototype.panel = async function (
         clearInterval(_)
         resolve(resolveOnFinish)
       }
-    }, 300)
+    }, 200)
   })
 }
 
@@ -286,20 +288,40 @@ const _setStepsClassesSL = (steps, panelWidth) => {
 
 const _activateStepAt = (RC, current, tasks, options, finalCallback) => {
   document.querySelectorAll('.rc-panel-step').forEach((e, ind) => {
+    const eIndex = Number(e.dataset.index)
+
     if (!options._demoActivateAll) {
       // Default situation
-      if (Number(e.dataset.index) === current.index) {
+      if (eIndex === current.index) {
         e.classList.replace('rc-panel-step-inactive', 'rc-panel-step-active')
-        if (Number(e.dataset.index) !== tasks.length) {
-          e.onclick = () => {
-            RC[_getTaskName(tasks[current.index])](
-              ..._getTaskOptionsCallbacks(tasks[current.index])
-            )
-            _finishStepAt(current.index)
-            current.index++
-            _activateStepAt(RC, current, tasks, options, finalCallback)
+        if (eIndex !== tasks.length) {
+          if (eIndex === tasks.length - 1 && !options.showNextButton) {
+            e.onclick = () => {
+              RC[_getTaskName(tasks[current.index])](
+                ..._getTaskOptionsCallbacks(tasks[current.index], finalCallback)
+              )
+              _finishStepAt(current.index)
+            }
+          } else {
+            e.onclick = () => {
+              RC[_getTaskName(tasks[current.index])](
+                ..._getTaskOptionsCallbacks(tasks[current.index])
+              )
+              _finishStepAt(current.index)
+              current.index++
+              _activateStepAt(RC, current, tasks, options, finalCallback)
+            }
           }
-        } else {
+        } else if (eIndex === tasks.length && options.showNextButton) {
+          // 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')
@@ -347,17 +369,27 @@ const _getTaskName = task => {
   return task.name
 }
 
-const _getTaskOptionsCallbacks = task => {
+const _getTaskOptionsCallbacks = (task, finalCallback = null) => {
   if (typeof task === 'string') return []
 
+  const _ = () => {
+    if (task.callback && typeof task.callback === 'function') task.callback()
+    if (finalCallback && typeof finalCallback === 'function') finalCallback()
+  }
+
   if (['displaySize', 'environment'].includes(task.name)) {
-    return [task.callback || null]
+    return [_]
   } else if (['screenSize', 'trackGaze'].includes(task.name)) {
-    return [task.options || {}, task.callback || null]
+    return [task.options || {}, _]
   } else if (['trackDistance'].includes(task.name)) {
     return [
       task.options || {},
-      task.callbackStatic || null,
+      () => {
+        if (task.callbackStatic && typeof task.callbackStatic === 'function')
+          task.callbackStatic()
+        if (finalCallback && typeof finalCallback === 'function')
+          finalCallback()
+      },
       task.callbackTrack || null,
     ]
   }

package/src/screenSize.js

@@ -58,10 +58,11 @@ RemoteCalibrator.prototype.screenSize = function (options = {}, callback) {
 
   this.getFullscreen(options.fullscreen)
 
-  options.description += `<br /><b>I have a <select id="matching-obj"><option value="usba" selected>USB Type-A Connector</option><option value="usbc">USB Type-C Connector</option><option value="card">Credit Card</option></select> with me.</b>`
+  options.description += `<br /><b style="display: inline-flex">I have a <select id="matching-obj"><option value="usba" selected>USB Type-A Connector</option><option value="usbc">USB Type-C Connector</option><option value="card">Credit Card</option></select> with me.</b>`
 
   this._addBackground()
   this._addBackgroundText(options.headline, options.description)
+  this._addCreditOnBackground(this._CONST.CREDIT_TEXT.CREDIT_CARD)
 
   getSize(this, this.background, options, callback)
 

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",
@@ -20,8 +20,10 @@
     "description": "We will measure your gaze accuracy. Please do not move the mouse and look at the fixation at the middle of the screen for the next 5 seconds."
   },
   "panel": {
-    "headline": "To calibrate, press a button!",
+    "headline": "Please press a button, to calibrate.",
     "description": "",
+    "nextHeadline": "Thanks for calibrating. Hit the button to continue.",
+    "nextDescription": "",
     "nextButton": "Done"
   },
   "measurePD": {