Add Expert Mode option for the range calibration modal

index.html

@@ -187,9 +187,23 @@
                     </a></li>
                   </ul>
                 </div>
-                <button type="button" class="btn btn-primary ds-btn" onclick="calibrate_range()">
-                  2. <span class="ds-i18n">Calibrate stick range</span>
-                </button>
+                <div class="btn-group w-100" role="group" id="range-calib-group">
+                  <button type="button" class="btn btn-primary ds-btn flex-grow-1" onclick="executeSelectedRangeCalibration()" id="range-calib">
+                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                    2. <span class="ds-i18n">Calibrate stick range</span>
+                  </button>
+                  <button type="button" class="btn btn-primary ds-btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" style="flex: 0 0 35px;">
+                    <span class="visually-hidden">Toggle dropdown</span>
+                  </button>
+                  <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="#" onclick="setRangeCalibrationMethod('normal', event)">
+                      <i class="fas fa-check me-2" id="check-range-normal"></i><span class="ds-i18n">Use normal mode</span>
+                    </a></li>
+                    <li><a class="dropdown-item" href="#" onclick="setRangeCalibrationMethod('expert', event)">
+                      <i class="fas fa-check me-2" id="check-range-expert" style="visibility: hidden;"></i><span class="ds-i18n">Use expert mode</span>
+                    </a></li>
+                  </ul>
+                </div>
                 <button type="button" class="btn btn-primary ds-btn" onclick="ds5_finetune()" id="ds5finetune">
                   3. <span class="ds-i18n">Finetune stick calibration</span>
                 </button>

js/core.js

@@ -25,6 +25,7 @@ const app = {
 
   // Calibration method preference
   centerCalibrationMethod: 'four-step', // 'quick' or 'four-step'
+  rangeCalibrationMethod: 'normal', // 'normal' or 'expert'
 
   // Language and UI state
   lang_orig_text: {},
@@ -1152,24 +1153,54 @@ window.executeSelectedCenterCalibration = () => {
   }
 };
 
