Merge pull request #1516 from iNavFlight/dzikuvx-settings-sliders

Universal Sliders for Settings framework
pull/1517/head
Paweł Spychalski 2 years ago committed by GitHub
commit bf279e025c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -66,6 +66,91 @@ var Settings = (function () {
} else if (s.setting.type == 'string') { } else if (s.setting.type == 'string') {
input.val(s.value); input.val(s.value);
input.attr('maxlength', s.setting.max); 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') { } else if (s.setting.type == 'float') {
input.attr('type', 'number'); input.attr('type', 'number');
@ -80,6 +165,7 @@ var Settings = (function () {
input.attr('min', s.setting.min); input.attr('min', s.setting.min);
input.attr('max', s.setting.max); input.attr('max', s.setting.max);
input.val(s.value.toFixed(2)); input.val(s.value.toFixed(2));
} else { } else {
var multiplier = parseFloat(input.data('setting-multiplier') || 1); var multiplier = parseFloat(input.data('setting-multiplier') || 1);

@ -350,28 +350,36 @@
<tr> <tr>
<th data-i18n="pidTuning_gyro_main_lpf_hz"></th> <th data-i18n="pidTuning_gyro_main_lpf_hz"></th>
<td> <td>
<div class="pidTuning_number"><input data-setting="gyro_main_lpf_hz" type="number" class="rate-tpa_input" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_gyro_main_lpf_hz_help"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th data-i18n="pidTuning_MatrixFilterMinFrequency"></th> <th data-i18n="pidTuning_MatrixFilterMinFrequency"></th>
<td> <td>
<div class="pidTuning_number"><input data-setting="dynamic_gyro_notch_min_hz" type="number" class="rate-tpa_input" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_MatrixFilterMinFrequencyHelp"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th data-i18n="pidTuning_MatrixFilterQFactor"></th> <th data-i18n="pidTuning_MatrixFilterQFactor"></th>
<td> <td>
<div class="pidTuning_number"><input data-setting="dynamic_gyro_notch_q" type="number" class="rate-tpa_input" /></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 class="helpicon cf_tip" title=""></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th data-i18n="pidTuning_UnicornFilterQFactor"></th> <th data-i18n="pidTuning_UnicornFilterQFactor"></th>
<td> <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> </td>
</tr> </tr>
</tbody> </tbody>
@ -386,8 +394,10 @@
<tr> <tr>
<th data-i18n="pidTuning_dtermLpfCutoffFrequency"></th> <th data-i18n="pidTuning_dtermLpfCutoffFrequency"></th>
<td> <td>
<div class="pidTuning_number"><input data-setting="dterm_lpf_hz" type="number" class="rate-tpa_input" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_dtermLpfCutoffFrequencyHelp"></div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -408,7 +418,9 @@
<tr> <tr>
<th data-i18n="pidTuning_rpm_gyro_min_hz"></th> <th data-i18n="pidTuning_rpm_gyro_min_hz"></th>
<td> <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> </td>
</tr> </tr>
</tbody> </tbody>
@ -425,8 +437,10 @@
<tr> <tr>
<th data-i18n="pidTuning_itermRelaxCutoff"></th> <th data-i18n="pidTuning_itermRelaxCutoff"></th>
<td> <td>
<div class="pidTuning_number"><input type="number" data-setting="mc_iterm_relax_cutoff" class="rate-tpa_input" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_itermRelaxCutoffHelp"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -450,8 +464,10 @@
<tr> <tr>
<th data-i18n="pidTuning_itermBankAngleFreeze"></th> <th data-i18n="pidTuning_itermBankAngleFreeze"></th>
<td> <td>
<div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="fw_yaw_iterm_freeze_bank_angle" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_itermBankAngleFreezeHelp"></div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -487,8 +503,10 @@
<tr> <tr>
<th data-i18n="pidTuning_d_boost_gyro_delta_lpf_hz"></th> <th data-i18n="pidTuning_d_boost_gyro_delta_lpf_hz"></th>
<td> <td>
<div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="d_boost_gyro_delta_lpf_hz" /></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 class="helpicon cf_tip" data-i18n_title="pidTuning_d_boost_gyro_delta_lpf_hz_help"></div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -502,15 +520,19 @@
<tr> <tr>
<th data-i18n="pidTuning_TPA"></th> <th data-i18n="pidTuning_TPA"></th>
<td> <td>
<div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="tpa_rate" data-unit="percent" /></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 class="helpicon cf_tip" data-i18n_title="pidTuningTPAHelp"></div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<th data-i18n="pidTuning_TPABreakPoint"></th> <th data-i18n="pidTuning_TPABreakPoint"></th>
<td> <td>
<div class="pidTuning_number"><input type="number" class="rate-tpa_input" data-setting="tpa_breakpoint" /></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 class="helpicon cf_tip" data-i18n_title="pidTuningTPABreakPointHelp"></div>
</div>
</td> </td>
</tr> </tr>
</table> </table>

Loading…
Cancel
Save