Allow finetune center point and circularity adjustment step customization

index.html

@@ -304,7 +304,7 @@
   <footer class="fixed-bottom bg-body-tertiary border-top">
     <div class="container">
       <div class="d-flex flex-column flex-sm-row justify-content-between py-3" id="footbody">
-        <p class="mb-0"><a target="_blank" href="https://github.com/dualshock-tools/dualshock-tools.github.io/commits/main/"><span class="ds-i18n">Version</span> 2.16 beta 10</a> (2025-09-17) - <a href="#" class="ds-i18n" onclick="show_donate_modal();">Support this project</a>&nbsp;<span id="authorMsg"></span></p>
+        <p class="mb-0"><a target="_blank" href="https://github.com/dualshock-tools/dualshock-tools.github.io/commits/main/"><span class="ds-i18n">Version</span> 2.16 beta 11</a> (2025-09-17) - <a href="#" class="ds-i18n" onclick="show_donate_modal();">Support this project</a>&nbsp;<span id="authorMsg"></span></p>
 
         <ul class="list-unstyled d-flex mb-0">
           <li class="ms-3"><a class="link-body-emphasis" href="mailto:ds4@the.al" target="_blank"><svg class="bi" width="24" height="24"><use xlink:href="#mail"/></svg></a></li>

js/modals/finetune-modal.js

@@ -15,6 +15,8 @@ export class Finetune {
     this.original_data = [];
     this.last_written_data = [];
     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
     
     // Dependencies
     this.controller = null;
@@ -46,6 +48,20 @@ export class Finetune {
     this._updateUI();
   }
 
+  get stepSize() {
+    return this._mode === 'center' ? this._centerStepSize : this._circularityStepSize;
+  }
+
+  set stepSize(size) {
+    if (this._mode === 'center') {
+      this._centerStepSize = size;
+    } else {
+      this._circularityStepSize = size;
+    }
+    this._updateStepSizeUI();
+    this._saveStepSizeToLocalStorage();
+  }
+
   async init(controllerInstance, { ll_data, rr_data, clear_circularity }) {
     this.controller = controllerInstance;
     this.ll_data = ll_data;
@@ -54,6 +70,7 @@ export class Finetune {
 
     this._initEventListeners();
     this._restoreShowRawNumbersCheckbox();
+    this._restoreStepSizeFromLocalStorage();
   
     // Lock NVS before
     const nv = await this.controller.queryNvStatus();
@@ -134,6 +151,13 @@ export class Finetune {
       console.log("Finetune modal hidden event triggered");
       destroyCurrentInstance();
     });
+
+    // Step size dropdown event listeners
+    $('.dropdown-item[data-step]').on('click', (e) => {
+      e.preventDefault();
+      const stepSize = parseInt($(e.target).data('step'));
+      this.stepSize = stepSize;
+    });
   }
 
   /**
@@ -154,6 +178,7 @@ export class Finetune {
     $("#right-stick-card").off('click');
 
     $('#finetuneModal').off('hidden.bs.modal');
+    $('.dropdown-item[data-step]').off('click');
   }
 
   /**
@@ -273,6 +298,9 @@ export class Finetune {
       $("#finetuneModeCircularity").prop('checked', true);
       modal.addClass('circularity-mode');
     }
+
+    // Update step size UI when mode changes
+    this._updateStepSizeUI();
   }
 
   async _onFinetuneChange() {
@@ -530,7 +558,7 @@ export class Finetune {
   }
 
   _handleCenterModeAdjustment(changes) {
-    const adjustmentStep = 5; // Use consistent step size for center mode
+    const adjustmentStep = this._centerStepSize; // Use center step size for center mode
 
     // Define button mappings for center mode
     const buttonMappings = [
@@ -606,8 +634,8 @@ export class Finetune {
 
     const quadrant = this._getStickQuadrant(currentStick.x, currentStick.y);
 
-    // Use different step sizes based on quadrant - right/down values are much larger
+    // Use circularity step size for circularity mode
-    const adjustmentStep = (quadrant === 'right' || quadrant === 'down') ? 15 : 3;
+    const adjustmentStep = this._circularityStepSize;
 
     // Define button mappings for each quadrant type
     const horizontalButtons = ['left', 'right', 'square', 'circle'];
@@ -700,6 +728,41 @@ export class Finetune {
     // Trigger the change event to update the finetune data
     await this._onFinetuneChange();
   }
+
+  /**
+   * Update the step size UI display
+   */
+  _updateStepSizeUI() {
+    const currentStepSize = this._mode === 'center' ? this._centerStepSize : this._circularityStepSize;
+    $('#stepSizeValue').text(currentStepSize);
+  }
+
+  /**
+   * Save step size to localStorage
+   */
+  _saveStepSizeToLocalStorage() {
+    localStorage.setItem('finetuneCenterStepSize', this._centerStepSize.toString());
+    localStorage.setItem('finetuneCircularityStepSize', this._circularityStepSize.toString());
+  }
+
+  /**
+   * Restore step size from localStorage
+   */
+  _restoreStepSizeFromLocalStorage() {
+    // Restore center step size
+    const savedCenterStepSize = localStorage.getItem('finetuneCenterStepSize');
+    if (savedCenterStepSize) {
+      this._centerStepSize = parseInt(savedCenterStepSize);
+    }
+
+    // Restore circularity step size
+    const savedCircularityStepSize = localStorage.getItem('finetuneCircularityStepSize');
+    if (savedCircularityStepSize) {
+      this._circularityStepSize = parseInt(savedCircularityStepSize);
+    }
+
+    this._updateStepSizeUI();
+  }
 }
 
 // Global reference to the current finetune instance

templates/finetune-modal.html

@@ -166,6 +166,28 @@
             <input class="form-check-input" type="checkbox" id="showRawNumbersCheckbox">
             <label class="form-check-label ds-i18n" for="showRawNumbersCheckbox">Show raw numbers</label>
           </div>
+          <div class="dropdown me-2">
+            <a class="btn btn-link text-decoration-none" href="#" role="button" id="stepSizeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+              <span class="ds-i18n">Step size</span>: <span id="stepSizeValue">1</span>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="stepSizeDropdown">
+              <li><a class="dropdown-item" href="#" data-step="15">15</a></li>
+              <li><a class="dropdown-item" href="#" data-step="14">14</a></li>
+              <li><a class="dropdown-item" href="#" data-step="13">13</a></li>
+              <li><a class="dropdown-item" href="#" data-step="12">12</a></li>
+              <li><a class="dropdown-item" href="#" data-step="11">11</a></li>
+              <li><a class="dropdown-item" href="#" data-step="10">10</a></li>
+              <li><a class="dropdown-item" href="#" data-step="9">9</a></li>
+              <li><a class="dropdown-item" href="#" data-step="8">8</a></li>
+              <li><a class="dropdown-item" href="#" data-step="7">7</a></li>
+              <li><a class="dropdown-item" href="#" data-step="6">6</a></li>
+              <li><a class="dropdown-item" href="#" data-step="5">5</a></li>
+              <li><a class="dropdown-item" href="#" data-step="4">4</a></li>
+              <li><a class="dropdown-item" href="#" data-step="3">3</a></li>
+              <li><a class="dropdown-item" href="#" data-step="2">2</a></li>
+              <li><a class="dropdown-item" href="#" data-step="1">1</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>