From 1d3ceacb14de42beb78bf579a33f6f4a9b970fd1 Mon Sep 17 00:00:00 2001
From: "Pawel Spychalski (DzikuVx)" <pspychalski@gmail.com>
Date: Tue, 10 May 2022 21:31:35 +0200
Subject: [PATCH] Universal Sliders for Settings framework

---
 js/helpers.js        |  8 ++++-
 js/settings.js       | 86 ++++++++++++++++++++++++++++++++++++++++++++
 tabs/pid_tuning.html | 62 +++++++++++++++++++++-----------
 3 files changed, 135 insertions(+), 21 deletions(-)

diff --git a/js/helpers.js b/js/helpers.js
index 25ff1bae..cdba079b 100644
--- a/js/helpers.js
+++ b/js/helpers.js
@@ -57,4 +57,10 @@ function generateFilename(prefix, suffix) {
         + zeroPad(date.getSeconds(), 2);
 
     return filename + '.' + suffix;
-}
\ No newline at end of file
+}
+
+function scaleRangeInt(x, srcMin, srcMax, destMin, destMax) {
+    let a = (destMax - destMin) * (x - srcMin);
+    let b = srcMax - srcMin;
+    return Math.round((a / b) + destMin);
+} 
\ No newline at end of file
diff --git a/js/settings.js b/js/settings.js
index 76e9b640..e07ea3c8 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -66,6 +66,91 @@ var Settings = (function () {
                 } else if (s.setting.type == 'string') {
                     input.val(s.value);
                     input.attr('maxlength', s.setting.max);
+                } else if (input.data('presentation') == 'range') {
+                    
+                    let scaledMax;
+                    let scalingThreshold;
+
+                    if (input.data('normal-max')) {
+                        scaledMax = s.setting.max * 2;
+                        scalingThreshold = Math.round(scaledMax * 0.8);
+                    } else {
+                        scaledMax = s.setting.max;
+                        scalingThreshold = scaledMax;
+                    }
+
+                    
+                    let $range = $('<input type="range" min="' + s.setting.min + '" max="' + scaledMax + '" value="' + s.value + '"/>');
+                    if (input.data('step')) {
+                        $range.attr('step', input.data('step'));
+                    }
+                    $range.css({
+                        'display': 'block',
+                        'flex-grow': 100,
+                        'margin-left': '1em',
+                        'margin-right': '1em',
+                    });
+                    
+                    input.attr('min', s.setting.min);
+                    input.attr('max', s.setting.max);
+                    input.val(parseInt(s.value));
+                    input.css({
+                        'width': 'auto',
+                        'min-width': '75px',
+                    });
+                    
+                    input.parent().css({
+                        'display': 'flex',
+                        'width': '100%'
+                    });
+                    $range.insertAfter(input);
+
+                    input.parent().find('.helpicon').css({
+                        'top': '5px',
+                        'left': '-10px'
+                    });
+
+                    /*
+                     * Update slider to input
+                     */
+                    $range.on('input', function() {
+                        let val = $(this).val();
+                        let normalMax = parseInt(input.data('normal-max'));
+
+                        console.log(val, normalMax);
+
+                        if (normalMax) {
+                            if (val <= scalingThreshold) {
+                                val = scaleRangeInt(val, 0, scalingThreshold, 0, normalMax);
+                            } else {
+                                val = scaleRangeInt(val, scalingThreshold + 1, scaledMax, normalMax + 1, s.setting.max);
+                            }
+                        }
+                        console.log(val);
+
+                        input.val(val);
+                    });
+
+                    input.on('change', function() {
+
+                        let val = $(this).val();
+                        let newVal;
+                        let normalMax = parseInt(input.data('normal-max'));
+                        if (normalMax) {
+                            if (val <= normalMax) {
+                                newVal = scaleRangeInt(val, 0, normalMax, 0, scalingThreshold);
+                            } else {
+                                newVal = scaleRangeInt(val, normalMax + 1, s.setting.max, scalingThreshold + 1, scaledMax);
+                            }
+                        } else {
+                            newVal = val;
+                        }
+
+                        $range.val(newVal);
+                    });
+
+                    input.trigger('change');
+
                 } else if (s.setting.type == 'float') {
                     input.attr('type', 'number');
 
@@ -80,6 +165,7 @@ var Settings = (function () {
                     input.attr('min', s.setting.min);
                     input.attr('max', s.setting.max);
                     input.val(s.value.toFixed(2));
+
                 } else {
                     var multiplier = parseFloat(input.data('setting-multiplier') || 1);
 
diff --git a/tabs/pid_tuning.html b/tabs/pid_tuning.html
index 352ea50a..c1298112 100644
--- a/tabs/pid_tuning.html
+++ b/tabs/pid_tuning.html
@@ -258,28 +258,36 @@
                         <tr>
                             <th data-i18n="pidTuning_gyro_main_lpf_hz"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="gyro_main_lpf_hz" type="number" class="rate-tpa_input" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_gyro_main_lpf_hz_help"></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="gyro_main_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="250" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_gyro_main_lpf_hz_help"></div>
+                                </div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_MatrixFilterMinFrequency"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="dynamic_gyro_notch_min_hz" type="number" class="rate-tpa_input" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_MatrixFilterMinFrequencyHelp"></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="dynamic_gyro_notch_min_hz" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="150" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_MatrixFilterMinFrequencyHelp"></div>
+                                </div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_MatrixFilterQFactor"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="dynamic_gyro_notch_q" type="number" class="rate-tpa_input" /></div>
-                                <div class="helpicon cf_tip" title=""></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="dynamic_gyro_notch_q" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="300" />
+                                    <div class="helpicon cf_tip" title=""></div>
+                                </div>
                             </td>
                         </tr>
                         <tr>
                             <th data-i18n="pidTuning_UnicornFilterQFactor"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="setpoint_kalman_q" type="number" class="rate-tpa_input" /></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="setpoint_kalman_q" data-presentation="range" type="number" class="rate-tpa_input" data-normal-max="500" />
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -294,8 +302,10 @@
                         <tr>
                             <th data-i18n="pidTuning_dtermLpfCutoffFrequency"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="dterm_lpf_hz" type="number" class="rate-tpa_input" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_dtermLpfCutoffFrequencyHelp"></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="dterm_lpf_hz" type="number" data-presentation="range" class="rate-tpa_input" data-normal-max="200" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_dtermLpfCutoffFrequencyHelp"></div>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -316,7 +326,9 @@
                         <tr>
                             <th data-i18n="pidTuning_rpm_gyro_min_hz"></th>
                             <td>
-                                <div class="pidTuning_number"><input data-setting="rpm_gyro_min_hz" type="number" class="rate-tpa_input" /></div>
+                                <div class="pidTuning_number">
+                                    <input data-setting="rpm_gyro_min_hz" type="number" class="rate-tpa_input" data-presentation="range" />
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -333,8 +345,10 @@
                         <tr>
                             <th data-i18n="pidTuning_itermRelaxCutoff"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" data-setting="mc_iterm_relax_cutoff" class="rate-tpa_input" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermRelaxCutoffHelp"></div>
+                                <div class="pidTuning_number">
+                                    <input type="number" data-setting="mc_iterm_relax_cutoff" class="rate-tpa_input"  data-presentation="range" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermRelaxCutoffHelp"></div>
+                                </div>
                             </td>
                         </tr>
                         <tr>
@@ -358,8 +372,10 @@
                         <tr>
                             <th data-i18n="pidTuning_itermBankAngleFreeze"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="fw_yaw_iterm_freeze_bank_angle" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermBankAngleFreezeHelp"></div>
+                                <div class="pidTuning_number">
+                                    <input type="number" class="rate-tpa_input" data-setting="fw_yaw_iterm_freeze_bank_angle" data-presentation="range" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_itermBankAngleFreezeHelp"></div>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -395,8 +411,10 @@
                         <tr>
                             <th data-i18n="pidTuning_d_boost_gyro_delta_lpf_hz"></th>
                             <td>
-                                <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="d_boost_gyro_delta_lpf_hz" /></div>
-                                <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_gyro_delta_lpf_hz_help"></div>
+                                <div class="pidTuning_number">
+                                    <input type="number" class="rate-tpa_input" data-setting="d_boost_gyro_delta_lpf_hz" data-presentation="range" data-normal-max="160" />
+                                    <div class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_gyro_delta_lpf_hz_help"></div>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
@@ -410,15 +428,19 @@
                     <tr>
                         <th data-i18n="pidTuning_TPA"></th>
                         <td>
-                            <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="tpa_rate" data-unit="percent" /></div>
-                            <div class="helpicon cf_tip" data-i18n_title="pidTuningTPAHelp"></div>
+                            <div class="pidTuning_number">
+                                <input type="number" class="rate-tpa_input" data-setting="tpa_rate" data-unit="percent"  data-presentation="range" />
+                                <div class="helpicon cf_tip" data-i18n_title="pidTuningTPAHelp"></div>
+                            </div>
                         </td>
                     </tr>
                     <tr>
                         <th data-i18n="pidTuning_TPABreakPoint"></th>
                         <td>
-                            <div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="tpa_breakpoint" /></div>
-                            <div class="helpicon cf_tip" data-i18n_title="pidTuningTPABreakPointHelp"></div>
+                            <div class="pidTuning_number">
+                                <input type="number" class="rate-tpa_input" data-setting="tpa_breakpoint" data-presentation="range" data-step="5" />
+                                <div class="helpicon cf_tip" data-i18n_title="pidTuningTPABreakPointHelp"></div>
+                            </div>
                         </td>
                     </tr>
                 </table>