-function updateCalibrationMethodUI() {
-  const checkQuick = document.getElementById('check-quick');
-  const checkFourStep = document.getElementById('check-four-step');
-
-  if (app.centerCalibrationMethod === 'quick') {
-    checkQuick.style.visibility = 'visible';
-    checkFourStep.style.visibility = 'hidden';
-  } else {
-    checkQuick.style.visibility = 'hidden';
-    checkFourStep.style.visibility = 'visible';
+window.setRangeCalibrationMethod = (method, event) => {
+  if (event) {
+    event.preventDefault();
+    event.stopPropagation();
   }
+  app.rangeCalibrationMethod = method;
+  localStorage.setItem('rangeCalibrationMethod', method);
+  updateCalibrationMethodUI();
+  // Close the dropdown
+  const dropdownButton = event?.target?.closest('.dropdown-menu')?.previousElementSibling;
+  if (dropdownButton) {
+    const dropdown = bootstrap.Dropdown.getInstance(dropdownButton);
+    if (dropdown) dropdown.hide();
+  }
+};
+
+window.executeSelectedRangeCalibration = () => {
+  calibrate_range(
+    controller,
+    { ll_data, rr_data },
+    (success, message) => {
+      resetStickDiagrams();
+      if(message) {
+        successAlert(message);
+      }
+    },
+    app.rangeCalibrationMethod === 'expert'
+  );
+};
+
+function updateCalibrationMethodUI() {
+  $('#check-quick').toggle(app.centerCalibrationMethod === 'quick');
+  $('#check-four-step').toggle(app.centerCalibrationMethod === 'four-step');
+  $('#check-range-normal').toggle(app.rangeCalibrationMethod === 'normal');
+  $('#check-range-expert').toggle(app.rangeCalibrationMethod === 'expert');
 }
 
 function initCalibrationMethod() {
-  const savedMethod = localStorage.getItem('centerCalibrationMethod');
-  if (savedMethod && (savedMethod === 'quick' || savedMethod === 'four-step')) {
-    app.centerCalibrationMethod = savedMethod;
+  const savedCenterMethod = localStorage.getItem('centerCalibrationMethod');
+  if (savedCenterMethod && (savedCenterMethod === 'quick' || savedCenterMethod === 'four-step')) {
+    app.centerCalibrationMethod = savedCenterMethod;
   }
+
+  const savedRangeMethod = localStorage.getItem('rangeCalibrationMethod');
+  if (savedRangeMethod && (savedRangeMethod === 'normal' || savedRangeMethod === 'expert')) {
+    app.rangeCalibrationMethod = savedRangeMethod;
+  }
+
   updateCalibrationMethodUI();
 }
 window.nvslock = nvslock;

js/modals/calib-range-modal.js

@@ -5,13 +5,14 @@ import { l } from '../translations.js';
 import { CIRCULARITY_DATA_SIZE } from '../stick-renderer.js';
 
 const SECONDS_UNTIL_UNLOCK = 15;
+const EXPERT_MODE_STORAGE_KEY = 'rangeCalibExpertMode';
 
 /**
  * Calibrate Stick Range Modal Class
  * Handles stick range calibration
  */
 export class CalibRangeModal {
-  constructor(controllerInstance, { ll_data, rr_data }, doneCallback = null) {
+  constructor(controllerInstance, { ll_data, rr_data }, doneCallback = null, expertMode = false) {
     // Dependencies
     this.controller = controllerInstance;
     this.ll_data = ll_data;
@@ -34,6 +35,8 @@ export class CalibRangeModal {
     this.leftCycleProgress = 0;
     this.rightCycleProgress = 0;
 
+    this.expertMode = expertMode;
+
     this.allDonePromiseResolve = undefined;
     this.doneCallback = doneCallback;
 
@@ -75,11 +78,14 @@ export class CalibRangeModal {
     this.ll_data.fill(0);
     this.rr_data.fill(0);
 
-    this.updateProgress();  // reset progress bar
-    this.startProgressMonitoring();
+    this._updateUIVisibility();
+    if (!this.expertMode) {
+      this.updateProgress();  // reset progress bar
+      this.startProgressMonitoring();
 
-    this.resetAlertEnhancement();
-    this.startCountdown();
+      this.resetAlertEnhancement();
+      this.startCountdown();
+    }
 
     await sleep(1000);
     await this.controller.calibrateRangeBegin();
@@ -133,14 +139,7 @@ export class CalibRangeModal {
       // If there is only one stick, sum two times leftCycleProgress, so that it can reach 100.
       if (this.countdownSeconds <= 0 || this.leftCycleProgress + (this.hasSingleStick ? this.leftCycleProgress : this.rightCycleProgress) >= 100) {
         this.stopCountdown();
-
-        $('#range-calibration-alert').hide();
-        $('#range-done-btn')
-          .prop('disabled', false)
-          .toggleClass('btn-primary', true)
-          .toggleClass('btn-outline-primary', false);
-
-        this.updateCountdownButton();
+        this._enableDoneButton();
       } else {
         this.checkAndEnhanceAlert();
       }
@@ -169,6 +168,17 @@ export class CalibRangeModal {
     $('#range-done-btn').text(text);
   }
 
+  /**
+   * Enable the Done button and hide calibration alert
+   */
+  _enableDoneButton() {
+    $('#range-calibration-alert').hide();
+    $('#range-done-btn')
+      .prop('disabled', false)
+      .toggleClass('btn-primary', true)
+      .toggleClass('btn-outline-primary', false);
+  }
+
   /**
    * Check if ll_data and rr_data have received data
    */
@@ -265,6 +275,23 @@ export class CalibRangeModal {
   resetAlertEnhancement() {
     $('#keep-rotating-alert').removeClass('blink-text');
   }
+
+  /**
+   * Update UI visibility based on expert mode
+   */
+  _updateUIVisibility() {
+    if (this.expertMode) {
+      // Hide progress bar, progress text, and alert in expert mode. Enable Done button immediately.
+      $('#range-progress-container').hide();
+      $('#range-progress-text-container').hide();
+      $('#range-calibration-alert').hide();
+      this._enableDoneButton();
+    } else {
+      // Show progress bar and progress text in normal mode
+      $('#range-progress-container').show();
+      $('#range-progress-text-container').show();
+    }
+  }
 }
 
 // Global reference to the current range calibration instance
@@ -278,9 +305,9 @@ function destroyCurrentInstance() {
   }
 }
 
-export async function calibrate_range(controller, dependencies, doneCallback = null) {
+export async function calibrate_range(controller, dependencies, doneCallback = null, expertMode = false) {
   destroyCurrentInstance(); // Clean up any existing instance
-  currentCalibRangeInstance = new CalibRangeModal(controller, dependencies, doneCallback);
+  currentCalibRangeInstance = new CalibRangeModal(controller, dependencies, doneCallback, expertMode);
 
   await currentCalibRangeInstance.open();
   return new Promise((resolve) => {

templates/range-modal.html

@@ -8,10 +8,10 @@
       <div class="modal-body">
         <p class="ds-i18n"><b>The controller is now sampling data!</b></p>
         <p class="ds-i18n">Rotate the sticks slowly at least 2 times in one direction and 2 times in the other direction to cover the whole range.</p>
-        <div class="progress mt-3" role="progressbar" aria-label="Range calibration progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress mt-3" id="range-progress-container" role="progressbar" aria-label="Range calibration progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
           <div id="range-progress-bar" class="progress-bar" style="width:0%"></div>
         </div>
-        <div class="mt-2">
+        <div class="mt-2" id="range-progress-text-container">
           <small class="text-muted">
             <span class="ds-i18n">Progress</span>: <span id="range-progress-text">0%</span>
           </small>