Skip to content

Commit ddf5d63

Browse files
demvladdemvlad
committed
Spectrum export/import code refactoring
1 parent 6db3827 commit ddf5d63

File tree

3 files changed

+87
-86
lines changed

3 files changed

+87
-86
lines changed

‎public/js/webworkers/spectrum-export-worker.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ onmessage = function(event) {
44
const spectrumDataLength = fftOutput.length / 2;
55
const frequencyStep = 0.5 * event.data.blackBoxRate / spectrumDataLength;
66

7-
let outText = "freq" + columnDelimiter + "value" + "\n";
8-
for (let index = 0; index < spectrumDataLength; index += 10) {
7+
let outText = "x" + columnDelimiter + "y" + "\n";
8+
for (let index = 0; index < spectrumDataLength; index++) {
99
const frequency = frequencyStep * index;
1010
outText += frequency.toString() + columnDelimiter + fftOutput[index].toString() + "\n";
1111
}

‎src/graph_spectrum.js‎

Lines changed: 19 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,9 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
351351
!psdHeatMapSelected,
352352
);
353353

354-
$("#spectrumComparison").css("visibility", (optionSelected == 0 ? "visible" : "hidden"));
354+
355+
const showSpectrumsComparisonPanel = optionSelected === SPECTRUM_TYPE.FREQUENCY || optionSelected === SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY;
356+
$("#spectrumComparison").css("visibility", (showSpectrumsComparisonPanel ? "visible" : "hidden"));
355357
})
356358
.change();
357359

@@ -416,48 +418,28 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
416418
};
417419

418420
this.importSpectrumFromCSV = function(files) {
419-
const maxImportCount = 5;
420-
let importsLeft = maxImportCount - GraphSpectrumPlot.getImportedSpectrumCount();
421+
GraphSpectrumPlot.importCurvesFromCSV(files);
422+
};
421423

422-
for (const file of files) {
423-
if (importsLeft-- == 0) {
424-
break;
425-
}
426-
const reader = new FileReader();
427-
reader.onload = function (e) {
428-
try {
429-
const stringRows = e.target.result.split("\n");
430-
431-
const header = stringRows[0].split(",");
432-
if (header.length != 2 || header[0] != "freq" || header[1] != "value") {
433-
throw new SyntaxError("Wrong spectrum CSV data format");
434-
}
435-
436-
stringRows.shift();
437-
const spectrumData = stringRows.map( function(row) {
438-
const data = row.split(",");
439-
return {
440-
freq: parseFloat(data[0]),
441-
value: parseFloat(data[1]),
442-
};
443-
});
444-
445-
GraphSpectrumPlot.addImportedSpectrumData(spectrumData, file.name);
446-
} catch (e) {
447-
alert('Spectrum data import error: ' + e.message);
448-
return;
449-
}
450-
};
424+
this.removeImportedSpectrums = function() {
425+
GraphSpectrumPlot.removeImportedCurves();
426+
};
451427

452-
reader.readAsText(file);
428+
this.getExportedFileName = function() {
429+
let fileName = null;
430+
switch (userSettings.spectrumType) {
431+
case SPECTRUM_TYPE.FREQUENCY:
432+
fileName = "bf_spectrum";
433+
break;
434+
case SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY:
435+
fileName = "bf_psd";
436+
break;
453437
}
438+
return fileName;
454439
};
455440

456441
} catch (e) {
457442
console.error(`Failed to create analyser... error: ${e}`);
458443
}
459-
460-
this.clearImportedSpectrums = function() {
461-
GraphSpectrumPlot.clearImportedSpectrums();
462-
};
463444
}
445+

‎src/graph_spectrum_plot.js‎

Lines changed: 66 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { FILTER_TYPE } from "./flightlog_fielddefs";
22
import { constrain } from "./tools";
33
import { NUM_VS_BINS } from "./graph_spectrum_calc";
4+
import { ImportedCurves } from "./graph_imported_curves";
45

