Skip to content

Commit a937119

Browse files
demvladdemvlad
committed
Added full dBm range min and max values control by using spin number input fields
1 parent 908c5bd commit a937119

File tree

4 files changed

+141
-84
lines changed

4 files changed

+141
-84
lines changed

‎index.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -493,16 +493,21 @@ <h4>Workspace</h4>
493493
/>
494494
<input id="analyserZoomY" class="onlyFullScreen" type="range" name="analyserZoomY" value="100" min="10" max="1000" step="10" list="analyserZoomYTicks"
495495
/>
496-
<input id="analyserShiftPSD" class="onlyFullScreen" type="range" name="analyserShiftPSD" value="0" min="-50" max="50" step="5"
496+
<input id="analyserLowLevelPSD" class="onlyFullScreen" type="number" name="analyserLowLevelPSD" value="-40" min="-40" max="10" step="5"
497497
/>
498-
<input id="analyserLowLevelPSD" class="onlyFullScreen" type="range" name="analyserLowLevelPSD" value="0" min="0" max="100" step="5"
498+
<input id="analyserMaxPSD" class="onlyFullScreen" type="number" name="analyserMaxPSD" value="10" min="-20" max="100" step="5"
499499
/>
500-
<input id="analyserMaxPSD" class="onlyFullScreen" type="text" name="analyserMaxPSD" value="10" type="number" readonly
501-
/>
502-
<input id="analyserMinPSD" class="onlyFullScreen" type="text" name="analyserMinPSD" value="-40" type="number" readonly
503-
/>
504-
<input id="analyserLowPSD" class="onlyFullScreen" type="text" name="analyserLowPSD" value="0" type="number" readonly
500+
<input id="analyserMinPSD" class="onlyFullScreen" type="number" name="analyserMinPSD" value="-40" min="-100" max="20" step="5"
505501
/>
502+
<label id="analyserMaxPSDLabel" name="analyserMaxPSDLabel" class="onlyFullScreen" >
503+
Max&nbsp;dBm
504+
</label>
505+
<label id="analyserMinPSDLabel" name="analyserMinPSDLabel" class="onlyFullScreen" >
506+
Min&nbsp;dBm
507+
</label>
508+
<label id="analyserLowLevelPSDLabel" name="analyserLowLevelPSDLabel" class="onlyFullScreen" >
509+
Limit&nbsp;dBm
510+
</label>
506511

507512
<datalist id="analyserZoomXTicks">
508513
<option>100</option>

‎src/css/main.css‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,12 @@ html.has-analyser-fullscreen.has-analyser
543543
display: block;
544544
}
545545

546+
html.has-analyser-fullscreen.has-analyser
547+
.analyser
548+
label:not(.onlyFullScreenException) {
549+
display: block;
550+
}
551+
546552
#analyser,
547553
#log-seek-bar {
548554
z-index: 10;
@@ -679,41 +685,60 @@ html.has-analyser-fullscreen.has-analyser
679685
top: 30px;
680686
}
681687

682-
.analyser input#analyserShiftPSD {
683-
width: 10px;
684-
height: 100px;
685-
-webkit-appearance: slider-vertical;
686-
left: 0px;
687-
top: 48px;
688+
input[type="number"]::-webkit-inner-spin-button,
689+
input[type="number"]::-webkit-outer-spin-button {
690+
-webkit-appearance: textfield;
691+
-moz-appearance: textfield;
692+
appearance: textfield;
693+
opacity: 1;
688694
}
689695

690696
.analyser input#analyserLowLevelPSD {
691-
width: 10px;
692-
height: 100px;
693-
-webkit-appearance: slider-vertical;
697+
width: 50px;
698+
height: 20px;
694699
left: 0px;
695-
top: 48px;
700+
top: 90px;
696701
}
697702

698703
.analyser input#analyserMaxPSD {
699-
width: 30px;
700-
height: 18px;
704+
width: 50px;
705+
height: 20px;
701706
left: 0px;
702707
top: 30px;
703708
}
704709

705710
.analyser input#analyserMinPSD {
706-
width: 30px;
707-
height: 18px;
711+
width: 50px;
712+
height: 20px;
708713
left: 0px;
709-
top: 150px;
714+
top: 60px;
710715
}
711716

