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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-calibrator",
-  "version": "0.3.0-beta.0",
+  "version": "0.3.0-beta.4",
   "description": "A toolbox for remote testing calibration and tracking.",
   "main": "lib/RemoteCalibrator.min.js",
   "directories": {
@@ -15,7 +15,8 @@
     "build": "webpack --env=production",
     "serve": "node server.js",
     "prepare": "husky install",
-    "netlify": "cp -r ./lib ./homepage"
+    "netlify": "cp -r ./lib ./homepage",
+    "phrases": "node i18n/fetch-languages-sheets.js && git add src/i18n.js"
   },
   "repository": {
     "type": "git",
@@ -28,17 +29,19 @@
   },
   "homepage": "https://github.com/EasyEyes/remote-calibrator#readme",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
     "autoprefixer": "^10.3.7",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.4.0",
     "cssnano": "^5.0.8",
     "eslint": "^7.32.0",
     "eslint-webpack-plugin": "^3.0.1",
     "express": "^4.17.1",
+    "googleapis": "^88.2.0",
     "husky": "^7.0.2",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^11.2.3",
+    "nodemon": "^2.0.13",
     "postcss-loader": "^6.1.1",
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
@@ -47,9 +50,10 @@
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^5.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.56.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-modules": "^1.0.0"
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.9.0",
+    "webpack-modules": "^1.0.0",
+    "xlsx": "^0.17.2"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",

package/src/components/buttons.js

@@ -1,6 +1,7 @@
+import { phrases } from '../i18n'
 import '../css/buttons.scss'
 
