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

package/src/css/distance.scss

@@ -69,7 +69,7 @@
     top: 0;
     width: 2px;
     transform: translate(-1px, 0);
-    z-index: 1;
+    z-index: 2;
   }
 
   .rc-ruler-major {
@@ -87,3 +87,73 @@
     height: 16px;
   }
 }
+
+/* ---------------------------------- Check --------------------------------- */
+
+.hide-nudger {
+  .calibration-nudger {
+    display: none !important;
+    opacity: 0 !important;
+  }
+}
+
+.calibration-nudger {
+  z-index: 999999999;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+  text-align: center;
+  scrollbar-width: none;
+
+  * {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+}
+
+#rc-distance-correct {
+  text-align: center;
+  width: 100%;
+  margin: 3rem auto auto auto;
+  padding: 2rem;
+  overflow-wrap: break-word;
+
+  #rc-distance-correct-instruction {
+    font-weight: 700;
+    font-size: 7rem;
+    margin: 2rem auto;
+    line-height: 100%;
+  }
+
+  #rc-distance-correct-guide {
+    font-weight: 500;
+    font-size: 3rem;
+    line-height: 150%;
+
+    .rc-distance-num {
+      padding: 0.5rem;
+      border-radius: 7px !important;
+      font-weight: 700;
+      font-family: monospace !important;
+      vertical-align: middle;
+    }
+
+    .rc-distance-now {
+      border: 2px solid #ff9a00;
+      background-color: #ff9a0066;
+    }
+
+    .rc-distance-desired {
+      border: 2px solid #3490de;
+      background-color: #3490de66;
+    }
+  }
+}

package/src/css/gaze.css

@@ -8,7 +8,7 @@
   position: fixed !important;
   display: block;
   cursor: initial;
-  z-index: 9998;
+  z-index: 999999998;
   transition-timing-function: ease-in-out;
   transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s;
 }
@@ -41,7 +41,7 @@
 
 #webgazerGazeDot {
   position: fixed;
-  z-index: 999999;
+  z-index: 9999999999;
   opacity: 0.5;
   background-color: #111d5e;
   border-radius: 5px;
@@ -50,14 +50,18 @@
 }
 
 #webgazerVideoContainer {
-  z-index: 9997;
+  z-index: 999999997;
   display: block;
   position: fixed !important;
   transform-origin: bottom left;
-  /* border-radius: 7px; */
+  border-radius: 5px;
   /* opacity: 0.8; */
   overflow: hidden;
-  pointer-events: none;
+  /* pointer-events: none; */
+  user-select: none;
+}
+
+#webgazerVideoContainer * {
   user-select: none;
 }
 

package/src/css/main.css

@@ -1,6 +1,6 @@
 /* background div */
 #calibration-background {
-  z-index: 999;
+  z-index: 999999990;
   position: fixed;
   width: 100%;
   height: 100%;
@@ -15,6 +15,12 @@
   user-select: none;
   box-sizing: border-box;
   text-align: center;
+  scrollbar-width: none;
+}
+
+#calibration-background::-webkit-scrollbar {
+  width: 0;
+  display: none;
 }
 
 #calibration-background * {
@@ -28,7 +34,6 @@
 
 .calibration-instruction {
   position: absolute;
-  text-align: left;
   user-select: none;
 }
 
@@ -121,13 +126,13 @@
   border-radius: 10px;
   font-size: 1.2rem;
   font-weight: 500;
-  z-index: 9999;
+  z-index: 999999991;
 }
 
 /* -------------------------------------------------------------------------- */
 
 .swal2-container {
-  z-index: 999997 !important;
+  z-index: 999999999 !important;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -136,12 +141,11 @@
   position: fixed !important;
   width: 100% !important;
   bottom: 3px !important;
-  left: 50% !important;
-  transform: translate(-50%, 0) !important;
   color: #999 !important;
   margin: 0 !important;
   padding: 0 !important;
   line-height: 100% !important;
+  text-align: center !important;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -149,3 +153,15 @@
 .lock-view {
   overflow: hidden !important;
 }
+
+/* -------------------------------------------------------------------------- */
+
+.rc-lang-ltr {
+  direction: ltr !important;
+  text-align: left !important;
+}
+
+.rc-lang-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}

