Created subtab for PID filters. Added filter setting to PID tuning tab.

Author: mikeller

_locales/en/messages.json

@@ -776,8 +776,11 @@
     "pidTuningUpgradeFirmwareToChangePidController": {
         "message": "<span style=\"color: red\">Changing PID controller disabled - you can change it via the CLI.</span>  You have firmware with API version <span style=\"color: red\">$1</span>, but this functionality requires requires <span style=\"color: #ffbb00\">$2</span>."
     },
-    "pidTuningName": {
-        "message": "Name"
+    "pidTuningSubTabPid": {
+        "message": "PID Settings"
+    },
+    "pidTuningSubTabFilter": {
+        "message": "Filter Settings"
     },
     "pidTuningShowAllPids": {
         "message": "Show all PIDs"
@@ -1623,18 +1626,54 @@
     "pidTuningLevelHelp": {
         "message": "The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the values differently. Please check the documentation."
     },
-    "pidTuningLfpFilters": {
-        "message": "LFP Filters"
-    },
-    "pidTuningGyro": {
-        "message": "Gyro Soft (Hz)"
-    },
-    "pidTuningDTerm": {
-        "message": "D Term (Hz)"
-    },
-    "pidTuningYaw": {
-        "message": "Yaw (Hz)"
-    },
+  "pidTuningNonProfileFilterSettings": {
+    "message": "Profile independent Filter Settings"
+  },
+  "pidTuningGyroLowpassFrequency": {
+    "message": "Gyro Soft Lowpass Frequency (Hz)"
+  },
+  "pidTuningGyroLowpassFrequencyHelp": {
+    "message": "Gyro Soft Lowpass Frequency (Hz)"
+  },
+  "pidTuningGyroNotchFrequency": {
+    "message": "Gyro Notch Filter Frequency (Hz)"
+  },
+  "pidTuningGyroNotchFrequencyHelp": {
+    "message": "Gyro Notch Filter Frequency (Hz)"
+  },
+  "pidTuningGyroNotchCutoff": {
+    "message": "Gyro Notch Filter Cutoff Frequency (Hz)"
+  },
+  "pidTuningGyroNotchCutoffHelp": {
+    "message": "Gyro Notch Filter Cutoff Frequency (Hz)"
+  },
+  "pidTuningFilterSettings": {
+    "message": "Filter Settings"
+  },
+  "pidTuningDTermLowpassFrequency": {
+    "message": "D Term Lowpass Frequency (Hz)"
+  },
+  "pidTuningDTermLowpassFrequencyHelp": {
+    "message": "D Term Lowpass Frequency (Hz)"
+  },
+  "pidTuningDTermNotchFrequency": {
+    "message": "D Term Notch Filter Frequency (Hz)"
+  },
+  "pidTuningDTermNotchFrequencyHelp": {
+    "message": "D Term Notch Filter Frequency (Hz)"
+  },
+  "pidTuningDTermNotchCutoff": {
+    "message": "D Term Notch Filter Cutoff (Hz)"
+  },
+  "pidTuningDTermNotchCutoffHelp": {
+    "message": "D Term Notch Filter Cutoff (Hz)"
+  },
+  "pidTuningYawLowpassFrequency": {
+    "message": "Yaw Lowpass Frequency (Hz)"
+  },
+  "pidTuningYawLowpassFrequencyHelp": {
+    "message": "Yaw Lowpass Frequency (Hz)"
+  },
     "pidTuningVbatPidCompensation": {
         "message": "Vbat PID Compensation"
     },

tabs/pid_tuning.css

@@ -242,7 +242,7 @@
     padding: 5px;
     text-align: left;
     border-right: 1px solid #ccc;
-    width: calc(100% -1px);
+    width: calc(100% - 1px);
 }
 
 .tab-pid_tuning .pid_titlebar th:first-child {
@@ -305,6 +305,33 @@
     border-radius: 0px;
 }
 
+.tab-pid_tuning .tab_container {
+    float: top;
+    width: 300px;
+    height: 20px;
+    border-right-width: 0px;
+}
+
+.tab-pid_tuning .tab_container td {
+    background-color: #2e2e2e;
+}
+
+.tab-pid_tuning .tab_container td a {
+    color: #999999;
+}
+
+.tab-pid_tuning .tab_container td.active {
+    background-color: #ffbb00;
+    color: #000;
+    transition: none;
+}
+
+.tab-pid_tuning .tab_container td.active a {
+    background-color: #ffbb00;
+    color: #000;
+    text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
+}
+
 .tab-pid_tuning .single-field {
     display: inline-block;
     margin-bottom: 10px;
@@ -374,7 +401,7 @@
   border-bottom: 1px solid #ccc;
   color: #828282;
   /* font-family: 'open_sans', Arial; */
-  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
+  background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent);
 }
 
 .fancy.header th {
@@ -383,7 +410,6 @@
     padding-left: 5px;
 }
 
-
 .pid_mode {
     width: calc(100% - 5px);
     height: 20px;
@@ -399,7 +425,7 @@
     border-bottom: 1px solid #ccc;
     color: #828282;
     font-family: 'open_sans', Arial;
-    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%,
+    background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%,
         rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%,
         rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%,
         rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%,