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

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,8 +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 { colorDarkRed } from './constants'
-import text from './text.json'
+import { phrases } from './i18n'
 
 // TODO Make it customizable
 const defaultObj = 'usba'
@@ -50,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 style="display: inline-flex">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)
 
@@ -72,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
@@ -84,28 +94,38 @@ function getSize(RC, parent, options, callback) {
   sliderElement.step = 0.1
 
   setSliderPosition(sliderElement, parent)
+  setSliderStyle(sliderElement)
   parent.appendChild(sliderElement)
 
-  const onMouseDown = e => {
+  const _onDown = (e, type) => {
     if (
-      e.target.className === 'slider' &&
-      e.target.id === 'size-slider' &&
-      e.which === 1
+      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', colorDarkRed)
-      document.addEventListener(
-        'mouseup',
-        function _onMouseUp() {
-          sliderElement.style.cursor = 'grab'
-          arrowFillElement.setAttribute('fill', '#aaa')
-          document.removeEventListener('mouseup', _onMouseUp, false)
-        },
-        false
-      )
+      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', _onEnd, false)
+      else if (type === RC._CONST.S.CLICK_TYPE.TOUCH)
+        document.addEventListener('touchend', _onEnd, false)
     }
   }
+
+  const onMouseDown = e => {
+    _onDown(e, 'mouse')
+  }
+  const onTouchStart = e => {
+    _onDown(e, 'touch')
+  }
   document.addEventListener('mousedown', onMouseDown, false)
+  document.addEventListener('touchstart', onTouchStart, false)
 
   // Add all objects
   const elements = addMatchingObj(['card', 'arrow', 'usba', 'usbc'], parent)
@@ -113,27 +133,28 @@ function getSize(RC, parent, options, callback) {
   // Switch OBJ
   let currentMatchingObj = defaultObj // DEFAULT
   document.getElementById('matching-obj').addEventListener('change', e => {
-    switchMatchingObj(e.target.value, elements)
+    switchMatchingObj(e.target.value, elements, setSizes)
     currentMatchingObj = e.target.value
   })
 
   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,
   }
 
   const setSizes = () => {
-    setCardSizes(sliderElement, elements.card, elements.arrow, arrowSizes)
+    setCardSizes(RC, sliderElement, elements.card, elements.arrow, arrowSizes)
     setConnectorSizes(sliderElement, elements.usba)
     setConnectorSizes(sliderElement, elements.usbc)
   }
-  setSizes()
 
+  setSizes()
   const onSliderInput = () => {
+    setSliderStyle(sliderElement)
     setSizes()
   }
   const resizeObserver = new ResizeObserver(() => {
@@ -146,6 +167,7 @@ function getSize(RC, parent, options, callback) {
   // Call when ESC pressed
   const breakFunction = () => {
     document.removeEventListener('mousedown', onMouseDown, false)
+    document.removeEventListener('touchstart', onTouchStart, false)
     document.removeEventListener('input', onSliderInput, false)
     resizeObserver.unobserve(parent)
     RC._removeBackground()
@@ -181,11 +203,12 @@ function getSize(RC, parent, options, callback) {
   sliderElement.addEventListener('input', onSliderInput, false)
   const bindKeysFunction = bindKeys({
     Escape: breakFunction,
+    Enter: finishFunction,
     ' ': finishFunction,
-    Enter: () => {},
   })
 
   addButtons(
+    RC.L,
     RC.background,
     {
       go: finishFunction,
@@ -195,10 +218,10 @@ function getSize(RC, parent, options, callback) {
   )
 
   // Set to actual default object
-  switchMatchingObj(currentMatchingObj, elements)
+  switchMatchingObj(currentMatchingObj, elements, setSizes)
 }
 
-const setCardSizes = (slider, card, arrow, aS) => {
+const setCardSizes = (RC, slider, card, arrow, aS) => {
   // Card
   const targetWidth =
     (slider.offsetWidth - 30) *
@@ -211,7 +234,10 @@ const setCardSizes = (slider, card, arrow, aS) => {
   if (cardSizes.width !== 0) {
     arrow.style.left = cardSizes.left + targetWidth + 'px'
     arrow.style.top =
-      cardSizes.top + (targetWidth * 0.63 - aS.height) / 2 + 'px'
+      cardSizes.top +
+      RC.background.scrollTop +
+      (targetWidth * 0.63 - aS.height) / 2 +
+      'px'
   }
 }
 
@@ -239,18 +265,20 @@ const addMatchingObj = (names, parent) => {
     elements[name] = element
   }
 
-  setObjectsPosition(elements, document.querySelector('#size-slider'))
+  setObjectsPosition(elements, document.querySelector('#rc-size-slider'))
 
   return elements
 }
 
-const switchMatchingObj = (name, elements) => {
+const switchMatchingObj = (name, elements, setSizes) => {
   for (let obj in elements) {
     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()
 }
 
 /**
@@ -300,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/constants.js

@@ -1,11 +0,0 @@
-export const gazeCalibrationDotDefault = {
-  r: 28,
-  margin: 10,
-  border: 8,
-}
-
-export const colorIconOrange = '#ff9a00'
-export const colorDarkRed = '#ac0d0d'
-
-// eslint-disable-next-line no-undef
-export const debug = process.env.DEBUG

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>SPACE</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."
-  }
-}