mirror of
https://github.com/iNavFlight/inav-configurator.git
synced 2025-07-17 21:35:30 +03:00
Universal Sliders for Settings framework
This commit is contained in:
parent
611b5895ec
commit
1d3ceacb14
3 changed files with 135 additions and 21 deletions
|
@ -58,3 +58,9 @@ function generateFilename(prefix, suffix) {
|
||||||
|
|
||||||
return filename + '.' + suffix;
|
return filename + '.' + suffix;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function scaleRangeInt(x, srcMin, srcMax, destMin, destMax) {
|
||||||
|
let a = (destMax - destMin) * (x - srcMin);
|
||||||
|
let b = srcMax - srcMin;
|
||||||
|
return Math.round((a / b) + destMin);
|
||||||
|
}
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -258,28 +258,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>
|
||||||
|
@ -294,8 +302,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>
|
||||||
|
@ -316,7 +326,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>
|
||||||
|
@ -333,8 +345,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>
|
||||||
|
@ -358,8 +372,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>
|
||||||
|
@ -395,8 +411,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>
|
||||||
|
@ -410,15 +428,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…
Add table
Add a link
Reference in a new issue