Enable mouse scroll wheel for sliders

betaflight · Sep 21, 2023 · e4bc56d · e4bc56d
1 parent cc32aaf
commit e4bc56d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 13 deletions.
diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less
@@ -732,6 +732,7 @@
 		}
 	}
 	.slidersWarning {
+		text-align: center;
 		background: #ffa3a3;
 		border: 1px solid red;
 		font-weight: 600;

diff --git a/src/js/tabs/motors.js b/src/js/tabs/motors.js
@@ -898,12 +898,13 @@ motors.initialize = async function (callback) {
         setSlidersDefault();
 
         const ignoreKeys = [
-            'PageUp',
-            'PageDown',
-            'End',
-            'Home',
-            'ArrowUp',
-            'ArrowDown',
+            33, // Page Up
+            34, // Page Down
+            35, // End
+            36, // Home
+            38, // Arrow Up
+            40, // Arrow Down
+            18, // Alt / Opt
         ];
 
         motorsEnableTestModeElement.on('change', function () {
@@ -921,7 +922,7 @@ motors.initialize = async function (callback) {
 
             function disableMotorTest(e) {
                 if (motorsEnableTestModeElement.is(':checked')) {
-                    if (!ignoreKeys.includes(e.code)) {
+                    if (!ignoreKeys.includes(e.which)) {
                         motorsEnableTestModeElement.prop('checked', false).trigger('change');
                         document.removeEventListener('keydown', evt => disableMotorTest(evt));
                     }
@@ -978,6 +979,10 @@ motors.initialize = async function (callback) {
             }
         });
 
+        $('div.sliders input:not(.master)').on('input wheel', function (e) {
+            self.scrollSlider($(this), e);
+        });
+
         $('div.sliders input.master').on('input', function () {
             const val = $(this).val();
 
@@ -986,6 +991,10 @@ motors.initialize = async function (callback) {
             $('div.sliders input:not(:last):first').trigger('input');
         });
 
+        $('div.sliders input.master').on('input wheel', function (e) {
+            self.scrollSlider($(this), e);
+        });
+
         // check if motors are already spinning
         let motorsRunning = false;
 
@@ -1316,6 +1325,25 @@ motors.cleanup = function (callback) {
     if (callback) callback();
 };
 
+motors.scrollSlider = function(slider, e) {
+    if (slider.prop('disabled')) {
+        return;
+    }
+
+    if (!(e.originalEvent?.deltaY && e.originalEvent?.altKey)) {
+        return;
+    }
+
+    e.preventDefault();
+
+    const step = 25;
+    const delta = e.originalEvent.deltaY > 0 ? -step : step;
+    const val = parseInt(slider.val()) + delta;
+    const roundedVal = Math.round(val / step) * step;
+    slider.val(roundedVal);
+    slider.trigger('input');
+};
+
 TABS.motors = motors;
 export {
     motors,

diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js
@@ -2021,6 +2021,10 @@ pid_tuning.initialize = function (callback) {
                 self.analyticsChanges['PidTuningSliders'] = "On";
             });
 
+            allPidTuningSliders.each(function (i) {
+               self.sliderOnScroll($(this));
+            });
+
             // reset to middle with double click
             allPidTuningSliders.dblclick(function() {
                 const slider = $(this);
@@ -2118,6 +2122,10 @@ pid_tuning.initialize = function (callback) {
                 }
             });
 
+            allFilterTuningSliders.each(function() {
+               self.sliderOnScroll($(this));
+            });
+
             // reset to middle with double click
             allFilterTuningSliders.dblclick(function() {
                 const slider = $(this);
@@ -2970,6 +2978,29 @@ pid_tuning.expertModeChanged = function(expertModeEnabled) {
     TuningSliders.setExpertMode(expertModeEnabled);
 };
 
+pid_tuning.sliderOnScroll = function(slider, e) {
+    slider.parent().on('input wheel', function(e) {
+        if (slider.prop('disabled')) {
+            return;
+        }
+
+        if (!(e.originalEvent?.deltaY && e.originalEvent?.altKey)) {
+            return;
+        }
+
+        e.preventDefault();
+
+        const step = parseFloat(slider.attr('step'));
+        const delta = e.originalEvent.deltaY > 0 ? -step : step;
+        const preScrollSliderValue = isInt(slider.val()) ? parseInt(slider.val()) : parseFloat(slider.val());
+        const sliderValue =  (Math.floor(preScrollSliderValue * 100) + Math.floor(delta * 100)) / 100;
+
+        slider.val(sliderValue);
+        slider.trigger('input');
+        slider.trigger('change');
+    });
+};
+
 TABS.pid_tuning = pid_tuning;
 export {
     pid_tuning,

diff --git a/src/tabs/pid_tuning.html b/src/tabs/pid_tuning.html
@@ -66,9 +66,6 @@
                     <div class="note dMinDisabledNote">
                         <p i18n="pidTuningDMinDisabledNote"></p>
                     </div>
-                    <div class="note slidersWarning">
-                        <p i18n="pidTuningSliderWarning"></p>
-                    </div>
                     <div class="profile_name">
                         <div class="number">
                             <label> <input type="text" name="pidProfileName" maxlength="8" style="width:100px;"/> <span
@@ -374,6 +371,10 @@
 
                          </table>
                     </div>
+
+                    <div class="gui_box topspacer slidersWarning">
+                        <p i18n="pidTuningSliderWarning"></p>
+                    </div>
 
                     <div class="gui_box topspacer nonExpertModeSlidersNote">
                         <p i18n="pidTuningPidSlidersNonExpertMode"></p>
@@ -1183,9 +1184,6 @@
                 <div class="note dynamicNotchWarning">
                     <p i18n="pidTuningDynamicNotchFilterDisabledWarning"></p>
                 </div>
-                <div class="note slidersWarning">
-                    <p i18n="pidTuningSliderWarning"></p>
-                </div>
                 <div class="gui_box slidersDisabled">
                     <table class="note-button">
                         <td i18n="pidTuningSlidersDisabled"></td>
@@ -1255,6 +1253,10 @@
                     </table>
                 </div>
 
+                <div class="gui_box topspacer slidersWarning">
+                    <p i18n="pidTuningSliderWarning"></p>
+                </div>
+
                 <div class="gui_box topspacer nonExpertModeSlidersNote">
                     <p i18n="pidTuningFilterSlidersNonExpertMode"></p>
                 </div>