Added PSD curves export and import to compare several spectrums at the chart

index.html

@@ -2989,6 +2989,29 @@ <h4 class="modal-title">Advanced User Settings</h4>
                                                 <p>%</p>
                                             </td>
                                         </tr>
+                                        <tr>
+                                            <td>
+                                                <label>Legend</label>
+                                            </td>
+                                            <td class="position">
+                                                <label>Top</label>
+                                                <input name="analyser-legend-top" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Left</label>
+                                                <input name="analyser-legend-left" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Width</label>
+                                                <input name="analyser-legend-width" type="number" step="1" min="0"
+                                                    max="100" />
+                                                <p>%</p>
+                                            </td>
+                                        </tr>
                                     </table>
                                 </div>
                             </div>

public/js/webworkers/spectrum-export-worker.js

@@ -1,11 +1,11 @@
 onmessage = function(event) {
   const columnDelimiter = event.data.opts.columnDelimiter;
   const fftOutput = event.data.fftOutput;
-  const spectrumDataLength = fftOutput.length / 2;
+  const spectrumDataLength = fftOutput.length;
   const frequencyStep = 0.5 * event.data.blackBoxRate / spectrumDataLength;
 
-  let outText = "freq" + columnDelimiter + "value" + "\n";
-  for (let index = 0; index < spectrumDataLength; index += 10) {
+  let outText = "x" + columnDelimiter + "y" + "\n";
+  for (let index = 0; index < spectrumDataLength; index++) {
     const frequency = frequencyStep * index;
     outText += frequency.toString() + columnDelimiter + fftOutput[index].toString() + "\n";
   }

src/graph_imported_curves.js

@@ -0,0 +1,75 @@
+export function ImportedCurves(curvesChanged) {
+  const maxImportCount = 5;
+  this._curvesData = [];
+  let _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;
+  };
+
+  this.importCurvesFromCSV = function(files) {
+      let importsLeft = maxImportCount - this._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;
+          }
+        };
+
+        reader.readAsText(file);
+      }
+    };
+
+  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;
+    curvesChanged();
+  };
+}

src/graph_spectrum.js

@@ -351,7 +351,9 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
           !psdHeatMapSelected,
         );
 
-        $("#spectrumComparison").css("visibility", (optionSelected == 0 ? "visible" : "hidden"));
+
+        const showSpectrumsComparisonPanel = optionSelected === SPECTRUM_TYPE.FREQUENCY || optionSelected === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY;
+        $("#spectrumComparison").css("visibility", (showSpectrumsComparisonPanel ? "visible" : "hidden"));
       })
       .change();
 
@@ -416,48 +418,27 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
     };
 
     this.importSpectrumFromCSV = function(files) {
-      const maxImportCount = 5;
-      let importsLeft = maxImportCount - GraphSpectrumPlot.getImportedSpectrumCount();
+      GraphSpectrumPlot.importCurvesFromCSV(files);
+    };
 
-      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] != "freq" || header[1] != "value") {
-              throw new SyntaxError("Wrong spectrum CSV data format");
-            }
-
-            stringRows.shift();
-            const spectrumData = stringRows.map( function(row) {
-              const data = row.split(",");
-              return {
-                freq: parseFloat(data[0]),
-                value: parseFloat(data[1]),
-              };
-            });
-
-            GraphSpectrumPlot.addImportedSpectrumData(spectrumData, file.name);
-          } catch (e) {
-            alert('Spectrum data import error: ' + e.message);
-            return;
-          }
-        };
+    this.removeImportedSpectrums = function() {
+      GraphSpectrumPlot.removeImportedCurves();
+    };
 
-        reader.readAsText(file);
+    this.getExportedFileName = function() {
+      let fileName = $(".log-filename").text().split(".")[0];
+      switch (userSettings.spectrumType) {
+        case SPECTRUM_TYPE.FREQUENCY:
+          fileName = fileName + "_sp";
+          break;
+        case SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY:
+          fileName = fileName + "_psd";
+          break;
       }
+      return fileName;
     };
 
   } catch (e) {
     console.error(`Failed to create analyser... error: ${e}`);
   }
-
-  this.clearImportedSpectrums = function() {
-    GraphSpectrumPlot.clearImportedSpectrums();
-  };
 }

src/graph_spectrum_calc.js

@@ -130,8 +130,8 @@ GraphSpectrumCalc.dataLoadPSD = function(analyserZoomY) {
   const psdData = {
     fieldIndex   : this._dataBuffer.fieldIndex,
     fieldName  : this._dataBuffer.fieldName,
-    psdLength  : psd.psdOutput.length,
-    psdOutput  : psd.psdOutput,
+    fftLength  : psd.psdOutput.length,
+    fftOutput  : psd.psdOutput,
     blackBoxRate : this._blackBoxRate,
     minimum: psd.min,
     maximum: psd.max,