-export const addButtons = (parent, { go, cancel }, showCancelButton) => {
+export const addButtons = (RCL, parent, { go, cancel }, showCancelButton) => {
   const buttons = document.createElement('div')
   buttons.className = 'rc-buttons'
   buttons.id = 'rc-buttons'
@@ -11,7 +12,7 @@ export const addButtons = (parent, { go, cancel }, showCancelButton) => {
     goButton = document.createElement('button')
     goButton.className = 'rc-button rc-go-button'
     goButton.onclick = go
-    goButton.innerHTML = 'OK'
+    goButton.innerHTML = phrases.RC_ok[RCL]
     buttons.appendChild(goButton)
   }
 
@@ -19,7 +20,7 @@ export const addButtons = (parent, { go, cancel }, showCancelButton) => {
     cancelButton = document.createElement('button')
     cancelButton.className = 'rc-button rc-cancel-button'
     cancelButton.onclick = cancel
-    cancelButton.innerHTML = 'Cancel'
+    cancelButton.innerHTML = phrases.RC_cancel[RCL]
     buttons.appendChild(cancelButton)
   }
 

package/src/components/language.js

@@ -0,0 +1,31 @@
+import { phrases } from '../i18n'
+
+export function looseSetLanguage(lang) {
+  const originalKeys = Object.keys(phrases.EE_languageNameNative)
+  if (originalKeys.includes(lang)) return constructLangData(lang)
+
+  const shortKeys = []
+  originalKeys.forEach(l => {
+    shortKeys.push(l.split('-')[0])
+  })
+
+  const shortLang = lang.split('-')[0].toLowerCase()
+
+  if (shortKeys.includes(shortLang))
+    return constructLangData(originalKeys[shortKeys.indexOf(shortLang)])
+
+  return constructLangData('en-US')
+}
+
+function constructLangData(lang) {
+  return {
+    value: {
+      language: lang,
+      languageNameEnglish: phrases.EE_languageNameEnglish[lang],
+      languageNameNative: phrases.EE_languageNameNative[lang],
+      languageDirection: phrases.EE_languageDirection[lang],
+      languagePhraseSource: phrases.EE_phraseSource[lang],
+    },
+    timestamp: new Date(),
+  }
+}

package/src/components/onCanvas.js

@@ -1,8 +1,6 @@
 // Draw cross and circle on the canvas
 // For blind spot test and more
 
-import { colorDarkRed } from '../constants'
-
 // CROSS
 const crossLW = 32 // Width of a line of the middle cross
 const crossLH = 3
@@ -25,18 +23,16 @@ export function _getCircleBounds(side, crossX, cW) {
     : [circleR >> 1, crossX - (crossLW + circleR) / 2]
 }
 
-export function _circle(ctx, x, y, frameCount, sparkle = true) {
+export function _circle(RC, ctx, x, y, frameCount, sparkle = true) {
   ctx.beginPath()
   ctx.arc(x, y, circleR >> 1, 0, Math.PI * 2)
   ctx.closePath()
 
-  if (!sparkle) ctx.fillStyle = colorDarkRed
+  if (!sparkle) ctx.fillStyle = RC._CONST.COLOR.DARK_RED
   else {
-    // 10 Hz
-    if (frameCount % 6 < 3) ctx.fillStyle = colorDarkRed
-    else if (frameCount % 6 >= 3) ctx.fillStyle = '#fff'
+    if (frameCount % 4 < 2) ctx.fillStyle = RC._CONST.COLOR.DARK_RED
+    else ctx.fillStyle = '#fff'
   }
 
-  // ctx.fillStyle = colorDarkRed // Red fill
   ctx.fill()
 }

package/src/components/swalOptions.js

@@ -1,25 +1,27 @@
-import { colorIconOrange } from '../constants'
+import { phrases } from '../i18n'
 
-export const swalInfoOptions = {
-  icon: 'info',
-  allowEscapeKey: false,
-  allowEnterKey: false,
-  allowOutsideClick: false,
-  showConfirmButton: true,
-  confirmButtonText: 'OK',
-  showClass: {
-    popup: 'animate__animated animate__fadeInUp',
-    // backdrop: 'animate__animated animate__fadeIn',
-  },
-  hideClass: {
-    popup: 'animate__animated animate__fadeOutDown',
-    // backdrop: 'animate__animated animate__fadeOut',
-  },
-  iconColor: colorIconOrange,
-  confirmButtonColor: '#aaa',
-  customClass: {
-    icon: 'my__swal2__icon',
-    title: 'my__swal2__title',
-    htmlContainer: 'my__swal2__html',
-  },
+export const swalInfoOptions = RC => {
+  return {
+    icon: 'info',
+    allowEscapeKey: false,
+    allowEnterKey: false,
+    allowOutsideClick: false,
+    showConfirmButton: true,
+    confirmButtonText: phrases.RC_ok[RC.L],
+    showClass: {
+      popup: 'animate__animated animate__fadeInUp',
+      // backdrop: 'animate__animated animate__fadeIn',
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutDown',
+      // backdrop: 'animate__animated animate__fadeOut',
+    },
+    iconColor: RC._CONST.COLOR.ORANGE,
+    confirmButtonColor: '#aaa',
+    customClass: {
+      icon: 'my__swal2__icon',
+      title: 'my__swal2__title',
+      htmlContainer: 'my__swal2__html',
+    },
+  }
 }

package/src/{helpers.js → components/utils.js}

@@ -98,9 +98,15 @@ export function getFullscreen() {
 
 /* -------------------------------------------------------------------------- */
 
-export function constructInstructions(headline, description = null) {
+export function constructInstructions(
+  headline,
+  description = null,
+  scrollable = false
+) {
   return (
-    `<div class="calibration-instruction"><h1>${headline}</h1>` +
+    `<div class="calibration-instruction${
+      scrollable ? ' calibration-instruction-scrollable' : ''
+    }"><h1>${headline}</h1>` +
     (description
       ? `<p class="calibration-description">${description}</p></div>`
       : '')

package/src/{video.js → components/video.js}

@@ -69,7 +69,7 @@ export function checkWebcamStatus() {
  * Check if WebGazer video is ready. If so, set the style for it.
  *
  */
-export function checkWebgazerReady(pipWidthPx, opacity, WG, callback) {
+export function checkWebgazerReady(RC, pipWidthPx, opacity, WG, callback) {
   let c = setInterval(() => {
     let v = document.getElementById('webgazerVideoContainer')
     if (v) {
@@ -78,15 +78,34 @@ export function checkWebgazerReady(pipWidthPx, opacity, WG, callback) {
       v.style.width = pipWidthPx + 'px'
       v.style.opacity = opacity
       WG.setVideoViewerSize(parseInt(v.style.width), parseInt(v.style.height))
-      v.style.left = '10px'
-      v.style.bottom = '10px'
+
+      // Set position
+      setDefaultVideoPosition(RC, v)
 
       // Give callback after 2 sec
       setTimeout(() => {
-        v.style.transition = `left 0.5s, bottom 0.5s, width 0.5s, height 0.5s, border-radius 0.5s`
+        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)
       clearInterval(c)
     }
   }, 200)
 }
+
+export function setDefaultVideoPosition(RC, v) {
+  if (RC.isMobile.value) {
+    // Mobile
+    v.style.left = 'unset'
+    v.style.right = RC._CONST.N.VIDEO_MARGIN
+    v.style.top = RC._CONST.N.VIDEO_MARGIN
+    v.style.bottom = 'unset'
+  } else {
+    v.style.left = RC._CONST.N.VIDEO_MARGIN
+    v.style.right = 'unset'
+    v.style.top = 'unset'
+    v.style.bottom = RC._CONST.N.VIDEO_MARGIN
+  }
+}

package/src/const.js

@@ -1,8 +1,28 @@
 import RemoteCalibrator from './core'
 
 RemoteCalibrator.prototype._CONST = Object.freeze({
-  CREDIT_TEXT: {
-    BLIND_SPOT_TEST: `As suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
-    CREDIT_CARD: `Credit card suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
+  N: {
+    VIDEO_W: {
+      DESKTOP: 208,
+      MOBILE: 144,
+    },
+    VIDEO_MARGIN: '10px',
+    GAZE_CALIBRATION: {
+      R: 28,
+      MARGIN: 10,
+      BORDER: 8,
+    },
+  },
+  S: {
+    AUTO: 'AUTO',
+    CLICK_TYPE: {
+      MOUSE: 'mouse',
+      TOUCH: 'touch',
+    },
+  },
+  COLOR: {
+    LIGHT_GREY: '#cccccc',
+    ORANGE: '#ff9a00',
+    DARK_RED: '#ac0d0d',
   },
 })

package/src/core.js

@@ -8,8 +8,14 @@ import platform from 'platform'
 import DeviceDetector from 'device-detector-js'
 
 import randomPhrases from './components/randomPhrases'
-import { debug } from './constants'
-import { getFullscreen, blurAll, constructInstructions } from './helpers'
+import { debug } from './debug'
+import {
+  getFullscreen,
+  blurAll,
+  constructInstructions,
+} from './components/utils'
+import { looseSetLanguage } from './components/language'
+import { phrases } from './i18n'
 
 class RemoteCalibrator {
   constructor() {
@@ -29,6 +35,9 @@ class RemoteCalibrator {
 
     this._id = null
 
+    this._lang = null // A single string, e.g., 'en-US'
+    this._langData = []
+
     this._environmentData = []
 
     this._displayData = [] // Px
@@ -76,6 +85,7 @@ class RemoteCalibrator {
   ////
 
   get id() {
+    if (!this._id) return null
     return {
       value: this._id.value,
       timestamp: this._id.timestamp,
@@ -100,6 +110,43 @@ class RemoteCalibrator {
     }
   }
 
+  get supportedLanguages() {
+    const a = []
+    for (let l in phrases.EE_languageNameEnglish) {
+      a.push({
+        language: l,
+        languageNameEnglish: phrases.EE_languageNameEnglish[l],
+        languageNameNative: phrases.EE_languageNameNative[l],
+      })
+    }
+
+    return a
+  }
+
+  get L() {
+    return this._lang
+  }
+
+  get language() {
+    return this._helper_get(this._langData, 'language')
+  }
+
+  get languageNameEnglish() {
+    return this._helper_get(this._langData, 'languageNameEnglish')
+  }
+
+  get languageNameNative() {
+    return this._helper_get(this._langData, 'languageNameNative')
+  }
+
+  get languageDirection() {
+    return this._helper_get(this._langData, 'languageDirection')
+  }
+
+  get languagePhraseSource() {
+    return this._helper_get(this._langData, 'languagePhraseSource')
+  }
+
   // Status
 
   get isFullscreen() {
@@ -135,6 +182,15 @@ class RemoteCalibrator {
     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',
+      timestamp: d.timestamp,
+    }
+  }
+
   get model() {
     if (!this._environmentData.length) this.environment()
     return this._helper_get(this._environmentData, 'model')
@@ -170,6 +226,11 @@ class RemoteCalibrator {
     return this._helper_get(this._environmentData, 'fullDescription')
   }
 
+  get userLanguage() {
+    if (!this._environmentData.length) this.environment()
+    return this._helper_get(this._environmentData, 'userLanguage')
+  }
+
   // Screen
 
   get displayWidthPx() {
@@ -274,6 +335,10 @@ class RemoteCalibrator {
     return this._environmentData
   }
 
+  get languageData() {
+    return this._langData
+  }
+
   /* --------------------------------- SETTERS -------------------------------- */
 
   /**
@@ -338,6 +403,13 @@ class RemoteCalibrator {
   set newFullscreenData(data) {
     this._fullscreenData.push(data)
   }
+
+  /**
+   * @param {{ value: { language: string; languageNameEnglish: string; languageNameNative: string; languageDirection: string; languagePhraseSource: string; }; timestamp: Date; }} data
+   */
+  set newLanguageData(data) {
+    this._langData.push(data)
+  }
 }
 
 /**
@@ -351,6 +423,7 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
     options = Object.assign(
       {
         id: randomPhrases(),
+        language: 'AUTO',
         fullscreen: false,
       },
       options
@@ -363,7 +436,15 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
       timestamp: new Date(),
     }
 
-    if (callback) callback(this._id)
+    this.environment()
+
+    if (this._CONST.S.AUTO === options.language)
+      // AUTO
+      this.newLanguageData = looseSetLanguage(this.userLanguage.value)
+    else this.newLanguageData = looseSetLanguage(options.language)
+    this._lang = this.language.value
+
+    if (callback && typeof callback === 'function') callback(this._id)
   }
 }
 
@@ -381,7 +462,9 @@ RemoteCalibrator.prototype.environment = function (callback) {
 
     const data = {
       value: {
-        bot: bot ? `${bot.name} (${bot.category}) by ${bot.producer.name}` : '',
+        bot: bot
+          ? `${bot.name} (${bot.category}) by ${bot.producer.name}`
+          : null,
         browser: platform.name,
         browserVersion: platform.version,
         deviceType: device.device.type,
@@ -392,6 +475,8 @@ RemoteCalibrator.prototype.environment = function (callback) {
         systemFamily: platform.os.family,
         description: platform.description,
         fullDescription: platform.ua,
+        userLanguage:
+          window.navigator.userLanguage || window.navigator.language,
       },
       timestamp: this.id.timestamp,
     }
@@ -435,6 +520,18 @@ RemoteCalibrator.prototype.getFullscreen = function (f = true) {
   return f && !debug
 }
 
+/**
+ * Set a new language
+ */
+RemoteCalibrator.prototype.newLanguage = function (lang) {
+  if (this.checkInitialized()) {
+    let data
+    this.newLanguageData = data = looseSetLanguage(lang)
+    this._lang = this.language.value
+    return data
+  }
+}
+
 /**
  *
  * Add background
@@ -447,6 +544,8 @@ RemoteCalibrator.prototype._addBackground = function (inner) {
   if (!b) {
     b = document.createElement('div')
     b.id = 'calibration-background'
+
+    document.body.classList.add('lock-view')
     document.body.appendChild(b)
 
     b.style.background = this.params.backgroundColor
@@ -474,6 +573,7 @@ RemoteCalibrator.prototype._replaceBackground = function (inner) {
 RemoteCalibrator.prototype._removeBackground = function () {
   let b = document.getElementById('calibration-background')
   if (b) {
+    document.body.classList.remove('lock-view')
     document.body.removeChild(b)
 
     this._background = {
@@ -541,11 +641,11 @@ RemoteCalibrator.prototype._setFloatInstructionElementPos = function (
   const r = this.instructionElement.getBoundingClientRect()
   this.instructionElement.style.top = `calc(50% + ${yOffset + 10}px)`
   if (side === 'left') {
-    this.instructionElement.style.left = '10%'
+    this.instructionElement.style.left = `max(10%, ${r.width / 2}px)`
     this.instructionElement.style.right = 'unset'
     this.instructionElement.style.transform = `translate(${-r.width / 2}px, 0)`
   } else if (side === 'right') {
-    this.instructionElement.style.right = '10%'
+    this.instructionElement.style.right = `max(10%, ${r.width / 2}px)`
     this.instructionElement.style.left = 'unset'
     this.instructionElement.style.transform = `translate(${r.width / 2}px, 0)`
   } else {

package/src/css/distance.scss

@@ -3,17 +3,22 @@
 }
 
 #blind-spot-canvas {
-  z-index: -1;
+  position: fixed;
   display: block;
-  position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
 }
 
-#blind-spot-instruction {
-  display: block !important;
-  top: 65%;
-}
+// #blind-spot-instruction {
+//   display: block !important;
+//   top: 65%;
+//   position: fixed;
+// }
 
 #pip-video {
   display: none;
@@ -31,7 +36,7 @@
 /* ----------------------------------- PD ----------------------------------- */
 
 #rc-ruler {
-  position: absolute;
+  position: fixed;
   max-height: 120px;
   overflow: hidden;
 }

package/src/css/main.css

@@ -28,14 +28,15 @@
 
 .calibration-instruction {
   position: absolute;
-  margin: 2rem;
   text-align: left;
   user-select: none;
 }
 
+.calibration-instruction-scrollable {
+  height: 200%;
+}
+
 .calibration-instruction h1 {
-  font-size: 2.5rem !important;
-  line-height: 100%;
   min-width: 360px;
   font-weight: 700;
 }
@@ -53,21 +54,66 @@
 }
 
 .calibration-description {
-  width: calc(100% - 4rem);
-  width: max(min(100% - 4rem, 960px), 300px);
+  line-height: 170%;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Screen size specific */
+
+@media (min-width: 481px) {
+  .calibration-instruction {
+    margin: 2rem;
+  }
+
+  .calibration-instruction h1 {
+    line-height: 100%;
+    font-size: 2.5rem !important;
+  }
+
+  .calibration-description {
+    width: calc(100% - 4rem);
+    width: max(min(100% - 4rem, 960px), 300px);
+  }
+
+  .calibration-description,
+  .calibration-description * {
+    font-size: 1.2rem;
+  }
+
+  .calibration-credit-text {
+    font-size: 0.9rem !important;
+  }
 }
 
 @media (max-width: 480px) {
+  .calibration-instruction {
+    margin: 1rem;
+  }
+
+  .calibration-instruction h1 {
+    line-height: 120%;
+    font-size: 1.8rem !important;
+  }
+
   .calibration-description {
-    font-size: 0.9rem;
+    width: calc(100% - 1rem);
+  }
+
+  .calibration-description,
+  .calibration-description * {
+    font-size: 1rem;
+  }
+
+  .calibration-credit-text {
+    font-size: 0.7rem !important;
   }
 }
 
 .float-instruction {
-  position: absolute;
+  position: fixed;
   text-align: center;
   user-select: none;
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.9);
   padding: 10px 17px;
   margin: 0;
   left: 50%;
@@ -75,6 +121,7 @@
   border-radius: 10px;
   font-size: 1.2rem;
   font-weight: 500;
+  z-index: 9999;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -87,10 +134,18 @@
 
 .calibration-credit-text {
   position: fixed !important;
-  left: 50% !important;
+  width: 100% !important;
   bottom: 3px !important;
+  left: 50% !important;
   transform: translate(-50%, 0) !important;
-  font-size: 0.9rem !important;
   color: #999 !important;
   margin: 0 !important;
+  padding: 0 !important;
+  line-height: 100% !important;
+}
+
+/* -------------------------------------------------------------------------- */
+
+.lock-view {
+  overflow: hidden !important;
 }

package/src/css/panel.scss

@@ -34,7 +34,7 @@
 
   .rc-panel-title {
     color: #fff !important;
-    margin: 1rem auto 0 1rem !important;
+    margin: 1rem 1rem 0 1rem !important;
     font-size: 2rem !important;
     font-weight: 600 !important;
   }