Skip to content

Commit 2bcd8eb

Browse files
haslinghuishaslinghuis
committed
Refactor left panel
1 parent 2601582 commit 2bcd8eb

File tree

5 files changed

+263
-241
lines changed

5 files changed

+263
-241
lines changed

‎locales/en/messages.json‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3779,25 +3779,34 @@
37793779
"message": "Gyro Lowpass Filters"
37803780
},
37813781
"pidTuningGyroLowpassFrequency": {
3782-
"message": "Gyro Lowpass 1 Static Cutoff Frequency [Hz]"
3782+
"message": "Cutoff Frequency [Hz]"
3783+
},
3784+
"pidTuningGyroLowpass": {
3785+
"message": "Gyro Lowpass 1"
3786+
},
3787+
"pidTuningGyroLowpassMode": {
3788+
"message": "Mode"
37833789
},
37843790
"pidTuningGyroLowpassType": {
37853791
"message": "Gyro Lowpass 1 Filter Type"
37863792
},
37873793
"pidTuningGyroLowpassDynMinFrequency": {
3788-
"message": "Gyro Lowpass 1 Dynamic Min Cutoff Frequency [Hz]"
3794+
"message": "Min Cutoff Frequency [Hz]"
37893795
},
37903796
"pidTuningGyroLowpassDynMaxFrequency": {
3791-
"message": "Gyro Lowpass 1 Dynamic Max Cutoff Frequency [Hz]"
3797+
"message": "Max Cutoff Frequency [Hz]"
37923798
},
37933799
"pidTuningGyroLowpassDynType": {
3794-
"message": "Gyro Lowpass 1 Dynamic Filter Type"
3800+
"message": "Filter Type"
3801+
},
3802+
"pidTuningGyroLowpass2": {
3803+
"message": "Gyro Lowpass 2"
37953804
},
37963805
"pidTuningGyroLowpass2Frequency": {
3797-
"message": "Gyro Lowpass 2 Static Cutoff Frequency [Hz]"
3806+
"message": "Cutoff Frequency [Hz]"
37983807
},
37993808
"pidTuningGyroLowpass2Type": {
3800-
"message": "Gyro Lowpass 2 Filter Type"
3809+
"message": "Filter Type"
38013810
},
38023811
"pidTuningGyroLowpassFilterHelp": {
38033812
"message": "Gyro lowpass filters attenuate higher frequency noise to keep it out of the PID loop. There are two independently configurable gyro filters; by default both are active.<br /><br />The first D lowpass can be static (fixed cutoff) or dynamic; the second D lowpass is always static. When a lowpass is in dynamic mode, filter will be stronger at low throttle, and the cutoff will go higher (less filtering) as throttle increases.<br /><br />Without RPM filtering, both PT1 filters should be enabled at default (or stronger) cutoffs, with lowpass 1 in dynamic mode.<br /><br />With RPM filtering, the gyro filter slider can often be moved some way to the right. On clean quads it can go all the way right, or alternatively a single static gyro lowpass filter at 500hz may be sufficient.<br /><br />A quad will have less propwash with the least gyro filter delay (sliders to the right, higher cutoff values).<br /><br />Always check for motor heat when shifting to less gyro filtering (sliders to the right). With minimal gyro filtering, it is essential to have enough D filtering! Take care!"
@@ -3808,6 +3817,12 @@
38083817
"pidTuningGyroNotchFiltersGroup": {
38093818
"message": "Gyro Notch Filters"
38103819
},
3820+
"pidTuningGyroNotchFilter": {
3821+
"message": "Gyro Notch Filter 1"
3822+
},
3823+
"pidTuningGyroNotchFilter2": {
3824+
"message": "Gyro Notch Filter 2"
3825+
},
38113826
"pidTuningGyroNotch1Frequency": {
38123827
"message": "Gyro Notch Filter 1 Center Frequency [Hz]"
38133828
},
@@ -3898,6 +3913,12 @@
38983913
"pidTuningFilterSettings": {
38993914
"message": "Profile dependent Filter Settings"
39003915
},
3916+
"pidTuningLowPassStatic": {
3917+
"message": "STATIC"
3918+
},
3919+
"pidTuningLowPassDynamic": {
3920+
"message": "DYN"
3921+
},
39013922
"pidTuningDTermLowpassFiltersGroup": {
39023923
"message": "D Term Lowpass Filters"
39033924
},

‎src/css/tabs/pid_tuning.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -909,10 +909,6 @@
909909
table-layout: auto;
910910
}
911911

