The simple PSD spectrum comparison of one log file data

index.html

@@ -477,10 +477,10 @@ <h4>Workspace</h4>
                         </div>
 
                         <div id="spectrumComparison" data-toggle="tooltip" title="Spectrum comparison">
-                          <button id="btn-spectrum-export" type="button" title="Export spectrum to CSV">Export</button>
-                          <button type="button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
+                          <button id="btn-spectrum-export" type="button" title="Export spectrum to CSV">Exp</button>
+                          <button type="button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Imp</button>
                           <input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
-                          <button type="button" id="btn-spectrum-clear" title="Clear imported spectrums">Clear</button>
+                          <button type="button" id="btn-spectrum-clear" title="Clear imported spectrums">Clr</button>
                         </div>
 
                         <div id="analyserResize" class="btn-nobg view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">

src/graph_imported_curves.js

@@ -1,75 +1,158 @@
 export function ImportedCurves(curvesChanged) {
-  const maxImportCount = 5;
-  this._curvesData = [];
+  const MAX_IMPORT_COUNT = 6;   // This value is limited by legends size and curves colors visibility. May be increased if needed by users
+  const _curvesData = [];
   const _that = this;
   this.minX = Number.MAX_VALUE;
   this.maxX = -Number.MAX_VALUE;
   this.minY = Number.MAX_VALUE;
   this.maxY = -Number.MAX_VALUE;
-  
+
   this.curvesCount = function() {
-    return this._curvesData.length;
+    return _curvesData.length;
+  };
+
+  this.getCurve = function(index) {
+    if (index < _curvesData.length) {
+      return _curvesData[index];
+    } else {
+      throw new RangeError(`The imported curves index (${index}) exceeds the maximum allowed value (${_curvesData.length - 1})`);
+    }
   };
 
   this.importCurvesFromCSV = function(files) {
-      let importsLeft = maxImportCount - this._curvesData.length;
+    let importsLeft = MAX_IMPORT_COUNT - _curvesData.length;
 
-      for (const file of files) {
-        if (importsLeft-- == 0) {
-          break;
-        }
-        const reader = new FileReader();
-        reader.onload = function (e) {
-          try {
-            const stringRows = e.target.result.split("\n");
-
-            const header = stringRows[0].split(",");
-            if (header.length != 2 || header[0] != "x" || header[1] != "y") {
-              throw new SyntaxError("Wrong curves CSV data format");
-            }
-
-            stringRows.shift();
-            //remove bad last row
-            if (stringRows.at(-1) == "") {
-              stringRows.pop();
-            }
-
-            const curvesData = stringRows.map( function(row) {
-              const data = row.split(","),
-                    x = parseFloat(data[0]),
-                    y = parseFloat(data[1]);
-              _that.minX = Math.min(x, _that.minX);
-              _that.maxX = Math.max(x, _that.maxX);
-              _that.minY = Math.min(y, _that.minY);
-              _that.maxY = Math.max(y, _that.maxY);
-              return {
-                x: x,
-                y: y,
-              };
-            });
-
-            const curve = {
-              name: file.name.split('.')[0],
-              points: curvesData,
-            };
-            _that._curvesData.push(curve);
-            curvesChanged();
-          } catch (e) {
-            alert('Curves data import error: ' + e.message);
-            return;
+    for (const file of files) {
+      if (importsLeft-- == 0) {
+        break;
+      }
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        try {
+          const stringRows = e.target.result.split("\n");
+
+          const header = stringRows[0].split(",");
+          if (header.length !== 2 || header[0].trim() !== "x" || header[1].trim() !== "y") {
+            throw new SyntaxError("Wrong curves CSV data format");
           }
-        };
 
-        reader.readAsText(file);
-      }
+          stringRows.shift();
+          //remove bad last row
+          if (stringRows.at(-1) == "") {
+            stringRows.pop();
+          }
+
+          const curvesData = stringRows.map( function(row) {
+            const data = row.split(","),
+                  x = parseFloat(data[0].trim()),
+                  y = parseFloat(data[1].trim());
+            _that.minX = Math.min(x, _that.minX);
+            _that.maxX = Math.max(x, _that.maxX);
+            _that.minY = Math.min(y, _that.minY);
+            _that.maxY = Math.max(y, _that.maxY);
+            return {
+              x: x,
+              y: y,
+            };
+          });
+
+          const curve = {
+            name: file.name.split('.')[0],
+            points: curvesData,
+          };
+          _curvesData.push(curve);
+          curvesChanged();
+        } catch (e) {
+          alert('Curves data import error: ' + e.message);
+          return;
+        }
+      };
+
+      reader.readAsText(file);
+    }
+  };
+
+  const getCurveRange = function(points) {
+    let minX = Number.MAX_VALUE,
+        maxX = -Number.MAX_VALUE,
+        minY = Number.MAX_VALUE,
+        maxY = -Number.MAX_VALUE;
+    for (const point of points) {
+      minX = Math.min(point.x, minX);
+      maxX = Math.max(point.x, maxX);
+      minY = Math.min(point.y, minY);
+      maxY = Math.max(point.y, maxY);
+    }
+    return {
+      minX: minX,
+      maxX: maxX,
+      minY: minY,
+      maxY: maxY,
     };
+  };
 
-  this.removeCurves = function() {
-    this._curvesData.length = 0;
-    this.minX = Number.MAX_VALUE;
-    this.maxX = -Number.MAX_VALUE;
-    this.minY = Number.MAX_VALUE;
-    this.maxY = -Number.MAX_VALUE;
+  const computeGlobalCurvesRange = function () {
+    _that.minX = Number.MAX_VALUE;
+    _that.maxX = -Number.MAX_VALUE;
+    _that.minY = Number.MAX_VALUE;
+    _that.maxY = -Number.MAX_VALUE;
+    for (const curve of _curvesData) {
+      _that.minX = Math.min(curve.range.minX, _that.minX);
+      _that.maxX = Math.max(curve.range.maxX, _that.maxX);
+      _that.minY = Math.min(curve.range.minY, _that.minY);
+      _that.maxY = Math.max(curve.range.maxY, _that.maxY);
+    }
+  };
+
+  this.addCurve = function(points, name) {
+    if (this.curvesCount() < MAX_IMPORT_COUNT) {
+      const range = getCurveRange(points);
+      _curvesData.push({
+        name: name,
+        points: points,
+        range: range,
+      });
+
+      this.minX = Math.min(range.minX, this.minX);
+      this.maxX = Math.max(range.maxX, this.maxX);
+      this.minY = Math.min(range.minY, this.minY);
+      this.maxY = Math.max(range.maxY, this.maxY);
+
+      curvesChanged();
+    }
+  };
+
+  this.isNewCurve = function(name) {
+    for (const curve of _curvesData) {
+      if (curve.name === name) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  this.removeAllCurves = function() {
+    _curvesData.length = 0;
+    computeGlobalCurvesRange();
     curvesChanged();
   };
+
+  this.removeCurve = function(name) {
+    for (let index = 0; index < _curvesData.length; index++) {
+      if (_curvesData[index].name === name) {
+        _curvesData.splice(index, 1);
+        computeGlobalCurvesRange();
+        curvesChanged();
+        break;
+      }
+    }
+  };
+
+  this.isFull = function() {
+    return this.curvesCount() === MAX_IMPORT_COUNT;
+  };
+
+  this.isEmpty = function() {
+    return this.curvesCount() === 0;
+  };
 }

src/graph_legend.js

@@ -101,10 +101,10 @@ export function GraphLegend(
           config.selectedGraphIndex = selectedGraphIndex;
           config.selectedFieldIndex = selectedFieldIndex;
           if (onNewSelectionChange) {
-            onNewSelectionChange();
+            onNewSelectionChange(false, e.ctrlKey);
           }
         } else {
-          onNewSelectionChange(true);
+          onNewSelectionChange(true, e.ctrlKey);
         }
       }
       e.preventDefault();

src/graph_spectrum.js

@@ -21,7 +21,8 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
   let analyserZoomX = 1.0 /* 100% */,
     analyserZoomY = 1.0 /* 100% */,
     dataReload = false,
-    fftData = null;
+    fftData = null,
+    addSpectrumForComparison = false;
 
   try {
     let isFullscreen = false;
@@ -47,6 +48,12 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       that.resize();
     };
 
+    this.prepareSpectrumForComparison = function () {
+      if (userSettings.spectrumType === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY) {
+        addSpectrumForComparison = true;
+      }
+    };
+
     this.setInTime = function (time) {
       dataReload = true;
       return GraphSpectrumCalc.setInTime(time);
@@ -156,17 +163,38 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       }
     };
 
+    this.shouldAddCurrentSpectrumBeforeReload = function () {
+      return addSpectrumForComparison && fftData !== null && !this.isMultiSpectrum() && !dataReload;
+    };
+
     /* This function is called from the canvas drawing routines within grapher.js
            It is only used to record the current curve positions, collect the data and draw the
            analyser on screen*/
     this.plotSpectrum = function (fieldIndex, curve, fieldName) {
       // Detect change of selected field.... reload and redraw required.
-      if (fftData == null || fieldIndex != fftData.fieldIndex || dataReload) {
+      const isMaxCountOfImportedPSD = GraphSpectrumPlot.isImportedCurvesMaxCount() && userSettings.spectrumType === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY;
+      let shouldReload = fftData == null ||
+                         fieldIndex != fftData.fieldIndex && !isMaxCountOfImportedPSD || // Lock spectrum data reload while PSD curves import is full
+                         dataReload;
+
+      if (addSpectrumForComparison && !GraphSpectrumPlot.isNewComparedCurve(fieldName)) {
+        GraphSpectrumPlot.removeComparedCurve(fieldName);
+        addSpectrumForComparison = false;
+        shouldReload = false;   // Do not load if spectrum was deleted
+      }
+
+      if (shouldReload) {
+        if (this.shouldAddCurrentSpectrumBeforeReload()) {
+          GraphSpectrumPlot.addCurrentSpectrumIntoImport();  // The main curve is added into imported list when the second curve is selected for comparison
+        }
         dataReload = false;
         dataLoad(fieldIndex, curve, fieldName);
         GraphSpectrumPlot.setData(fftData, userSettings.spectrumType);
       }
-
+      if (addSpectrumForComparison) {
+        GraphSpectrumPlot.addCurrentSpectrumIntoImport();
+        addSpectrumForComparison = false;
+      }
       that.draw(); // draw the analyser on the canvas....
     };
 
@@ -354,6 +382,9 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
 
         const showSpectrumsComparisonPanel = optionSelected === SPECTRUM_TYPE.FREQUENCY || optionSelected === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY;
         $("#spectrumComparison").css("visibility", (showSpectrumsComparisonPanel ? "visible" : "hidden"));
+
+        const showAddSpectrumButton = optionSelected === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY;
+        $("#btn-spectrum-add").toggle(showAddSpectrumButton);
       })
       .change();
 
@@ -438,6 +469,10 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
       return fileName;
     };
 
+    this.isMultiSpectrum = function() {
+      return GraphSpectrumPlot.isMultiSpectrum();
+    };
+
   } catch (e) {
     console.error(`Failed to create analyser... error: ${e}`);
   }