The multi-file spectrum comparison (#782)

* Multiple spectrums file adding and curves showing are made

* The clearImportedSpectrums method is added

* The spectrum comparison Users interface improvement

* Added 'Clear' button to remove imported cpectrums

* Spectrum comparison users interface is visile in spectrum by frequency mode only

* Spectrum comparison buttons style is improved

* missing semicoma issue is resolved

Author: demvlad

index.html

@@ -472,13 +472,14 @@ <h4>Workspace</h4>
                                 <option value="5">Auto</option>
                             </select>
                         </div>
-                        <div id="spectrumExport" data-toggle="tooltip" title="Export spectrum to CSV">
-                            <button id="btn-spectrum-export" type="button">Export to CSV</button>
-                        </div>
-                        <div id="spectrumImport" data-toggle="tooltip" title="Import spectrum from CSV">
-                            <button type="button" onclick="document.getElementById('btn-spectrum-import').click()">Import from CSV</button>
-                            <input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
+
+                        <div id="spectrumComparison" data-toggle="tooltip" title="Spectrum comparison">
+                          <button id="btn-spectrum-export" type="button" class="spectrum-comparasion-button" title="Export spectrum to CSV">Export</button>
+                          <button type="button" class="spectrum-comparasion-button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
+                          <input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
+                          <button type="button" id="btn-spectrum-clear" class="spectrum-comparasion-button" title="Clear imported spectrums">Clear</button>
                         </div>
+
                         <div id="analyserResize" class="btn-nobg view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">
                             <span class="glyphicon glyphicon-resize-full"></span>
                             <span class="glyphicon glyphicon-resize-small"></span>
@@ -745,7 +746,7 @@ <h5 class="modal-title-revision"></h5>
                                         <script>
                                             const axes = ['Roll', 'Pitch', 'Yaw'];
                                             const pidTbody = document.getElementById('pid_tbody');
-                                        
+
                                             axes.forEach(axis => {
                                                 const row = `<tr class="${axis.toLowerCase()}PID">
                                                                 <td>${axis}</td>

src/css/main.css

@@ -629,13 +629,13 @@ html.has-analyser-fullscreen.has-analyser
   color: black;
 }
 
-.analyser:hover .non-shift #spectrumExport {
+.analyser:hover .non-shift #spectrumComparison {
   opacity: 1;
   height: auto;
   transition: opacity 500ms ease-in;
 }
 
-.analyser #spectrumExport {
+.analyser #spectrumComparison {
   height: 0;
   overflow: hidden;
   opacity: 0;
@@ -644,37 +644,22 @@ html.has-analyser-fullscreen.has-analyser
   z-index: 9;
   position: absolute;
   font-size: 9px;
+  border: gray;
+  border-style: solid;
+  border-width: 1px;
 }
 
-.analyser #spectrumExport select {
+.analyser #spectrumComparison select {
   border-radius: 3px;
   padding: 0px 5px;
   color: black;
 }
 
-.analyser:hover .non-shift #spectrumImport {
-  opacity: 1;
-  height: auto;
-  transition: opacity 500ms ease-in;
-}
-
-.analyser #spectrumImport {
-  height: 0;
-  width: 55px;
-  overflow: hidden;
-  opacity: 0;
-  left: 310px;
-  float: left;
-  z-index: 9;
-  position: absolute;
-  font-size: 9px;
-}
-
-.analyser #spectrumImport select {
+.spectrum-comparasion-button {
+  width: 100%;
   border-radius: 3px;
-  padding: 0px 5px;
-  color: black;
 }
+
 .analyser input#analyserZoomX {
   width: 100px;
   height: 10px;

src/graph_spectrum.js

@@ -226,7 +226,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
           pidErrorVsSetpointSelected
         );
 
-        $("#btn-spectrum-export").attr("disabled", optionSelected != 0);
+        $("#spectrumComparison").css("visibility", (optionSelected == 0 ? "visible" : "hidden"));
       })
       .change();
 
@@ -289,35 +289,49 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
     this.exportSpectrumToCSV = function(onSuccess, options) {
       SpectrumExporter(fftData, options).dump(onSuccess);
     };
+
     this.importSpectrumFromCSV = function(files) {
-      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");
+      const maxImportCount = 5;
+      for (const file of files) {
+        if (GraphSpectrumPlot.getImportedSpectrumCount() == maxImportCount) {
+          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);
+          } catch (e) {
+            alert('Spectrum data import error: ' + e.message);
+            return;
           }
+        };
 
-          stringRows.shift();
-          const spectrumData = stringRows.map( function(row) {
-            const data = row.split(",");
-            return {
-              freq: parseFloat(data[0]),
-              value: parseFloat(data[1]),
-            };
-          });
-          GraphSpectrumPlot.setImportedSpectrumData(spectrumData);
-        } catch (e) {
-          alert('Spectrum data import error: ' + e.message);
-          return;
-        }
-      };
-      reader.readAsText(files[0]);
+        reader.readAsText(file);
+      }
     };
 
   } catch (e) {
     console.log(`Failed to create analyser... error: ${e}`);
   }
+  
+  this.clearImportedSpectrums = function() {
+    GraphSpectrumPlot.clearImportedSpectrums();
+  };
 }

src/graph_spectrum_plot.js

@@ -47,6 +47,7 @@ export const GraphSpectrumPlot = window.GraphSpectrumPlot || {
     fontSizeFrameLabel: "6",
     fontSizeFrameLabelFullscreen: "9",
   },
+  _importedSpectrumsData: [],
 };
 
 GraphSpectrumPlot.initialize = function (canvas, sysConfig) {
@@ -57,7 +58,6 @@ GraphSpectrumPlot.initialize = function (canvas, sysConfig) {
   this._logRateWarning = undefined;
   this._zoomX = 1;
   this._zoomY = 1;
-  this._importedSpectrumData = null;
 };
 
 GraphSpectrumPlot.setZoom = function (zoomX, zoomY) {
@@ -90,12 +90,24 @@ GraphSpectrumPlot.setData = function (fftData, spectrumType) {
   this._invalidateDataCache();
 };
 
-GraphSpectrumPlot.setImportedSpectrumData = function (curvesData) {
-  this._importedSpectrumData = curvesData;
+GraphSpectrumPlot.getImportedSpectrumCount = function () {
+  return this._importedSpectrumsData.length;
+};
+
+GraphSpectrumPlot.addImportedSpectrumData = function (curvesData) {
+  this._importedSpectrumsData.push(curvesData);
+  this._invalidateCache();
+  this._invalidateDataCache();
+  GraphSpectrumPlot.draw();
+};
+
+GraphSpectrumPlot.clearImportedSpectrums = function (curvesData) {
+  this._importedSpectrumsData.length = 0;
   this._invalidateCache();
   this._invalidateDataCache();
   GraphSpectrumPlot.draw();
 };
+
 GraphSpectrumPlot.setOverdraw = function (overdrawType) {
   this._overdrawType = overdrawType;
   this._invalidateCache();
@@ -204,19 +216,27 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
   }
 
 
-  //Draw imported spectrum
-  if (this._importedSpectrumData) {
-    const curvesPonts = this._importedSpectrumData;
+  //Draw imported spectrums
+  const curvesColors = [
+    "Blue",
+    "Purple",
+    "DeepPink",
+    "DarkCyan",
+    "Chocolate",
+  ];
+
+  for (let spectrumNum = 0;  spectrumNum < this._importedSpectrumsData.length; spectrumNum++) {
+    const curvesPonts = this._importedSpectrumsData[spectrumNum];
     const pointsCount = curvesPonts.length;
     const scaleX = 2 * WIDTH / PLOTTED_BLACKBOX_RATE * this._zoomX;
 
     canvasCtx.beginPath();
-    canvasCtx.strokeStyle = "blue";
+    canvasCtx.strokeStyle = curvesColors[spectrumNum];
     canvasCtx.moveTo(0, HEIGHT);
-    const filterPointsCount = 20;
-    for (let i = 0; i < pointsCount; i++) {
+    const filterPointsCount = 50;
+    for (let pointNum = 0; pointNum < pointsCount; pointNum++) {
     // Apply moving average filter at spectrum points to get visible line
-      let filterStartPoint = i - filterPointsCount / 2;
+      let filterStartPoint = pointNum - filterPointsCount / 2;
       if (filterStartPoint < 0) {
         filterStartPoint = 0;
       }
@@ -229,15 +249,16 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
         }
       }
       let middleValue = 0;
-      for (let j = filterStartPoint; j < filterStopPoint; j++) {
-        middleValue += curvesPonts[j].value;
+      for (let i = filterStartPoint; i < filterStopPoint; i++) {
+        middleValue += curvesPonts[i].value;
       }
       middleValue /= filterPointsCount;
 
-      canvasCtx.lineTo(curvesPonts[i].freq * scaleX, HEIGHT - middleValue * fftScale);
+      canvasCtx.lineTo(curvesPonts[pointNum].freq * scaleX, HEIGHT - middleValue * fftScale);
     }
     canvasCtx.stroke();
   }
+
   this._drawAxisLabel(
     canvasCtx,
     this._fftData.fieldName,

src/main.js

@@ -1731,7 +1731,6 @@ function BlackboxLogViewer() {
     });
 
     $("#btn-spectrum-export").click(function (e) {
-      setGraphState(GRAPH_STATE_PAUSED);
       exportSpectrumToCsv("bf_spectrum");
       e.preventDefault();
     });
@@ -1741,6 +1740,12 @@ function BlackboxLogViewer() {
       e.preventDefault();
       e.target.value = "";
     });
+    
+    $("#btn-spectrum-clear").click(function (e) {
+      graph.getAnalyser().clearImportedSpectrums();
+      e.preventDefault();
+    });
+    
     $(".btn-gpx-export").click(function (e) {
       setGraphState(GRAPH_STATE_PAUSED);
       exportGpx();