Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-25 09:15:49 +03:00
Code Issues Wiki Activity

Refactor pid-tuning -> tabs

Browse source
This commit is contained in:
Anisotropic 2019-10-04 18:39:33 +03:00
parent aa47d04fdb
commit af68114367
4 changed files with 63 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/css/tabs-dark/pid_tuning-dark.css
View file

@ -56,29 +56,11 @@
color: white; color: white;
} }
.tab-pid_tuning .tab_container { .tab-pid_tuning .tab-container > div {
background-color: #393b3a;
}
.tab-pid_tuning .tab_container td {
background-color: #535655; background-color: #535655;
border-right: 1px solid #393b3a; border-right: 1px solid #393b3a;
} }
.tab-pid_tuning .tab_container td:last-child {
background-color: #535655;
}
.tab-pid_tuning .tab_container td.active {
background-color: #ffbb2a;
color: black;
}
.tab-pid_tuning .tab_container td.active a {
background-color: #ffbb2a;
color: black;
}
.fancy.header { .fancy.header {
background-color: #393b3a; background-color: #393b3a;
} }

60
src/css/tabs/pid_tuning.css
View file

@ -264,47 +264,45 @@
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
} }
.tab-pid_tuning .tab_container { .tab-pid_tuning .tab-container {
float: left; border-bottom: 3px solid var(--accent);
width: 408px;
height: 29px;
border-right-width: 0px; border-right-width: 0px;
background: #fff; display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 29px;
justify-content: start;
width: 100%;
} }
.tab-pid_tuning .tab_container td { .tab-pid_tuning .tab-container > div {
display: flex;
justify-content: center;
align-items: center;
background-color: #2e2e2e; background-color: #2e2e2e;
padding-left: 8px; padding: 0 12px;
border-right: 1px solid white; border-right: 1px solid white;
} }
.tab-pid_tuning .tab_container td:first-child { .tab-pid_tuning .tab-container > div:first-child {
border-top-left-radius: 5px; border-top-left-radius: 4px;
} }
.tab-pid_tuning .tab_container td:last-child { .tab-pid_tuning .tab-container > div:last-child {
border-top-right-radius: 5px; border-top-right-radius: 4px;
background-color: #2e2e2e;
} }
.tab-pid_tuning .tab_container td a { .tab-pid_tuning .tab-container > div a {
display: block;
white-space: nowrap;
color: #999999; color: #999999;
} }
.tab-pid_tuning .tab_container td.active { .tab-pid_tuning .tab-container > div.active,
.tab-pid_tuning .tab-container > div.active a {
background-color: var(--accent); background-color: var(--accent);
color: #000; color: #000;
transition: none; transition: none;
height: 27px;
padding-left: 8px;
}
.tab-pid_tuning .tab_container td.active a {
background-color: var(--accent);
color: #000;
text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
} }
.tab-pid_tuning .single-field { .tab-pid_tuning .single-field {
@ -700,26 +698,16 @@
height: fit-content; height: fit-content;
} }
.tab-pid_tuning .tabboarder {
background-color: var(--accent);
float: left;
width: 100%;
height: 3px;
margin-bottom: 10px;
}
.tabarea { .tabarea {
float: left;
width: calc(100% - 22px); width: calc(100% - 22px);
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
padding: 10px; padding: 10px;
border: 1px solid var(--subtleAccent); border: 1px solid var(--subtleAccent);
margin-top: -10px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-top: 0px solid var(--subtleAccent); border-top: 0px solid var(--subtleAccent);
background: #f9f9f9; background: #f9f9f9;
} }
.tab-pid_tuning dialog { .tab-pid_tuning dialog {
@ -921,7 +909,7 @@
} }
@media only screen and (max-width: 1405px) { @media only screen and (max-width: 1405px) {
.tab-pid_tuning .subtab-rates .ratePreview.spacer_left { .tab-pid_tuning .subtab-rates .ratePreview.spacer_left {
width: 100%; width: 100%;
} }

46
src/js/tabs/pid_tuning.js
View file

@ -52,7 +52,7 @@ TABS.pid_tuning.initialize = function (callback) {
}); });
function load_html() { function load_html() {
$('#content').load("./tabs/pid_tuning.html", process_html); $('#content').load("./tabs/pid_tuning.html", process_html);
} }
function pid_and_rc_to_form() { function pid_and_rc_to_form() {
@ -112,7 +112,7 @@ TABS.pid_tuning.initialize = function (callback) {
$('.pid_filter input[name="yawLowpassFrequency"]').val(FILTER_CONFIG.yaw_lowpass_hz); $('.pid_filter input[name="yawLowpassFrequency"]').val(FILTER_CONFIG.yaw_lowpass_hz);
} else { } else {
$('.tab-pid_tuning .subtab-filter').hide(); $('.tab-pid_tuning .subtab-filter').hide();
$('.tab-pid_tuning .tab_container').hide(); $('.tab-pid_tuning .tab-container').hide();
$('.pid_tuning input[name="rc_rate_yaw"]').hide(); $('.pid_tuning input[name="rc_rate_yaw"]').hide();
} }
@ -492,9 +492,9 @@ TABS.pid_tuning.initialize = function (callback) {
var cutoff_min = FILTER_DEFAULT.gyro_lowpass_dyn_min_hz; var cutoff_min = FILTER_DEFAULT.gyro_lowpass_dyn_min_hz;
var type = FILTER_DEFAULT.gyro_lowpass_type; var type = FILTER_DEFAULT.gyro_lowpass_type;
if (FILTER_CONFIG.gyro_lowpass_dyn_min_hz > 0 && FILTER_CONFIG.gyro_lowpass_dyn_min_hz < FILTER_CONFIG.gyro_lowpass_dyn_max_hz) { if (FILTER_CONFIG.gyro_lowpass_dyn_min_hz > 0 && FILTER_CONFIG.gyro_lowpass_dyn_min_hz < FILTER_CONFIG.gyro_lowpass_dyn_max_hz) {
cutoff_min = FILTER_CONFIG.gyro_lowpass_dyn_min_hz; cutoff_min = FILTER_CONFIG.gyro_lowpass_dyn_min_hz;
type = FILTER_CONFIG.gyro_lowpass_type; type = FILTER_CONFIG.gyro_lowpass_type;
} }
$('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).attr('disabled', !checked); $('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).attr('disabled', !checked);
$('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').attr('disabled', !checked); $('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').attr('disabled', !checked);
@ -538,9 +538,9 @@ TABS.pid_tuning.initialize = function (callback) {
var cutoff_min = FILTER_DEFAULT.dterm_lowpass_dyn_min_hz; var cutoff_min = FILTER_DEFAULT.dterm_lowpass_dyn_min_hz;
var type = FILTER_DEFAULT.dterm_lowpass_type; var type = FILTER_DEFAULT.dterm_lowpass_type;
if (FILTER_CONFIG.dterm_lowpass_dyn_min_hz > 0 && FILTER_CONFIG.dterm_lowpass_dyn_min_hz < FILTER_CONFIG.dterm_lowpass_dyn_max_hz) { if (FILTER_CONFIG.dterm_lowpass_dyn_min_hz > 0 && FILTER_CONFIG.dterm_lowpass_dyn_min_hz < FILTER_CONFIG.dterm_lowpass_dyn_max_hz) {
cutoff_min = FILTER_CONFIG.dterm_lowpass_dyn_min_hz; cutoff_min = FILTER_CONFIG.dterm_lowpass_dyn_min_hz;
type = FILTER_CONFIG.dterm_lowpass_type; type = FILTER_CONFIG.dterm_lowpass_type;
} }
$('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).attr('disabled', !checked); $('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).attr('disabled', !checked);
$('.pid_filter input[name="dtermLowpassDynMaxFrequency"]').attr('disabled', !checked); $('.pid_filter input[name="dtermLowpassDynMaxFrequency"]').attr('disabled', !checked);
@ -643,7 +643,7 @@ TABS.pid_tuning.initialize = function (callback) {
RC_tuning.dynamic_THR_PID = parseFloat($('.tpa input[name="tpa"]').val()); RC_tuning.dynamic_THR_PID = parseFloat($('.tpa input[name="tpa"]').val());
RC_tuning.dynamic_THR_breakpoint = parseInt($('.tpa input[name="tpa-breakpoint"]').val()); RC_tuning.dynamic_THR_breakpoint = parseInt($('.tpa input[name="tpa-breakpoint"]').val());
FILTER_CONFIG.gyro_lowpass_hz = parseInt($('.pid_filter input[name="gyroLowpassFrequency"]').val()); FILTER_CONFIG.gyro_lowpass_hz = parseInt($('.pid_filter input[name="gyroLowpassFrequency"]').val());
FILTER_CONFIG.dterm_lowpass_hz = parseInt($('.pid_filter input[name="dtermLowpassFrequency"]').val()); FILTER_CONFIG.dterm_lowpass_hz = parseInt($('.pid_filter input[name="dtermLowpassFrequency"]').val());
FILTER_CONFIG.yaw_lowpass_hz = parseInt($('.pid_filter input[name="yawLowpassFrequency"]').val()); FILTER_CONFIG.yaw_lowpass_hz = parseInt($('.pid_filter input[name="yawLowpassFrequency"]').val());
@ -922,18 +922,18 @@ TABS.pid_tuning.initialize = function (callback) {
const el = $('.tab-pid_tuning .subtab-' + name); const el = $('.tab-pid_tuning .subtab-' + name);
el[name == subtabName ? 'show' : 'hide'](); el[name == subtabName ? 'show' : 'hide']();
} }
$('.tab-pid_tuning .tab_container td').removeClass('active'); $('.tab-pid_tuning .tab-container .tab').removeClass('active');
$('.tab-pid_tuning .tab_container .' + subtabName).addClass('active'); $('.tab-pid_tuning .tab-container .' + subtabName).addClass('active');
self.activeSubtab = subtabName; self.activeSubtab = subtabName;
} }
activateSubtab(self.activeSubtab); activateSubtab(self.activeSubtab);
$('.tab-pid_tuning .tab_container .pid').on('click', () => activateSubtab('pid')); $('.tab-pid_tuning .tab-container .pid').on('click', () => activateSubtab('pid'));
$('.tab-pid_tuning .tab_container .rates').on('click', () => activateSubtab('rates')); $('.tab-pid_tuning .tab-container .rates').on('click', () => activateSubtab('rates'));
$('.tab-pid_tuning .tab_container .filter').on('click', () => activateSubtab('filter')); $('.tab-pid_tuning .tab-container .filter').on('click', () => activateSubtab('filter'));
function loadProfilesList() { function loadProfilesList() {
var numberOfProfiles = 3; var numberOfProfiles = 3;
@ -965,7 +965,7 @@ TABS.pid_tuning.initialize = function (callback) {
// This vars are used here for populate the profile (and rate profile) selector AND in the copy profile (and rate profile) window // This vars are used here for populate the profile (and rate profile) selector AND in the copy profile (and rate profile) window
var selectRateProfileValues = loadRateProfilesList(); var selectRateProfileValues = loadRateProfilesList();
var selectProfileValues = loadProfilesList(); var selectProfileValues = loadProfilesList();
function populateProfilesSelector(selectProfileValues) { function populateProfilesSelector(selectProfileValues) {
var profileSelect = $('select[name="profile"]'); var profileSelect = $('select[name="profile"]');
selectProfileValues.forEach(function(value, key) { selectProfileValues.forEach(function(value, key) {
@ -1025,7 +1025,7 @@ TABS.pid_tuning.initialize = function (callback) {
MSP.promise(MSPCodes.MSP_SELECT_SETTING, [self.currentProfile]).then(function () { MSP.promise(MSPCodes.MSP_SELECT_SETTING, [self.currentProfile]).then(function () {
self.refresh(function () { self.refresh(function () {
self.updating = false; self.updating = false;
$('.tab-pid_tuning select[name="profile"]').prop('disabled', 'false'); $('.tab-pid_tuning select[name="profile"]').prop('disabled', 'false');
CONFIG.profile = self.currentProfile; CONFIG.profile = self.currentProfile;
@ -1062,7 +1062,7 @@ TABS.pid_tuning.initialize = function (callback) {
} }
} }
checkUpdateDtermTransitionWarning(dtermTransitionNumberElement.val()); checkUpdateDtermTransitionWarning(dtermTransitionNumberElement.val());
//Use 'input' event for coupled controls to allow synchronized update //Use 'input' event for coupled controls to allow synchronized update
dtermTransitionNumberElement.on('input', function () { dtermTransitionNumberElement.on('input', function () {
checkUpdateDtermTransitionWarning($(this).val()); checkUpdateDtermTransitionWarning($(this).val());
@ -1383,18 +1383,18 @@ TABS.pid_tuning.initialize = function (callback) {
$('.dialogCopyProfile').find('.contentProfile').show(); $('.dialogCopyProfile').find('.contentProfile').show();
$('.dialogCopyProfile').find('.contentRateProfile').hide(); $('.dialogCopyProfile').find('.contentRateProfile').hide();
dialogCopyProfileMode = DIALOG_MODE_PROFILE; dialogCopyProfileMode = DIALOG_MODE_PROFILE;
dialogCopyProfile.showModal(); dialogCopyProfile.showModal();
}); });
$('.copyrateprofilebtn').click(function() { $('.copyrateprofilebtn').click(function() {
$('.dialogCopyProfile').find('.contentProfile').hide(); $('.dialogCopyProfile').find('.contentProfile').hide();
$('.dialogCopyProfile').find('.contentRateProfile').show(); $('.dialogCopyProfile').find('.contentRateProfile').show();
dialogCopyProfileMode = DIALOG_MODE_RATEPROFILE; dialogCopyProfileMode = DIALOG_MODE_RATEPROFILE;
dialogCopyProfile.showModal(); dialogCopyProfile.showModal();
}); });
$('.dialogCopyProfile-cancelbtn').click(function() { $('.dialogCopyProfile-cancelbtn').click(function() {
dialogCopyProfile.close(); dialogCopyProfile.close();
}); });
$('.dialogCopyProfile-confirmbtn').click(function() { $('.dialogCopyProfile-confirmbtn').click(function() {
@ -1407,7 +1407,7 @@ TABS.pid_tuning.initialize = function (callback) {
MSP.send_message(MSPCodes.MSP_COPY_PROFILE, mspHelper.crunch(MSPCodes.MSP_COPY_PROFILE), false, close_dialog); MSP.send_message(MSPCodes.MSP_COPY_PROFILE, mspHelper.crunch(MSPCodes.MSP_COPY_PROFILE), false, close_dialog);
break; break;
case DIALOG_MODE_RATEPROFILE: case DIALOG_MODE_RATEPROFILE:
COPY_PROFILE.type = DIALOG_MODE_RATEPROFILE; // 1 = rate profile COPY_PROFILE.type = DIALOG_MODE_RATEPROFILE; // 1 = rate profile
COPY_PROFILE.dstProfile = parseInt(selectRateProfile.val()); COPY_PROFILE.dstProfile = parseInt(selectRateProfile.val());
@ -1423,7 +1423,7 @@ TABS.pid_tuning.initialize = function (callback) {
} }
function close_dialog() { function close_dialog() {
dialogCopyProfile.close(); dialogCopyProfile.close();
} }
}); });
} else { } else {
@ -1431,7 +1431,7 @@ TABS.pid_tuning.initialize = function (callback) {
$('.copyrateprofilebtn').hide(); $('.copyrateprofilebtn').hide();
} }
if (semver.gte(CONFIG.apiVersion, "1.42.0")) { if (semver.gte(CONFIG.apiVersion, "1.42.0")) {
// filter and tuning sliders // filter and tuning sliders
TuningSliders.initialize(); TuningSliders.initialize();
@ -1698,8 +1698,8 @@ TABS.pid_tuning.initRatesPreview = function () {
this.keepRendering = true; this.keepRendering = true;
this.model = new Model($('.rates_preview'), $('.rates_preview canvas')); this.model = new Model($('.rates_preview'), $('.rates_preview canvas'));
$('.tab-pid_tuning .tab_container .rates').on('click', $.proxy(this.model.resize, this.model)); $('.tab-pid_tuning .tab-container .rates').on('click', $.proxy(this.model.resize, this.model));
$('.tab-pid_tuning .tab_container .rates').on('click', $.proxy(this.updateRatesLabels, this)); $('.tab-pid_tuning .tab-container .rates').on('click', $.proxy(this.updateRatesLabels, this));
$(window).on('resize', $.proxy(this.model.resize, this.model)); $(window).on('resize', $.proxy(this.model.resize, this.model));
$(window).on('resize', $.proxy(this.updateRatesLabels, this)); $(window).on('resize', $.proxy(this.updateRatesLabels, this));

35
src/tabs/pid_tuning.html
View file

@ -47,22 +47,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab_container"> <div class="tab-container">
<table> <div class="tab pid active">
<tr> <a href="#" i18n="pidTuningSubTabPid" />
<td class="pid active"> </div>
<a href="#" i18n="pidTuningSubTabPid" /> <div class="tab rates">
</td> <a href="#" i18n="pidTuningSubTabRates" />
<td class="rates"> </div>
<a href="#" i18n="pidTuningSubTabRates" /> <div class="tab filter">
</td> <a href="#" i18n="pidTuningSubTabFilter" />
<td class="filter"> </div>
<a href="#" i18n="pidTuningSubTabFilter" />
</td>
</tr>
</table>
</div> </div>
<div class="tabboarder"></div>
<div class="tabarea"> <div class="tabarea">
<form name="pid-tuning" id="pid-tuning"> <form name="pid-tuning" id="pid-tuning">
<div class="subtab-pid"> <div class="subtab-pid">
@ -534,7 +529,7 @@
<span class="suboption"> <span class="suboption">
<select id="itermrelaxType"> <select id="itermrelaxType">
<option i18n="pidTuningItermRelaxTypeOptionGyro" value="0"/> <option i18n="pidTuningItermRelaxTypeOptionGyro" value="0"/>
<option i18n="pidTuningItermRelaxTypeOptionSetpoint" value="1"/> <option i18n="pidTuningItermRelaxTypeOptionSetpoint" value="1"/>
</select> </select>
<label for="itermrelaxType"> <label for="itermrelaxType">
@ -588,7 +583,7 @@
<span i18n="pidTuningAntiGravityMode" /> <span i18n="pidTuningAntiGravityMode" />
</label> </label>
</span> </span>
<span class="suboption"> <span class="suboption">
<input type="number" name="itermAcceleratorGain" step="0.1" min="1.1" max="30" /> <input type="number" name="itermAcceleratorGain" step="0.1" min="1.1" max="30" />
<label for="antiGravityGain"> <label for="antiGravityGain">
@ -1199,7 +1194,7 @@
<div i18n="pidTuningDTermLowpassFiltersGroup" /> <div i18n="pidTuningDTermLowpassFiltersGroup" />
<div class="helpicon cf_tip" i18n_title="pidTuningLowpassFilterHelp" /> <div class="helpicon cf_tip" i18n_title="pidTuningLowpassFilterHelp" />
</div> </div>
</div> </div>
</th> </th>
</tr> </tr>
@ -1316,7 +1311,7 @@
<div i18n="pidTuningDTermNotchFiltersGroup" /> <div i18n="pidTuningDTermNotchFiltersGroup" />
<div class="helpicon cf_tip" i18n_title="pidTuningNotchFilterHelp" /> <div class="helpicon cf_tip" i18n_title="pidTuningNotchFilterHelp" />
</div> </div>
</th> </th>
</tr> </tr>
@ -1407,7 +1402,7 @@
</div> </div>
<div class="buttons"> <div class="buttons">
<a href="#" class="dialogCopyProfile-confirmbtn regular-button" i18n="dialogCopyProfileConfirm"></a> <a href="#" class="dialogCopyProfile-confirmbtn regular-button" i18n="dialogCopyProfileConfirm"></a>
<a href="#" class="dialogCopyProfile-cancelbtn regular-button" i18n="dialogCopyProfileClose"></a> <a href="#" class="dialogCopyProfile-cancelbtn regular-button" i18n="dialogCopyProfileClose"></a>
</div> </div>
</dialog> </dialog>
</div> </div>