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

package/src/index.js

@@ -3,16 +3,19 @@ import RemoteCalibrator from './core'
 import './const'
 
 import './screenSize'
-import './displaySize'
+
 import './distance/distance'
 import './distance/distanceTrack'
-import './interpupillaryDistance'
+import './distance/distanceCheck'
+import './distance/interPupillaryDistance'
 
 import './gaze/gaze'
 import './gaze/gazeCalibration'
 import './gaze/gazeAccuracy'
 import GazeTracker from './gaze/gazeTracker'
 
+import './check/checkScreenSize'
+
 import './panel'
 import './customization'
 
@@ -20,10 +23,12 @@ import './css/main.css'
 import './css/screenSize.css'
 import './css/distance.scss'
 import './css/gaze.css'
+import './css/video.scss'
 
 import 'animate.css'
 import 'sweetalert2/src/sweetalert2.scss'
 import './css/swal.css'
+import './css/components.scss'
 
 const r = new RemoteCalibrator()
 r.gazeTracker = new GazeTracker(r)

package/src/media/two-side-arrow.svg

@@ -0,0 +1 @@
+<svg fill="none" height="163" viewBox="0 0 222 163" width="222" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m3.22183 88.7817c-4.29577-4.2957-4.29577-11.2605 0-15.5563l70.00357-70.00357c4.2958-4.29577 11.2606-4.29577 15.5563 0 4.2958 4.29577 4.2958 11.26057 0 15.55637l-51.2253 51.2254h146.8876l-51.226-51.2254c-4.296-4.2958-4.296-11.2606 0-15.55637s11.261-4.29577 15.557 0l70.003 70.00357c4.296 4.2958 4.296 11.2606 0 15.5563l-70.003 70.0033c-4.296 4.296-11.261 4.296-15.557 0-4.296-4.295-4.296-11.26 0-15.556l51.226-51.2254h-146.8876l51.2253 51.2254c4.2958 4.296 4.2958 11.261 0 15.556-4.2957 4.296-11.2605 4.296-15.5563 0z" fill="#000" fill-rule="evenodd"/></svg>

package/src/media/two-sided-horizontal.svg

@@ -0,0 +1 @@
+<svg class="arrow-two-sided-svg" width="1440" height="163" viewBox="0 0 1440 163" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="arrow-two-sided" fill-rule="evenodd" clip-rule="evenodd" d="M3.49996 88.7818C-0.795805 84.486 -0.795805 77.5212 3.49996 73.2254L73.5035 3.22183C77.7993 -1.07393 84.7641 -1.07393 89.0599 3.22183C93.3557 7.5176 93.3557 14.4824 89.0599 18.7782L37.8345 70.0036L1402.17 70.0036L1350.94 18.7782C1346.64 14.4824 1346.64 7.5176 1350.94 3.22183C1355.24 -1.07394 1362.2 -1.07394 1366.5 3.22183L1436.5 73.2254C1440.8 77.5212 1440.8 84.486 1436.5 88.7817L1366.5 158.785C1362.2 163.081 1355.24 163.081 1350.94 158.785C1346.64 154.49 1346.64 147.525 1350.94 143.229L1402.17 92.0036L37.8345 92.0036L89.0599 143.229C93.3557 147.525 93.3557 154.49 89.0599 158.785C84.7641 163.081 77.7993 163.081 73.5035 158.785L3.49996 88.7818Z" /></svg>

package/src/media/two-sided-vertical.svg

@@ -0,0 +1,3 @@
+<svg width="164" height="900" viewBox="0 0 164 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.2218 4C78.5175 -0.295771 85.4824 -0.295771 89.7781 4L159.782 74.0036C164.077 78.2993 164.077 85.2641 159.782 89.5599C155.486 93.8557 148.521 93.8557 144.225 89.5599L93 38.3345L93 861.665L144.225 810.44C148.521 806.144 155.486 806.144 159.782 810.44C164.078 814.736 164.078 821.701 159.782 825.996L89.7782 896C85.4824 900.296 78.5176 900.296 74.2218 896L4.21825 825.996C-0.0775169 821.701 -0.0775172 814.736 4.21825 810.44C8.51402 806.144 15.4788 806.144 19.7746 810.44L71 861.665L71 38.3345L19.7746 89.5599C15.4788 93.8557 8.51397 93.8557 4.2182 89.5599C-0.0775644 85.2642 -0.0775647 78.2993 4.2182 74.0036L74.2218 4Z" fill="black"/>
+</svg>

