Skip to content

Commit 5144146

Browse files
Gary KeebleGary Keeble
Gary Keeble
authored and
Gary Keeble
committed
Zoom into Analyser Window
New button on view toolbar to increase the size of the analyser window.
1 parent a8c043f commit 5144146

File tree

5 files changed

+137
-26
lines changed

5 files changed

+137
-26
lines changed

‎css/main.css‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,16 @@ html.has-log .log-graph-config {
240240
display:none;
241241
}
242242

243-
html.has-craft #craftCanvas {
243+
#analyserCanvas {
244+
position:absolute;
245+
top:0;
246+
left:0;
247+
pointer-events:none; /* Allow the user to drag the graph lines instead of hitting the craft */
248+
display:none;
249+
}
250+
251+
html.has-craft #craftCanvas,
252+
html.has-analyser #analyserCanvas {
244253
display:block;
245254
}
246255

@@ -297,7 +306,8 @@ html.has-video #graphCanvas {
297306
html .view-craft,
298307
html .view-sticks,
299308
html .view-table,
300-
html .view-analyser {
309+
html .view-analyser,
310+
html .view-analyser-fullscreen {
301311
color:black;
302312
}
303313

@@ -314,6 +324,22 @@ html.has-analyser .view-analyser {
314324
color:green;
315325
}
316326

327+
html:not(.has-analyser-fullscreen) .glyphicon-resize-small {
328+
display:none;
329+
}
330+
331+
html.has-analyser-fullscreen .glyphicon-resize-full {
332+
display:none;
333+
}
334+
335+
html.has-analyser .view-analyser-fullscreen {
336+
visibility:inherit;
337+
}
338+
339+
html:not(has-analyser) .view-analyser-fullscreen {
340+
visibility:hidden;
341+
}
342+
317343
.video-top-controls > li {
318344
display:inline-block;
319345
margin-right: 17px;

‎index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,9 @@ <h4>View</h4>
172172
<button type="button" class="btn btn-default view-analyser" title="View/hide analyser display">
173173
<span class="glyphicon glyphicon-equalizer"></span>
174174
</button>
175+
<button type="button" class="btn btn-default view-analyser-fullscreen" title="Zoom Analyser Window">
176+
<span class="glyphicon glyphicon-resize-full"></span><span class="glyphicon glyphicon-resize-small"></span>
177+
</button>
175178
</div>
176179
</div>
177180
</li>
@@ -251,15 +254,14 @@ <h4>Log sync</h4>
251254
</li>
252255
</ul>
253256

254-
<div class="craft">
255-
256-
</div>
257+
<div class="craft"></div>
257258

258259
<div class="graph-row">
259260
<div class="log-graph">
260261
<video></video>
261262
<canvas width="200" height="100" id="graphCanvas"></canvas>
262263
<canvas width="0" height="0" id="craftCanvas"></canvas>
264+
<canvas width="0" height="0" id="analyserCanvas"></canvas>
263265
<span class="log-open-legend-dialog glyphicon glyphicon-cog"></span>
264266
</div>
265267
<div class="log-graph-config">

‎js/graph_spectrum.js‎

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
"use strict";
22

3-
function FlightLogAnalyser(flightLog, graphConfig, canvas, craftCanvas, options) {
3+
function FlightLogAnalyser(flightLog, graphConfig, canvas, analyserCanvas, options) {
44

5-
var canvasCtx = canvas.getContext("2d");
5+
var
6+
ANALYSER_LEFT_PROPORTION = 0.05, // 5% from left
7+
ANALYSER_TOP_PROPORTION = 0.55, // 55% from top
8+
ANALYSER_HEIGHT_PROPORTION = 0.40, // 40% high
9+
ANALYSER_WIDTH_PROPORTION = 0.40, // 40% wide
10+
11+
ANALYSER_LARGE_LEFT_PROPORTION = 0.05, // 5% from left
12+
ANALYSER_LARGE_TOP_PROPORTION = 0.05, // 55% from top
13+
ANALYSER_LARGE_HEIGHT_PROPORTION = 0.90, // 40% high
14+
ANALYSER_LARGE_WIDTH_PROPORTION = 0.90; // 40% wide
15+
16+
var canvasCtx = analyserCanvas.getContext("2d");
617

718
var // inefficient; copied from grapher.js
819

@@ -48,6 +59,46 @@ try {
4859

4960
var audioIterations = 0; // variable to monitor spectrum processing
5061

62+
var isFullscreen = false;
63+
64+
this.setFullscreen = function(size) {
65+
isFullscreen = (size==true);
66+
that.resize();
67+
}
68+
69+
function getSize() {
70+
if (isFullscreen){
71+
return {
72+
height: ANALYSER_LARGE_HEIGHT_PROPORTION,
73+
width: ANALYSER_LARGE_WIDTH_PROPORTION,
74+
left: ANALYSER_LARGE_LEFT_PROPORTION,
75+
top: ANALYSER_LARGE_TOP_PROPORTION,
76+
}
77+
} else {
78+
return {
79+
height: ANALYSER_HEIGHT_PROPORTION,
80+
width: ANALYSER_WIDTH_PROPORTION,
81+
left: ANALYSER_LEFT_PROPORTION,
82+
top: ANALYSER_TOP_PROPORTION,
83+
}
84+
}
85+
86+
}
87+
88+
this.resize = function() {
89+
90+
// Determine the analyserCanvas location
91+
canvasCtx.canvas.height = (canvas.height * getSize().height);
92+
canvasCtx.canvas.width = (canvas.width * getSize().width);
93+
94+
// Recenter the analyser canvas in the bottom left corner
95+
$(analyserCanvas).css({
96+
left: (canvas.width * getSize().left) + "px",
97+
top: (canvas.height * getSize().top ) + "px",
98+
});
99+
100+
}
101+
51102
function dataLoad(dataBuffer, audioBuffer) {
52103

53104
var chunkIndex, frameIndex;
@@ -94,17 +145,24 @@ try {
94145

95146
canvasCtx.save();
96147

148+
canvasCtx.lineWidth = 1;
149+
97150
var bufferLength = spectrumAnalyser.frequencyBinCount;
98151
var dataArray = new Uint8Array(bufferLength);
99152

100-
var HEIGHT = canvasCtx.canvas.height * 0.4; /* trial and error values to put box in right place */
101-
var WIDTH = canvasCtx.canvas.width * 0.4;
102-
var LEFT = canvasCtx.canvas.width * 0.05;
103-
var TOP = canvasCtx.canvas.height * 0.55;
153+
154+
155+
canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
156+
157+
var MARGIN = 10; // pixels
158+
var HEIGHT = canvasCtx.canvas.height - MARGIN;
159+
var WIDTH = canvasCtx.canvas.width;
160+
var LEFT = canvasCtx.canvas.left;
161+
var TOP = canvasCtx.canvas.top;
104162

105163
/* only plot the lower half of the FFT, as the top half
106164
never seems to have any values in it - too high frequency perhaps. */
107-
var PLOTTED_BUFFER_LENGTH = bufferLength / 2;
165+
var PLOTTED_BUFFER_LENGTH = bufferLength; // / 2;
108166

109167
canvasCtx.translate(LEFT, TOP);
110168

@@ -118,19 +176,19 @@ try {
118176
var x = 0;
119177

120178
for(var i = 0; i < (PLOTTED_BUFFER_LENGTH); i++) {
121-
barHeight = (dataArray[i]/255 * HEIGHT);
179+
barHeight = (dataArray[i]/255 * (HEIGHT));
122180

123181
canvasCtx.fillStyle = 'rgba(0,255,0,0.3)'; /* green */
124-
canvasCtx.fillRect(x,HEIGHT-barHeight,barWidth,barHeight);
182+
canvasCtx.fillRect(x,(HEIGHT)-barHeight,barWidth,barHeight);
125183

126184
x += barWidth + 1;
127185
}
128-
drawGridLines(options.analyserSampleRate, LEFT, TOP, WIDTH, HEIGHT);
129-
drawAxisLabel(analyserFieldName + ' ' + analyserSampleRange, WIDTH - 8, HEIGHT - 10, 'right');
186+
drawAxisLabel(analyserFieldName + ' ' + analyserSampleRange, WIDTH - 4, HEIGHT - 6, 'right');
187+
drawGridLines(options.analyserSampleRate, LEFT, TOP, WIDTH, HEIGHT, MARGIN);
130188
canvasCtx.restore();
131189
}
132190

133-
function drawGridLines(sampleRate, LEFT, TOP, WIDTH, HEIGHT) {
191+
function drawGridLines(sampleRate, LEFT, TOP, WIDTH, HEIGHT, MARGIN) {
134192

135193
var ticks = 5;
136194
var frequencyInterval = (sampleRate / ticks) / 4;
@@ -145,7 +203,8 @@ try {
145203
canvasCtx.lineTo(i * (WIDTH / ticks), HEIGHT);
146204

147205
canvasCtx.stroke();
148-
drawAxisLabel((frequency)+"Hz", i * (WIDTH / ticks), HEIGHT * 1.05, 'center');
206+
var textAlign = (i==0)?'left':((i==ticks)?'right':'center');
207+
drawAxisLabel((frequency)+"Hz", i * (WIDTH / ticks), HEIGHT + MARGIN, textAlign);
149208
frequency += frequencyInterval;
150209
}
151210
}
@@ -186,8 +245,8 @@ try {
186245
}
187246
draw(); // draw the analyser on the canvas....
188247
}
189-
} catch (e) {
190-
console.log('Failed to create analyser');
191-
};
248+
} catch (e) {
249+
console.log('Failed to create analyser');
250+
};
192251

193252
}

‎js/grapher.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22

3-
function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options) {
3+
function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserCanvas, options) {
44
var
55
PID_P = 0,
66
PID_I = 1,
@@ -760,6 +760,8 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
760760
});
761761
}
762762

763+
if(analyser!=null) analyser.resize();
764+
763765
computeDrawingParameters();
764766
};
765767