712-
.analyser input#analyserLowPSD {
713-
width: 40px;
714-
height: 18px;
717+
.analyser label#analyserMaxPSDLabel {
718+
position:absolute;
719+
color:gray;
720+
721+
left: 0px;
722+
top: 30px;
723+
font-size: 12px;
724+
}
725+
726+
.analyser label#analyserMinPSDLabel {
727+
position:absolute;
728+
color:gray;
729+
730+
left: 0px;
731+
top: 60px;
732+
font-size: 12px;
733+
}
734+
735+
.analyser label#analyserLowLevelPSDLabel {
736+
position:absolute;
737+
color:gray;
738+
715739
left: 0px;
716-
top: 150px;
740+
top: 90px;
741+
font-size: 12px;
717742
}
718743

719744
.analyser input.onlyFullScreen {
@@ -724,6 +749,14 @@ html.has-analyser-fullscreen.has-analyser
724749
position: absolute;
725750
}
726751

752+
.analyser label.onlyFullScreen {
753+
display: none;
754+
padding: 3px;
755+
margin-right: 3px;
756+
z-index: 9;
757+
position: absolute;
758+
}
759+
727760
.analyser,
728761
.map-container,
729762
.log-seek-bar {

‎src/graph_spectrum.js‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {
44
GraphSpectrumPlot,
55
SPECTRUM_TYPE,
66
SPECTRUM_OVERDRAW_TYPE,
7-
MIN_DBM_VALUE,
8-
MAX_DBM_VALUE,
7+
DEFAULT_MIN_DBM_VALUE,
8+
DEFAULT_MAX_DBM_VALUE,
99
} from "./graph_spectrum_plot";
1010
import { PrefStorage } from "./pref_storage";
1111
import { SpectrumExporter } from "./spectrum-exporter";
@@ -38,11 +38,10 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
3838
GraphSpectrumPlot.setLogRateWarningInfo(logRateInfo);
3939
const analyserZoomXElem = $("#analyserZoomX");
4040
const analyserZoomYElem = $("#analyserZoomY");
41-
const analyserShiftPSDSlider = $("#analyserShiftPSD");
42-
const analyserLowLevelPSDSlider = $("#analyserLowLevelPSD");
43-
const analyserMinPSDText = $("#analyserMinPSD");
44-
const analyserMaxPSDText = $("#analyserMaxPSD");
45-
const analyserLowPSDText = $("#analyserLowPSD");
41+
const analyserMinPSD = $("#analyserMinPSD");
42+
const analyserMaxPSD = $("#analyserMaxPSD");
43+
const analyserLowLevelPSD = $("#analyserLowLevelPSD");
44+
4645

4746
const spectrumToolbarElem = $("#spectrumToolbar");
4847
const spectrumTypeElem = $("#spectrumTypeSelect");
@@ -103,23 +102,26 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
103102
$("#analyserZoomY", parentElem).css({
104103
left: `${newSize.width - 20}px`,
105104
});
106-
$("#analyserShiftPSD", parentElem).css({
107-
left: `${newSize.width - 60}px`,
108-
});
109-
$("#analyserLowLevelPSD", parentElem).css({
110-
left: `${newSize.width - 110}px`,
111-
});
112105
$("#analyserResize", parentElem).css({
113106
left: `${newSize.width - 20}px`,
114107
});
115108
$("#analyserMaxPSD", parentElem).css({
116-
left: `${newSize.width - 70}px`,
109+
left: `${newSize.width - 90}px`,
117110
});
118111
$("#analyserMinPSD", parentElem).css({
119-
left: `${newSize.width - 70}px`,
112+
left: `${newSize.width - 90}px`,
120113
});
121-
$("#analyserLowPSD", parentElem).css({
122-
left: `${newSize.width - 125}px`,
114+
$("#analyserLowLevelPSD", parentElem).css({
115+
left: `${newSize.width - 90}px`,
116+
});
117+
$("#analyserMaxPSDLabel", parentElem).css({
118+
left: `${newSize.width - 150}px`,
119+
});
120+
$("#analyserMinPSDLabel", parentElem).css({
121+
left: `${newSize.width - 150}px`,
122+
});
123+
$("#analyserLowLevelPSDLabel", parentElem).css({
124+
left: `${newSize.width - 155}px`,
123125
});
124126
};
125127

@@ -231,37 +233,44 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
231233
})
232234
.val(DEFAULT_ZOOM);
233235

