Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-23 00:05:22 +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;
}
.tab-pid_tuning .tab_container {
background-color: #393b3a;
}
.tab-pid_tuning .tab_container td {
.tab-pid_tuning .tab-container > div {
background-color: #535655;
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 {
background-color: #393b3a;
}

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

@ -264,47 +264,45 @@
border: 1px solid var(--subtleAccent);
}
.tab-pid_tuning .tab_container {
float: left;
width: 408px;
height: 29px;
.tab-pid_tuning .tab-container {
border-bottom: 3px solid var(--accent);
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;
padding-left: 8px;
padding: 0 12px;
border-right: 1px solid white;
}
.tab-pid_tuning .tab_container td:first-child {
border-top-left-radius: 5px;
.tab-pid_tuning .tab-container > div:first-child {
border-top-left-radius: 4px;
}
.tab-pid_tuning .tab_container td:last-child {
border-top-right-radius: 5px;
background-color: #2e2e2e;
.tab-pid_tuning .tab-container > div:last-child {
border-top-right-radius: 4px;
}
.tab-pid_tuning .tab_container td a {
.tab-pid_tuning .tab-container > div a {
display: block;
white-space: nowrap;
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);
color: #000;
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 {
@ -700,26 +698,16 @@
height: fit-content;
}
.tab-pid_tuning .tabboarder {
background-color: var(--accent);
float: left;
width: 100%;
height: 3px;
margin-bottom: 10px;
}
.tabarea {
float: left;
width: calc(100% - 22px);
padding-left: 10px;
position: relative;
padding: 10px;
border: 1px solid var(--subtleAccent);
margin-top: -10px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-top: 0px solid var(--subtleAccent);
background: #f9f9f9;
background: #f9f9f9;
}
.tab-pid_tuning dialog {
@ -921,7 +909,7 @@
}
@media only screen and (max-width: 1405px) {
.tab-pid_tuning .subtab-rates .ratePreview.spacer_left {
width: 100%;
}

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

@ -52,7 +52,7 @@ TABS.pid_tuning.initialize = function (callback) {
});
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() {
@ -112,7 +112,7 @@ TABS.pid_tuning.initialize = function (callback) {
$('.pid_filter input[name="yawLowpassFrequency"]').val(FILTER_CONFIG.yaw_lowpass_hz);
} else {
$('.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();
}
@ -492,9 +492,9 @@ TABS.pid_tuning.initialize = function (callback) {
var cutoff_min = FILTER_DEFAULT.gyro_lowpass_dyn_min_hz;
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) {
cutoff_min = FILTER_CONFIG.gyro_lowpass_dyn_min_hz;
cutoff_min = FILTER_CONFIG.gyro_lowpass_dyn_min_hz;
type = FILTER_CONFIG.gyro_lowpass_type;
}
}
$('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).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 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) {
cutoff_min = FILTER_CONFIG.dterm_lowpass_dyn_min_hz;
cutoff_min = FILTER_CONFIG.dterm_lowpass_dyn_min_hz;
type = FILTER_CONFIG.dterm_lowpass_type;
}
}
$('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val(checked ? cutoff_min : 0).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_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.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);
el[name == subtabName ? 'show' : 'hide']();
}
$('.tab-pid_tuning .tab_container td').removeClass('active');
$('.tab-pid_tuning .tab_container .' + subtabName).addClass('active');
$('.tab-pid_tuning .tab-container .tab').removeClass('active');
$('.tab-pid_tuning .tab-container .' + subtabName).addClass('active');
self.activeSubtab = subtabName;
}
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() {
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
var selectRateProfileValues = loadRateProfilesList();
var selectProfileValues = loadProfilesList();
function populateProfilesSelector(selectProfileValues) {
var profileSelect = $('select[name="profile"]');
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 () {
self.refresh(function () {
self.updating = false;
$('.tab-pid_tuning select[name="profile"]').prop('disabled', 'false');
CONFIG.profile = self.currentProfile;
@ -1062,7 +1062,7 @@ TABS.pid_tuning.initialize = function (callback) {
}
}
checkUpdateDtermTransitionWarning(dtermTransitionNumberElement.val());
//Use 'input' event for coupled controls to allow synchronized update
dtermTransitionNumberElement.on('input', function () {
checkUpdateDtermTransitionWarning($(this).val());
@ -1383,18 +1383,18 @@ TABS.pid_tuning.initialize = function (callback) {
$('.dialogCopyProfile').find('.contentProfile').show();
$('.dialogCopyProfile').find('.contentRateProfile').hide();
dialogCopyProfileMode = DIALOG_MODE_PROFILE;
dialogCopyProfile.showModal();
dialogCopyProfile.showModal();
});
$('.copyrateprofilebtn').click(function() {
$('.dialogCopyProfile').find('.contentProfile').hide();
$('.dialogCopyProfile').find('.contentRateProfile').show();
dialogCopyProfileMode = DIALOG_MODE_RATEPROFILE;
dialogCopyProfile.showModal();
dialogCopyProfile.showModal();
});
$('.dialogCopyProfile-cancelbtn').click(function() {
dialogCopyProfile.close();
dialogCopyProfile.close();
});
$('.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);
break;
case DIALOG_MODE_RATEPROFILE:
COPY_PROFILE.type = DIALOG_MODE_RATEPROFILE; // 1 = rate profile
COPY_PROFILE.dstProfile = parseInt(selectRateProfile.val());
@ -1423,7 +1423,7 @@ TABS.pid_tuning.initialize = function (callback) {
}
function close_dialog() {
dialogCopyProfile.close();
dialogCopyProfile.close();
}
});
} else {
@ -1431,7 +1431,7 @@ TABS.pid_tuning.initialize = function (callback) {
$('.copyrateprofilebtn').hide();
}
if (semver.gte(CONFIG.apiVersion, "1.42.0")) {
if (semver.gte(CONFIG.apiVersion, "1.42.0")) {
// filter and tuning sliders
TuningSliders.initialize();
@ -1698,8 +1698,8 @@ TABS.pid_tuning.initRatesPreview = function () {
this.keepRendering = true;
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.updateRatesLabels, this));
$('.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));
$(window).on('resize', $.proxy(this.model.resize, this.model));
$(window).on('resize', $.proxy(this.updateRatesLabels, this));

35
src/tabs/pid_tuning.html
View file

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