Added separated own vertical slider for PSD ranges shift

Author: demvlad

index.html

@@ -493,6 +493,9 @@ <h4>Workspace</h4>
                     />
                     <input id="analyserZoomY" class="onlyFullScreen" type="range" name="analyserZoomY" value="100" min="10" max="1000" step="10" list="analyserZoomYTicks"
                     />
+                    <input id="analyserShiftPSD" class="onlyFullScreen" type="range" name="analyserShiftPSD" value="0" min="-50" max="50" step="5"
+                    />
+
                     <datalist id="analyserZoomXTicks">
                         <option>100</option>
                         <option>200</option>

src/css/main.css

@@ -670,6 +670,7 @@ html.has-analyser-fullscreen.has-analyser
   top: 10px;
   float: right;
 }
+
 .analyser input#analyserZoomY {
   width: 10px;
   height: 100px;
@@ -678,6 +679,14 @@ html.has-analyser-fullscreen.has-analyser
   top: 30px;
 }
 
+.analyser input#analyserShiftPSD {
+  width: 10px;
+  height: 100px;
+  -webkit-appearance: slider-vertical;
+  left: 0px;
+  top: 30px;
+}
+
 .analyser input.onlyFullScreen {
   display: none;
   padding: 3px;

src/graph_spectrum.js

@@ -35,6 +35,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
     GraphSpectrumPlot.setLogRateWarningInfo(logRateInfo);
     let analyserZoomXElem = $("#analyserZoomX");
     let analyserZoomYElem = $("#analyserZoomY");
+    const analyserShiftPSDElem = $("#analyserShiftPSD");
 
     let spectrumToolbarElem = $("#spectrumToolbar");
     let spectrumTypeElem = $("#spectrumTypeSelect");
@@ -89,10 +90,13 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
         top: newSize.top, // (canvas.height * getSize().top ) + "px"
       });
       // place the sliders.
-      $("input:first-of-type", parentElem).css({
+      $("#analyserZoomX", parentElem).css({
         left: `${newSize.width - 130}px`,
       });
-      $("input:last-of-type", parentElem).css({
+      $("#analyserZoomY", parentElem).css({
+        left: `${newSize.width - 20}px`,
+      });
+      $("#analyserShiftPSD", parentElem).css({
         left: `${newSize.width - 20}px`,
       });
       $("#analyserResize", parentElem).css({
@@ -212,6 +216,20 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       })
       .val(DEFAULT_ZOOM);
 
+      analyserShiftPSDElem
+      .on(
+        "input",
+        debounce(100, function () {
+          const shift = -parseInt(analyserShiftPSDElem.val());
+          GraphSpectrumPlot.setShiftPSD(shift);
+          that.refresh();
+        })
+      )
+      .dblclick(function () {
+        $(this).val(0).trigger("input");
+      })
+      .val(0);
+
     // Spectrum type to show
     userSettings.spectrumType =
       userSettings.spectrumType || SPECTRUM_TYPE.FREQUENCY;
@@ -237,10 +255,17 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
         // Hide overdraw and zoomY if needed
         const pidErrorVsSetpointSelected =
           optionSelected === SPECTRUM_TYPE.PIDERROR_VS_SETPOINT;
+        const psdHeatMapSelected =
+          optionSelected === SPECTRUM_TYPE.PSD_VS_THROTTLE ||
+          optionSelected === SPECTRUM_TYPE.PSD_VS_RPM;
         overdrawSpectrumTypeElem.toggle(!pidErrorVsSetpointSelected);
         analyserZoomYElem.toggleClass(
           "onlyFullScreenException",
-          pidErrorVsSetpointSelected
+          pidErrorVsSetpointSelected || psdHeatMapSelected
+        );
+        analyserShiftPSDElem.toggleClass(
+          "onlyFullScreenException",
+          !psdHeatMapSelected
         );
 
         $("#spectrumComparison").css("visibility", (optionSelected == 0 ? "visible" : "hidden"));

src/graph_spectrum_plot.js

@@ -50,6 +50,7 @@ export const GraphSpectrumPlot = window.GraphSpectrumPlot || {
   _sysConfig: null,
   _zoomX: 1.0,
   _zoomY: 1.0,
+  _shiftPSD: 0,
   _drawingParams: {
     fontSizeFrameLabel: "6",
     fontSizeFrameLabelFullscreen: "9",
@@ -79,6 +80,15 @@ GraphSpectrumPlot.setZoom = function (zoomX, zoomY) {
   }
 };
 
+GraphSpectrumPlot.setShiftPSD = function (shift) {
+  const modifiedShift = this._shiftPSD !== shift;
+  if (modifiedShift) {
+    this._shiftPSD = shift;
+    this._invalidateCache();
+    this._invalidateDataCache();
+  }
+};
+
 GraphSpectrumPlot.setSize = function (width, height) {
   this._canvasCtx.canvas.width = width;
   this._canvasCtx.canvas.height = height;
@@ -509,15 +519,8 @@ GraphSpectrumPlot._drawHeatMap = function (drawPSD = false) {
 
   const fftColorScale = 100 / (this._zoomY * SCALE_HEATMAP);
 
-  //Compute the dbm range shift from zoomY as[-30, -20, -10, 0, +10, +20]
-  let dBmRangeShift = 0;
-  if (this._zoomY <= 1) {        // [10 ... 0.1]
-    dBmRangeShift = -10 * Math.round((1 / this._zoomY - 1) / 3); //0, -10, -20, -30
-  } else {
-    dBmRangeShift = 10 * Math.round((this._zoomY - 1) / 9 * 2); // 0, 10, 20
-  }
-  const dBmValueMin = MIN_DBM_VALUE + dBmRangeShift,
-        dBmValueMax = MAX_DBM_VALUE + dBmRangeShift;
+  const dBmValueMin = MIN_DBM_VALUE + this._shiftPSD,
+        dBmValueMax = MAX_DBM_VALUE + this._shiftPSD;
   // Loop for throttle
   for (let j = 0; j < THROTTLE_VALUES_SIZE; j++) {
     // Loop for frequency