Skip to content

Commit 1138772

Browse files
author
Gary Keeble
committed
Merge branch 'development'
2 parents c471a40 + af02149 commit 1138772

File tree

3 files changed

+70
-22
lines changed

3 files changed

+70
-22
lines changed

‎css/main.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,36 @@ html.has-analyser #analyserCanvas {
358358
display:block;
359359
}
360360

361+
html.has-analyser-fullscreen .analyser input {
362+
display:block;
363+
}
364+
365+
.analyser input#analyserZoomX {
366+
width: 100px;
367+
height : 10px;
368+
right: 41px;
369+
top: 30px;
370+
}
371+
.analyser input#analyserZoomY {
372+
width: 10px;
373+
height: 100px;
374+
-webkit-appearance: slider-vertical;
375+
right: 22px;
376+
top: 50px;
377+
}
378+
379+
.analyser input {
380+
display: none;
381+
padding: 3px;
382+
margin-right: 3px;
383+
z-index: 9;
384+
position: absolute;
385+
}
386+
387+
.analyser {
388+
position:relative;
389+
}
390+
361391
.log-graph video {
362392
position:absolute;
363393
top:0;

‎index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,11 @@ <h4>Log sync</h4>
289289
<video></video>
290290
<canvas width="200" height="100" id="graphCanvas"></canvas>
291291
<canvas width="0" height="0" id="craftCanvas"></canvas>
292-
<canvas width="0" height="0" id="analyserCanvas"></canvas>
292+
<div class="analyser">
293+
<canvas width="0" height="0" id="analyserCanvas"></canvas>
294+
<input id="analyserZoomX" type="range" name="analyserZoomX" value="100" min="100" max="500" step="100"/>
295+
<input id="analyserZoomY" type="range" name="analyserZoomY" value="100" min="10" max="1000" step="10"/>
296+
</div>
293297
<canvas width="0" height="0" id="analyserStickCanvas"></canvas>
294298
<span class="log-open-legend-dialog glyphicon glyphicon-cog" data-toggle="tooltip" data-placement="auto top" title="Show the legend"></span>
295299
</div>

‎js/graph_spectrum.js

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ var // inefficient; copied from grapher.js
2626
var that = this;
2727

2828
var mouseFrequency= null;
29+
var analyserZoomX = 1.0; /* 100% */
30+
var analyserZoomY = 1.0; /* 100% */
2931

3032
var MAX_ANALYSER_LENGTH = 300 * 1000 * 1000; // 5min
3133
var analyserTimeRange = {
@@ -84,7 +86,7 @@ try {
8486
};
8587

8688
var initialised = false;
87-
var zoom = 1.0;
89+
// var zoom = 1.0;
8890
var analyserFieldName; // Name of the field being analysed
8991

9092
var isFullscreen = false;
@@ -128,7 +130,7 @@ try {
128130
}
129131

130132
this.setGraphZoom = function(newZoom) {
131-
zoom = 1.0 / newZoom * 100;
133+
// zoom = 1.0 / newZoom * 100;
132134
}
133135

134136
function dataLoad() {
@@ -193,11 +195,12 @@ try {
193195
var LEFT = canvasCtx.canvas.left;
194196
var TOP = canvasCtx.canvas.top;
195197

196-
var PLOTTED_BUFFER_LENGTH = fftData.fftLength;
198+
var PLOTTED_BUFFER_LENGTH = fftData.fftLength / (analyserZoomX);
199+
var PLOTTED_BLACKBOX_RATE = blackBoxRate / (analyserZoomX);
197200

198201
canvasCtx.translate(LEFT, TOP);
199202

200-
var gradient = canvasCtx.createLinearGradient(0,0,0,(HEIGHT));
203+
var gradient = canvasCtx.createLinearGradient(0,0,0,(HEIGHT+((isFullscreen)?MARGIN:0)));
201204
if(isFullscreen) {
202205
gradient.addColorStop(1, 'rgba(0,0,0,0.9)');
203206
gradient.addColorStop(0, 'rgba(0,0,0,0.7)');
@@ -207,7 +210,7 @@ try {
207210

208211
}
209212
canvasCtx.fillStyle = gradient; //'rgba(255, 255, 255, .25)'; /* white */
210-
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
213+
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT+((isFullscreen)?MARGIN:0));
211214

212215
var barWidth = (WIDTH / (PLOTTED_BUFFER_LENGTH / 10)) - 1;
213216
var barHeight;
@@ -220,7 +223,7 @@ try {
220223
gradient.addColorStop(1, 'rgba(255,128,128,1.0)');
221224

222225
for(var i = 0; i < PLOTTED_BUFFER_LENGTH; i += 10) {
223-
barHeight = (fftData.fftOutput[i] / zoom * HEIGHT);
226+
barHeight = (fftData.fftOutput[i] / (analyserZoomY*100) * HEIGHT);
224227

225228
canvasCtx.fillStyle = gradient; //'rgba(0,255,0,0.3)'; //green
226229
canvasCtx.fillRect(x,(HEIGHT)-barHeight,barWidth,barHeight);
@@ -229,47 +232,45 @@ try {
229232
}
230233

231234
drawAxisLabel(analyserFieldName, WIDTH - 4, HEIGHT - 6, 'right');
232-
drawGridLines(blackBoxRate, LEFT, TOP, WIDTH, HEIGHT, MARGIN);
233-
234-
235+
drawGridLines(PLOTTED_BLACKBOX_RATE, LEFT, TOP, WIDTH, HEIGHT, MARGIN);
235236

236237
var isYawField = (analyserFieldName.match(/(.*yaw.*)/i)!=null);
237238
var offset = 0;
238-
if (mouseFrequency !=null) drawMarkerLine(mouseFrequency, blackBoxRate, '', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(0,255,0,0.50)", 3);
239+
if (mouseFrequency !=null) drawMarkerLine(mouseFrequency, PLOTTED_BLACKBOX_RATE, '', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(0,255,0,0.50)", 3);
239240
offset++; // make some space!
240-
if(flightLog.getSysConfig().gyro_lowpass_hz!=null) drawMarkerLine(flightLog.getSysConfig().gyro_lowpass_hz/100.0, blackBoxRate, 'GYRO LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)");
241+
if(flightLog.getSysConfig().gyro_lowpass_hz!=null) drawMarkerLine(flightLog.getSysConfig().gyro_lowpass_hz/100.0, PLOTTED_BLACKBOX_RATE, 'GYRO LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)");
241242
if(flightLog.getSysConfig().gyro_notch_hz!=null) {
242243
if(flightLog.getSysConfig().gyro_notch_hz > 0) {
243244
var gradient = canvasCtx.createLinearGradient(0,0,0,(HEIGHT));
244245
gradient.addColorStop(1, 'rgba(128,255,128,0.10)');
245246
gradient.addColorStop(0, 'rgba(128,255,128,0.35)');
246-
drawMarkerLine(flightLog.getSysConfig().gyro_notch_hz/100.0, blackBoxRate, null, WIDTH, HEIGHT, (15*offset) + MARGIN, gradient, (flightLog.getSysConfig().gyro_notch_hz - flightLog.getSysConfig().gyro_notch_cutoff)/100.0);
247-
drawMarkerLine(flightLog.getSysConfig().gyro_notch_hz/100.0, blackBoxRate, 'GYRO notch center', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)"); // highlight the center
247+
drawMarkerLine(flightLog.getSysConfig().gyro_notch_hz/100.0, PLOTTED_BLACKBOX_RATE, null, WIDTH, HEIGHT, (15*offset) + MARGIN, gradient, (flightLog.getSysConfig().gyro_notch_hz - flightLog.getSysConfig().gyro_notch_cutoff)/100.0);
248+
drawMarkerLine(flightLog.getSysConfig().gyro_notch_hz/100.0, PLOTTED_BLACKBOX_RATE, 'GYRO notch center', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)"); // highlight the center
248249
if(flightLog.getSysConfig().gyro_notch_cutoff!=null) {
249-
drawMarkerLine(flightLog.getSysConfig().gyro_notch_cutoff/100.0, blackBoxRate, 'GYRO notch cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)");
250+
drawMarkerLine(flightLog.getSysConfig().gyro_notch_cutoff/100.0, PLOTTED_BLACKBOX_RATE, 'GYRO notch cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(128,255,128,0.50)");
250251
}
251252
}
252253
}
253254
offset++; // make some space!
254255
if(isYawField) {
255-
if(flightLog.getSysConfig().yaw_lpf_hz!=null) drawMarkerLine(flightLog.getSysConfig().yaw_lpf_hz/100.0, blackBoxRate, 'YAW LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
256+
if(flightLog.getSysConfig().yaw_lpf_hz!=null) drawMarkerLine(flightLog.getSysConfig().yaw_lpf_hz/100.0, PLOTTED_BLACKBOX_RATE, 'YAW LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
256257
} else {
257-
if(flightLog.getSysConfig().dterm_lpf_hz!=null) drawMarkerLine(flightLog.getSysConfig().dterm_lpf_hz/100.0, blackBoxRate, 'D-TERM LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
258+
if(flightLog.getSysConfig().dterm_lpf_hz!=null) drawMarkerLine(flightLog.getSysConfig().dterm_lpf_hz/100.0, PLOTTED_BLACKBOX_RATE, 'D-TERM LPF cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
258259
if(flightLog.getSysConfig().dterm_notch_hz!=null) {
259260
if(flightLog.getSysConfig().dterm_notch_hz > 0) {
260261
var gradient = canvasCtx.createLinearGradient(0,0,0,(HEIGHT));
261262
gradient.addColorStop(1, 'rgba(128,128,255,0.10)');
262263
gradient.addColorStop(0, 'rgba(128,128,255,0.35)');
263-
drawMarkerLine(flightLog.getSysConfig().dterm_notch_hz/100.0, blackBoxRate, null, WIDTH, HEIGHT, (15*offset) + MARGIN, gradient, (flightLog.getSysConfig().dterm_notch_hz - flightLog.getSysConfig().dterm_notch_cutoff)/100.0);
264-
drawMarkerLine(flightLog.getSysConfig().dterm_notch_hz/100.0, blackBoxRate, 'D-TERM notch center', WIDTH, HEIGHT, (15*offset++) + MARGIN); // highlight the center
264+
drawMarkerLine(flightLog.getSysConfig().dterm_notch_hz/100.0, PLOTTED_BLACKBOX_RATE, null, WIDTH, HEIGHT, (15*offset) + MARGIN, gradient, (flightLog.getSysConfig().dterm_notch_hz - flightLog.getSysConfig().dterm_notch_cutoff)/100.0);
265+
drawMarkerLine(flightLog.getSysConfig().dterm_notch_hz/100.0, PLOTTED_BLACKBOX_RATE, 'D-TERM notch center', WIDTH, HEIGHT, (15*offset++) + MARGIN); // highlight the center
265266
if(flightLog.getSysConfig().dterm_notch_cutoff!=null) {
266-
drawMarkerLine(flightLog.getSysConfig().dterm_notch_cutoff/100.0, blackBoxRate, 'D-TERM notch cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
267+
drawMarkerLine(flightLog.getSysConfig().dterm_notch_cutoff/100.0, PLOTTED_BLACKBOX_RATE, 'D-TERM notch cutoff', WIDTH, HEIGHT, (15*offset++) + MARGIN);
267268
}
268269
}
269270
}
270271
}
271272
offset++; // make some space!
272-
drawMarkerLine(fftData.maxNoiseIdx, blackBoxRate, 'Max motor noise', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(255,0,0,0.50)", 3);
273+
drawMarkerLine(fftData.maxNoiseIdx, PLOTTED_BLACKBOX_RATE, 'Max motor noise', WIDTH, HEIGHT, (15*offset++) + MARGIN, "rgba(255,0,0,0.50)", 3);
273274

274275
canvasCtx.restore();
275276
}
@@ -368,6 +369,19 @@ try {
368369
trackFrequency(e, that);
369370
});
370371

372+
/* add zoom controls */
373+
$("#analyserZoomX").on('input',
374+
function () {
375+
analyserZoomX = ($( "#analyserZoomX" ).val() / 100);
376+
that.refresh();
377+
}
378+
); $( "#analyserZoomX" ).val(100);
379+
$("#analyserZoomY").on('input',
380+
function () {
381+
analyserZoomY = 1 / ($( "#analyserZoomY" ).val() / 100);
382+
that.refresh();
383+
}
384+
); $( "#analyserZoomY" ).val(100);
371385

372386
} catch (e) {
373387
console.log('Failed to create analyser... error:' + e);
@@ -383,7 +397,7 @@ try {
383397
var lastFrequency;
384398
if(e.shiftKey) {
385399
var rect = analyserCanvas.getBoundingClientRect();
386-
mouseFrequency = ((e.clientX - rect.left) / analyserCanvas.width) * (blackBoxRate / 2);
400+
mouseFrequency = ((e.clientX - rect.left) / analyserCanvas.width) * ((blackBoxRate / analyserZoomX) / 2);
387401
if(lastFrequency!=mouseFrequency) {
388402
lastFrequency = mouseFrequency;
389403
if(analyser) analyser.refresh();

0 commit comments

Comments
 (0)