Added spectrum comparison by using import spectrum data from CSV file (#780)

* Added 'Import from CSW' button at the spectrum analizer chart

* Added importSpectrumFromCSV method to FlightLogAnalyser

* Added drawing imported spectrum data

* Added events handler for spectrum import button

* missing semicoma issue is resolved

* The buttons caption is changed

Co-authored-by: Mark Haslinghuis <[email protected]>

* the imported spectrum curves color is changed to blue

---------

Co-authored-by: Mark Haslinghuis <[email protected]>

Author: demvlad

index.html

@@ -475,6 +475,10 @@ <h4>Workspace</h4>
                         <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>
                         <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>

src/css/main.css

@@ -637,10 +637,9 @@ html.has-analyser-fullscreen.has-analyser
 
 .analyser #spectrumExport {
   height: 0;
-  width: 200px;
   overflow: hidden;
   opacity: 0;
-  left: 270px;
+  left: 260px;
   float: left;
   z-index: 9;
   position: absolute;
@@ -653,6 +652,29 @@ html.has-analyser-fullscreen.has-analyser
   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 {
+  border-radius: 3px;
+  padding: 0px 5px;
+  color: black;
+}
 .analyser input#analyserZoomX {
   width: 100px;
   height: 10px;

src/graph_spectrum.js

@@ -289,7 +289,35 @@ 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");
+          }
+
+          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]);
+    };
+
   } catch (e) {
-    console.log(`Failed to create analyser... error:${e}`);
+    console.log(`Failed to create analyser... error: ${e}`);
   }
 }

src/graph_spectrum_plot.js

@@ -57,6 +57,7 @@ GraphSpectrumPlot.initialize = function (canvas, sysConfig) {
   this._logRateWarning = undefined;
   this._zoomX = 1;
   this._zoomY = 1;
+  this._importedSpectrumData = null;
 };
 
 GraphSpectrumPlot.setZoom = function (zoomX, zoomY) {
@@ -89,6 +90,12 @@ GraphSpectrumPlot.setData = function (fftData, spectrumType) {
   this._invalidateDataCache();
 };
 
+GraphSpectrumPlot.setImportedSpectrumData = function (curvesData) {
+  this._importedSpectrumData = curvesData;
+  this._invalidateCache();
+  this._invalidateDataCache();
+  GraphSpectrumPlot.draw();
+};
 GraphSpectrumPlot.setOverdraw = function (overdrawType) {
   this._overdrawType = overdrawType;
   this._invalidateCache();
@@ -187,7 +194,7 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
     "rgba(255,128,128,1.0)"
   );
 
-  canvasCtx.fillStyle = barGradient; //'rgba(0,255,0,0.3)'; //green
+  canvasCtx.fillStyle = barGradient;
 
   const fftScale = HEIGHT / (this._zoomY * 100);
   for (let i = 0; i < PLOTTED_BUFFER_LENGTH; i += 10) {
@@ -196,6 +203,41 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
     x += barWidth + 1;
   }
 
+
+  //Draw imported spectrum
+  if (this._importedSpectrumData) {
+    const curvesPonts = this._importedSpectrumData;
+    const pointsCount = curvesPonts.length;
+    const scaleX = 2 * WIDTH / PLOTTED_BLACKBOX_RATE * this._zoomX;
+
+    canvasCtx.beginPath();
+    canvasCtx.strokeStyle = "blue";
+    canvasCtx.moveTo(0, HEIGHT);
+    const filterPointsCount = 20;
+    for (let i = 0; i < pointsCount; i++) {
+    // Apply moving average filter at spectrum points to get visible line
+      let filterStartPoint = i - filterPointsCount / 2;
+      if (filterStartPoint < 0) {
+        filterStartPoint = 0;
+      }
+      let filterStopPoint = filterStartPoint + filterPointsCount;
+      if (filterStopPoint > pointsCount) {
+        filterStopPoint = pointsCount;
+        filterStartPoint = filterStopPoint - filterPointsCount;
+        if (filterStartPoint < 0) {
+          filterStartPoint = 0;
+        }
+      }
+      let middleValue = 0;
+      for (let j = filterStartPoint; j < filterStopPoint; j++) {
+        middleValue += curvesPonts[j].value;
+      }
+      middleValue /= filterPointsCount;
+
+      canvasCtx.lineTo(curvesPonts[i].freq * scaleX, HEIGHT - middleValue * fftScale);
+    }
+    canvasCtx.stroke();
+  }
   this._drawAxisLabel(
     canvasCtx,
     this._fftData.fieldName,

src/main.js

@@ -1736,6 +1736,11 @@ function BlackboxLogViewer() {
       e.preventDefault();
     });
 
+    $("#btn-spectrum-import").change(function (e) {
+      graph.getAnalyser().importSpectrumFromCSV(e.target.files);
+      e.preventDefault();
+      e.target.value = "";
+    });
     $(".btn-gpx-export").click(function (e) {
       setGraphState(GRAPH_STATE_PAUSED);
       exportGpx();