Enable mouse scroll wheel control of sliders (#3582)

Enable mouse scroll wheel for sliders
betaflight · Sep 22, 2023 · 71e1240 · 71e1240
1 parent cc32aaf
commit 71e1240
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 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
@@ -904,6 +904,8 @@ motors.initialize = async function (callback) {
             'Home',
             'ArrowUp',
             'ArrowDown',
+            'AltLeft',
+            'AltRight',
         ];
 
         motorsEnableTestModeElement.on('change', function () {
@@ -978,6 +980,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 +992,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 +1326,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>