remote-calibrator 0.3.0-beta.0 → 0.3.0-beta.4

package/src/css/screenSize.css

@@ -1,41 +1,42 @@
-.slider {
+.rc-slider {
   position: absolute;
   display: block;
   -webkit-appearance: none;
   appearance: none;
   width: calc(100% - 4rem);
-  height: 30px;
-  background: #fff;
-  opacity: 0.7;
+  height: 10px;
+  background: linear-gradient(90deg, #ffc772, #ffc772 60%, #fff 60%);
+  opacity: 0.8;
   /* top: max(45%, 200px); */
   left: 2rem;
-  border-radius: 15px;
+  border-radius: 5px;
   z-index: 1;
   cursor: grab;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
 }
 
-.slider:hover {
+.rc-slider:hover {
   opacity: 0.99;
 }
 
-.slider::-webkit-slider-thumb {
+.rc-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 30px;
   height: 30px;
   border-radius: 15px;
-  background: #666;
+  background: #ff9a00;
+  box-shadow: 0 0 12px 0 #88520033;
   cursor: inherit;
 }
 
-.slider::-moz-range-thumb,
-.slider::-ms-thumb {
-  width: 20px;
+.rc-slider::-moz-range-thumb,
+.rc-slider::-ms-thumb {
+  width: 30px;
   height: 30px;
   border-radius: 15px;
-  background: #666;
+  background: #ff9a00;
   cursor: inherit;
 }
 
@@ -55,6 +56,7 @@
 #size-arrow {
   position: absolute;
   display: block;
+  /* display: none; */
   width: 70px;
   height: auto;
   z-index: 3;
@@ -68,8 +70,8 @@
   transition: opacity 0.1s;
 }
 
-.slider:hover ~ .size-obj .minor,
-.slider:active ~ .size-obj .minor {
+.rc-slider:hover ~ .size-obj .minor,
+.rc-slider:active ~ .size-obj .minor {
   opacity: 0;
 }
 
@@ -85,3 +87,15 @@
   font-size: 1.1rem;
   vertical-align: middle;
 }
+
+@media (min-width: 481px) {
+  .rc-size-obj-selection {
+    display: inline-flex;
+  }
+}
+
+@media (max-width: 480px) {
+  .rc-size-obj-selection {
+    display: inline-block;
+  }
+}

package/src/debug.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-undef
+export const debug = process.env.DEBUG

package/src/displaySize.js

@@ -1,5 +1,5 @@
 import RemoteCalibrator from './core'
-import { blurAll } from './helpers'
+import { blurAll } from './components/utils'
 
 /**
  *

package/src/distance/distance.js

@@ -5,7 +5,7 @@ import {
   toFixedNumber,
   median,
   blurAll,
-} from '../helpers'
+} from '../components/utils'
 import {
   _getCrossX,
   _cross,
@@ -16,7 +16,7 @@ import {
 import { bindKeys, unbindKeys } from '../components/keyBinder'
 import { addButtons } from '../components/buttons'
 import { soundFeedback } from '../components/sound'
-import text from '../text.json'
+import { phrases } from '../i18n'
 
 const blindSpotHTML = `<canvas id="blind-spot-canvas"></canvas>`
 
@@ -40,16 +40,17 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
   RC.background.appendChild(blindSpotDiv)
   RC._constructFloatInstructionElement(
     'blind-spot-instruction',
-    `Close <span id="eye-side"></span> eye.`
+    phrases.RC_headTrackingCloseL[RC.L]
   )
-  RC._addCreditOnBackground(RC._CONST.CREDIT_TEXT.BLIND_SPOT_TEST)
+  RC._addCreditOnBackground(phrases.RC_viewingBlindSpotCredit[RC.L])
 
   // Get HTML elements
   const c = document.querySelector('#blind-spot-canvas')
   const ctx = c.getContext('2d')
 
-  const eyeSideEle = document.getElementById('eye-side')
-  let eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+  const eyeSideEle = document.getElementById('blind-spot-instruction')
+  // let eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+  let eyeSide = 'left'
   RC._setFloatInstructionElementPos(eyeSide, 16)
   let crossX = _getCrossX(eyeSide, c.width)
 
@@ -115,9 +116,14 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
       }
     } else if (tested % options.repeatTesting === 0) {
       // Switch eye side
-      if (eyeSide === 'left')
-        eyeSide = (eyeSideEle.innerText = 'RIGHT').toLocaleLowerCase()
-      else eyeSide = (eyeSideEle.innerText = 'LEFT').toLocaleLowerCase()
+      if (eyeSide === 'left') {
+        // Change to RIGHT
+        eyeSide = 'right'
+        eyeSideEle.innerHTML = phrases.RC_headTrackingCloseR[RC.L]
+      } else {
+        eyeSide = 'left'
+        eyeSideEle.innerHTML = phrases.RC_headTrackingCloseL[RC.L]
+      }
       RC._setFloatInstructionElementPos(eyeSide, 16)
 
       circleBounds = _getCircleBounds(eyeSide, crossX, c.width)
@@ -134,6 +140,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
     ' ': finishFunction,
   })
   addButtons(
+    RC.L,
     RC.background,
     {
       go: finishFunction,
@@ -152,7 +159,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
 
     _cross(ctx, crossX, c.height / 2)
 
-    _circle(ctx, circleX, c.height / 2, frameCount, options.sparkle)
+    _circle(RC, ctx, circleX, c.height / 2, frameCount, options.sparkle)
     circleX += v * circleDeltaX
     tempX = constrain(circleX, ...circleBounds)
     if (circleX !== tempX) {
@@ -197,8 +204,8 @@ RemoteCalibrator.prototype.measureDistance = function (options = {}, callback) {
       repeatTesting: 2,
       sparkle: true,
       decimalPlace: 1,
-      headline: text.measureDistance.headline,
-      description: text.measureDistance.description,
+      headline: '📏 ' + phrases.RC_viewingDistanceTitle[this.L],
+      description: phrases.RC_viewingDistanceIntro[this.L],
     },
     options
   )
@@ -208,7 +215,7 @@ RemoteCalibrator.prototype.measureDistance = function (options = {}, callback) {
   this._addBackground()
 
   this._replaceBackground(
-    constructInstructions(options.headline, options.description)
+    constructInstructions(options.headline, options.description, true)
   )
   blindSpotTest(this, options, false, callback)
 }

package/src/distance/distanceTrack.js

@@ -6,9 +6,9 @@ import {
   constructInstructions,
   blurAll,
   sleep,
-} from '../helpers'
+} from '../components/utils'
 import { iRepeat } from '../components/iRepeat'
-import text from '../text.json'
+import { phrases } from '../i18n'
 
 const originalStyles = {
   video: false,
@@ -42,15 +42,16 @@ RemoteCalibrator.prototype.trackDistance = function (
       fullscreen: false,
       repeatTesting: 2,
       sparkle: true,
-      pipWidthPx: 208,
+      pipWidthPx:
+        this._CONST.N.VIDEO_W[this.isMobile.value ? 'MOBILE' : 'DESKTOP'],
       showVideo: true,
       showFaceOverlay: false,
       decimalPlace: 1,
       framerate: 3, // track rate
       nearPoint: true, // New 0.0.6
       showNearPoint: false, // New 0.0.6
-      headline: text.trackDistance.headline,
-      description: text.trackDistance.description,
+      headline: '🙂 ' + phrases.RC_headTrackingTitle[this.L],
+      description: phrases.RC_headTrackingIntro[this.L],
     },
     options
   )
@@ -73,7 +74,7 @@ RemoteCalibrator.prototype.trackDistance = function (
   this._addBackground()
   this._constructFloatInstructionElement(
     'gaze-system-instruction',
-    'Starting up... Please wait.'
+    phrases.RC_starting[this.L]
   )
 
   // STEP 2 - Live estimate
@@ -161,7 +162,7 @@ const cyclopean = (video, a, b) => {
 
 /* -------------------------------------------------------------------------- */
 const trackingOptions = {
-  pipWidthPx: 208,
+  pipWidthPx: 0,
   decimalPlace: 2,
   framerate: 3,
   nearPoint: true,
@@ -372,7 +373,7 @@ RemoteCalibrator.prototype.endDistance = function (endAll = false, _r = true) {
     iRepeatOptions.break = true
     iRepeatOptions.framerate = 20
 
-    trackingOptions.pipWidthPx = 208
+    trackingOptions.pipWidthPx = 0
     trackingOptions.decimalPlace = 2
     trackingOptions.framerate = 3
     trackingOptions.nearPoint = true

package/src/gaze/gaze.js

@@ -1,12 +1,13 @@
 import RemoteCalibrator from '../core'
 
-import { blurAll } from '../helpers'
+import { blurAll } from '../components/utils'
 import { gazeCalibrationPrepare } from './gazeCalibration'
-import text from '../text.json'
+import { phrases } from '../i18n'
 
 RemoteCalibrator.prototype.trackGaze = function (
   options = {},
-  callback = null
+  callbackOnCalibrationEnd = null,
+  callbackTrack = null
 ) {
   /**
    * options -
@@ -37,13 +38,14 @@ RemoteCalibrator.prototype.trackGaze = function (
       framerate: 30, // ! New 0.0.5
       showGazer: true,
       showVideo: true,
-      pipWidthPx: 208,
+      pipWidthPx:
+        this._CONST.N.VIDEO_W[this.isMobile.value ? 'MOBILE' : 'DESKTOP'],
       showFaceOverlay: false,
       calibrationCount: 5,
       thresholdDeg: 10, // minAccuracy
       decimalPlace: 0, // As the system itself has a high prediction error, it's not necessary to be too precise here
-      headline: text.calibrateGaze.headline,
-      description: text.calibrateGaze.description,
+      headline: '👀 ' + phrases.RC_gazeTrackingTitle[this.L],
+      description: phrases.RC_gazeTrackingIntro[this.L],
     },
     options
   )
@@ -60,8 +62,8 @@ RemoteCalibrator.prototype.trackGaze = function (
     this.showVideo(options.showVideo)
     this.showFaceOverlay(options.showFaceOverlay)
 
-    this.gazeTracker.attachNewCallback(callback)
-    this.gazeTracker.defaultGazeCallback = callback
+    this.gazeTracker.attachNewCallback(callbackTrack)
+    this.gazeTracker.defaultGazeCallback = callbackTrack
     return
   }
 
@@ -101,6 +103,12 @@ RemoteCalibrator.prototype.trackGaze = function (
   // Calibration
 
   const onCalibrationEnded = () => {
+    if (
+      callbackOnCalibrationEnd &&
+      typeof callbackOnCalibrationEnd === 'function'
+    )
+      callbackOnCalibrationEnd()
+
     // ! greedyLearner
     if (!this.gazeTracker.webgazer.params.greedyLearner) {
       this.gazeTracker.stopLearning()
@@ -109,8 +117,8 @@ RemoteCalibrator.prototype.trackGaze = function (
     // TODO Test accuracy
     const testAccuracy = false
     if (options.thresholdDeg === 'none' || !testAccuracy) {
-      this.gazeTracker.attachNewCallback(callback)
-      this.gazeTracker.defaultGazeCallback = callback
+      this.gazeTracker.attachNewCallback(callbackTrack)
+      this.gazeTracker.defaultGazeCallback = callbackTrack
       return
     } else {
       if (
@@ -121,8 +129,8 @@ RemoteCalibrator.prototype.trackGaze = function (
           () => {
             // Success
             // Start running
-            this.gazeTracker.attachNewCallback(callback)
-            this.gazeTracker.defaultGazeCallback = callback
+            this.gazeTracker.attachNewCallback(callbackTrack)
+            this.gazeTracker.defaultGazeCallback = callbackTrack
           },
           () => {
             // Fail to meet the min accuracy
@@ -133,17 +141,11 @@ RemoteCalibrator.prototype.trackGaze = function (
         console.error(
           'Failed to finish gaze accuracy measurement due to error.'
         )
-        this.gazeTracker.attachNewCallback(callback)
-        this.gazeTracker.defaultGazeCallback = callback
+        this.gazeTracker.attachNewCallback(callbackTrack)
+        this.gazeTracker.defaultGazeCallback = callbackTrack
       }
     }
   }
-  // Swal.fire({
-  //   ...swalInfoOptions,
-  //   html: options.description,
-  // }).then(() => {
-
-  // })
 }
 
 RemoteCalibrator.prototype.getGazeNow = async function (callback = null) {

package/src/gaze/gazeAccuracy.js

@@ -3,8 +3,7 @@ import Swal from 'sweetalert2/dist/sweetalert2.js'
 import RemoteCalibrator from '../core'
 
 import { _cross } from '../components/onCanvas'
-import { blurAll, sleep, toFixedNumber } from '../helpers'
-import text from '../text.json'
+import { blurAll, sleep, toFixedNumber } from '../components/utils'
 import { swalInfoOptions } from '../components/swalOptions'
 
 let inGetAccuracy = false
@@ -58,9 +57,9 @@ RemoteCalibrator.prototype.getGazeAccuracy = function (
   _resizeCanvas()
 
   Swal.fire({
-    ...swalInfoOptions,
+    ...swalInfoOptions(this),
     // title: text.getGazeAccuracy.headline,
-    html: text.getGazeAccuracy.description,
+    html: `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.`,
   }).then(() => {
     // ! After confirming alert
     inGetAccuracy = true

package/src/gaze/gazeCalibration.js

@@ -1,9 +1,9 @@
 import RemoteCalibrator from '../core'
 
-import { constructInstructions, shuffle, blurAll } from '../helpers'
-import { gazeCalibrationDotDefault, debug } from '../constants'
+import { constructInstructions, shuffle, blurAll } from '../components/utils'
+import { debug } from '../debug'
 import { bindKeys, unbindKeys } from '../components/keyBinder'
-import text from '../text.json'
+import { phrases } from '../i18n'
 
 // [Wait!], etc.
 // const instPOutsideWarning = 'Keep your face centered in the video feed.'
@@ -24,7 +24,7 @@ export function gazeCalibrationPrepare(RC, options) {
     )
   RC._constructFloatInstructionElement(
     'gaze-system-instruction',
-    'Starting up... Please wait.'
+    phrases.RC_starting[RC.L]
   )
 }
 
@@ -41,8 +41,8 @@ RemoteCalibrator.prototype.calibrateGaze = function (options = {}, callback) {
     {
       greedyLearner: false,
       calibrationCount: 5,
-      headline: text.calibrateGaze.headline,
-      description: text.calibrateGaze.description,
+      headline: '👀 ' + phrases.RC_gazeTrackingTitle[this.L],
+      description: phrases.RC_gazeTrackingIntro[this.L],
     },
     options
   )
@@ -97,7 +97,7 @@ class GazeCalibrationDot {
     this.clicks = 0
 
     this.position = this.order.shift()
-    this.r = gazeCalibrationDotDefault.r
+    this.r = this.RC._CONST.N.GAZE_CALIBRATION.R
 
     // HTML div
     this.div = document.createElement('div')
@@ -116,12 +116,14 @@ class GazeCalibrationDot {
       height: this.r + 'px',
       borderRadius: this.r / 2 + 'px',
     })
+
+    const _b = this.RC._CONST.N.GAZE_CALIBRATION.BORDER
     Object.assign(this.clickDiv.style, {
-      width: this.r - gazeCalibrationDotDefault.border + 'px',
-      height: this.r - gazeCalibrationDotDefault.border + 'px',
-      borderRadius: (this.r - gazeCalibrationDotDefault.border) / 2 + 'px',
-      top: `${gazeCalibrationDotDefault.border / 2}px`,
-      left: `${gazeCalibrationDotDefault.border / 2}px`,
+      width: this.r - _b + 'px',
+      height: this.r - _b + 'px',
+      borderRadius: (this.r - _b) / 2 + 'px',
+      top: `${_b / 2}px`,
+      left: `${_b / 2}px`,
     })
 
     this.parent = parent
@@ -137,33 +139,39 @@ class GazeCalibrationDot {
     Object.assign(
       this.div.style,
       [
-        { left: gazeCalibrationDotDefault.margin + 'px', right: 'unset' }, // 0
         {
-          left: `calc(50% - ${gazeCalibrationDotDefault.r / 2}px)`,
+          left: this.RC._CONST.N.GAZE_CALIBRATION.MARGIN + 'px',
+          right: 'unset',
+        }, // 0
+        {
+          left: `calc(50% - ${this.RC._CONST.N.GAZE_CALIBRATION.R / 2}px)`,
           right: 'unset',
         }, // 1
-        // { right: gazeCalibrationDotDefault.margin + 'px', left: 'unset' }, // 2
+        // { right: this.RC._CONST.N.GAZE_CALIBRATION.MARGIN + 'px', left: 'unset' }, // 2
         {
           left:
             window.innerWidth -
-            gazeCalibrationDotDefault.r -
-            gazeCalibrationDotDefault.margin +
+            this.RC._CONST.N.GAZE_CALIBRATION.R -
+            this.RC._CONST.N.GAZE_CALIBRATION.MARGIN +
             'px',
           right: 'unset',
         }, // 2
       ][this.position[0]],
       [
-        { top: gazeCalibrationDotDefault.margin + 'px', bottom: 'unset' }, // 0
         {
-          top: `calc(50% - ${gazeCalibrationDotDefault.r / 2}px)`,
+          top: this.RC._CONST.N.GAZE_CALIBRATION.MARGIN + 'px',
+          bottom: 'unset',
+        }, // 0
+        {
+          top: `calc(50% - ${this.RC._CONST.N.GAZE_CALIBRATION.R / 2}px)`,
           bottom: 'unset',
         }, // 1
-        // { bottom: gazeCalibrationDotDefault.margin + 'px', top: 'unset' }, // 2
+        // { bottom: this.RC._CONST.N.GAZE_CALIBRATION.MARGIN + 'px', top: 'unset' }, // 2
         {
           top:
             window.innerHeight -
-            gazeCalibrationDotDefault.r -
-            gazeCalibrationDotDefault.margin +
+            this.RC._CONST.N.GAZE_CALIBRATION.R -
+            this.RC._CONST.N.GAZE_CALIBRATION.MARGIN +
             'px',
           bottom: 'unset',
         }, // 2

package/src/gaze/gazeTracker.js

@@ -1,7 +1,7 @@
 import webgazer from '../WebGazer4RC/src/index.mjs'
 
-import { toFixedNumber } from '../helpers'
-import { checkWebgazerReady } from '../video'
+import { toFixedNumber } from '../components/utils'
+import { checkWebgazerReady } from '../components/video'
 
 /**
  * The gaze tracker object to wrap all gaze-related functions
@@ -38,6 +38,7 @@ export default class GazeTracker {
       }
 
       checkWebgazerReady(
+        this.calibrator,
         pipWidthPx,
         this.calibrator.params.videoOpacity,
         this.webgazer,
@@ -55,6 +56,7 @@ export default class GazeTracker {
       }
 
       checkWebgazerReady(
+        this.calibrator,
         pipWidthPx,
         this.calibrator.params.videoOpacity,
         this.webgazer,