@@ -997,6 +999,11 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
997999
options.drawAnalyser = state;
9981000
};
9991001

1002+
// Add analyser zoom toggling
1003+
this.setAnalyser= function(state) {
1004+
analyser.setFullscreen( state );
1005+
};
1006+
10001007
// Use defaults for any options not provided
10011008
options = extend(defaultOptions, options || {});
10021009

@@ -1005,7 +1012,7 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
10051012
initializeCraftModel();
10061013

10071014
/* Create the FlightLogAnalyser object */
1008-
analyser = new FlightLogAnalyser(flightLog, graphConfig, canvas, craftCanvas, options);
1015+
analyser = new FlightLogAnalyser(flightLog, graphConfig, canvas, analyserCanvas, options);
10091016

10101017
//Handle dragging events
10111018
$(canvas).on("mousedown",onMouseDown);

‎js/main.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,13 @@ function BlackboxLogViewer() {
5454
fieldPresenter = FlightLogFieldPresenter,
5555

5656
hasVideo = false, hasLog = false, hasMarker = false, // add measure feature
57-
hasTable = true, hasCraft = true, hasSticks = true, hasAnalyser,
57+
hasTable = true, hasCraft = true, hasSticks = true, hasAnalyser, hasAnalyserFullscreen,
5858

5959
isFullscreen = false, // New fullscreen feature (to hide table)
6060

6161
video = $(".log-graph video")[0],
6262
canvas = $("#graphCanvas")[0],
63+
analyserCanvas = $("#analyserCanvas")[0],
6364
craftCanvas = $("#craftCanvas")[0],
6465
videoURL = false,
6566
videoOffset = 0.0,
@@ -466,7 +467,7 @@ function BlackboxLogViewer() {
466467

467468
if(flightLog.getSysConfig().loopTime != null) {graphOptions.analyserSampleRate = 1000000 / flightLog.getSysConfig().loopTime; }
468469

469-
graph = new FlightLogGrapher(flightLog, activeGraphConfig, canvas, craftCanvas, graphOptions);
470+
graph = new FlightLogGrapher(flightLog, activeGraphConfig, canvas, craftCanvas, analyserCanvas, graphOptions);
470471

471472
setVideoInTime(false);
472473
setVideoOutTime(false);
@@ -761,6 +762,15 @@ function BlackboxLogViewer() {
761762
invalidateGraph();
762763
});
763764

765+
$(".view-analyser-fullscreen").click(function() {
766+
if(hasAnalyser) {
767+
hasAnalyserFullscreen = !hasAnalyserFullscreen;
768+
} else hasAnalyserFullscreen = false;
769+
(hasAnalyserFullscreen)?$("html").addClass("has-analyser-fullscreen"):$("html").removeClass("has-analyser-fullscreen");
770+
graph.setAnalyser(hasAnalyserFullscreen);
771+
invalidateGraph();
772+
});
773+
764774
var logJumpBack = function(fast) {
765775
var scrollTime = SMALL_JUMP_TIME;
766776
if(fast!=null) scrollTime = (fast!=0)?(graph.getWindowWidthTime() * fast):SMALL_JUMP_TIME;
@@ -901,7 +911,14 @@ function BlackboxLogViewer() {
901911
}
902912
}),
903913

904-
keysDialog = new KeysDialog($("#dlgKeysDialog"));
914+
keysDialog = new KeysDialog($("#dlgKeysDialog")),
915+
916+
exportDialog = new VideoExportDialog($("#dlgVideoExport"), function(newConfig) {
917+
videoConfig = newConfig;
918+
919+
prefs.set('videoConfig', newConfig);
920+
});
921+
905922

906923
$(".open-graph-configuration-dialog").click(function(e) {
907924
e.preventDefault();

0 commit comments

Comments
 (0)