package/src/panel.js

@@ -1,5 +1,6 @@
 import tinycolor from 'tinycolor2'
 
+import { safeExecuteFunc } from './components/utils'
 import RemoteCalibrator from './core'
 import { phrases } from './i18n'
 
@@ -10,7 +11,7 @@ import Phone from './media/smartphone.svg'
 import './css/panel.scss'
 
 RemoteCalibrator.prototype.removePanel = function () {
-  if (!this._hasPanel) return false
+  if (!this._panelStatus.hasPanel) return false
   this._panel.panelObserver.unobserve(this._panel.panel)
   this._panel.panel.remove()
 
@@ -22,8 +23,9 @@ RemoteCalibrator.prototype.removePanel = function () {
   this._panel.panelCallback = null
   this._panel.panelResolve = null
 
-  this._hasPanel = false
-  this._panelFinished = false
+  this._panelStatus.hasPanel = false
+  this._panelStatus.panelFinished = false
+  _clearPanelIntervals(this)
 
   return true
 }
@@ -35,7 +37,7 @@ RemoteCalibrator.prototype.resetPanel = function (
   callback = null,
   resolveOnFinish = null
 ) {
-  if (!this._hasPanel) return false
+  if (!this._panelStatus.hasPanel) return false
 
   const t = tasks || [...this._panel.panelTasks]
   const o = options || { ...this._panel.panelOptions }
@@ -50,7 +52,9 @@ RemoteCalibrator.prototype.resetPanel = function (
     this.removePanel()
     return this.panel(t, parent, o, c, r)
   }
+
   // Current parent, just reset
+  _clearPanelIntervals(this)
   return this.panel(t, this._panel.panelParent, o, c, r, true)
 }
 
@@ -60,9 +64,9 @@ RemoteCalibrator.prototype.panel = async function (
   options = {},
   callback = null,
   resolveOnFinish = null,
-  _reset = false // ! Not open for users
+  _reset = false // ! Not available to users
 ) {
-  if (this._hasPanel ^ _reset) return false
+  if (this._panelStatus.hasPanel ^ _reset) return false
   /**
    * has rest
    * t   f no
@@ -93,6 +97,8 @@ RemoteCalibrator.prototype.panel = async function (
       nextDescription: phrases.RC_panelIntroNext[this.L],
       nextButton: phrases.RC_panelButton[this.L],
       color: '#3490de',
+      debug: false,
+      i18n: true,
       _demoActivateAll: false, // ! Private
     },
     options
@@ -119,7 +125,13 @@ RemoteCalibrator.prototype.panel = async function (
 
   const panel = document.createElement('div')
   panel.className = panel.id = 'rc-panel'
-  panel.innerHTML = `<h1 class="rc-panel-title" id="rc-panel-title">${options.headline}</h1>`
+  if (this.LD === this._CONST.RTL) panel.className += ' rc-lang-rtl'
+  else panel.className += ' rc-lang-ltr'
+
+  if (options.i18n) {
+    panel.innerHTML += `<div class="rc-panel-language-parent" id="rc-panel-language-parent"></div>`
+  }
+  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>'
 
@@ -129,11 +141,12 @@ RemoteCalibrator.prototype.panel = async function (
   const steps = panel.querySelector('#rc-panel-steps')
 
   // Observe panel size for adjusting steps
+  const RC = this
   const panelObserver = new ResizeObserver(() => {
-    _setStepsClassesSL(steps, panel.offsetWidth)
+    _setStepsClassesSL(steps, panel.offsetWidth, RC.LD)
   })
   panelObserver.observe(panel)
-  _setStepsClassesSL(steps, panel.offsetWidth)
+  _setStepsClassesSL(steps, panel.offsetWidth, this.LD)
 
   if (tasks.length === 0) {
     steps.className += ' rc-panel-no-steps'
@@ -173,18 +186,26 @@ RemoteCalibrator.prototype.panel = async function (
   this._panel.panelCallback = callback
   this._panel.panelResolve = resolveOnFinish
 
-  this._hasPanel = true
-  this._panelFinished = false
+  this._panelStatus.hasPanel = true
+  this._panelStatus.panelFinished = false
+
+  if (options.i18n)
+    _setLanguagePicker(
+      this,
+      document.querySelector('#rc-panel-language-parent'),
+      darkerColor
+    )
 
   if (resolveOnFinish === null) resolveOnFinish = true
 
   return new Promise(resolve => {
     const _ = setInterval(() => {
-      if (this._panelFinished) {
+      if (this._panelStatus.panelFinished) {
         clearInterval(_)
         resolve(resolveOnFinish)
       }
-    }, 200)
+    }, 100)
+    this._panelStatus.panelResolveIntervals.push(_)
   })
 }
 
@@ -201,31 +222,21 @@ const _validTaskList = {
     name: phrases.RC_screenSize['en-US'],
     phraseHandle: 'RC_screenSize',
   },
-  displaySize: {
-    use: 0,
-    name: phrases.RC_displaySize['en-US'],
-    phraseHandle: 'RC_displaySize',
-  },
   measureDistance: {
-    use: 2,
+    use: 1,
     name: phrases.RC_viewingDistance['en-US'],
     phraseHandle: 'RC_viewingDistance',
   },
   trackDistance: {
     use: 2,
-    name: phrases.RC_headTracking['en-US'],
-    phraseHandle: 'RC_headTracking',
+    name: phrases.RC_distanceTracking['en-US'],
+    phraseHandle: 'RC_distanceTracking',
   },
   trackGaze: {
     use: 2,
     name: phrases.RC_gazeTracking['en-US'],
     phraseHandle: 'RC_gazeTracking',
   },
-  environment: {
-    use: 0,
-    name: phrases.RC_environment['en-US'],
-    phraseHandle: 'RC_environment',
-  },
 }
 const _validTaskListNames = Object.keys(_validTaskList)
 
@@ -296,13 +307,22 @@ const _nextStepBlock = (index, options) => {
   return b
 }
 
-const _setStepsClassesSL = (steps, panelWidth) => {
+const _setStepsClassesSL = (steps, panelWidth, LD) => {
   if (panelWidth < 640) {
     steps.classList.add('rc-panel-steps-s')
     steps.classList.remove('rc-panel-steps-l')
+
+    steps.childNodes.forEach(e => {
+      e.classList.add(`rc-lang-${LD.toLowerCase()}`)
+    })
   } else {
     steps.classList.add('rc-panel-steps-l')
     steps.classList.remove('rc-panel-steps-s')
+
+    steps.childNodes.forEach(e => {
+      e.classList.remove(`rc-lang-ltr`)
+      e.classList.remove(`rc-lang-rtl`)
+    })
   }
 }
 
@@ -314,25 +334,44 @@ const _activateStepAt = (RC, current, tasks, options, finalCallback) => {
       // Default situation
       if (eIndex === current.index) {
         e.classList.replace('rc-panel-step-inactive', 'rc-panel-step-active')
+        e.focus()
         if (eIndex !== tasks.length) {
           if (eIndex === tasks.length - 1 && !options.showNextButton) {
+            // Last task without next button
             e.onclick = () => {
               RC[_getTaskName(tasks[current.index])](
-                ..._getTaskOptionsCallbacks(tasks[current.index], finalCallback)
+                ..._getTaskOptionsCallbacks(
+                  tasks[current.index],
+                  // Fixed task callback
+                  () => {
+                    _finishStepAt(current.index)
+                  },
+                  finalCallback,
+                  // Fixed final callback
+                  () => {
+                    RC._panelStatus.panelFinished = true
+                  }
+                )
               )
-              _finishStepAt(current.index)
             }
           } else {
+            // Interim tasks
             e.onclick = () => {
               RC[_getTaskName(tasks[current.index])](
-                ..._getTaskOptionsCallbacks(tasks[current.index])
+                ..._getTaskOptionsCallbacks(
+                  tasks[current.index],
+                  // Fixed task callback
+                  () => {
+                    _finishStepAt(current.index)
+                    current.index++
+                    _activateStepAt(RC, current, tasks, options, finalCallback)
+                  }
+                )
               )
-              _finishStepAt(current.index)
-              current.index++
-              _activateStepAt(RC, current, tasks, options, finalCallback)
             }
           }
         } else if (eIndex === tasks.length && options.showNextButton) {
+          // All tasks finished with next button
           // Change headline and description
           const { headline, nextHeadline, description, nextDescription } =
             options
@@ -343,9 +382,8 @@ const _activateStepAt = (RC, current, tasks, options, finalCallback) => {
               nextDescription
 
           e.onclick = () => {
-            RC._panelFinished = true
-            if (finalCallback && typeof finalCallback === 'function')
-              finalCallback()
+            RC._panelStatus.panelFinished = true
+            safeExecuteFunc(finalCallback, { timestamp: new Date() })
           }
         }
       }
@@ -366,9 +404,8 @@ const _activateStepAt = (RC, current, tasks, options, finalCallback) => {
           'rc-panel-step-active'
         )
         finalButton.onclick = () => {
-          RC._panelFinished = true
-          if (finalCallback && typeof finalCallback === 'function')
-            finalCallback()
+          RC._panelStatus.panelFinished = true
+          safeExecuteFunc(finalCallback, { timestamp: new Date() })
         }
       }
     }
@@ -389,44 +426,72 @@ const _getTaskName = task => {
   return task.name
 }
 
-const _getTaskOptionsCallbacks = (task, finalCallback = null) => {
-  if (typeof task === 'string') return []
+const _getTaskOptionsCallbacks = (
+  task,
+  fixedTaskCallback,
+  finalCallback = null,
+  fixedFinalCallback = null
+) => {
+  if (typeof task === 'string')
+    task = {
+      name: task,
+    }
 
-  const _ = () => {
-    if (task.callback && typeof task.callback === 'function') task.callback()
-    if (finalCallback && typeof finalCallback === 'function') finalCallback()
+  const getFinalCallbacks = () => {
+    // Task
+    safeExecuteFunc(fixedTaskCallback)
+    // Panel
+    safeExecuteFunc(finalCallback, { timestamp: new Date() })
+    safeExecuteFunc(fixedFinalCallback)
   }
 
-  // TODO Refine this process
-  // Replace hardcoded strings with RC CONST
-  if (['displaySize', 'environment'].includes(task.name)) {
-    return [_]
-  } else if (['screenSize', 'measureDistance'].includes(task.name)) {
-    return [task.options || {}, _]
-  } else if (['trackGaze'].includes(task.name)) {
+  if (['screenSize', 'measureDistance'].includes(task.name)) {
     return [
       task.options || {},
-      () => {
-        if (
-          task.callbackOnCalibrationEnd &&
-          typeof task.callbackOnCalibrationEnd === 'function'
-        )
-          task.callbackOnCalibrationEnd()
-        if (finalCallback && typeof finalCallback === 'function')
-          finalCallback()
+      data => {
+        safeExecuteFunc(task.callback, data)
+        getFinalCallbacks()
+      },
+    ]
+  } else if ('trackGaze' === task.name) {
+    return [
+      task.options || {},
+      data => {
+        safeExecuteFunc(task.callbackOnCalibrationEnd, data)
+        getFinalCallbacks()
       },
       task.callbackTrack || null,
     ]
-  } else if (['trackDistance'].includes(task.name)) {
+  } else if ('trackDistance' === task.name) {
     return [
       task.options || {},
-      () => {
-        if (task.callbackStatic && typeof task.callbackStatic === 'function')
-          task.callbackStatic()
-        if (finalCallback && typeof finalCallback === 'function')
-          finalCallback()
+      data => {
+        safeExecuteFunc(task.callbackStatic, data)
+        getFinalCallbacks()
       },
       task.callbackTrack || null,
     ]
   }
 }
+
+const _clearPanelIntervals = RC => {
+  RC._panelStatus.panelResolveIntervals.forEach(i => clearInterval(i))
+  RC._panelStatus.panelResolveIntervals = []
+}
+
+const _setLanguagePicker = (RC, parent, darkerColor) => {
+  let langInner = `<select name="rc-lang" id="rc-panel-lang-picker" style="color: ${darkerColor} !important">`
+  for (let lang of RC.supportedLanguages)
+    if (RC.L === lang.language)
+      langInner += `<option value="${lang.language}" selected>${lang.languageNameNative}</option>`
+  for (let lang of RC.supportedLanguages)
+    if (RC.L !== lang.language)
+      langInner += `<option value="${lang.language}">${lang.languageNameNative}</option>`
+  langInner += '</select>'
+  parent.innerHTML = langInner
+
+  document.querySelector('#rc-panel-lang-picker').onchange = () => {
+    RC.newLanguage(document.querySelector('#rc-panel-lang-picker').value)
+    RC.resetPanel()
+  }
+}

package/src/screenSize.js

@@ -1,5 +1,12 @@
+import isEqual from 'react-fast-compare'
+
 import RemoteCalibrator from './core'
-import { toFixedNumber, blurAll, remap } from './components/utils'
+import {
+  toFixedNumber,
+  blurAll,
+  remap,
+  safeExecuteFunc,
+} from './components/utils'
 
 import Card from './media/card.svg'
 import Arrow from './media/arrow.svg'
@@ -9,6 +16,31 @@ import { bindKeys, unbindKeys } from './components/keyBinder'
 import { addButtons } from './components/buttons'
 import { phrases } from './i18n'
 
+RemoteCalibrator.prototype._displaySize = function () {
+  ////
+  if (!this.checkInitialized()) return
+  ////
+
+  const thisData = {
+    value: {
+      displayWidthPx: screen.width,
+      displayHeightPx: screen.height,
+      windowWidthPx: window.innerWidth,
+      windowHeightPx: window.innerHeight,
+    },
+    timestamp: new Date(),
+  }
+
+  if (
+    !this.displayData.length ||
+    !isEqual(
+      thisData.value,
+      this.displayData[this.displayData.length - 1].value
+    )
+  )
+    this.newDisplayData = thisData
+}
+
 // TODO Make it customizable
 const defaultObj = 'usba'
 
@@ -31,7 +63,6 @@ RemoteCalibrator.prototype.screenSize = function (options = {}, callback) {
    * options -
    *
    * fullscreen: [Boolean]
-   * quitFullscreenOnFinished: [Boolean] // TODO
    * repeatTesting: 1 // TODO
    * decimalPlace: [Number] Default 1
    * headline: [String]
@@ -46,11 +77,11 @@ RemoteCalibrator.prototype.screenSize = function (options = {}, callback) {
   options = Object.assign(
     {
       fullscreen: false,
-      quitFullscreenOnFinished: false,
       repeatTesting: 1,
       decimalPlace: 1,
       headline: '🖥️ ' + phrases.RC_screenSizeTitle[this.L],
       description: phrases.RC_screenSizeIntro[this.L],
+      check: false,
     },
     options
   )
@@ -196,7 +227,9 @@ function getSize(RC, parent, options, callback) {
     breakFunction()
 
     // ! Call the callback function
-    if (callback) callback(screenData)
+    if (options.check) RC._checkScreenSize(callback, screenData)
+    else safeExecuteFunc(callback, screenData)
+
     return
   }
 
@@ -278,7 +311,7 @@ const switchMatchingObj = (name, elements, setSizes) => {
   // if (name === 'card') elements.arrow.style.visibility = 'visible'
   // else elements.arrow.style.visibility = 'hidden'
   elements.arrow.style.visibility = 'hidden'
-  if (setSizes) setSizes()
+  safeExecuteFunc(setSizes)
 }
 
 /**

package/webpack.config.js

@@ -3,7 +3,9 @@ const webpack = require('webpack')
 const ESLintPlugin = require('eslint-webpack-plugin')
 const WebpackModules = require('webpack-modules')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
 const TerserPlugin = require('terser-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 const packageJSON = require('./package.json')
 
@@ -98,6 +100,7 @@ const libConfig = Object.assign({}, config, {
           },
         },
       }),
+      new CssMinimizerPlugin(),
     ],
   },
 })
@@ -136,10 +139,10 @@ module.exports = env => {
       new webpack.BannerPlugin(licenseText)
     )
 
-    const libConfigExample = Object.assign({}, libConfig, {
-      output: exampleConfig.output,
-    })
+    // const libConfigExample = Object.assign({}, libConfig, {
+    //   output: exampleConfig.output,
+    // })
 
-    return [libConfig, libConfigExample]
+    return libConfig
   }
 }

package/src/displaySize.js

@@ -1,28 +0,0 @@
-import RemoteCalibrator from './core'
-import { blurAll } from './components/utils'
-
-/**
- *
- * Get the display (and window) size
- *
- */
-RemoteCalibrator.prototype.displaySize = function (callback) {
-  ////
-  if (!this.checkInitialized()) return
-  blurAll()
-  ////
-
-  const thisData = {
-    value: {
-      displayWidthPx: screen.width,
-      displayHeightPx: screen.height,
-      windowWidthPx: window.innerWidth,
-      windowHeightPx: window.innerHeight,
-    },
-    timestamp: new Date(),
-    // id: this.id.value
-  }
-  this.newDisplayData = thisData
-
-  if (callback) callback(thisData)
-}