From c5c2b7689a400a9c93cd6fa24cbc2b74c723c887 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 25 Oct 2024 10:16:38 +0300 Subject: [PATCH 1/7] Multiple spectrums file adding and curves showing are made --- src/graph_spectrum.js | 57 +++++++++++++++++++++++--------------- src/graph_spectrum_plot.js | 40 +++++++++++++++++--------- 2 files changed, 61 insertions(+), 36 deletions(-) diff --git a/src/graph_spectrum.js b/src/graph_spectrum.js index 58ac7c56..86114467 100644 --- a/src/graph_spectrum.js +++ b/src/graph_spectrum.js @@ -289,35 +289,46 @@ 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}`); } + } diff --git a/src/graph_spectrum_plot.js b/src/graph_spectrum_plot.js index 7db20a0d..5f734be6 100644 --- a/src/graph_spectrum_plot.js +++ b/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,17 @@ 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.setOverdraw = function (overdrawType) { this._overdrawType = overdrawType; this._invalidateCache(); @@ -204,19 +209,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 +242,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, From 1e9fa483936149bf0c77dba66e8ae99c81e8c738 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 25 Oct 2024 12:03:29 +0300 Subject: [PATCH 2/7] The clearImportedSpectrums method is added --- src/graph_spectrum.js | 5 ++++- src/graph_spectrum_plot.js | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/graph_spectrum.js b/src/graph_spectrum.js index 86114467..7b3620d9 100644 --- a/src/graph_spectrum.js +++ b/src/graph_spectrum.js @@ -330,5 +330,8 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) { } catch (e) { console.log(`Failed to create analyser... error: ${e}`); } - + + this.clearImportedSpectrums = function() { + GraphSpectrumPlot.clearImportedSpectrums(); + } } diff --git a/src/graph_spectrum_plot.js b/src/graph_spectrum_plot.js index 5f734be6..93743b45 100644 --- a/src/graph_spectrum_plot.js +++ b/src/graph_spectrum_plot.js @@ -101,6 +101,10 @@ GraphSpectrumPlot.addImportedSpectrumData = function (curvesData) { GraphSpectrumPlot.draw(); }; +GraphSpectrumPlot.clearImportedSpectrums = function (curvesData) { + this._importedSpectrumsData.length = 0; +}; + GraphSpectrumPlot.setOverdraw = function (overdrawType) { this._overdrawType = overdrawType; this._invalidateCache(); From 5ad651d7c065a506871fcda2f2f64a0d025212c6 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 25 Oct 2024 14:14:38 +0300 Subject: [PATCH 3/7] The spectrum comparison Users interface improvement --- index.html | 13 ++++++------- src/css/main.css | 32 ++++++-------------------------- src/graph_spectrum.js | 2 +- 3 files changed, 13 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index a7dfe52b..9da2e402 100644 --- a/index.html +++ b/index.html @@ -472,13 +472,12 @@

Workspace

-
- -
-
- - +
+ + +
+
@@ -745,7 +744,7 @@