Skip to content

Commit fea0dc0

Browse files
demvladhaslinghuis
demvlad
and
haslinghuis
authored
Added PSD curves export and import to compare several spectrums at the chart (betaflight#845)
* Added graph_imported_curves module for import curves * Spectrum export/import code refactoring * Added export/import PSD curves data * Added drawing of imported PSD curves * Resolved code issues * Resolved code issues * Code style improvement * Resolved issue wrong frequency definition in exported file * Code improvement * The legend is moved to right-up corner * The exported spectrums .csv file name is log name with _sp, _psd postfix * Resolved issue of imported curves frequency scaling * Code refactoring: PLOTTED_BLACKBOX_RATE is replace to MAXIMAL_PLOTTED_FREQUENCY in graph_spectrum_plot.js * Analyser legend position is added in user settings * Added check of valid userSetting in _drawLegend method * Added warning for specrum type what have not spectrum import * Added newline on EOF in src/graph_imported_curves.js Co-authored-by: Mark Haslinghuis <[email protected]> * Changed mouse cursor info for single and multiple PSD curves * Code style improvement Co-authored-by: Mark Haslinghuis <[email protected]> * The mouse position cursor improvement for PSD curves * Code style improvement * Code style improvement Co-authored-by: Mark Haslinghuis <[email protected]> * Code style improvement Co-authored-by: Mark Haslinghuis <[email protected]> * Resolved const issue --------- Co-authored-by: Mark Haslinghuis <[email protected]>
1 parent c56fc8e commit fea0dc0

File tree

8 files changed

+337
-188
lines changed

8 files changed

+337
-188
lines changed

‎index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2989,6 +2989,29 @@ <h4 class="modal-title">Advanced User Settings</h4>
29892989
<p>%</p>
29902990
</td>
29912991
</tr>
2992+
<tr>
2993+
<td>
2994+
<label>Legend</label>
2995+
</td>
2996+
<td class="position">
2997+
<label>Top</label>
2998+
<input name="analyser-legend-top" type="number" step="1" min="0"
2999+
max="100" />
3000+
<p>%</p>
3001+
</td>
3002+
<td class="position">
3003+
<label>Left</label>
3004+
<input name="analyser-legend-left" type="number" step="1" min="0"
3005+
max="100" />
3006+
<p>%</p>
3007+
</td>
3008+
<td class="position">
3009+
<label>Width</label>
3010+
<input name="analyser-legend-width" type="number" step="1" min="0"
3011+
max="100" />
3012+
<p>%</p>
3013+
</td>
3014+
</tr>
29923015
</table>
29933016
</div>
29943017
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
onmessage = function(event) {
22
const columnDelimiter = event.data.opts.columnDelimiter;
33
const fftOutput = event.data.fftOutput;
4-
const spectrumDataLength = fftOutput.length / 2;
4+
const spectrumDataLength = fftOutput.length;
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_imported_curves.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
export function ImportedCurves(curvesChanged) {
2+
const maxImportCount = 5;
3+
this._curvesData = [];
4+
const _that = this;
5+
this.minX = Number.MAX_VALUE;
6+
this.maxX = -Number.MAX_VALUE;
7+
this.minY = Number.MAX_VALUE;
8+
this.maxY = -Number.MAX_VALUE;
9+
10+
this.curvesCount = function() {
11+
return this._curvesData.length;
12+
};
13+
14+
this.importCurvesFromCSV = function(files) {
15+
let importsLeft = maxImportCount - this._curvesData.length;
16+
17+
for (const file of files) {
18+
if (importsLeft-- == 0) {
19+
break;
20+
}
21+
const reader = new FileReader();
22+
reader.onload = function (e) {
23+
try {
24+
const stringRows = e.target.result.split("\n");
25+
26+
const header = stringRows[0].split(",");
27+
if (header.length != 2 || header[0] != "x" || header[1] != "y") {
28+
throw new SyntaxError("Wrong curves CSV data format");
29+
}
30+
31+
stringRows.shift();
32+
//remove bad last row
33+
if (stringRows.at(-1) == "") {
34+
stringRows.pop();
35+
}
36+
37+
const curvesData = stringRows.map( function(row) {
38+
const data = row.split(","),
39+
x = parseFloat(data[0]),
40+
y = parseFloat(data[1]);
41+
_that.minX = Math.min(x, _that.minX);
42+
_that.maxX = Math.max(x, _that.maxX);
43+
_that.minY = Math.min(y, _that.minY);
44+
_that.maxY = Math.max(y, _that.maxY);
45+
return {
46+
x: x,
47+
y: y,
48+
};
49+
});
50+
51+
const curve = {
52+
name: file.name.split('.')[0],
53+
points: curvesData,
54+
};
55+
_that._curvesData.push(curve);
56+
curvesChanged();
57+
} catch (e) {
58+
alert('Curves data import error: ' + e.message);
59+
return;
60+
}
61+
};
62+
63+
reader.readAsText(file);
64+
}
65+
};
66+
67+
this.removeCurves = function() {
68+
this._curvesData.length = 0;
69+
this.minX = Number.MAX_VALUE;
70+
this.maxX = -Number.MAX_VALUE;
71+
this.minY = Number.MAX_VALUE;
72+
this.maxY = -Number.MAX_VALUE;
73+
curvesChanged();
74+
};
75+
}

‎src/graph_spectrum.js‎

Lines changed: 18 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,27 @@ 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 = $(".log-filename").text().split(".")[0];
430+
switch (userSettings.spectrumType) {
431+
case SPECTRUM_TYPE.FREQUENCY:
432+
fileName = fileName + "_sp";
433+
break;
434+
case SPECTRUM_TYPE.POWER_SPECTRAL_DENSITY:
435+
fileName = fileName + "_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
}

‎src/graph_spectrum_calc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ GraphSpectrumCalc.dataLoadPSD = function(analyserZoomY) {
130130
const psdData = {
131131
fieldIndex : this._dataBuffer.fieldIndex,
132132
fieldName : this._dataBuffer.fieldName,
133-
psdLength : psd.psdOutput.length,
134-
psdOutput : psd.psdOutput,
133+
fftLength : psd.psdOutput.length,
134+
fftOutput : psd.psdOutput,
135135
blackBoxRate : this._blackBoxRate,
136136
minimum: psd.min,
137137
maximum: psd.max,

0 commit comments

Comments
 (0)