Enable mouse scroll wheel control of sliders (#3582)

Enable mouse scroll wheel for sliders

Author: stoneman

src/css/tabs/pid_tuning.less

@@ -732,6 +732,7 @@
 		}
 	}
 	.slidersWarning {
+		text-align: center;
 		background: #ffa3a3;
 		border: 1px solid red;
 		font-weight: 600;

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,

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,

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>