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,