remote-calibrator 0.3.0-rc.3 → 0.5.0-beta.10

package/src/components/sound.js

@@ -7,6 +7,34 @@ const feedbackSynth = new Synth({
   envelope: { attack: 0.001, decay: 0.001, sustain: 1, release: 0.001 },
 }).connect(new Volume(-17).toDestination())
 
-export const soundFeedback = () => {
-  feedbackSynth.triggerAttackRelease(2000, 0.05)
+const softFeedbackSynth = new Synth({
+  oscillator: {
+    type: 'sine',
+  },
+}).connect(new Volume(-5).toDestination())
+
+export const soundFeedback = (style = 0) => {
+  switch (style) {
+    case 0:
+      feedbackSynth.triggerAttackRelease(2000, 0.05)
+      return
+
+    case 1:
+      // Negative feedback
+      feedbackSynth.triggerAttackRelease(500, 0.5)
+      return
+
+    case 2:
+      // Purr
+      feedbackSynth.triggerAttackRelease(200, 0.6)
+      return
+
+    case 3:
+      softFeedbackSynth.triggerAttackRelease(200, 0.2)
+      return
+
+    default:
+      feedbackSynth.triggerAttackRelease(2000, 0.05)
+      return
+  }
 }

package/src/components/swalOptions.js

@@ -1,8 +1,8 @@
 import { phrases } from '../i18n'
 
-export const swalInfoOptions = RC => {
+export const swalInfoOptions = (RC, { showIcon }) => {
   return {
-    icon: 'info',
+    icon: showIcon ? 'info' : undefined,
     allowEscapeKey: false,
     allowEnterKey: false,
     allowOutsideClick: false,
@@ -10,6 +10,7 @@ export const swalInfoOptions = RC => {
     confirmButtonText: phrases.RC_ok[RC.L],
     showClass: {
       popup: 'animate__animated animate__fadeInUp',
+      icon: '',
       // backdrop: 'animate__animated animate__fadeIn',
     },
     hideClass: {
@@ -19,9 +20,11 @@ export const swalInfoOptions = RC => {
     iconColor: RC._CONST.COLOR.ORANGE,
     confirmButtonColor: '#aaa',
     customClass: {
+      popup: 'my__swal2__container',
       icon: 'my__swal2__icon',
       title: 'my__swal2__title',
-      htmlContainer: 'my__swal2__html',
+      htmlContainer: 'my__swal2__html' + ` rc-lang-${RC.LD.toLowerCase()}`,
+      confirmButton: 'rc-button rc-go-button',
     },
   }
 }

package/src/components/utils.js

@@ -68,6 +68,12 @@
   }
 })()
 
+export function safeExecuteFunc(f, ...a) {
+  if (f && typeof f === 'function')
+    if (a.length) f(...a)
+    else f()
+}
+
 // http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
 export function sleep(time) {
   return new Promise(resolve => setTimeout(resolve, time))
@@ -86,16 +92,33 @@ export function getFullscreen() {
     const element = document.documentElement
     if (element.requestFullscreen) {
       element.requestFullscreen()
+      return true
     } else if (element.mozRequestFullScreen) {
       element.mozRequestFullScreen()
+      return true
     } else if (element.webkitRequestFullscreen) {
       element.webkitRequestFullscreen()
+      return true
     } else if (element.msRequestFullscreen) {
       element.msRequestFullscreen()
+      return true
+    } else {
+      return false
     }
+  } else {
+    return false
   }
 }
 
+export function isFullscreen() {
+  return (
+    Math.abs(window.innerHeight - screen.height) < 5 &&
+    Math.abs(window.innerWidth - screen.width) < 5 &&
+    window.screenX < 5 &&
+    window.screenY < 5
+  )
+}
+
 /* -------------------------------------------------------------------------- */
 
 export function constructInstructions(
@@ -127,7 +150,7 @@ export function dist2d(aX, aY, bX, bY) {
   return Math.sqrt(Math.pow(aX - bX, 2) + Math.pow(aY - bY, 2))
 }
 
-// https://stackoverflow.com/a/12646864/11069914
+// https://stackoverflow.com/a/12646864
 export function shuffle(array) {
   for (let i = array.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1))
@@ -148,6 +171,9 @@ export const median = arr => {
   return arr.length % 2 !== 0 ? num[mid] : (num[mid - 1] + num[mid]) / 2
 }
 
+// https://stackoverflow.com/a/41452260
+export const average = array => array.reduce((a, b) => a + b) / array.length
+
 /**
  *
  * BLUR ALL

package/src/components/video.js

@@ -1,4 +1,6 @@
-// Only one video for all functions
+/* Only one video for all functions */
+
+import { safeExecuteFunc } from './utils'
 
 export function addVideoElementsToBody() {
   let v = document.querySelector('video')
@@ -33,7 +35,7 @@ export function startVideo(videoElement, callback) {
       videoElement.play()
 
       // ! CALLBACK
-      if (callback) callback(stream)
+      safeExecuteFunc(callback, stream)
     },
     err => console.error(err)
   )
@@ -82,17 +84,18 @@ export function checkWebgazerReady(RC, pipWidthPx, opacity, WG, callback) {
       // Set position
       setDefaultVideoPosition(RC, v)
 
-      // Give callback after 2 sec
+      // Give callback after 0.5 sec
       setTimeout(() => {
+        RC.videoOpacity()
         if (RC.isMobile.value)
           v.style.transition = `right 0.5s, top 0.5s, width 0.5s, height 0.5s, border-radius 0.5s`
         else
           v.style.transition = `left 0.5s, bottom 0.5s, width 0.5s, height 0.5s, border-radius 0.5s`
-        callback()
-      }, 1000)
+        safeExecuteFunc(callback)
+      }, 700)
       clearInterval(c)
     }
-  }, 200)
+  }, 50)
 }
 
 export function setDefaultVideoPosition(RC, v) {

package/src/const.js

@@ -12,6 +12,8 @@ RemoteCalibrator.prototype._CONST = Object.freeze({
       MARGIN: 10,
       BORDER: 8,
     },
+    PPI_DONT_USE: 127.7,
+    PD_DONT_USE: 6.4,
   },
   S: {
     AUTO: 'AUTO',
@@ -24,5 +26,18 @@ RemoteCalibrator.prototype._CONST = Object.freeze({
     LIGHT_GREY: '#cccccc',
     ORANGE: '#ff9a00',
     DARK_RED: '#ac0d0d',
+    RED: '#ee0000',
+  },
+  LTR: 'LTR',
+  RTL: 'RTL',
+  VIEW_METHOD: {
+    B: 'BlindSpot',
+    F: 'FaceMesh',
+  },
+  IN_TO_CM: 2.54,
+  UNITS: {
+    CM: 'cm',
+    IN_D: 'inDecimal',
+    IN_F: 'inFractional',
   },
 })

package/src/core.js

@@ -13,16 +13,27 @@ import {
   getFullscreen,
   blurAll,
   constructInstructions,
+  isFullscreen,
+  safeExecuteFunc,
 } from './components/utils'
 import { looseSetLanguage } from './components/language'
 import { phrases } from './i18n'
+import isEqual from 'react-fast-compare'
 
 class RemoteCalibrator {
   constructor() {
     this._initialized = false
 
-    this._hasPanel = false
-    this._panelFinished = false
+    this._id = null
+
+    this._lang = null // A single string, e.g., 'en-US'
+    this._langData = []
+
+    this._panelStatus = {
+      hasPanel: false,
+      panelFinished: false,
+      panelResolveIntervals: [],
+    }
     this._panel = {
       panel: null,
       panelObserver: null,
@@ -33,10 +44,30 @@ class RemoteCalibrator {
       panelResolve: null,
     }
 
-    this._id = null
+    // Calibration check
+    this._participantCheckEquipment = {
+      has: null,
+      equipment: null,
+      unit: null,
+    }
 
-    this._lang = null // A single string, e.g., 'en-US'
-    this._langData = []
+    // Are we calibrating for setting up gaze or distance tracking?
+    this._trackingSetupFinishedStatus = {
+      gaze: true,
+      distance: true,
+    }
+    this._distanceTrackNudging = {
+      distanceCorrecting: null, // setInterval
+      distanceCorrectEnabled: false, // Whether to correct or not, used for endNudger
+      distanceDesired: null,
+      distanceAllowedRatio: null,
+    }
+    this._tackingVideoFrameTimestamps = {
+      gaze: 0,
+      distance: 0,
+    }
+
+    // ! DATA
 
     this._environmentData = []
 
@@ -52,11 +83,20 @@ class RemoteCalibrator {
     // Status
     this._fullscreenData = []
 
+    // Check
+    this._equipmentData = []
+
+    ////
+
     this._background = {
       element: null,
       instructionElement: null,
     }
 
+    this._nudger = {
+      element: null,
+    }
+
     this._params = {
       backgroundColor: '#eee',
       videoOpacity: 0.8,
@@ -64,6 +104,11 @@ class RemoteCalibrator {
     }
 
     this.deviceDetector = new DeviceDetector()
+
+    window.console.log(
+      `%c\nEasyEyes Remote Calibrator ${this.version.value}\n`,
+      `color: ${this._CONST.COLOR.ORANGE}`
+    )
   }
 
   /* --------------------------------- GETTERS -------------------------------- */
@@ -76,6 +121,10 @@ class RemoteCalibrator {
     return this._background.instructionElement
   }
 
+  get nudger() {
+    return this._nudger.element
+  }
+
   // PARAMS
 
   get params() {
@@ -127,6 +176,10 @@ class RemoteCalibrator {
     return this._lang
   }
 
+  get LD() {
+    return this.languageDirection.value
+  }
+
   get language() {
     return this._helper_get(this._langData, 'language')
   }
@@ -150,40 +203,36 @@ class RemoteCalibrator {
   // Status
 
   get isFullscreen() {
-    return {
-      value:
-        Math.abs(window.innerHeight - screen.height) < 5 &&
-        Math.abs(window.innerWidth - screen.width) < 5 &&
-        window.screenX < 5 &&
-        window.screenY < 5,
-      timestamp: new Date(),
-    }
+    if (
+      !this.fullscreenData.length ||
+      !isEqual(isFullscreen(), this._helper_get(this._fullscreenData).value)
+    )
+      this.newFullscreenData = {
+        value: isFullscreen(),
+        timestamp: new Date(),
+      }
+    return this._helper_get(this._fullscreenData)
   }
 
   // Environment
 
   get bot() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'bot')
   }
 
   get browser() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'browser')
   }
 
   get browserVersion() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'browserVersion')
   }
 
   get deviceType() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'deviceType')
   }
 
   get isMobile() {
-    if (!this._environmentData.length) this.environment()
     const d = this._helper_get(this._environmentData, 'deviceType')
     return {
       value: d.value !== 'desktop',
@@ -192,64 +241,60 @@ class RemoteCalibrator {
   }
 
   get model() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'model')
   }
 
   get manufacturer() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'manufacturer')
   }
 
   get engine() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'engine')
   }
 
   get system() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'system')
   }
 
   get systemFamily() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'systemFamily')
   }
 
   get description() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'description')
   }
 
   get fullDescription() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'fullDescription')
   }
 
   get userLanguage() {
-    if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'userLanguage')
   }
 
