remote-calibrator 0.5.0-beta.2 → 0.5.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-calibrator",
-  "version": "0.5.0-beta.2",
+  "version": "0.5.0-beta.3",
   "description": "Useful calibration tools for remote psychophysics experiments.",
   "main": "lib/RemoteCalibrator.min.js",
   "directories": {
@@ -33,25 +33,25 @@
     "autoprefixer": "^10.3.7",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.4.0",
+    "css-loader": "^6.5.0",
     "css-minimizer-webpack-plugin": "^3.1.1",
     "cssnano": "^5.0.8",
-    "eslint": "^7.32.0",
-    "eslint-webpack-plugin": "^3.0.1",
+    "eslint": "^8.1.0",
+    "eslint-webpack-plugin": "^3.1.0",
     "express": "^4.17.1",
     "googleapis": "^89.0.0",
     "husky": "^7.0.4",
-    "lint-staged": "^11.2.4",
+    "lint-staged": "^11.2.6",
     "nodemon": "^2.0.14",
     "postcss-loader": "^6.2.0",
     "prettier": "^2.4.1",
-    "sass": "^1.43.3",
+    "sass": "^1.43.4",
     "sass-loader": "^12.2.0",
     "style-loader": "^3.3.1",
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^5.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.59.1",
+    "webpack": "^5.60.0",
     "webpack-cli": "^4.9.1",
     "webpack-modules": "^1.0.0",
     "xlsx": "^0.17.3"

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',
@@ -31,4 +33,5 @@ RemoteCalibrator.prototype._CONST = Object.freeze({
     B: 'BlindSpot',
     F: 'FaceMesh',
   },
+  IN_TO_CM: 2.54,
 })

package/src/css/panel.scss

@@ -29,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 {
@@ -211,4 +212,9 @@
       cursor: pointer;
     }
   }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
 }

package/src/distance/distance.js

@@ -24,7 +24,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(

package/src/distance/distanceTrack.js

@@ -155,17 +155,14 @@ const startTrackingPupils = async (RC, beforeCallbackTrack, callbackTrack) => {
 }
 
 const eyeDist = (a, b) => {
-  return Math.sqrt(
-    Math.pow(a[0] - b[0], 2) +
-      Math.pow(a[1] - b[1], 2) +
-      Math.pow(a[2] - b[2], 2)
-  )
+  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2])
 }
 
 const cyclopean = (video, a, b) => {
-  let [aX, aY] = [video.videoWidth - a[0], a[1]]
-  let [bX, bY] = [video.videoWidth - b[0], b[1]]
-  return [(aX + bX) / 2, (aY + bY) / 2]
+  return [
+    (-a[0] - b[0] + video.videoWidth) / 2,
+    (-a[1] - b[1] + video.videoHeight) / 2,
+  ]
 }
 
 /* -------------------------------------------------------------------------- */
@@ -207,7 +204,7 @@ const _tracking = async (RC, trackingOptions, callbackTrack) => {
     model = await RC.gazeTracker.webgazer.getTracker().model
 
     // Near point
-    let ppi = RC.screenPpi ? RC.screenPpi.value : 108
+    let ppi = RC.screenPpi ? RC.screenPpi.value : RC._CONST.N.PPI_DONT_USE
     if (!RC.screenPpi && trackingOptions.nearPoint)
       console.error(
         'Screen size measurement is required to get accurate near point tracking.'
@@ -352,25 +349,19 @@ const _getNearPoint = (
   ppi,
   latency
 ) => {
-  let m = cyclopean(video, mesh[133], mesh[362])
-  let offsetToVideoMid = [
-    m[0] - video.videoWidth / 2,
-    video.videoHeight / 2 - m[1],
-  ]
-
-  const videoFactor = video.videoHeight / video.clientHeight
-  offsetToVideoMid.forEach((e, i) => {
-    // Average interpupillary distance - 6.4cm
-    offsetToVideoMid[i] =
-      ((RC.PDCm ? RC.PDCm.value : 6.4) * e) /
-      (averageDist * (videoFactor / 2)) /* Should this be videoFactor? */
+  let offsetToVideoCenter = cyclopean(video, mesh[133], mesh[362])
+  offsetToVideoCenter.forEach((offset, i) => {
+    // Average inter-pupillary distance - 6.4cm
+    offsetToVideoCenter[i] =
+      ((RC.PDCm ? RC.PDCm.value : RC._CONST.N.PD_DONT_USE) * offset) /
+      averageDist
   })
 
   let nPData = (RC.newNearPointData = {
     value: {
-      x: toFixedNumber(offsetToVideoMid[0], trackingOptions.decimalPlace),
+      x: toFixedNumber(offsetToVideoCenter[0], trackingOptions.decimalPlace),
       y: toFixedNumber(
-        offsetToVideoMid[1] + 0.5, // Commonly the webcam is 0.5cm above the screen
+        offsetToVideoCenter[1] + ((screen.height / 2) * 2.54) / ppi, // Commonly the webcam is 0.5cm above the screen
         trackingOptions.decimalPlace
       ),
       latencyMs: latency,
@@ -379,17 +370,18 @@ const _getNearPoint = (
   })
 
   // SHOW
+  const dotR = 5
   if (trackingOptions.showNearPoint) {
     let offsetX = (nPData.value.x * ppi) / 2.54
     let offsetY = (nPData.value.y * ppi) / 2.54
     Object.assign(nearPointDot.style, {
-      left: `${screen.width / 2 - window.screenLeft - 5 + offsetX}px`,
+      left: `${screen.width / 2 - window.screenLeft + offsetX - dotR}px`,
       top: `${
         screen.height / 2 -
         window.screenTop -
-        5 -
-        (RC.isFullscreen.value ? 0 : 50) -
-        offsetY
+        (window.outerHeight - window.innerHeight) -
+        offsetY -
+        dotR
       }px`,
     })
   }
@@ -498,7 +490,7 @@ RemoteCalibrator.prototype.getDistanceNow = async function (callback = null) {
         mesh,
         dist,
         timestamp,
-        this.screenPpi ? this.screenPpi.value : 108,
+        this.screenPpi ? this.screenPpi.value : this._CONST.N.PPI_DONT_USE,
         latency
       )
     }

package/src/distance/interPupillaryDistance.js

@@ -53,7 +53,9 @@ RemoteCalibrator.prototype._measurePD = function (options = {}, callback) {
   this._replaceBackground(
     constructInstructions(options.headline, options.shortDescription, true)
   )
-  const screenPpi = this.screenPpi ? this.screenPpi.value : 108
+  const screenPpi = this.screenPpi
+    ? this.screenPpi.value
+    : this._CONST.N.PPI_DONT_USE
 
   let [videoWidth, videoHeight] = setupVideo(this)
   let [ruler, rulerListener] = setupRuler(