234-
analyserShiftPSDSlider
236+
analyserMinPSD
235237
.on(
236238
"input",
237239
debounce(100, function () {
238-
const shift = -parseInt(analyserShiftPSDSlider.val());
239-
GraphSpectrumPlot.setShiftPSD(shift);
240-
analyserLowLevelPSDSlider.val(0).trigger("input");
241-
analyserMinPSDText.val(-40 + shift);
242-
analyserMaxPSDText.val(10 + shift);
240+
const min = parseInt(analyserMinPSD.val());
241+
GraphSpectrumPlot.setMinPSD(min);
242+
analyserLowLevelPSD.val(min).trigger("input");
243+
analyserLowLevelPSD.prop("min", min);
243244
that.refresh();
244245
}),
245246
).dblclick(function () {
246-
$(this).val(0).trigger("input");
247-
}).val(0);
247+
$(this).val(DEFAULT_MIN_DBM_VALUE).trigger("input");
248+
}).val(DEFAULT_MIN_DBM_VALUE);
248249

249-
analyserLowLevelPSDSlider
250+
analyserMaxPSD
250251
.on(
251252
"input",
252253
debounce(100, function () {
253-
const lowLevelPercent = analyserLowLevelPSDSlider.val();
254-
GraphSpectrumPlot.setLowLevelPSD(lowLevelPercent);
255-
const shift = -parseInt(analyserShiftPSDSlider.val());
256-
const dBmValueMin = MIN_DBM_VALUE + shift,
257-
dBmValueMax = MAX_DBM_VALUE + shift,
258-
lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * lowLevelPercent / 100;
259-
analyserLowPSDText.val(lowLevel);
254+
const max = parseInt(analyserMaxPSD.val());
255+
GraphSpectrumPlot.setMaxPSD(max);
256+
analyserLowLevelPSD.prop("max", max);
260257
that.refresh();
261258
}),
262259
).dblclick(function () {
263-
$(this).val(0).trigger("input");
264-
}).val(0);
260+
$(this).val(DEFAULT_MAX_DBM_VALUE).trigger("input");
261+
}).val(DEFAULT_MAX_DBM_VALUE);
262+
263+
analyserLowLevelPSD
264+
.on(
265+
"input",
266+
debounce(100, function () {
267+
const lowLevel = analyserLowLevelPSD.val();
268+
GraphSpectrumPlot.setLowLevelPSD(lowLevel);
269+
that.refresh();
270+
})
271+
).dblclick(function () {
272+
$(this).val(analyserMinPSD.val()).trigger("input");
273+
}).val(analyserMinPSD.val());
265274