package/src/css/panel.scss

@@ -17,7 +17,6 @@
   border-radius: 10px !important;
   box-shadow: var(--rc-panel-darken-color-semi) 0px 50px 100px -20px,
     var(--rc-panel-theme-color-semi) 0px 30px 60px -30px !important;
-  text-align: left !important;
 
   * {
     outline: none;
@@ -30,6 +29,7 @@
     user-select: none;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
       Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    scrollbar-width: none;
   }
 
   .rc-panel-title {
@@ -46,8 +46,27 @@
     font-weight: 500 !important;
   }
 
+  #rc-panel-language-parent {
+    display: flex;
+    flex-direction: row-reverse;
+    margin: 0;
+    padding: 0;
+
+    #rc-panel-lang-picker {
+      display: block;
+      background-color: #ffffffcc !important;
+      border: none !important;
+      outline: none !important;
+      margin: 0.25rem 0.25rem 0 0.25rem !important;
+      padding: 0.25rem !important;
+      font-size: 1rem !important;
+      font-weight: 500 !important;
+      border-radius: 5px !important;
+    }
+  }
+
   .rc-panel-steps {
-    margin: 1.5rem 0 0 0 !important;
+    margin: 1rem 0 0 0 !important;
 
     &.rc-panel-steps-l,
     &.rc-panel-steps-s {
@@ -63,6 +82,10 @@
         // overflow: hidden !important;
         background: #ffffffcc;
 
+        // &:focus {
+        //   outline: 3px solid black !important;
+        // }
+
         .rc-panel-step-use {
           position: absolute;
           right: 0;
@@ -91,6 +114,8 @@
 
     &.rc-panel-steps-l {
       flex-flow: row nowrap;
+      max-width: 100%;
+      overflow-x: scroll;
 
       .rc-panel-step-name {
         margin: 1.5rem 0.5rem !important;
@@ -101,7 +126,7 @@
       flex-flow: column nowrap;
 
       .rc-panel-step {
-        text-align: left;
+        overflow-x: hidden;
       }
 
       .rc-panel-step-name {
@@ -191,4 +216,9 @@
       cursor: pointer;
     }
   }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
 }

package/src/css/screenSize.css

@@ -10,10 +10,11 @@
   /* top: max(45%, 200px); */
   left: 2rem;
   border-radius: 5px;
-  z-index: 1;
+  z-index: 10;
   cursor: grab;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
+  direction: ltr !important;
 }
 
 .rc-slider:hover {
@@ -59,18 +60,18 @@
   /* display: none; */
   width: 70px;
   height: auto;
-  z-index: 3;
+  z-index: 1;
 }
 
 #size-arrow-fill {
-  transition: fill 0.1s;
+  transition: fill 0.3s;
 }
 
 .minor {
-  transition: opacity 0.1s;
+  transition: opacity 0.25s;
 }
 
-.rc-slider:hover ~ .size-obj .minor,
+/* .rc-slider:hover ~ .size-obj .minor, */
 .rc-slider:active ~ .size-obj .minor {
   opacity: 0;
 }

package/src/css/swal.css

@@ -20,12 +20,12 @@
 }
 
 .my__swal2__html {
+  margin: 1rem 1.6rem;
   color: #444 !important;
   font-size: 1.2rem !important;
   line-height: 150% !important;
   font-weight: normal !important;
   user-select: none !important;
-  text-align: left !important;
 }
 
 .animate__animated.animate__fadeInUp,

package/src/css/video.scss

