Added text label for the PSD vertical sliders

Author: demvlad

index.html

@@ -497,6 +497,12 @@ <h4>Workspace</h4>
                     />
                     <input id="analyserLowLevelPSD" class="onlyFullScreen" type="range" name="analyserLowLevelPSD" value="0" min="0" max="100" step="5"
                     />
+                    <input id="analyserMaxPSD" class="onlyFullScreen" type="text" name="analyserMaxPSD" value="10" type="number" readonly
+                    />
+                    <input id="analyserMinPSD" class="onlyFullScreen" type="text" name="analyserMinPSD" value="-40" type="number" readonly
+                    />
+                    <input id="analyserLowPSD" class="onlyFullScreen" type="text" name="analyserLowPSD" value="0" type="number" readonly
+                    />
 
                     <datalist id="analyserZoomXTicks">
                         <option>100</option>

src/css/main.css

@@ -695,6 +695,27 @@ html.has-analyser-fullscreen.has-analyser
   top: 30px;
 }
 
+.analyser input#analyserMaxPSD {
+  width: 30px;
+  height: 18px;
+  left: 0px;
+  top: 30px;
+}
+
+.analyser input#analyserMinPSD {
+  width: 30px;
+  height: 18px;
+  left: 0px;
+  top: 110px;
+}
+
+.analyser input#analyserLowPSD {
+  width: 40px;
+  height: 18px;
+  left: 0px;
+  top: 70px;
+}
+
 .analyser input.onlyFullScreen {
   display: none;
   padding: 3px;

src/graph_spectrum.js

@@ -4,6 +4,8 @@ import {
   GraphSpectrumPlot,
   SPECTRUM_TYPE,
   SPECTRUM_OVERDRAW_TYPE,
+  MIN_DBM_VALUE,
+  MAX_DBM_VALUE,
 } from "./graph_spectrum_plot";
 import { PrefStorage } from "./pref_storage";
 import { SpectrumExporter } from "./spectrum-exporter";
@@ -35,8 +37,11 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
     GraphSpectrumPlot.setLogRateWarningInfo(logRateInfo);
     const analyserZoomXElem = $("#analyserZoomX");
     const analyserZoomYElem = $("#analyserZoomY");
-    const analyserShiftPSDElem = $("#analyserShiftPSD");
-    const analyserLowLevelPSDElem = $("#analyserLowLevelPSD");
+    const analyserShiftPSDSlider = $("#analyserShiftPSD");
+    const analyserLowLevelPSDSlider = $("#analyserLowLevelPSD");
+    const analyserMinPSDText = $("#analyserMinPSD");
+    const analyserMaxPSDText = $("#analyserMaxPSD");
+    const analyserLowPSDText = $("#analyserLowPSD");
 
     const spectrumToolbarElem = $("#spectrumToolbar");
     const spectrumTypeElem = $("#spectrumTypeSelect");
@@ -106,6 +111,15 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       $("#analyserResize", parentElem).css({
         left: `${newSize.width - 20}px`,
       });
+      $("#analyserMaxPSD", parentElem).css({
+        left: `${newSize.width - 50}px`,
+      });
+      $("#analyserMinPSD", parentElem).css({
+        left: `${newSize.width - 50}px`,
+      });
+      $("#analyserLowPSD", parentElem).css({
+        left: `${newSize.width - 120}px`,
+      });
     };
 
     let dataLoad = function () {
@@ -220,13 +234,15 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       })
       .val(DEFAULT_ZOOM);
 
-      analyserShiftPSDElem
+      analyserShiftPSDSlider
       .on(
         "input",
         debounce(100, function () {
-          const shift = -parseInt(analyserShiftPSDElem.val());
+          const shift = -parseInt(analyserShiftPSDSlider.val());
           GraphSpectrumPlot.setShiftPSD(shift);
-          analyserLowLevelPSDElem.val(0).trigger("input");
+          analyserLowLevelPSDSlider.val(0).trigger("input");
+          analyserMinPSDText.val(-40 + shift);
+          analyserMaxPSDText.val(10 + shift);
           that.refresh();
         })
       )
@@ -235,12 +251,17 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       })
       .val(0);
 
-      analyserLowLevelPSDElem
+      analyserLowLevelPSDSlider
       .on(
         "input",
         debounce(100, function () {
-          const lowLevel = analyserLowLevelPSDElem.val() / 100;
-          GraphSpectrumPlot.setLowLevelPSD(lowLevel);
+          const lowLevelPercent = analyserLowLevelPSDSlider.val();
+          GraphSpectrumPlot.setLowLevelPSD(lowLevelPercent);
+          const shift = -parseInt(analyserShiftPSDSlider.val());
+          const dBmValueMin = MIN_DBM_VALUE + shift,
+                dBmValueMax = MAX_DBM_VALUE + shift,
+                lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * lowLevelPercent / 100;
+          analyserLowPSDText.val(lowLevel);
           that.refresh();
         })
       )
@@ -282,11 +303,23 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
           "onlyFullScreenException",
           pidErrorVsSetpointSelected || psdHeatMapSelected
         );
-        analyserShiftPSDElem.toggleClass(
+        analyserShiftPSDSlider.toggleClass(
+          "onlyFullScreenException",
+          !psdHeatMapSelected
+        );
+        analyserLowLevelPSDSlider.toggleClass(
+          "onlyFullScreenException",
+          !psdHeatMapSelected
+        );
+        analyserMinPSDText.toggleClass(
+          "onlyFullScreenException",
+          !psdHeatMapSelected
+        );
+        analyserMaxPSDText.toggleClass(
           "onlyFullScreenException",
           !psdHeatMapSelected
         );
-        analyserLowLevelPSDElem.toggleClass(
+        analyserLowPSDText.toggleClass(
           "onlyFullScreenException",
           !psdHeatMapSelected
         );

src/graph_spectrum_plot.js

@@ -12,10 +12,11 @@ const BLUR_FILTER_PIXEL = 1,
   MAX_SETPOINT_DEFAULT = 100,
   PID_ERROR_VERTICAL_CHUNK = 5,
   ZOOM_X_MAX = 5,
-  MIN_DBM_VALUE = -40,
-  MAX_DBM_VALUE = 10,
   MAX_SPECTRUM_LINE_COUNT = 30000;
 
+export const MIN_DBM_VALUE = -40,
+  MAX_DBM_VALUE = 10;
+
 export const SPECTRUM_TYPE = {
   FREQUENCY: 0,
   FREQ_VS_THROTTLE: 1,
@@ -531,7 +532,7 @@ GraphSpectrumPlot._drawHeatMap = function (drawPSD = false) {
 
   const dBmValueMin = MIN_DBM_VALUE + this._shiftPSD,
         dBmValueMax = MAX_DBM_VALUE + this._shiftPSD,
-        lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * this._lowLevelPSD;
+        lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * this._lowLevelPSD / 100;
   // Loop for throttle
   for (let j = 0; j < THROTTLE_VALUES_SIZE; j++) {
     // Loop for frequency