912-
.tab-pid_tuning table.filterTable td:first-child {
913-
width: 25%;
914-
}
915-
916912
@media only screen and (max-width: 1205px) {
917913

918914
.tab-pid_tuning .subtab-pid .spacer_left {

‎src/js/TuningSliders.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -451,17 +451,18 @@ TuningSliders.updateFilterSlidersDisplay = function() {
451451
Math.floor(this.FILTER_DEFAULT.gyro_lowpass_hz * this.sliderGyroFilterMultiplier);
452452
const lp2Changed = parseInt($('.pid_filter input[name="gyroLowpass2Frequency"]').val()) !==
453453
Math.floor(this.FILTER_DEFAULT.gyro_lowpass2_hz * this.sliderGyroFilterMultiplier);
454-
const lp1Enabled = parseInt($('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val());
455-
const lp1StaticEnabled = parseInt($('.pid_filter input[name="gyroLowpassFrequency"]').val());
456-
const lp2Enabled = parseInt($('.pid_filter input[name="gyroLowpass2Frequency"]').val());
454+
455+
const lp1DynamicEnabled = parseInt($('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val()) > 0;
456+
const lp1StaticEnabled = parseInt($('.pid_filter input[name="gyroLowpassFrequency"]').val()) > 0;
457+
const lp2Enabled = parseInt($('.pid_filter input[name="gyroLowpass2Frequency"]').val()) > 0;
457458

458459
const lpDynMaxChanged = parseInt($('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').val()) !==
459460
Math.floor(this.FILTER_DEFAULT.gyro_lowpass_dyn_max_hz * this.sliderGyroFilterMultiplier);
460461
const lpfDynTypeChanged = parseInt($('.pid_filter select[name="gyroLowpassDynType"]').val()) !== this.FILTER_DEFAULT.gyro_lowpass_type;
461462
const lp2TypeChanged = parseInt($('.pid_filter select[name="gyroLowpass2Type"]').val()) !== this.FILTER_DEFAULT.gyro_lowpass2_type;
462463

463464
const lpxChanged = lp1Changed && lp1StaticChanged && lp2Changed;
464-
const lpxDisabled = !(lp1Enabled || lp1StaticEnabled || lp2Enabled);
465+
const lpxDisabled = !(lp1DynamicEnabled || lp1StaticEnabled || lp2Enabled);
465466

466467
const lpxOffAndChanged = lpxChanged && lpxDisabled;
467468

@@ -480,7 +481,7 @@ TuningSliders.updateFilterSlidersDisplay = function() {
480481
const dlp2Changed = parseInt($('.pid_filter input[name="dtermLowpass2Frequency"]').val()) !==
481482
Math.floor(this.FILTER_DEFAULT.dterm_lowpass2_hz * this.sliderDTermFilterMultiplier);
482483

483-
const dlp1Enabled = parseInt($('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val());
484+
const dlp1DynamicEnabled = parseInt($('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val());
484485
const dlp1StaticEnabled = parseInt($('.pid_filter input[name="dtermLowpassFrequency"]').val());
485486
const dlp2Enabled = parseInt($('.pid_filter input[name="dtermLowpass2Frequency"]').val());
486487

@@ -490,7 +491,7 @@ TuningSliders.updateFilterSlidersDisplay = function() {
490491
const dlp2TypeChanged = parseInt($('.pid_filter select[name="dtermLowpass2Type"]').val()) !== this.FILTER_DEFAULT.dterm_lowpass2_type;
491492

492493
const dlpxChanged = dlp1Changed && dlp1StaticChanged && dlp2Changed;
493-
const dlpxDisabled = !(dlp1Enabled || dlp1StaticEnabled || dlp2Enabled);
494+
const dlpxDisabled = !(dlp1DynamicEnabled || dlp1StaticEnabled || dlp2Enabled);
494495
const dlpxOffAndChanged = dlpxChanged && dlpxDisabled;
495496

496497
if ((dlp1Changed || dlp1StaticChanged || dlpDynMaxChanged || dlpDynTypeChanged || dlp2Changed || dlp2TypeChanged) && dlpxOffAndChanged) {

‎src/js/tabs/pid_tuning.js‎

Lines changed: 90 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -680,6 +680,8 @@ TABS.pid_tuning.initialize = function (callback) {
680680
$('.pid_filter input[name="gyroNotch1Frequency"]').val(checked ? hz : 0).attr('disabled', !checked)
681681
.attr("min", checked ? 1 : 0).change();
682682
$('.pid_filter input[name="gyroNotch1Cutoff"]').attr('disabled', !checked).change();
683+
684+
$('.gyroNotch1 span.suboption').toggle(checked);
683685
});
684686

685687
$('input[id="gyroNotch2Enabled"]').change(function() {
@@ -689,6 +691,8 @@ TABS.pid_tuning.initialize = function (callback) {
689691
$('.pid_filter input[name="gyroNotch2Frequency"]').val(checked ? hz : 0).attr('disabled', !checked)
690692
.attr("min", checked ? 1 : 0).change();
691693
$('.pid_filter input[name="gyroNotch2Cutoff"]').attr('disabled', !checked).change();
694+
695+
$('.gyroNotch2 span.suboption').toggle(checked);
692696
});
693697

694698
$('input[id="dtermNotchEnabled"]').change(function() {
@@ -701,67 +705,109 @@ TABS.pid_tuning.initialize = function (callback) {
701705
});
702706

703707
// gyro filter values
704-
$('input[id="gyroLowpassEnabled"]').change(function() {
705-
const checked = $(this).is(':checked');
706-
const disabledByDynamicLowpass = $('input[id="gyroLowpassDynEnabled"]').is(':checked');
707708

708-
const cutoff = FC.FILTER_CONFIG.gyro_lowpass_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass_hz : FILTER_DEFAULT.gyro_lowpass_hz;
709-
const type = FC.FILTER_CONFIG.gyro_lowpass_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass_type : FILTER_DEFAULT.gyro_lowpass_type;
709+
const gyroLowpassDynMinFrequency = $('.pid_filter input[name="gyroLowpassDynMinFrequency"]');
710+
const gyroLowpassDynMaxFrequency = $('.pid_filter input[name="gyroLowpassDynMaxFrequency"]');
711+
const gyroLowpassDynType = $('.pid_filter select[name="gyroLowpassDynType"]');
710712

711-
$('.pid_filter input[name="gyroLowpassFrequency"]').val((checked || disabledByDynamicLowpass) ? cutoff : 0).attr('disabled', !checked);
712-
$('.pid_filter select[name="gyroLowpassType"]').val(type).attr('disabled', !checked);
713+
const gyroLowpassDynEnabled = $('.pid_filter .gyroLowpass .suboption.gyroLowpassDyn');
714+
const gyroLowpassStaticEnabled = $('.pid_filter .gyroLowpass .suboption.gyroLowpass');
715+
const gyroLowpassModeEnabled = $('.pid_filter .gyroLowpass .suboption.gyroLowpassMode');
713716

714-
if (checked) {
715-
$('input[id="gyroLowpassDynEnabled"]').prop('checked', false).change();
716-
}
717-
self.updateFilterWarning();
717+
const gyroLowpassMode = $('.pid_filter select[name="gyroLowpassMode"]');
718+
719+
const gyroLowpassEnabled = $('input[id="gyroLowpassEnabled"]');
720+
const gyroLowpassFrequency = $('.pid_filter input[name="gyroLowpassFrequency"]');
721+
const gyroLowpassType = $('.pid_filter select[name="gyroLowpassType"]');
722+
723+
const gyroLowpass2Option = $('.pid_filter .gyroLowpass2 .suboption');
724+
const gyroLowpass2Enabled = $('input[id="gyroLowpass2Enabled"]');
725+
const gyroLowpass2Frequency = $('.pid_filter input[name="gyroLowpass2Frequency"]');
726+
const gyroLowpass2Type = $('.pid_filter select[name="gyroLowpass2Type"]');
727+
728+
// set initial lpf1 UI
729+
const glpfDynamicEnabled = parseInt(gyroLowpassDynMinFrequency.val()) > 0;
730+
const glpfStaticEnabled = !glpfDynamicEnabled;
731+
const glpfEnabled = glpfDynamicEnabled || parseInt(gyroLowpassFrequency.val()) > 0;
732+
733+
gyroLowpassModeEnabled.toggle(glpfEnabled); // shows gyro lpf1 fields when glpf1 is active
734+
gyroLowpassDynEnabled.toggle(!glpfDynamicEnabled); // shows dynamic lpf1 sub-fields
735+
gyroLowpassStaticEnabled.toggle(!glpfStaticEnabled); // shows static lpf1 sub-fields
736+
737+
// initialise gyroLowpassMode, 1 = dynamic, 2 = static
738+
const lpf1InitialMode = parseInt(gyroLowpassDynMinFrequency.val()) > 0 ? 1 : 2;
739+
gyroLowpassMode.val(lpf1InitialMode).change();
740+
741+
// change gyro lpf1 mode (dynamic or static)
742+
gyroLowpassMode.on('change', function() {
743+
const modeDynamic = gyroLowpassMode.val() == 1; // true in dynamic mode
744+
745+
gyroLowpassDynEnabled.toggle(modeDynamic);
746+
gyroLowpassStaticEnabled.toggle(!modeDynamic);
718747
});
719748

720-
$('input[id="gyroLowpassDynEnabled"]').change(function() {
749+
// this is not working yet - second add check if switch is disabled before changing mode.
750+
const setMode = parseInt(gyroLowpassDynMinFrequency.val()) === 0 ? 1 : 2;
751+
console.log('Setting mode', setMode);
752+
gyroLowpassMode.val(setMode).change();
753+
754+
// switch gyro lpf1
755+
gyroLowpassEnabled.change(function() {
721756
const checked = $(this).is(':checked');
722-
let cutoffMin = FILTER_DEFAULT.gyro_lowpass_dyn_min_hz;
723-
const cutoffMax = FC.FILTER_CONFIG.gyro_lowpass_dyn_max_hz;
724-
let type = FILTER_DEFAULT.gyro_lowpass_type;
725-
if (FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz > 0 && FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz < FC.FILTER_CONFIG.gyro_lowpass_dyn_max_hz) {
726-
cutoffMin = FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz;
727-
type = FC.FILTER_CONFIG.gyro_lowpass_type;
757+
const mode = gyroLowpassMode.val();
758+
759+
const lp1DynamicEnabled = parseInt(gyroLowpassDynMinFrequency.val()) > 0;
760+
const lp1StaticEnabled = !lp1DynamicEnabled;
761+
762+
// update UI
763+
gyroLowpassMode.toggle(checked);
764+
gyroLowpassDynEnabled.toggle(lp1DynamicEnabled && checked);
765+
gyroLowpassStaticEnabled.toggle(lp1StaticEnabled && checked);
766+
767+
// static lpf1
768+
if (mode === 1) {
769+
const cutoff = FC.FILTER_CONFIG.gyro_lowpass_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass_hz : FILTER_DEFAULT.gyro_lowpass_hz;
770+
const type = FC.FILTER_CONFIG.gyro_lowpass_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass_type : FILTER_DEFAULT.gyro_lowpass_type;
771+
772+
gyroLowpassFrequency.val((checked) ? cutoff : 0).attr('disabled', !checked);
773+
gyroLowpassType.val(type).attr('disabled', !checked);
774+
}
775+
// dynamic lpf1
776+
if (mode === 2) {
777+
let cutoffMin = FILTER_DEFAULT.gyro_lowpass_dyn_min_hz;
778+
const cutoffMax = FC.FILTER_CONFIG.gyro_lowpass_dyn_max_hz;
779+
let type = FILTER_DEFAULT.gyro_lowpass_type;
780+
if (FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz > 0 && FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz < FC.FILTER_CONFIG.gyro_lowpass_dyn_max_hz) {
781+
cutoffMin = FC.FILTER_CONFIG.gyro_lowpass_dyn_min_hz;
782+
type = FC.FILTER_CONFIG.gyro_lowpass_type;
783+
}
784+
gyroLowpassDynMinFrequency.val(checked ? cutoffMin : 0).attr('disabled', !checked);
785+
gyroLowpassDynMaxFrequency.val(checked ? cutoffMax : 0).attr('disabled', !checked);
786+
gyroLowpassDynMaxFrequency.attr('disabled', !checked);
787+
gyroLowpassDynType.val(type).attr('disabled', !checked);
728788
}
729789

730-
$('.pid_filter input[name="gyroLowpassDynMinFrequency"]').val(checked ? cutoffMin : 0).attr('disabled', !checked);
731-
$('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').val(checked ? cutoffMax : 0).attr('disabled', !checked);
732-
$('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').attr('disabled', !checked);
733-
$('.pid_filter select[name="gyroLowpassDynType"]').val(type).attr('disabled', !checked);
734-
735-
if (checked) {
736-
$('input[id="gyroLowpassEnabled"]').prop('checked', false).change();
737-
} else if (FC.FILTER_CONFIG.gyro_lowpass_hz > 0 && !$('input[id="gyroLowpassEnabled"]').is(':checked')) {
738-
$('input[id="gyroLowpassEnabled"]').prop('checked', true).change();
739-
}
740790
self.updateFilterWarning();
741791
});
742792

743-
$('input[id="gyroLowpass2Enabled"]').change(function() {
793+
// switch gyro lpf2
794+
gyroLowpass2Enabled.change(function() {
744795
const checked = $(this).is(':checked');
745796
const cutoff = FC.FILTER_CONFIG.gyro_lowpass2_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass2_hz : FILTER_DEFAULT.gyro_lowpass2_hz;
746797
const type = FC.FILTER_CONFIG.gyro_lowpass2_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass2_type : FILTER_DEFAULT.gyro_lowpass2_type;
747-
const gyroLowpass2Frequency = $('.pid_filter input[name="gyroLowpass2Frequency"]');
748798

749-
gyroLowpass2Frequency.attr('disabled', !checked);
799+
gyroLowpass2Frequency.val(checked ? cutoff : 0).attr('disabled', !checked).attr("min", checked ? 1 : 0).change();
800+
gyroLowpass2Type.val(type).attr('disabled', !checked).change();
801+
gyroLowpass2Option.toggle(checked);
750802

751-
// conditional ternary operator does somehow not work when setting val here so we have to write it like this to set value to 0 instead of 1
752-
if (checked) {
753-
gyroLowpass2Frequency.val(cutoff);
754-
} else {
755-
gyroLowpass2Frequency.val(0);
756-
}
757-
758-
$('.pid_filter select[name="gyroLowpass2Type"]').val(type).attr('disabled', !checked);
803+
self.updateFilterWarning();
759804
});
760805

761-
$('.pid_filter input[name="gyroLowpassDynMinFrequency"]').on('input', () => $('input[id="gyroLowpassDynEnabled"]').prop('checked', false).trigger('change'));
762-
$('.pid_filter input[name="gyroLowpassDynMaxFrequency"]').on('input', () => $('input[id="gyroLowpassDynEnabled"]').prop('checked', false).trigger('change'));
763-
$('.pid_filter input[name="gyroLowpassFrequency"]').on('input', () => $('input[id="gyroLowpassEnabled"]').prop('checked', false).trigger('change'));
764-
$('.pid_filter input[name="gyroLowpass2Frequency"]').on('input', () => $('input[id="gyroLowpass2Enabled"]').prop('checked', false).trigger('change'));
806+
// Disable switch on manual input
807+
gyroLowpassDynMinFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
808+
gyroLowpassDynMaxFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
809+
gyroLowpassFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
810+
gyroLowpass2Frequency.on('input', () => gyroLowpass2Enabled.prop('checked', false).trigger('change'));
765811

766812
// dterm filter values
767813
$('input[id="dtermLowpassEnabled"]').change(function() {
@@ -771,7 +817,7 @@ TABS.pid_tuning.initialize = function (callback) {
771817
const cutoff = FC.FILTER_CONFIG.dterm_lowpass_hz > 0 ? FC.FILTER_CONFIG.dterm_lowpass_hz : FILTER_DEFAULT.dterm_lowpass_hz;
772818
const type = FC.FILTER_CONFIG.dterm_lowpass_hz > 0 ? FC.FILTER_CONFIG.dterm_lowpass_type : FILTER_DEFAULT.dterm_lowpass_type;
773819

774-
$('.pid_filter input[name="dtermLowpassFrequency"]').val((checked /*|| disabledByDynamicLowpass*/) ? cutoff : 0);
820+
$('.pid_filter input[name="dtermLowpassFrequency"]').val((checked || disabledByDynamicLowpass) ? cutoff : 0);
775821
$('.pid_filter input[name="dtermLowpassFrequency"]').attr('disabled', !checked);
776822
$('.pid_filter select[name="dtermLowpassType"]').val(type).attr('disabled', !checked);
777823

@@ -802,7 +848,6 @@ TABS.pid_tuning.initialize = function (callback) {
802848
$('.pid_filter input[name="dtermLowpassDynMinFrequency"]').val(checked ? cutoffMin : 0);
803849
$('.pid_filter input[name="dtermLowpassDynMaxFrequency"]').val(checked ? cutoffMax : 0);
804850

805-
// conditional ternary operator does somehow not work when setting val here so we have to write it like this to set value to 0 instead of 1
806851
if (checked) {
807852
$('input[id="dtermLowpassEnabled"]').prop('checked', false).change();
808853
} else if (FC.FILTER_CONFIG.dterm_lowpass_hz > 0 && !$('input[id="dtermLowpassEnabled"]').is(':checked')) {

0 commit comments

Comments
 (0)