Add buttons for quick-calibrating from the finetune dialog

css/finetune.css

@@ -89,6 +89,11 @@ input[id^="finetune"] {
   display: none;
 }
 
+/* Hide spacers when raw numbers are hidden */
+#finetuneModal.hide-raw-numbers .spacer.hide-raw-numbers {
+  display: none;
+}
+
 /* Adjust grid layout when raw numbers are hidden - center the canvas */
 #finetuneModal.hide-raw-numbers .finetune-grid {
   grid-template-columns: 1fr;

index.html

@@ -156,7 +156,7 @@
                   1. <span ds-i18n>Calibrate stick center</span>
                 </button>
                 <button type="button" class="btn btn-primary ds-btn" onclick="auto_calibrate_stick_centers()" id="quick-center-calib" style="display: none;">
-                  1. <span ds-i18n>Fast calibrate stick center</span>
+                  1. <span ds-i18n>Calibrate stick center</span>
                 </button>
                 <button type="button" class="btn btn-primary ds-btn" onclick="calibrate_range()">
                   2. <span ds-i18n>Calibrate stick range</span>

js/core.js

@@ -791,10 +791,6 @@ function close_all_modals() {
   $('.modal.show').modal('hide'); // Close any open modals
 }
 
-function set_progress(i) {
-  $(".progress-bar").css('width', '' + i + '%')
-}
-
 function render_info_to_dom(infoItems) {
   // Clear all info sections
   $("#fwinfo").html("");
@@ -983,18 +979,33 @@ window.show_faq_modal = show_faq_modal;
 window.show_info_tab = show_info_tab;
 window.calibrate_range = () => calibrate_range(
   controller,
-  { resetStickDiagrams },
-  (success, message) => { success && successAlert(message); success && switchToRangeMode(); }
+  (success, message) => {
+    if (success) {
+      resetStickDiagrams();
+      successAlert(message);
+      switchToRangeMode();
+    }
+  }
 );
 window.calibrate_stick_centers = () => calibrate_stick_centers(
   controller,
-  { resetStickDiagrams, set_progress },
-  (success, message) => { success && successAlert(message); success && switchTo10xZoomMode(); }
+  (success, message) => {
+    if (success) {
+      resetStickDiagrams();
+      successAlert(message);
+      switchTo10xZoomMode();
+    }
+  }
 );
 window.auto_calibrate_stick_centers = () => auto_calibrate_stick_centers(
   controller,
-  { resetStickDiagrams, set_progress },
-  (success, message) => { success && successAlert(message); success && switchTo10xZoomMode(); }
+  (success, message) => {
+    if (success) {
+      resetStickDiagrams();
+      successAlert(message);
+      switchTo10xZoomMode();
+    }
+  }
 );
 window.ds5_finetune = () => ds5_finetune(
   controller,

js/modals/calib-center-modal.js

@@ -8,10 +8,8 @@ import { l } from '../translations.js';
  * Handles step-by-step manual stick center calibration
  */
 export class CalibCenterModal {
-  constructor(controllerInstance, { resetStickDiagrams, set_progress }, doneCallback = null) {
+  constructor(controllerInstance, doneCallback = null) {
     this.controller = controllerInstance;
-    this.resetStickDiagrams = resetStickDiagrams;
-    this.set_progress = set_progress;
     this.doneCallback = doneCallback;
 
     this._initEventListeners();
@@ -31,6 +29,14 @@ export class CalibCenterModal {
     });
   }
 
+  /**
+   * Set progress bar width
+   * @param {number} i - Progress percentage (0-100)
+   */
+  setProgress(i) {
+    $("#calib-center-progress").css('width', '' + i + '%')
+  }
+
   /**
    * Remove event listeners
    */
@@ -113,21 +119,20 @@ export class CalibCenterModal {
     if(!this.controller.isConnected())
       return;
 
-    this.set_progress(0);
+    this.setProgress(0);
     new bootstrap.Modal(document.getElementById('calibrateModal'), {}).show();
 
     await sleep(1000);
 
     // Use the controller manager's calibrateSticks method with UI progress updates
-    this.set_progress(10);
+    this.setProgress(10);
 
     const result = await this.controller.calibrateSticks((progress) => {
-      this.set_progress(progress);
+      this.setProgress(progress);
     });
 
     await sleep(500);
     this._close(true, result?.message);
-    this.resetStickDiagrams();
   }
 
   /**
@@ -220,8 +225,8 @@ function destroyCurrentInstance() {
 }
 
 // Legacy function exports for backward compatibility
-export async function calibrate_stick_centers(controller, dependencies, doneCallback = null) {
-  currentCalibCenterInstance = new CalibCenterModal(controller, dependencies, doneCallback);
+export async function calibrate_stick_centers(controller, doneCallback = null) {
+  currentCalibCenterInstance = new CalibCenterModal(controller, doneCallback);
   await currentCalibCenterInstance.open();
 }
 
@@ -241,24 +246,20 @@ async function quick_calibrate_instead() {
     currentCalibCenterInstance.doneCallback = null; // Temporarily remove callback to avoid double-calling
     currentCalibCenterInstance._close();
 
-    // Get the controller and dependencies from the current instance
+    // Get the controller from the current instance
     const { controller } = currentCalibCenterInstance;
-    const dependencies = {
-      resetStickDiagrams: currentCalibCenterInstance.resetStickDiagrams,
-      set_progress: currentCalibCenterInstance.set_progress
-    };
 
     // Destroy the current instance
     destroyCurrentInstance();
 
     // Start auto calibration with the original callback
-    await auto_calibrate_stick_centers(controller, dependencies, doneCallback);
+    await auto_calibrate_stick_centers(controller, {}, doneCallback);
   }
 }
 
 // "Old" fully automatic stick center calibration
-export async function auto_calibrate_stick_centers(controller, dependencies, doneCallback = null) {
-  currentCalibCenterInstance = new CalibCenterModal(controller, dependencies, doneCallback);
+export async function auto_calibrate_stick_centers(controller, doneCallback = null) {
+  currentCalibCenterInstance = new CalibCenterModal(controller, doneCallback);
   await currentCalibCenterInstance.multiCalibrateSticks();
 }
 

js/modals/calib-range-modal.js

@@ -7,10 +7,8 @@ import { sleep } from '../utils.js';
  * Handles stick range calibration
  */
 export class CalibRangeModal {
-  constructor(controllerInstance, { resetStickDiagrams }, doneCallback = null) {
-    // Dependencies
+  constructor(controllerInstance, doneCallback = null) {
     this.controller = controllerInstance;
-    this.resetStickDiagrams = resetStickDiagrams;
     this.doneCallback = doneCallback;
   }
 
@@ -26,7 +24,6 @@ export class CalibRangeModal {
 
   async onClose() {
     bootstrap.Modal.getOrCreateInstance('#rangeModal').hide();
-    this.resetStickDiagrams();
 
     const result = await this.controller.calibrateRangeOnClose();
 
@@ -48,9 +45,9 @@ function destroyCurrentInstance() {
 }
 
 // Legacy function exports for backward compatibility
-export async function calibrate_range(controller, dependencies, doneCallback = null) {
+export async function calibrate_range(controller, doneCallback = null) {
   destroyCurrentInstance(); // Clean up any existing instance
-  currentCalibRangeInstance = new CalibRangeModal(controller, dependencies, doneCallback);
+  currentCalibRangeInstance = new CalibRangeModal(controller, doneCallback);
   await currentCalibRangeInstance.open();
 }
 

js/modals/finetune-modal.js

@@ -2,6 +2,8 @@
 
 import { draw_stick_position } from '../stick-renderer.js';
 import { dec2hex32, float_to_str } from '../utils.js';
+import { auto_calibrate_stick_centers } from './calib-center-modal.js';
+import { calibrate_range } from './calib-range-modal.js';
 
 const FINETUNE_INPUT_SUFFIXES = ["LL", "LT", "RL", "RT", "LR", "LB", "RR", "RB", "LX", "LY", "RX", "RY"];
 const LEFT_AND_RIGHT = ['left', 'right'];
@@ -50,6 +52,7 @@ export class Finetune {
     this.active_stick = null; // 'left', 'right', or null
     this._centerStepSize = 5; // Default step size for center mode
     this._circularityStepSize = 5; // Default step size for circularity mode
+    this.isQuickCalibrating = false; // Prevents dialog destruction during quick calibration
 
     // Dependencies
     this.controller = null;
@@ -147,12 +150,7 @@ export class Finetune {
     const modal = new bootstrap.Modal(document.getElementById('finetuneModal'), {})
     modal.show();
 
-    const maxValue = this.controller.getFinetuneMaxValue();
-    FINETUNE_INPUT_SUFFIXES.forEach((suffix, i) => {
-      $("#finetune" + suffix)
-        .attr('max', maxValue)
-        .val(data[i]);
-    });
+    this._initializeFinetuneInputs(data);
 
     // Start in center mode
     this.setMode('center');
@@ -287,6 +285,12 @@ export class Finetune {
   _onModalHidden() {
     console.log("Finetune modal hidden event triggered");
 
+    // Don't destroy the instance if quick calibration is in progress
+    if (this.isQuickCalibrating) {
+      console.log("Quick calibration in progress, preventing dialog destruction");
+      return;
+    }
+
     // Reset circularity sliders to zero when modal closes
     LEFT_AND_RIGHT.forEach(lOrR => {
       $(`#${lOrR}CircularitySlider`).val(0);
@@ -331,6 +335,26 @@ export class Finetune {
     }
   }
 
+  /* Set the quick calibrating state to prevent dialog destruction
+  * @param {boolean} isCalibrating - Whether quick calibration is in progress
+  */
+  setQuickCalibrating(isCalibrating) {
+    this.isQuickCalibrating = isCalibrating;
+    const finetuneModal = bootstrap.Modal.getInstance('#finetuneModal');
+    finetuneModal.toggle(!isCalibrating);
+
+    if(!isCalibrating) {
+      this.clearCircularity();
+
+        // Refresh the finetune data after calibration
+      this._readFinetuneData().then((data) => {
+        this._initializeFinetuneInputs(data);
+        this.refresh_finetune_sticks();
+        console.log('Finetune modal refreshed');
+      });
+    }
+  }
+
   /**
    * Save finetune changes
    */
@@ -406,6 +430,19 @@ export class Finetune {
     }
   }
 
+  /**
+   * Initialize finetune input fields with data and max values
+   * @param {Array} data - Array of finetune values
+   */
+  _initializeFinetuneInputs(data) {
+    const maxValue = this.controller.getFinetuneMaxValue();
+    FINETUNE_INPUT_SUFFIXES.forEach((suffix, i) => {
+      $("#finetune" + suffix)
+        .attr('max', maxValue)
+        .val(data[i]);
+    });
+  }
+
   /**
    * Check if stick is in extreme position (close to edges)
    * @param {Object} stick - Stick object with x and y properties
@@ -1240,5 +1277,28 @@ export function isFinetuneVisible() {
   return !!currentFinetuneInstance;
 }
 
+// Quick calibrate functions
+async function finetune_quick_calibrate_center() {
+  // Hide the finetune modal
+  currentFinetuneInstance.setQuickCalibrating(true);
+
+  const { controller } = currentFinetuneInstance;
+  await auto_calibrate_stick_centers(controller, (success, message) => {
+    currentFinetuneInstance.setQuickCalibrating(false);
+  });
+}
+
+async function finetune_quick_calibrate_range() {
+  // Hide the finetune modal
+  currentFinetuneInstance.setQuickCalibrating(true);
+
+  const { controller } = currentFinetuneInstance;
+  await calibrate_range(controller, (success, message) => {
+    currentFinetuneInstance.setQuickCalibrating(false);
+  });
+}
+
 window.finetune_cancel = finetune_cancel;
 window.finetune_save = finetune_save;
+window.finetune_quick_calibrate_center = finetune_quick_calibrate_center;
+window.finetune_quick_calibrate_range = finetune_quick_calibrate_range;

templates/calibrate-modal.html

@@ -9,7 +9,7 @@
         <p class="ds-i18n">Recentering the controller sticks.</p>
         <p class="ds-i18n">Please do not close this window and do not disconnect your controller. </p>
         <div class="progress" role="progressbar" aria-label="Centering" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-            <div class="progress-bar" style="width: 0%"></div>
+            <div id="calib-center-progress" class="progress-bar" style="width: 0%"></div>
         </div>
       </div>
       <div class="modal-footer">

templates/finetune-modal.html

@@ -95,7 +95,7 @@
 
                     <!-- LX/LY values display -->
                     <div class="px-2 left-stick-values">
-                      <div class="spacer finetune-center-mode" style="height: 35px;">&nbsp;</div>
+                      <div class="spacer finetune-center-mode hide-raw-numbers" style="height: 35px;">&nbsp;</div>
 
                       <div class="hstack">
                         <div class="vstack" style="text-align: center;">
@@ -160,7 +160,7 @@
 
                       <!-- RX/RY values display -->
                       <div class="px-2 right-stick-values">
-                        <div class="spacer finetune-center-mode" style="height: 35px;">&nbsp;</div>
+                        <div class="spacer finetune-center-mode hide-raw-numbers" style="height: 35px;">&nbsp;</div>
 
                         <div class="hstack">
                           <div class="vstack" style="text-align: center;">
@@ -217,6 +217,19 @@
               <li><a class="dropdown-item" href="#" data-step="1">1</a></li>
             </ul>
           </div>
+          <div class="dropdown me-2">
+            <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="quickCalibrateDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="fas fa-bolt"></i>&nbsp;<span class="ds-i18n">Quick calibrate</span>
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="quickCalibrateDropdown">
+              <li><a class="dropdown-item" href="#" onclick="finetune_quick_calibrate_center()">
+                <i class="fas fa-crosshairs"></i>&nbsp;<span class="ds-i18n">Center</span>
+              </a></li>
+              <li><a class="dropdown-item" href="#" onclick="finetune_quick_calibrate_range()">
+                <i class="fas fa-expand-arrows-alt"></i>&nbsp;<span class="ds-i18n">Circularity</span>
+              </a></li>
+            </ul>
+          </div>
           <button type="button" class="btn btn-secondary ds-i18n" onclick="finetune_cancel()">Cancel</button>
           <button type="button" class="btn btn-primary ds-i18n" onclick="finetune_save()">Done</button>
         </div>