+  get equipment() {
+    return this._helper_get(this._equipmentData)
+  }
+
   // Screen
 
   get displayWidthPx() {
-    if (!this._displayData.length) this.displaySize()
+    this._displaySize()
     return this._helper_get(this._displayData, 'displayWidthPx')
   }
 
   get displayHeightPx() {
-    if (!this._displayData.length) this.displaySize()
+    this._displaySize()
     return this._helper_get(this._displayData, 'displayHeightPx')
   }
 
   get windowWidthPx() {
-    if (!this._displayData.length) this.displaySize()
+    this._displaySize()
     return this._helper_get(this._displayData, 'windowWidthPx')
   }
 
   get windowHeightPx() {
-    if (!this._displayData.length) this.displaySize()
+    this._displaySize()
     return this._helper_get(this._displayData, 'windowHeightPx')
   }
 
@@ -327,7 +372,7 @@ class RemoteCalibrator {
     return this._gazePositionData
   }
 
-  get fullScreenData() {
+  get fullscreenData() {
     return this._fullscreenData
   }
 
@@ -410,6 +455,13 @@ class RemoteCalibrator {
   set newLanguageData(data) {
     this._langData.push(data)
   }
+
+  /**
+   * @param {{ value: { has: boolean; unit: string; equipment: string; }; timestamp: Date; }} data
+   */
+  set newEquipmentData(data) {
+    this._equipmentData.push(data)
+  }
 }
 
 /**
@@ -436,7 +488,8 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
       timestamp: new Date(),
     }
 
-    this.environment()
+    this._environment()
+    this._displaySize()
 
     if (this._CONST.S.AUTO === options.language)
       // AUTO
@@ -444,7 +497,7 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
     else this.newLanguageData = looseSetLanguage(options.language)
     this._lang = this.language.value
 
-    if (callback && typeof callback === 'function') callback(this._id)
+    safeExecuteFunc(callback, this._id)
   }
 }
 
@@ -453,13 +506,20 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
  * Get the environment data, e.g. browser type
  *
  */
-RemoteCalibrator.prototype.environment = function (callback) {
+RemoteCalibrator.prototype._environment = function () {
   if (this.checkInitialized()) {
     blurAll()
 
     const device = this.deviceDetector.parse(platform.ua)
     const bot = device.bot
 
+    if (!device.device)
+      device.device = {
+        type: null,
+        model: null,
+        brand: null,
+      }
+
     const data = {
       value: {
         bot: bot
@@ -482,8 +542,6 @@ RemoteCalibrator.prototype.environment = function (callback) {
     }
 
     this.newEnvironmentData = data
-
-    if (callback) callback(data)
   }
 }
 
@@ -503,25 +561,20 @@ RemoteCalibrator.prototype.checkInitialized = function () {
  * @param {Boolean} f Get fullscreen or not from options
  */
 RemoteCalibrator.prototype.getFullscreen = function (f = true) {
-  if (
-    window.fullScreen ||
-    (window.innerWidth === screen.width && window.innerHeight === screen.height)
-  ) {
+  if (isFullscreen()) {
     return true
   }
 
-  if (f && !debug) getFullscreen()
+  this.newFullscreenData = {
+    value: f && !debug ? getFullscreen() : false,
+    timestamp: new Date(),
+  }
 
   // Minimize address bar on mobile devices
   // ! Experimental
   if (this.isMobile.value) window.scrollBy(0, 1)
 
-  this.newFullscreenData = {
-    value: f && !debug,
-    timestamp: new Date(),
-  }
-
-  return f && !debug
+  return this.isFullscreen
 }
 
 /**
@@ -548,6 +601,7 @@ RemoteCalibrator.prototype._addBackground = function (inner) {
   if (!b) {
     b = document.createElement('div')
     b.id = 'calibration-background'
+    b.className = 'calibration-background' + ` rc-lang-${this.LD.toLowerCase()}`
 
     document.body.classList.add('lock-view')
     document.body.appendChild(b)
@@ -556,8 +610,9 @@ RemoteCalibrator.prototype._addBackground = function (inner) {
   }
 
   if (inner) b.innerHTML = inner
-
   this._background.element = b
+
+  return this.background
 }
 
 /**

package/src/css/buttons.scss

@@ -1,29 +1,56 @@
 .rc-buttons {
+  z-index: 10;
+}
+
+.rc-absolute-buttons {
   position: fixed;
+  text-align: right;
   bottom: 1.25rem;
   right: 1.25rem;
-  z-index: 900000;
 }
 
 .rc-button {
-  text-align: center;
+  text-align: center !important;
   border: none !important;
-  background: #ffffffee;
   line-height: 150% !important;
   font-size: 1rem !important;
   font-weight: 700 !important;
-  color: #333;
   padding: 1rem 1.5rem !important;
   margin: 0.25rem !important;
   border-radius: 7px !important;
   cursor: pointer;
+}
+
+.rc-go-button {
+  background: #ff9a00aa !important;
+  color: #fff !important;
+
+  &:hover {
+    background: #ff9a00 !important;
+  }
+
+  &:active {
+    background: #d68200 !important;
+  }
+}
+
+.rc-cancel-button,
+.rc-custom-button {
+  background: #ffffffee !important;
+  color: #333 !important;
 
   &:hover {
-    background: #ddd;
+    background: #ddd !important;
   }
 
   &:active {
-    background: #aaa;
-    color: #000;
+    background: #aaa !important;
+    color: #000 !important;
   }
 }
+
+.rc-button:disabled {
+  background: #ddd !important;
+  color: #999 !important;
+  cursor: default !important;
+}

package/src/css/components.scss

@@ -0,0 +1,57 @@
+.my__swal2__container .swal2-select {
+  font-family: inherit !important;
+  border-radius: 5px !important;
+  border: 2px solid #aaa !important;
+  outline: none !important;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                Measure Input                               */
+/* -------------------------------------------------------------------------- */
+
+.rc-form {
+  font-size: 2rem;
+  font-family: inherit;
+
+  .rc-form-inputs {
+    display: flex;
+    justify-content: space-between !important;
+    margin: 1rem 0;
+
+    .rc-form-input,
+    span {
+      flex-grow: 1;
+      padding: 0.5rem;
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    span {
+      font-weight: 700;
+    }
+  }
+
+  .rc-form-input {
+    border: 2px solid #aaa;
+    outline: none;
+    border-radius: 5px;
+    width: min(100%, 10rem);
+
+    &.rc-input-error {
+      border-color: #ac0d0d !important;
+      color: #ac0d0d !important;
+    }
+  }
+}
+
+.arrow-two-sided-svg {
+  position: fixed;
+  width: 100%;
+  bottom: 10%;
+  left: 0;
+  right: 0;
+
+  .arrow-two-sided {
+    fill: #ff9a00;
+  }
+}