From 5542b21081ba08305a79a7076e0495e4beb81763 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 1 Nov 2024 12:33:55 +0300 Subject: [PATCH 1/5] added legend at multi-spectrum chart --- src/graph_spectrum.js | 9 ++++---- src/graph_spectrum_plot.js | 42 ++++++++++++++++++++++++++++++++------ 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/graph_spectrum.js b/src/graph_spectrum.js index af18447d..48ad6905 100644 --- a/src/graph_spectrum.js +++ b/src/graph_spectrum.js @@ -292,11 +292,12 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) { this.importSpectrumFromCSV = function(files) { const maxImportCount = 5; + let importsLeft = maxImportCount - GraphSpectrumPlot.getImportedSpectrumCount(); + for (const file of files) { - if (GraphSpectrumPlot.getImportedSpectrumCount() == maxImportCount) { + if ((importsLeft--) == 0) { break; } - const reader = new FileReader(); reader.onload = function (e) { try { @@ -316,7 +317,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) { }; }); - GraphSpectrumPlot.addImportedSpectrumData(spectrumData); + GraphSpectrumPlot.addImportedSpectrumData(spectrumData, file.name); } catch (e) { alert('Spectrum data import error: ' + e.message); return; @@ -330,7 +331,7 @@ 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 dd7d50a8..043a865e 100644 --- a/src/graph_spectrum_plot.js +++ b/src/graph_spectrum_plot.js @@ -94,8 +94,12 @@ GraphSpectrumPlot.getImportedSpectrumCount = function () { return this._importedSpectrumsData.length; }; -GraphSpectrumPlot.addImportedSpectrumData = function (curvesData) { - this._importedSpectrumsData.push(curvesData); +GraphSpectrumPlot.addImportedSpectrumData = function (curvesData, name) { + const curve = { + points: curvesData, + name: name, + }; + this._importedSpectrumsData.push(curve); this._invalidateCache(); this._invalidateDataCache(); GraphSpectrumPlot.draw(); @@ -171,8 +175,6 @@ GraphSpectrumPlot._drawGraph = function (canvasCtx) { }; GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { - canvasCtx.lineWidth = 1; - const HEIGHT = canvasCtx.canvas.height - MARGIN; const WIDTH = canvasCtx.canvas.width; const LEFT = canvasCtx.canvas.left; @@ -181,6 +183,7 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { const PLOTTED_BUFFER_LENGTH = this._fftData.fftLength / this._zoomX; const PLOTTED_BLACKBOX_RATE = this._fftData.blackBoxRate / this._zoomX; + canvasCtx.save(); canvasCtx.translate(LEFT, TOP); this._drawGradientBackground(canvasCtx, WIDTH, HEIGHT); @@ -225,12 +228,14 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { "Chocolate", ]; - for (let spectrumNum = 0; spectrumNum < this._importedSpectrumsData.length; spectrumNum++) { - const curvesPonts = this._importedSpectrumsData[spectrumNum]; + const spectrumCount = this._importedSpectrumsData.length; + for (let spectrumNum = 0; spectrumNum < spectrumCount; spectrumNum++) { + const curvesPonts = this._importedSpectrumsData[spectrumNum].points; const pointsCount = curvesPonts.length; const scaleX = 2 * WIDTH / PLOTTED_BLACKBOX_RATE * this._zoomX; canvasCtx.beginPath(); + canvasCtx.lineWidth = 1; canvasCtx.strokeStyle = curvesColors[spectrumNum]; canvasCtx.moveTo(0, HEIGHT); const filterPointsCount = 50; @@ -257,7 +262,32 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { canvasCtx.lineTo(curvesPonts[pointNum].freq * scaleX, HEIGHT - middleValue * fftScale); } canvasCtx.stroke(); + + //Legend draw + if (this._isFullScreen) { + const legendPosX = 0.84 * WIDTH, + legendPosY = 0.6 * HEIGHT, + rowHeight = 16, + padding = 4, + legendWidth = 0.13 * WIDTH + padding, + legendHeight = spectrumCount * rowHeight + 3 * padding; + + const legendArea = new Path2D(); + legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight); + canvasCtx.clip(legendArea); + canvasCtx.strokeStyle = "gray"; + canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight); + canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`; + canvasCtx.textAlign = "left"; + for (let row = 0; row < spectrumCount; row++) { + const curvesName = this._importedSpectrumsData[row].name.split('.')[0]; + const Y = legendPosY + padding + rowHeight * (row + 1); + canvasCtx.strokeStyle = curvesColors[row]; + canvasCtx.strokeText(curvesName, legendPosX + padding, Y); + } + } } + canvasCtx.restore(); this._drawAxisLabel( canvasCtx, From be53203f26c6074e038786aab32415b77cd07211 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 1 Nov 2024 13:56:33 +0300 Subject: [PATCH 2/5] The buttons are placed in one row --- index.html | 6 +++--- src/css/main.css | 7 +++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index af582fa8..9043dcd0 100644 --- a/index.html +++ b/index.html @@ -474,10 +474,10 @@

Workspace

- - + + - +
diff --git a/src/css/main.css b/src/css/main.css index 6b1b7b0b..1c1f7ade 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -647,6 +647,7 @@ html.has-analyser-fullscreen.has-analyser border: gray; border-style: solid; border-width: 1px; + display: flex; } .analyser #spectrumComparison select { @@ -655,9 +656,11 @@ html.has-analyser-fullscreen.has-analyser color: black; } -.spectrum-comparasion-button { - width: 100%; +#spectrumComparison button { + width: auto; + height: 14px; border-radius: 3px; + float: left; } .analyser input#analyserZoomX { From d1791616c247f71db733918139f461c3044efa9e Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 1 Nov 2024 17:32:30 +0300 Subject: [PATCH 3/5] Changed buttons height --- src/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/main.css b/src/css/main.css index 1c1f7ade..37a37bfd 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -658,7 +658,7 @@ html.has-analyser-fullscreen.has-analyser #spectrumComparison button { width: auto; - height: 14px; + height: auto; border-radius: 3px; float: left; } From e28955b2f7ed702506de3d1171290266d3f87792 Mon Sep 17 00:00:00 2001 From: demvlad Date: Fri, 1 Nov 2024 17:33:29 +0300 Subject: [PATCH 4/5] resolved issue of wrong legend drawing code placement --- src/graph_spectrum_plot.js | 44 +++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/graph_spectrum_plot.js b/src/graph_spectrum_plot.js index 043a865e..b43d4aea 100644 --- a/src/graph_spectrum_plot.js +++ b/src/graph_spectrum_plot.js @@ -262,29 +262,29 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { canvasCtx.lineTo(curvesPonts[pointNum].freq * scaleX, HEIGHT - middleValue * fftScale); } canvasCtx.stroke(); + } - //Legend draw - if (this._isFullScreen) { - const legendPosX = 0.84 * WIDTH, - legendPosY = 0.6 * HEIGHT, - rowHeight = 16, - padding = 4, - legendWidth = 0.13 * WIDTH + padding, - legendHeight = spectrumCount * rowHeight + 3 * padding; - - const legendArea = new Path2D(); - legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight); - canvasCtx.clip(legendArea); - canvasCtx.strokeStyle = "gray"; - canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight); - canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`; - canvasCtx.textAlign = "left"; - for (let row = 0; row < spectrumCount; row++) { - const curvesName = this._importedSpectrumsData[row].name.split('.')[0]; - const Y = legendPosY + padding + rowHeight * (row + 1); - canvasCtx.strokeStyle = curvesColors[row]; - canvasCtx.strokeText(curvesName, legendPosX + padding, Y); - } +//Legend draw + if (this._isFullScreen) { + const legendPosX = 0.84 * WIDTH, + legendPosY = 0.6 * HEIGHT, + rowHeight = 16, + padding = 4, + legendWidth = 0.13 * WIDTH + padding, + legendHeight = spectrumCount * rowHeight + 3 * padding; + + const legendArea = new Path2D(); + legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight); + canvasCtx.clip(legendArea); + canvasCtx.strokeStyle = "gray"; + canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight); + canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`; + canvasCtx.textAlign = "left"; + for (let row = 0; row < spectrumCount; row++) { + const curvesName = this._importedSpectrumsData[row].name.split('.')[0]; + const Y = legendPosY + padding + rowHeight * (row + 1); + canvasCtx.strokeStyle = curvesColors[row]; + canvasCtx.strokeText(curvesName, legendPosX + padding, Y); } } canvasCtx.restore(); From 5a64e2c1f25a86e332f163510d76b1fac4c9760a Mon Sep 17 00:00:00 2001 From: Vladimir Demidov Date: Fri, 1 Nov 2024 19:04:39 +0300 Subject: [PATCH 5/5] Code style improvement Co-authored-by: Mark Haslinghuis --- src/graph_spectrum.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/graph_spectrum.js b/src/graph_spectrum.js index 48ad6905..c89251a5 100644 --- a/src/graph_spectrum.js +++ b/src/graph_spectrum.js @@ -295,7 +295,7 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) { let importsLeft = maxImportCount - GraphSpectrumPlot.getImportedSpectrumCount(); for (const file of files) { - if ((importsLeft--) == 0) { + if (importsLeft-- == 0) { break; } const reader = new FileReader();