266275
// Spectrum type to show
267276
userSettings.spectrumType =
@@ -296,23 +305,27 @@ export function FlightLogAnalyser(flightLog, canvas, analyserCanvas) {
296305
"onlyFullScreenException",
297306
pidErrorVsSetpointSelected || psdHeatMapSelected,
298307
);
299-
analyserShiftPSDSlider.toggleClass(
308+
analyserLowLevelPSD.toggleClass(
300309
"onlyFullScreenException",
301310
!psdHeatMapSelected,
302311
);
303-
analyserLowLevelPSDSlider.toggleClass(
312+
analyserMinPSD.toggleClass(
304313
"onlyFullScreenException",
305314
!psdHeatMapSelected,
306315
);
307-
analyserMinPSDText.toggleClass(
316+
analyserMaxPSD.toggleClass(
308317
"onlyFullScreenException",
309318
!psdHeatMapSelected,
310319
);
311-
analyserMaxPSDText.toggleClass(
320+
$("#analyserMaxPSDLabel").toggleClass(
312321
"onlyFullScreenException",
313322
!psdHeatMapSelected,
314323
);
315-
analyserLowPSDText.toggleClass(
324+
$("#analyserMinPSDLabel").toggleClass(
325+
"onlyFullScreenException",
326+
!psdHeatMapSelected
327+
);
328+
$("#analyserLowLevelPSDLabel").toggleClass(
316329
"onlyFullScreenException",
317330
!psdHeatMapSelected,
318331
);

‎src/graph_spectrum_plot.js‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const BLUR_FILTER_PIXEL = 1,
1414
ZOOM_X_MAX = 5,
1515
MAX_SPECTRUM_LINE_COUNT = 30000;
1616

17-
export const MIN_DBM_VALUE = -40,
18-
MAX_DBM_VALUE = 10;
17+
export const DEFAULT_MIN_DBM_VALUE = -40,
18+
DEFAULT_MAX_DBM_VALUE = 10;
1919

2020
export const SPECTRUM_TYPE = {
2121
FREQUENCY: 0,
@@ -51,8 +51,9 @@ export const GraphSpectrumPlot = window.GraphSpectrumPlot || {
5151
_sysConfig: null,
5252
_zoomX: 1.0,
5353
_zoomY: 1.0,
54-
_shiftPSD: 0,
55-
_lowLevelPSD: 0,
54+
_minPSD: DEFAULT_MIN_DBM_VALUE,
55+
_maxPSD: DEFAULT_MAX_DBM_VALUE,
56+
_lowLevelPSD: DEFAULT_MIN_DBM_VALUE,
5657
_drawingParams: {
5758
fontSizeFrameLabel: "6",
5859
fontSizeFrameLabelFullscreen: "9",
@@ -82,10 +83,19 @@ GraphSpectrumPlot.setZoom = function (zoomX, zoomY) {
8283
}
8384
};
8485

85-
GraphSpectrumPlot.setShiftPSD = function (shift) {
86-
const modifiedShift = this._shiftPSD !== shift;
87-
if (modifiedShift) {
88-
this._shiftPSD = shift;
86+
GraphSpectrumPlot.setMinPSD = function (min) {
87+
const modified = this._minPSD !== min;
88+
if (modified) {
89+
this._minPSD = min;
90+
this._invalidateCache();
91+
this._invalidateDataCache();
92+
}
93+
};
94+
95+
GraphSpectrumPlot.setMaxPSD = function (max) {
96+
const modified = this._maxPSD !== max;
97+
if (modified) {
98+
this._maxPSD = max;
8999
this._invalidateCache();
90100
this._invalidateDataCache();
91101
}
@@ -528,25 +538,21 @@ GraphSpectrumPlot._drawHeatMap = function (drawPSD = false) {
528538
canvasCtx.canvas.width = this._fftData.fftLength;
529539
canvasCtx.canvas.height = THROTTLE_VALUES_SIZE;
530540

531-
const fftColorScale = 100 / (this._zoomY * SCALE_HEATMAP);
532-
533-
const dBmValueMin = MIN_DBM_VALUE + this._shiftPSD,
534-
dBmValueMax = MAX_DBM_VALUE + this._shiftPSD,
535-
lowLevel = dBmValueMin + (dBmValueMax - dBmValueMin) * this._lowLevelPSD / 100;
536541
// Loop for throttle
537542
for (let j = 0; j < THROTTLE_VALUES_SIZE; j++) {
538543
// Loop for frequency
539544
for (let i = 0; i < this._fftData.fftLength; i++) {
540545
let valuePlot = this._fftData.fftOutput[j][i];
541546
if (drawPSD) {
542-
if (valuePlot < lowLevel) {
543-
valuePlot = dBmValueMin; // Filter low values
547+
if (valuePlot < this._lowLevelPSD) {
548+
valuePlot = this._minPSD; // Filter low values
544549
} else {
545-
valuePlot = Math.max(valuePlot, dBmValueMin);
550+
valuePlot = Math.max(valuePlot, this._minPSD);
546551
}
547-
valuePlot = Math.min(valuePlot, dBmValueMax);
548-
valuePlot = Math.round((valuePlot - dBmValueMin) * 100 / (dBmValueMax - dBmValueMin));
552+
valuePlot = Math.min(valuePlot, this._maxPSD);
553+
valuePlot = Math.round((valuePlot - this._minPSD) * 100 / (this._maxPSD - this._minPSD));
549554
} else {
555+
const fftColorScale = 100 / (this._zoomY * SCALE_HEATMAP);
550556
valuePlot = Math.round(Math.min(valuePlot * fftColorScale, 100));
551557
}
552558

0 commit comments

Comments
 (0)