Skip to content

Added curves legend at multi-curves spectrum #786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 1, 2024
Merged

Added curves legend at multi-curves spectrum #786

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5542b21
added legend at multi-spectrum chart
demvlad Nov 1, 2024
be53203
The buttons are placed in one row
demvlad Nov 1, 2024
d179161
Changed buttons height
demvlad Nov 1, 2024
e28955b
resolved issue of wrong legend drawing code placement
demvlad Nov 1, 2024
5a64e2c
Code style improvement
demvlad Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,10 +474,10 @@ <h4>Workspace</h4>
</div>

<div id="spectrumComparison" data-toggle="tooltip" title="Spectrum comparison">
<button id="btn-spectrum-export" type="button" class="spectrum-comparasion-button" title="Export spectrum to CSV">Export</button>
<button type="button" class="spectrum-comparasion-button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
<button id="btn-spectrum-export" type="button" title="Export spectrum to CSV">Export</button>
<button type="button" onclick="document.getElementById('btn-spectrum-import').click()" title="Import spectrum from CSV">Import</button>
<input type="file" id="btn-spectrum-import" accept=".csv" style="display:none" multiple/>
<button type="button" id="btn-spectrum-clear" class="spectrum-comparasion-button" title="Clear imported spectrums">Clear</button>
<button type="button" id="btn-spectrum-clear" title="Clear imported spectrums">Clear</button>
</div>

<div id="analyserResize" class="btn-nobg view-analyser-fullscreen" data-toggle="tooltip" title="Zoom Analyser Window">
Expand Down
7 changes: 5 additions & 2 deletions src/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -647,6 +647,7 @@ html.has-analyser-fullscreen.has-analyser
border: gray;
border-style: solid;
border-width: 1px;
display: flex;
}

.analyser #spectrumComparison select {
Expand All @@ -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 {
Expand Down
9 changes: 5 additions & 4 deletions src/graph_spectrum.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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();
};
Expand Down
42 changes: 36 additions & 6 deletions src/graph_spectrum_plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down