remote-calibrator 0.3.0-beta.2 → 0.3.0-beta.7

package/src/{panel/panel.js → panel.js}

@@ -1,13 +1,13 @@
 import tinycolor from 'tinycolor2'
 
-import RemoteCalibrator from '../core'
-import text from '../text.json'
+import RemoteCalibrator from './core'
+import { phrases } from './i18n'
 
 // Icons from Google Material UI
-import Camera from '../media/photo_camera.svg'
-import Phone from '../media/smartphone.svg'
+import Camera from './media/photo_camera.svg'
+import Phone from './media/smartphone.svg'
 
-import '../css/panel.scss'
+import './css/panel.scss'
 
 RemoteCalibrator.prototype.removePanel = function () {
   if (!this._hasPanel) return false
@@ -86,12 +86,12 @@ RemoteCalibrator.prototype.panel = async function (
 
   options = Object.assign(
     {
-      headline: text.panel.headline,
-      description: text.panel.description,
+      headline: phrases.RC_panelTitle[this.L],
+      description: phrases.RC_panelIntro[this.L],
       showNextButton: false,
-      nextHeadline: text.panel.nextHeadline,
-      nextDescription: text.panel.nextDescription,
-      nextButton: text.panel.nextButton,
+      nextHeadline: phrases.RC_panelTitleNext[this.L],
+      nextDescription: phrases.RC_panelIntroNext[this.L],
+      nextButton: phrases.RC_panelButton[this.L],
       color: '#3490de',
       _demoActivateAll: false, // ! Private
     },
@@ -119,6 +119,9 @@ RemoteCalibrator.prototype.panel = async function (
 
   const panel = document.createElement('div')
   panel.className = panel.id = 'rc-panel'
+  if (this.LD === this._CONST.RTL) panel.className += ' rc-lang-rtl'
+  else panel.className += ' rc-lang-ltr'
+
   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,17 +132,18 @@ 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'
   } else {
     for (let t in tasks) {
-      const b = _newStepBlock(t, tasks[t], options)
+      const b = _newStepBlock(this, t, tasks[t], options)
       steps.appendChild(b)
     }
   }
@@ -155,7 +159,21 @@ RemoteCalibrator.prototype.panel = async function (
   this._panel.panelObserver = panelObserver
   this._panel.panelTasks = tasks
   this._panel.panelParent = parent
-  this._panel.panelOptions = options
+
+  const tempOptions = { ...options }
+  if (options.headline === phrases.RC_panelTitle[this.L])
+    delete tempOptions.headline
+  if (options.description === phrases.RC_panelIntro[this.L])
+    delete tempOptions.description
+  if (options.nextHeadline === phrases.RC_panelTitleNext[this.L])
+    delete tempOptions.nextHeadline
+  if (options.nextDescription === phrases.RC_panelIntroNext[this.L])
+    delete tempOptions.nextDescription
+  if (options.nextButton === phrases.RC_panelButton[this.L])
+    delete tempOptions.nextButton
+
+  this._panel.panelOptions = tempOptions
+
   this._panel.panelCallback = callback
   this._panel.panelResolve = resolveOnFinish
 
@@ -184,27 +202,33 @@ RemoteCalibrator.prototype.panel = async function (
 const _validTaskList = {
   screenSize: {
     use: 1,
-    name: 'Screen Size',
+    name: phrases.RC_screenSize['en-US'],
+    phraseHandle: 'RC_screenSize',
   },
   displaySize: {
     use: 0,
-    name: 'Display Size',
+    name: phrases.RC_displaySize['en-US'],
+    phraseHandle: 'RC_displaySize',
   },
   measureDistance: {
     use: 2,
-    name: 'Viewing Distance',
+    name: phrases.RC_viewingDistance['en-US'],
+    phraseHandle: 'RC_viewingDistance',
   },
   trackDistance: {
     use: 2,
-    name: 'Head Tracking',
+    name: phrases.RC_headTracking['en-US'],
+    phraseHandle: 'RC_headTracking',
   },
   trackGaze: {
     use: 2,
-    name: 'Gaze Tracking',
+    name: phrases.RC_gazeTracking['en-US'],
+    phraseHandle: 'RC_gazeTracking',
   },
   environment: {
     use: 0,
-    name: 'System Information',
+    name: phrases.RC_environment['en-US'],
+    phraseHandle: 'RC_environment',
   },
 }
 const _validTaskListNames = Object.keys(_validTaskList)
@@ -223,7 +247,7 @@ const _validateTask = task => {
   return true
 }
 
-const _newStepBlock = (index, task, options) => {
+const _newStepBlock = (RC, index, task, options) => {
   let useCode = _validTaskList[_getTaskName(task)].use
   let use, useTip
 
@@ -260,7 +284,7 @@ const _newStepBlock = (index, task, options) => {
   b.innerHTML =
     (use.length ? `<p class="rc-panel-step-use">${use}</p>` : '') +
     `<p class="rc-panel-step-name">${Number(index) + 1}&nbsp;&nbsp;${
-      _validTaskList[_getTaskName(task)].name
+      phrases[_validTaskList[_getTaskName(task)].phraseHandle][RC.L]
     }</p>` +
     (use.length ? `<p class="rc-panel-step-use-tip">${use} ${useTip}</p>` : '')
   // b.disabled = true
@@ -276,13 +300,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`)
+    })
   }
 }
 

package/src/screenSize.js

@@ -1,5 +1,5 @@
 import RemoteCalibrator from './core'
-import { toFixedNumber, blurAll, remap } from './helpers'
+import { toFixedNumber, blurAll, remap } from './components/utils'
 
 import Card from './media/card.svg'
 import Arrow from './media/arrow.svg'
@@ -7,7 +7,7 @@ import USBA from './media/usba.svg'
 import USBC from './media/usbc.svg'
 import { bindKeys, unbindKeys } from './components/keyBinder'
 import { addButtons } from './components/buttons'
-import text from './text.json'
+import { phrases } from './i18n'
 
 // TODO Make it customizable
 const defaultObj = 'usba'
@@ -49,19 +49,30 @@ RemoteCalibrator.prototype.screenSize = function (options = {}, callback) {
       quitFullscreenOnFinished: false,
       repeatTesting: 1,
       decimalPlace: 1,
-      headline: text.screenSize.headline,
-      description: text.screenSize.description,
+      headline: '🖥️ ' + phrases.RC_screenSizeTitle[this.L],
+      description: phrases.RC_screenSizeIntro[this.L],
     },
     options
   )
 
   this.getFullscreen(options.fullscreen)
 
-  options.description += `<br /><b class="rc-size-obj-selection">I have a <select id="matching-obj"><option value="usba" selected>USB Type-A Connector</option><option value="usbc">USB Type-C Connector</option><option value="card">Credit Card</option></select> with me.</b>`
+  options.description += `<br /><br /><b class="rc-size-obj-selection">${phrases.RC_screenSizeHave[
+    this.L
+  ].replace(
+    'xxx',
+    `<select id="matching-obj"><option value="usba" selected>${
+      phrases.RC_screenSizeUSBA[this.L]
+    }</option><option value="usbc">${
+      phrases.RC_screenSizeUSBC[this.L]
+    }</option><option value="card">${
+      phrases.RC_screenSizeCreditCard[this.L]
+    }</option></select>`
+  )}</b>`
 
   this._addBackground()
   this._addBackgroundText(options.headline, options.description)
-  this._addCreditOnBackground(this._CONST.CREDIT_TEXT.CREDIT_CARD)
+  this._addCreditOnBackground(phrases.RC_screenSizeCredit[this.L])
 
   getSize(this, this.background, options, callback)
 
@@ -71,8 +82,8 @@ RemoteCalibrator.prototype.screenSize = function (options = {}, callback) {
 function getSize(RC, parent, options, callback) {
   // Slider
   const sliderElement = document.createElement('input')
-  sliderElement.id = 'size-slider'
-  sliderElement.className = 'slider'
+  sliderElement.id = 'rc-size-slider'
+  sliderElement.className = 'rc-slider'
   sliderElement.type = 'range'
   sliderElement.min = 0
   sliderElement.max = 100
@@ -83,37 +94,27 @@ function getSize(RC, parent, options, callback) {
   sliderElement.step = 0.1
 
   setSliderPosition(sliderElement, parent)
+  setSliderStyle(sliderElement)
   parent.appendChild(sliderElement)
 
   const _onDown = (e, type) => {
     if (
-      e.target.className === 'slider' &&
-      e.target.id === 'size-slider' &&
+      e.target.className === 'rc-slider' &&
+      e.target.id === 'rc-size-slider' &&
       ((type === RC._CONST.S.CLICK_TYPE.MOUSE && e.which === 1) ||
         type === RC._CONST.S.CLICK_TYPE.TOUCH)
     ) {
       e.target.style.cursor = 'grabbing'
-      arrowFillElement.setAttribute('fill', RC._CONST.COLOR.DARK_RED)
+      arrowFillElement.setAttribute('fill', RC._CONST.COLOR.ORANGE)
+      const _onEnd = () => {
+        sliderElement.style.cursor = 'grab'
+        arrowFillElement.setAttribute('fill', RC._CONST.COLOR.LIGHT_GREY)
+        document.removeEventListener('mouseup', _onEnd, false)
+      }
       if (type === RC._CONST.S.CLICK_TYPE.MOUSE)
-        document.addEventListener(
-          'mouseup',
-          function _onMouseUp() {
-            sliderElement.style.cursor = 'grab'
-            arrowFillElement.setAttribute('fill', '#aaa')
-            document.removeEventListener('mouseup', _onMouseUp, false)
-          },
-          false
-        )
+        document.addEventListener('mouseup', _onEnd, false)
       else if (type === RC._CONST.S.CLICK_TYPE.TOUCH)
-        document.addEventListener(
-          'touchend',
-          function _onTouchend() {
-            sliderElement.style.cursor = 'grab'
-            arrowFillElement.setAttribute('fill', '#aaa')
-            document.removeEventListener('mouseup', _onTouchend, false)
-          },
-          false
-        )
+        document.addEventListener('touchend', _onEnd, false)
     }
   }
 
@@ -139,7 +140,7 @@ function getSize(RC, parent, options, callback) {
   switchMatchingObj('card', elements)
   // Card & Arrow
   let arrowFillElement = document.getElementById('size-arrow-fill')
-  arrowFillElement.setAttribute('fill', '#aaa')
+  arrowFillElement.setAttribute('fill', RC._CONST.COLOR.LIGHT_GREY)
   let arrowSizes = {
     width: elements.arrow.getBoundingClientRect().width,
     height: elements.arrow.getBoundingClientRect().height,
@@ -153,6 +154,7 @@ function getSize(RC, parent, options, callback) {
 
   setSizes()
   const onSliderInput = () => {
+    setSliderStyle(sliderElement)
     setSizes()
   }
   const resizeObserver = new ResizeObserver(() => {
@@ -206,6 +208,7 @@ function getSize(RC, parent, options, callback) {
   })
 
   addButtons(
+    RC.L,
     RC.background,
     {
       go: finishFunction,
@@ -262,7 +265,7 @@ const addMatchingObj = (names, parent) => {
     elements[name] = element
   }
 
-  setObjectsPosition(elements, document.querySelector('#size-slider'))
+  setObjectsPosition(elements, document.querySelector('#rc-size-slider'))
 
   return elements
 }
@@ -272,8 +275,9 @@ const switchMatchingObj = (name, elements, setSizes) => {
     if (obj === name) elements[obj].style.visibility = 'visible'
     else elements[obj].style.visibility = 'hidden'
   }
-  if (name === 'card') elements.arrow.style.visibility = 'visible'
-  else elements.arrow.style.visibility = 'hidden'
+  // if (name === 'card') elements.arrow.style.visibility = 'visible'
+  // else elements.arrow.style.visibility = 'hidden'
+  elements.arrow.style.visibility = 'hidden'
   if (setSizes) setSizes()
 }
 
@@ -324,3 +328,12 @@ const setObjectsPosition = (objects, slider) => {
   for (let i in objects)
     objects[i].style.top = slider.getBoundingClientRect().top + 50 + 'px'
 }
+
+/* -------------------------------------------------------------------------- */
+
+const setSliderStyle = ele => {
+  const ratio = ele.value / ele.max
+  ele.style.background = `linear-gradient(90deg, #ffc772, #ffc772 ${
+    ratio * 100
+  }%, #fff ${ratio * 100}%)`
+}

package/src/text.json

@@ -1,34 +0,0 @@
-{
-  "screenSize": {
-    "headline": "🖥️ Screen Size Calibration",
-    "description": "We will measure your screen size. Find a <b>USB connector</b> (like the one providing power to your laptop) or a <b>credit card</b> (or any card of the same size), place it on the screen and drag the slider to match the sizes of the physical and displayed objects. When the sizes match, press <b>RETURN</b> or click <b>OK</b>."
-  },
-  "measureDistance": {
-    "headline": "📏 Measure Viewing Distance",
-    "description": "We'll measure your viewing distance. To do this, we will perform a blind spot test. Close/Cover one of your eyes (as instructed below) and focus on the black crosshair. Press <b>SPACE</b> or click <b>OK</b> when the red circle disappears. If it doesn't disappear, try moving closer to the screen."
-  },
-  "trackDistance": {
-    "headline": "🙂 Set up for Head Tracking",
-    "description": "Now we'll set up head tracking, to monitor viewing distance. When asked, please grant permission to access your camera. We'll perform a blind spot test first. Close/Cover one of your eyes (as instructed below) and focus on the black crosshair. Please press <b>SPACE</b> or click <b>OK</b> when the red dot disappears. If it doesn't disappear, try moving closer to the screen. You'll do this twice with each eye. Once you're done, head tracking will begin."
-  },
-  "calibrateGaze": {
-    "headline": "👀 Set up for Gaze Tracking",
-    "description": "Now we'll set up gaze tracking, to monitor eye position. When asked, please grant permission to access your camera. Try to keep your face centered in the video feed. Click on the <b style=\"color: #ff005c\">pink dot</b> at each location that it stops at. Make sure that your eyes are on the dot when you click."
-  },
-  "getGazeAccuracy": {
-    "headline": "👀 Get Gaze Accuracy",
-    "description": "We will measure your gaze accuracy. Please do not move the mouse and look at the fixation at the middle of the screen for the next 5 seconds."
-  },
-  "panel": {
-    "headline": "Please press a button, to calibrate.",
-    "description": "",
-    "nextHeadline": "Thanks for calibrating. Hit the button to continue.",
-    "nextDescription": "",
-    "nextButton": "Done"
-  },
-  "measurePD": {
-    "headline": "👁️ Measure Pupillary Distance",
-    "description": "We'll measure the distance between the centers of your eyes. Hold the cable to your eyes, align the thumbs with the centers of your pupils. Then hold the cable against the ruler and align the left thumb with zero, check where the right thumb is. Finally, click on the ruler and click <b>OK</b> to submit your measurement. You can use the video image as a reference. If you do have a ruler with you, go ahead and use it.",
-    "shortDescription": "Hold the cable to your eyes, align the thumbs with the centers of your pupils. Then hold the cable against the ruler and align the left thumb with zero, check where the right thumb is. Finally, click on the ruler and click <b>OK</b> to submit your measurement. You can use the video image as a reference. If you do have a ruler with you, go ahead and use it."
-  }
-}