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..37a37bfd 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: auto; border-radius: 3px; + float: left; } .analyser input#analyserZoomX { diff --git a/src/graph_spectrum.js b/src/graph_spectrum.js index af18447d..c89251a5 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..b43d4aea 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; @@ -259,6 +264,31 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) { 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, this._fftData.fieldName,