Skip to content

Commit a8641d7

Browse files
haslinghuishaslinghuis
committed
Refactor left panel
1 parent 2601582 commit a8641d7

File tree

5 files changed

+260
-233
lines changed

5 files changed

+260
-233
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: 87 additions & 37 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,50 +705,91 @@ 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 gyroLowpass2Enabled = $('.pid_filter .gyroLowpass2 .suboption');
724+
const gyroLowpass2Frequency = $('.pid_filter input[name="gyroLowpass2Frequency"]');
725+
const gyroLowpass2Type = $('.pid_filter select[name="gyroLowpass2Type"]');
726+
727+
// set initial lpf1 UI
728+
const glpfDynamicEnabled = parseInt(gyroLowpassDynMinFrequency.val()) > 0;
729+
const glpfStaticEnabled = !glpfDynamicEnabled;
730+
const glpfEnabled = glpfDynamicEnabled || glpfStaticEnabled;
731+
732+
gyroLowpassModeEnabled.toggle(glpfEnabled);
733+
gyroLowpassDynEnabled.toggle(!glpfDynamicEnabled);
734+
gyroLowpassStaticEnabled.toggle(!glpfStaticEnabled);
735+
736+
// change gyro lpf1 mode (dynamic or static)
737+
gyroLowpassMode.on('change', function() {
738+
const mode = parseInt($(this).val());
739+
console.log('Set Gyro lpf1 mode to', mode);
740+
// gyroLowpassDynEnabled.toggle(mode === 1);
741+
// gyroLowpassStaticEnabled.toggle(mode === 2);
742+
gyroLowpassEnabled.change();
718743
});
719744

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

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-
}
740786
self.updateFilterWarning();
741787
});
742788

743-
$('input[id="gyroLowpass2Enabled"]').change(function() {
789+
gyroLowpass2Enabled.change(function() {
744790
const checked = $(this).is(':checked');
745791
const cutoff = FC.FILTER_CONFIG.gyro_lowpass2_hz > 0 ? FC.FILTER_CONFIG.gyro_lowpass2_hz : FILTER_DEFAULT.gyro_lowpass2_hz;
746792
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"]');
748793

749794
gyroLowpass2Frequency.attr('disabled', !checked);
750795

@@ -755,13 +800,19 @@ TABS.pid_tuning.initialize = function (callback) {
755800
gyroLowpass2Frequency.val(0);
756801
}
757802

758-
$('.pid_filter select[name="gyroLowpass2Type"]').val(type).attr('disabled', !checked);
803+
const lp2Enabled = parseInt(gyroLowpass2Frequency.val()) > 0;
804+
805+
gyroLowpass2Enabled.toggle(lp2Enabled);
806+
gyroLowpass2Type.val(type).attr('disabled', !checked);
807+
808+
self.updateFilterWarning();
759809
});
760810

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'));
811+
// this needs rework
812+
gyroLowpassDynMinFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
813+
gyroLowpassDynMaxFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
814+
gyroLowpassFrequency.on('input', () => gyroLowpassEnabled.prop('checked', false).trigger('change'));
815+
gyroLowpass2Frequency.on('input', () => gyroLowpass2Enabled.prop('checked', false).trigger('change'));
765816

766817
// dterm filter values
767818
$('input[id="dtermLowpassEnabled"]').change(function() {
@@ -771,7 +822,7 @@ TABS.pid_tuning.initialize = function (callback) {
771822
const cutoff = FC.FILTER_CONFIG.dterm_lowpass_hz > 0 ? FC.FILTER_CONFIG.dterm_lowpass_hz : FILTER_DEFAULT.dterm_lowpass_hz;
772823
const type = FC.FILTER_CONFIG.dterm_lowpass_hz > 0 ? FC.FILTER_CONFIG.dterm_lowpass_type : FILTER_DEFAULT.dterm_lowpass_type;
773824

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

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

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
806856
if (checked) {
807857
$('input[id="dtermLowpassEnabled"]').prop('checked', false).change();
808858
} else if (FC.FILTER_CONFIG.dterm_lowpass_hz > 0 && !$('input[id="dtermLowpassEnabled"]').is(':checked')) {

0 commit comments

Comments
 (0)