@@ -0,0 +1,19 @@
+#webgazerVideoContainer {
+  .webgazer-videoinput-select {
+    z-index: 9;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0.3rem;
+    padding: 0.2rem 0.3rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 0.6rem;
+    line-height: 100%;
+    border: none !important;
+    outline: none !important;
+    border-radius: 0.6rem !important;
+    background: #ffffffcc !important;
+    color: #666;
+  }
+}

package/src/distance/distance.js

@@ -5,11 +5,13 @@ import {
   toFixedNumber,
   median,
   blurAll,
+  safeExecuteFunc,
+  average,
 } from '../components/utils'
 import {
   _getCrossX,
   _cross,
-  circleDeltaX,
+  // circleDeltaX,
   _getCircleBounds,
   _circle,
 } from '../components/onCanvas'
@@ -23,7 +25,7 @@ const blindSpotHTML = `<canvas id="blind-spot-canvas"></canvas>`
 /* -------------------------------------------------------------------------- */
 
 export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
-  let ppi = 108 // Dangerous! Arbitrary value
+  let ppi = RC._CONST.N.PPI_DONT_USE // Dangerous! Arbitrary value
   if (RC.screenPpi) ppi = RC.screenPpi.value
   else
     console.error(
@@ -40,7 +42,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
   RC.background.appendChild(blindSpotDiv)
   RC._constructFloatInstructionElement(
     'blind-spot-instruction',
-    phrases.RC_headTrackingCloseL[RC.L]
+    phrases.RC_distanceTrackingCloseL[RC.L]
   )
   RC._addCreditOnBackground(phrases.RC_viewingBlindSpotCredit[RC.L])
 
@@ -74,63 +76,186 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
   let v = eyeSide === 'left' ? 1 : -1
 
   // ! KEY
-  const breakFunction = () => {
+  const breakFunction = (toBreakTracking = true) => {
     // ! BREAK
     inTest = false
     resizeObserver.unobserve(RC.background)
     RC._removeBackground()
 
+    if (!RC._trackingSetupFinishedStatus.distance && toBreakTracking) {
+      RC._trackingSetupFinishedStatus.distance = true
+      if (RC.gazeTracker.checkInitialized('distance', false)) RC.endDistance()
+    }
+
     unbindKeys(bindKeysFunction)
+    unbindKeys(bindKeyUpsFunction, 'keyup')
   }
 
   // SPACE
   const finishFunction = () => {
+    customButton.disabled = false
     soundFeedback()
 
     tested += 1
     // Average
-    dist.push(
-      toFixedNumber(_getDist(circleX, crossX, ppi), options.decimalPlace)
-    )
+    dist.push({
+      dist: toFixedNumber(_getDist(circleX, crossX, ppi), options.decimalPlace),
+      v: v,
+      closedEyeSide: eyeSide,
+      crossX: crossX,
+      circleX: circleX,
+      ppi: ppi,
+      timestamp: new Date(),
+    })
 
     // Enough tests?
     if (Math.floor(tested / options.repeatTesting) === 2) {
-      // ! Put dist into data and callback function
-      const data = (RC.newViewingDistanceData = {
-        value: toFixedNumber(median(dist), options.decimalPlace),
-        timestamp: new Date(),
-        method: 'Blind Spot',
-      })
-      if (callback) callback(data)
-
-      // Break
-      if (!toTrackDistance) {
-        breakFunction()
+      // Check if these data are acceptable
+      if (checkDataRepeatability(dist)) {
+        // ! Put dist into data and callback function
+        const data = (RC.newViewingDistanceData = {
+          value: toFixedNumber(
+            median(_getDistValues(dist)),
+            options.decimalPlace
+          ),
+          timestamp: new Date(),
+          method: RC._CONST.VIEW_METHOD.B,
+          raw: { ...dist },
+        })
+        safeExecuteFunc(callback, data)
+
+        // Break
+        if (!toTrackDistance) {
+          breakFunction(false)
+        } else {
+          // ! For tracking
+          // Stop test
+          inTest = false
+          // Clear observer and keys
+          resizeObserver.unobserve(RC.background)
+          unbindKeys(bindKeysFunction)
+          unbindKeys(bindKeyUpsFunction, 'keyup')
+        }
       } else {
-        // ! For tracking
-        // Stop test
-        inTest = false
-        // Clear observer and keys
-        resizeObserver.unobserve(RC.background)
-        unbindKeys(bindKeysFunction)
+        // ! Reset
+        tested = 0
+        customButton.disabled = true
+        // Get first response
+        const firstResponse = dist[0]
+        _resetCanvasLayout(
+          firstResponse.v,
+          firstResponse.closedEyeSide,
+          firstResponse.crossX
+        )
       }
     } else if (tested % options.repeatTesting === 0) {
       // Switch eye side
       if (eyeSide === 'left') {
         // Change to RIGHT
         eyeSide = 'right'
-        eyeSideEle.innerHTML = phrases.RC_headTrackingCloseR[RC.L]
+        eyeSideEle.innerHTML = phrases.RC_distanceTrackingCloseR[RC.L]
       } else {
         eyeSide = 'left'
-        eyeSideEle.innerHTML = phrases.RC_headTrackingCloseL[RC.L]
+        eyeSideEle.innerHTML = phrases.RC_distanceTrackingCloseL[RC.L]
+      }
+      RC._setFloatInstructionElementPos(eyeSide, 16)
+
+      _resetCanvasLayout(
+        // eyeSide === 'left' ? 1 : -1, // v
+        1, // v
+        eyeSide, // eyeSide
+        _getCrossX(eyeSide, c.width), // crossX
+        false,
+        true
+      )
+    } else {
+      // Shift circle
+      v = -v
+      if (v > 0)
+        // Going to the right
+        circleX = circleBounds[0]
+      else if (v < 0) circleX = circleBounds[1]
+    }
+  }
+
+  const redoFunction = () => {
+    if (!tested) return
+    tested--
+    customButton.disabled = true
+
+    soundFeedback(3)
+
+    const lastResponse = dist.pop()
+    _resetCanvasLayout(
+      lastResponse.v,
+      lastResponse.closedEyeSide,
+      lastResponse.crossX,
+      true,
+      true
+    )
+  }
+
+  let arrowKeyDown = false
+  let arrowIntervalFunction = null
+  const arrowDownFunction = e => {
+    if (arrowKeyDown) return
+
+    arrowUpFunction()
+    arrowKeyDown = true
+
+    arrowIntervalFunction = setInterval(() => {
+      if (e.key === 'ArrowLeft') {
+        circleX -= 10
+        helpMoveCircleX()
+      } else if (e.key === 'ArrowRight') {
+        circleX += 10
+        helpMoveCircleX()
       }
+    }, 30)
+  }
+
+  const arrowUpFunction = () => {
+    arrowKeyDown = false
+    if (arrowIntervalFunction) {
+      clearInterval(arrowIntervalFunction)
+      arrowIntervalFunction = null
+    }
+  }
+
+  const helpMoveCircleX = () => {
+    tempX = constrain(circleX, ...circleBounds)
+    if (circleX !== tempX) {
+      circleX = tempX
+      for (let b of circleBounds)
+        if (circleX !== b) {
+          circleX = b
+          break
+        }
+    }
+  }
+
+  const _resetCanvasLayout = (
+    nextV,
+    nextEyeSide,
+    nextCrossX,
+    shiftFloatingElement = true,
+    shiftCircle = true
+  ) => {
+    v = nextV
+    eyeSide = nextEyeSide
+    crossX = nextCrossX
+    circleBounds = _getCircleBounds(eyeSide, crossX, c.width)
+
+    if (shiftFloatingElement) {
+      if (eyeSide === 'left')
+        eyeSideEle.innerHTML = phrases.RC_distanceTrackingCloseL[RC.L]
+      else eyeSideEle.innerHTML = phrases.RC_distanceTrackingCloseR[RC.L]
       RC._setFloatInstructionElementPos(eyeSide, 16)
+    }
 
-      circleBounds = _getCircleBounds(eyeSide, crossX, c.width)
-      circleX = circleBounds[eyeSide === 'left' ? 0 : 1]
-      v = eyeSide === 'left' ? 1 : -1
-      crossX = _getCrossX(eyeSide, c.width)
-      circleBounds = _getCircleBounds(eyeSide, crossX, c.width)
+    if (shiftCircle) {
+      if (v > 0) circleX = circleBounds[0]
+      else circleX = circleBounds[1]
     }
   }
 
@@ -138,17 +263,33 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
   const bindKeysFunction = bindKeys({
     Escape: breakFunction,
     ' ': finishFunction,
+    ArrowLeft: arrowDownFunction,
+    ArrowRight: arrowDownFunction,
   })
-  addButtons(
+  const bindKeyUpsFunction = bindKeys(
+    {
+      ArrowLeft: arrowUpFunction,
+      ArrowRight: arrowUpFunction,
+    },
+    'keyup'
+  )
+  const addedButtons = addButtons(
     RC.L,
     RC.background,
     {
       go: finishFunction,
       cancel: breakFunction,
+      custom: {
+        callback: redoFunction,
+        content: phrases.RC_viewingDistanceRedo[RC.L],
+      },
     },
     RC.params.showCancelButton
   )
 
+  const customButton = addedButtons[3]
+  customButton.disabled = true
+
   // ! ACTUAL TEST
   let frameCount = 0
   const runTest = () => {
@@ -160,12 +301,7 @@ export function blindSpotTest(RC, options, toTrackDistance = false, callback) {
     _cross(ctx, crossX, c.height / 2)
 
     _circle(RC, ctx, circleX, c.height / 2, frameCount, options.sparkle)
-    circleX += v * circleDeltaX
-    tempX = constrain(circleX, ...circleBounds)
-    if (circleX !== tempX) {
-      circleX = tempX
-      v = -v
-    }
+    // circleX += v * circleDeltaX
 
     if (inTest) {
       frameCount++
@@ -183,7 +319,6 @@ RemoteCalibrator.prototype.measureDistance = function (options = {}, callback) {
    * options -
    *
    * fullscreen: [Boolean]
-   * quitFullscreenOnFinished: [Boolean] // TODO
    * repeatTesting: 2
    * sparkle: true
    * decimalPlace: 1
@@ -200,9 +335,8 @@ RemoteCalibrator.prototype.measureDistance = function (options = {}, callback) {
   options = Object.assign(
     {
       fullscreen: false,
-      quitFullscreenOnFinished: false,
       repeatTesting: 2,
-      sparkle: true,
+      sparkle: false,
       decimalPlace: 1,
       headline: '📏 ' + phrases.RC_viewingDistanceTitle[this.L],
       description: phrases.RC_viewingDistanceIntro[this.L],
@@ -230,3 +364,22 @@ function _getDist(x, crossX, ppi) {
 function _getTanDeg(deg) {
   return Math.tan((deg * Math.PI) / 180)
 }
+
+function checkDataRepeatability(dist) {
+  let lefts = []
+  let rights = []
+  for (let d of dist) {
+    if (d.closedEyeSide === 'left') lefts.push(d.dist)
+    else rights.push(d.dist)
+  }
+  const leftMean = average(lefts)
+  const rightMean = average(rights)
+
+  return Math.abs(leftMean - rightMean) < 0.2 * Math.min(leftMean, rightMean)
+}
+
+function _getDistValues(dist) {
+  const v = []
+  for (let d of dist) v.push(d.dist)
+  return v
+}