56
const BLUR_FILTER_PIXEL = 1,
67
DEFAULT_FONT_FACE = "Verdana, Arial, sans-serif",
@@ -56,10 +57,20 @@ export const GraphSpectrumPlot = window.GraphSpectrumPlot || {
5657
fontSizeFrameLabel: "6",
5758
fontSizeFrameLabelFullscreen: "9",
5859
},
59-
_importedSpectrumsData: [],
60+
_importedSpectrums: null,
61+
_importedPSD: null,
62+
curvesColors : [
63+
"Blue",
64+
"Purple",
65+
"DeepPink",
66+
"DarkCyan",
67+
"Chocolate",
68+
]
6069
};
6170

6271
GraphSpectrumPlot.initialize = function (canvas, sysConfig) {
72+
this._importedSpectrums = new ImportedCurves(() => GraphSpectrumPlot.redraw());
73+
this._importedPSD = new ImportedCurves(() => GraphSpectrumPlot.redraw());
6374
this._canvasCtx = canvas.getContext("2d");
6475
this._sysConfig = sysConfig;
6576
this._invalidateCache();
@@ -126,16 +137,7 @@ GraphSpectrumPlot.setData = function (fftData, spectrumType) {
126137
this._invalidateDataCache();
127138
};
128139

129-
GraphSpectrumPlot.getImportedSpectrumCount = function () {
130-
return this._importedSpectrumsData.length;
131-
};
132-
133-
GraphSpectrumPlot.addImportedSpectrumData = function (curvesData, name) {
134-
const curve = {
135-
points: curvesData,
136-
name: name,
137-
};
138-
this._importedSpectrumsData.push(curve);
140+
GraphSpectrumPlot.redraw = function () {
139141
this._invalidateCache();
140142
this._invalidateDataCache();
141143
GraphSpectrumPlot.draw();
@@ -268,26 +270,17 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
268270
x += stepX;
269271
}
270272

271-
//Draw imported spectrums
272-
const curvesColors = [
273-
"Blue",
274-
"Purple",
275-
"DeepPink",
276-
"DarkCyan",
277-
"Chocolate",
278-
];
279-
280-
const spectrumCount = this._importedSpectrumsData.length;
281-
for (let spectrumNum = 0; spectrumNum < spectrumCount; spectrumNum++) {
282-
const curvesPonts = this._importedSpectrumsData[spectrumNum].points;
273+
const spectrumCount = this._importedSpectrums._curvesData.length;
274+
for (let spectrumNum = 0; spectrumNum < spectrumCount; spectrumNum++) {
275+
const curvesPonts = this._importedSpectrums._curvesData[spectrumNum].points;
283276
const pointsCount = curvesPonts.length;
284277
const scaleX = 2 * WIDTH / PLOTTED_BLACKBOX_RATE * this._zoomX;
285278

286279
canvasCtx.beginPath();
287280
canvasCtx.lineWidth = 1;
288-
canvasCtx.strokeStyle = curvesColors[spectrumNum];
281+
canvasCtx.strokeStyle = this.curvesColors[spectrumNum];
289282
canvasCtx.moveTo(0, HEIGHT);
290-
const filterPointsCount = 50;
283+
const filterPointsCount = 100;
291284
for (let pointNum = 0; pointNum < pointsCount; pointNum++) {
292285
// Apply moving average filter at spectrum points to get visible line
293286
let filterStartPoint = pointNum - filterPointsCount / 2;
@@ -304,37 +297,18 @@ GraphSpectrumPlot._drawFrequencyGraph = function (canvasCtx) {
304297
}
305298
let middleValue = 0;
306299
for (let i = filterStartPoint; i < filterStopPoint; i++) {
307-
middleValue += curvesPonts[i].value;
300+
middleValue += curvesPonts[i].y;
308301
}
309302
middleValue /= filterPointsCount;
310303

311-
canvasCtx.lineTo(curvesPonts[pointNum].freq * scaleX, HEIGHT - middleValue * fftScale);
304+
canvasCtx.lineTo(curvesPonts[pointNum].x * scaleX, HEIGHT - middleValue * fftScale);
312305
}
313306
canvasCtx.stroke();
314307
}
315308

316309
//Legend draw
317310
if (this._isFullScreen && spectrumCount > 0) {
318-
const legendPosX = 0.84 * WIDTH,
319-
legendPosY = 0.6 * HEIGHT,
320-
rowHeight = 16,
321-
padding = 4,
322-
legendWidth = 0.13 * WIDTH + padding,
323-
legendHeight = spectrumCount * rowHeight + 3 * padding;
324-
325-
const legendArea = new Path2D();
326-
legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight);
327-
canvasCtx.clip(legendArea);
328-
canvasCtx.strokeStyle = "gray";
329-
canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight);
330-
canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`;
331-
canvasCtx.textAlign = "left";
332-
for (let row = 0; row < spectrumCount; row++) {
333-
const curvesName = this._importedSpectrumsData[row].name.split('.')[0];
334-
const Y = legendPosY + padding + rowHeight * (row + 1);
335-
canvasCtx.strokeStyle = curvesColors[row];
336-
canvasCtx.strokeText(curvesName, legendPosX + padding, Y);
337-
}
311+
this._drawLegend(canvasCtx, WIDTH, HEIGHT, this._importedSpectrums._curvesData);
338312
}
339313
canvasCtx.restore();
340314

@@ -442,6 +416,29 @@ GraphSpectrumPlot._drawPowerSpectralDensityGraph = function (canvasCtx) {
442416
canvasCtx.restore();
443417
};
444418

419+
GraphSpectrumPlot._drawLegend = function (canvasCtx, WIDTH, HEIGHT, importedCurves) {
420+
const spectrumCount = importedCurves.length,
421+
legendPosX = 0.84 * WIDTH,
422+
legendPosY = 0.6 * HEIGHT,
423+
rowHeight = 16,
424+
padding = 4,
425+
legendWidth = 0.13 * WIDTH + padding,
426+
legendHeight = spectrumCount * rowHeight + 3 * padding,
427+
legendArea = new Path2D();
428+
429+
legendArea.rect(legendPosX, legendPosY, legendWidth, legendHeight);
430+
canvasCtx.clip(legendArea);
431+
canvasCtx.strokeStyle = "gray";
432+
canvasCtx.strokeRect(legendPosX, legendPosY, legendWidth, legendHeight);
433+
canvasCtx.font = `${this._drawingParams.fontSizeFrameLabelFullscreen}pt ${DEFAULT_FONT_FACE}`;
434+
canvasCtx.textAlign = "left";
435+
for (let row = 0; row < spectrumCount; row++) {
436+
const curvesName = importedCurves[row].name;
437+
const Y = legendPosY + padding + rowHeight * (row + 1);
438+
canvasCtx.strokeStyle = this.curvesColors[row];
439+
canvasCtx.strokeText(curvesName, legendPosX + padding, Y);
440+
}
441+
}
445442
GraphSpectrumPlot.getPSDbyFreq = function(frequency) {
446443
let freqIndex = Math.round(2 * frequency / this._fftData.blackBoxRate * (this._fftData.psdOutput.length - 1) );
447444
freqIndex = Math.min(freqIndex, this._fftData.psdOutput.length - 1);
@@ -1755,3 +1752,25 @@ GraphSpectrumPlot._drawRateWarning = function (canvasCtx) {
17551752
canvasCtx.restore();
17561753
}
17571754
};
1755+
1756+
GraphSpectrumPlot.importCurvesFromCSV = function(files) {
1757+
switch (this._spectrumType) {
1758+
case SPECTRUM_TYPE.FREQUENCY:
1759+
this._importedSpectrums.importCurvesFromCSV(files);
1760+
break;
1761+
case SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY:
1762+
this._importedPSD.importCurvesFromCSV(files);
1763+
break;
1764+
}
1765+
};
1766+
1767+
GraphSpectrumPlot.removeImportedCurves = function() {
1768+
switch (this._spectrumType) {
1769+
case SPECTRUM_TYPE.FREQUENCY:
1770+
this._importedSpectrums.removeCurves();
1771+
break;
1772+
case SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY:
1773+
this._importedPSD.removeCurves();
1774+
break;
1775+
}
1776+
};

0 commit comments

Comments
 (0)