Added vertical slider to control drawing PSD low level

Author: demvlad

index.html

@@ -495,6 +495,8 @@ <h4>Workspace</h4>
                     />
                     <input id="analyserShiftPSD" class="onlyFullScreen" type="range" name="analyserShiftPSD" value="0" min="-50" max="50" step="5"
                     />
+                    <input id="analyserLowLevelPSD" class="onlyFullScreen" type="range" name="analyserLowLevelPSD" value="0" min="0" max="100" step="5"
+                    />
 
                     <datalist id="analyserZoomXTicks">
                         <option>100</option>

src/css/main.css

@@ -687,6 +687,14 @@ html.has-analyser-fullscreen.has-analyser
   top: 30px;
 }
 
+.analyser input#analyserLowLevelPSD {
+  width: 10px;
+  height: 100px;
+  -webkit-appearance: slider-vertical;
+  left: 0px;
+  top: 30px;
+}
+
 .analyser input.onlyFullScreen {
   display: none;
   padding: 3px;

src/graph_spectrum.js

@@ -36,6 +36,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
     let analyserZoomXElem = $("#analyserZoomX");
     let analyserZoomYElem = $("#analyserZoomY");
     const analyserShiftPSDElem = $("#analyserShiftPSD");
+    const analyserLowLevelPSDElem = $("#analyserLowLevelPSD");
 
     let spectrumToolbarElem = $("#spectrumToolbar");
     let spectrumTypeElem = $("#spectrumTypeSelect");
@@ -99,6 +100,9 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       $("#analyserShiftPSD", parentElem).css({
         left: `${newSize.width - 20}px`,
       });
+      $("#analyserLowLevelPSD", parentElem).css({
+        left: `${newSize.width - 130}px`,
+      });
       $("#analyserResize", parentElem).css({
         left: `${newSize.width - 20}px`,
       });
@@ -220,6 +224,21 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
         debounce(100, function () {
           const shift = -parseInt(analyserShiftPSDElem.val());
           GraphSpectrumPlot.setShiftPSD(shift);
+          analyserLowLevelPSDElem.val(0).trigger("input");
+          that.refresh();
+        })
+      )
+      .dblclick(function () {
+        $(this).val(0).trigger("input");
+      })
+      .val(0);
+
+      analyserLowLevelPSDElem
+      .on(
+        "input",
+        debounce(100, function () {
+          const lowLevel = analyserLowLevelPSDElem.val() / 100;
+          GraphSpectrumPlot.setLowLevelPSD(lowLevel);
           that.refresh();
         })
       )
@@ -272,6 +291,10 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
           "onlyFullScreenException",
           !psdHeatMapSelected
         );
+        analyserLowLevelPSDElem.toggleClass(
+          "onlyFullScreenException",
+          !psdHeatMapSelected
+        );
 
         $("#spectrumComparison").css("visibility", (optionSelected == 0 ? "visible" : "hidden"));
       })

src/graph_spectrum_plot.js

@@ -51,6 +51,7 @@ export const GraphSpectrumPlot = window.GraphSpectrumPlot || {
   _zoomX: 1.0,
   _zoomY: 1.0,
   _shiftPSD: 0,
+  _lowLevelPSD: 0,
   _drawingParams: {
     fontSizeFrameLabel: "6",
     fontSizeFrameLabelFullscreen: "9",
@@ -89,6 +90,15 @@ GraphSpectrumPlot.setShiftPSD = function (shift) {
   }
 };
 
+GraphSpectrumPlot.setLowLevelPSD = function (lowLevel) {
+  const modifiedLevel = this._lowLevelPSD !== lowLevel;
+  if (modifiedLevel) {
+    this._lowLevelPSD = lowLevel;
+    this._invalidateCache();
+    this._invalidateDataCache();
+  }
+};
+
 GraphSpectrumPlot.setSize = function (width, height) {
   this._canvasCtx.canvas.width = width;
   this._canvasCtx.canvas.height = height;
@@ -520,19 +530,24 @@ GraphSpectrumPlot._drawHeatMap = function (drawPSD = false) {
   const fftColorScale = 100 / (this._zoomY * SCALE_HEATMAP);
 
   const dBmValueMin = MIN_DBM_VALUE + this._shiftPSD,
-        dBmValueMax = MAX_DBM_VALUE + this._shiftPSD;
+        dBmValueMax = MAX_DBM_VALUE + this._shiftPSD,
+        lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * this._lowLevelPSD;
   // Loop for throttle
   for (let j = 0; j < THROTTLE_VALUES_SIZE; j++) {
     // Loop for frequency
     for (let i = 0; i < this._fftData.fftLength; i++) {
-      let valuePlot;
+      let valuePlot = this._fftData.fftOutput[j][i];
       if (drawPSD) {
-        valuePlot = Math.max(this._fftData.fftOutput[j][i], dBmValueMin);
+        if (valuePlot < lowLevel) {
+          valuePlot = dBmValueMin;      // Filter low values
+        } else {
+          valuePlot = Math.max(valuePlot, dBmValueMin);
+        }
         valuePlot = Math.min(valuePlot, dBmValueMax);
         valuePlot = Math.round((valuePlot - dBmValueMin) * 100 / (dBmValueMax - dBmValueMin));
       } else {
         valuePlot = Math.round(
-          Math.min(this._fftData.fftOutput[j][i] * fftColorScale, 100)
+          Math.min(valuePlot * fftColorScale, 100)
         );
       }