Zoom into Analyser Window

New button on view toolbar to increase the size of the analyser window.

Author: Gary Keeble

css/main.css

@@ -240,7 +240,16 @@ html.has-log .log-graph-config {
     display:none;
 }
 
-html.has-craft #craftCanvas {
+#analyserCanvas {
+    position:absolute;
+    top:0;
+    left:0;
+    pointer-events:none; /* Allow the user to drag the graph lines instead of hitting the craft */
+    display:none;
+}
+
+html.has-craft #craftCanvas,
+html.has-analyser #analyserCanvas {
     display:block;
 }
 
@@ -297,7 +306,8 @@ html.has-video #graphCanvas {
 html .view-craft,
 html .view-sticks,
 html .view-table,
-html .view-analyser {
+html .view-analyser,
+html .view-analyser-fullscreen {
      color:black;
 }
 
@@ -314,6 +324,22 @@ html.has-analyser .view-analyser {
      color:green;
 }
 
+html:not(.has-analyser-fullscreen) .glyphicon-resize-small {
+     display:none;
+}
+
+html.has-analyser-fullscreen .glyphicon-resize-full {
+     display:none;
+}
+
+html.has-analyser .view-analyser-fullscreen {
+     visibility:inherit;
+}
+
+html:not(has-analyser) .view-analyser-fullscreen {
+     visibility:hidden;
+}
+
 .video-top-controls > li {
     display:inline-block;
     margin-right: 17px;

index.html

@@ -172,6 +172,9 @@ <h4>View</h4>
                         <button type="button" class="btn btn-default view-analyser" title="View/hide analyser display">
                             <span class="glyphicon glyphicon-equalizer"></span>
                         </button>
+                        <button type="button" class="btn btn-default view-analyser-fullscreen" title="Zoom Analyser Window">
+                            <span class="glyphicon glyphicon-resize-full"></span><span class="glyphicon glyphicon-resize-small"></span>
+                        </button>
                    </div>
                 </div>
             </li>
@@ -251,15 +254,14 @@ <h4>Log sync</h4>
             </li>
         </ul>
 
-        <div class="craft">
-
-        </div>
+        <div class="craft"></div>
 
         <div class="graph-row">
             <div class="log-graph">
                 <video></video>
                 <canvas width="200" height="100" id="graphCanvas"></canvas>
                 <canvas width="0" height="0" id="craftCanvas"></canvas>
+                <canvas width="0" height="0" id="analyserCanvas"></canvas>
                 <span class="log-open-legend-dialog glyphicon glyphicon-cog"></span>
             </div>
             <div class="log-graph-config">

js/graph_spectrum.js

@@ -1,8 +1,19 @@
 "use strict";
 
-function FlightLogAnalyser(flightLog, graphConfig, canvas, craftCanvas, options) {
+function FlightLogAnalyser(flightLog, graphConfig, canvas, analyserCanvas, options) {
 
-var canvasCtx = canvas.getContext("2d");
+var
+        ANALYSER_LEFT_PROPORTION    = 0.05, // 5% from left
+        ANALYSER_TOP_PROPORTION     = 0.55, // 55% from top
+        ANALYSER_HEIGHT_PROPORTION  = 0.40, // 40% high
+        ANALYSER_WIDTH_PROPORTION   = 0.40, // 40% wide
+
+        ANALYSER_LARGE_LEFT_PROPORTION    = 0.05, // 5% from left
+        ANALYSER_LARGE_TOP_PROPORTION     = 0.05, // 55% from top
+        ANALYSER_LARGE_HEIGHT_PROPORTION  = 0.90, // 40% high
+        ANALYSER_LARGE_WIDTH_PROPORTION   = 0.90; // 40% wide
+
+var canvasCtx = analyserCanvas.getContext("2d");
 
 var // inefficient; copied from grapher.js
 
@@ -48,6 +59,46 @@ try {
 
 	var audioIterations = 0; // variable to monitor spectrum processing
 
+	var isFullscreen = false;
+
+	this.setFullscreen = function(size) {
+		isFullscreen = (size==true);
+		that.resize();
+	}
+
+	function getSize() {
+		if (isFullscreen){
+				return {
+					height: ANALYSER_LARGE_HEIGHT_PROPORTION,
+					width: ANALYSER_LARGE_WIDTH_PROPORTION,
+					left: ANALYSER_LARGE_LEFT_PROPORTION,
+					top: ANALYSER_LARGE_TOP_PROPORTION,
+					}
+			} else {
+				return {
+					height: ANALYSER_HEIGHT_PROPORTION,
+					width: ANALYSER_WIDTH_PROPORTION,
+					left: ANALYSER_LEFT_PROPORTION,
+					top: ANALYSER_TOP_PROPORTION,
+				}
+			}
+			
+	}
+
+   	this.resize = function() {
+
+        // Determine the analyserCanvas location
+        canvasCtx.canvas.height    = (canvas.height * getSize().height);
+        canvasCtx.canvas.width     = (canvas.width  * getSize().width);
+
+		// Recenter the analyser canvas in the bottom left corner
+		$(analyserCanvas).css({
+			left: (canvas.width  * getSize().left) + "px",
+			top:  (canvas.height * getSize().top ) + "px",
+		});
+
+	}
+
 	function dataLoad(dataBuffer, audioBuffer) {
 
 			var chunkIndex, frameIndex;
@@ -94,17 +145,24 @@ try {
 
 		  canvasCtx.save();
 
+		  canvasCtx.lineWidth = 1;
+		  
 		  var bufferLength = spectrumAnalyser.frequencyBinCount;
 		  var dataArray = new Uint8Array(bufferLength);
 
-		  var HEIGHT = canvasCtx.canvas.height * 0.4; /* trial and error values to put box in right place */
-		  var WIDTH  = canvasCtx.canvas.width  * 0.4;
-		  var LEFT   = canvasCtx.canvas.width * 0.05;
-		  var TOP    = canvasCtx.canvas.height * 0.55;
+
+
+		  canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
+
+		  var MARGIN = 10; // pixels
+		  var HEIGHT = canvasCtx.canvas.height - MARGIN;
+		  var WIDTH  = canvasCtx.canvas.width;
+		  var LEFT   = canvasCtx.canvas.left;
+		  var TOP    = canvasCtx.canvas.top;
 
 		  /* only plot the lower half of the FFT, as the top half
 		  never seems to have any values in it - too high frequency perhaps. */
-		  var PLOTTED_BUFFER_LENGTH = bufferLength / 2;
+		  var PLOTTED_BUFFER_LENGTH = bufferLength; // / 2;
 
 		  canvasCtx.translate(LEFT, TOP);
 
@@ -118,19 +176,19 @@ try {
 		  var x = 0;
 
 		  for(var i = 0; i < (PLOTTED_BUFFER_LENGTH); i++) {
-			barHeight = (dataArray[i]/255 * HEIGHT);
+			barHeight = (dataArray[i]/255 * (HEIGHT));
 
 			canvasCtx.fillStyle = 'rgba(0,255,0,0.3)'; /* green */
-			canvasCtx.fillRect(x,HEIGHT-barHeight,barWidth,barHeight);
+			canvasCtx.fillRect(x,(HEIGHT)-barHeight,barWidth,barHeight);
 
 			x += barWidth + 1;
 		  }
-		  drawGridLines(options.analyserSampleRate, LEFT, TOP, WIDTH, HEIGHT);
-		  drawAxisLabel(analyserFieldName + ' ' + analyserSampleRange, WIDTH - 8, HEIGHT - 10, 'right');
+		  drawAxisLabel(analyserFieldName + ' ' + analyserSampleRange, WIDTH - 4, HEIGHT - 6, 'right');
+		  drawGridLines(options.analyserSampleRate, LEFT, TOP, WIDTH, HEIGHT, MARGIN);
 		  canvasCtx.restore();
 		}
 
-	function drawGridLines(sampleRate, LEFT, TOP, WIDTH, HEIGHT) {
+	function drawGridLines(sampleRate, LEFT, TOP, WIDTH, HEIGHT, MARGIN) {
 
 		var ticks = 5;
 		var frequencyInterval = (sampleRate / ticks) / 4;
@@ -145,7 +203,8 @@ try {
 				canvasCtx.lineTo(i * (WIDTH / ticks), HEIGHT);
 
 				canvasCtx.stroke();
-				drawAxisLabel((frequency)+"Hz", i * (WIDTH / ticks), HEIGHT * 1.05, 'center');
+				var textAlign = (i==0)?'left':((i==ticks)?'right':'center');
+				drawAxisLabel((frequency)+"Hz", i * (WIDTH / ticks), HEIGHT + MARGIN, textAlign);
 				frequency += frequencyInterval;
 		}	
 	}
@@ -186,8 +245,8 @@ try {
 			}
 			draw(); // draw the analyser on the canvas....
 	}
-} catch (e) {
-	console.log('Failed to create analyser');
-};
+	} catch (e) {
+		console.log('Failed to create analyser');
+	};
 
 }

js/grapher.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options) {
+function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserCanvas, options) {
     var
         PID_P = 0,
         PID_I = 1,
@@ -760,6 +760,8 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
             });
         }
 
+        if(analyser!=null) analyser.resize();
+
         computeDrawingParameters();
     };
 
@@ -997,6 +999,11 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
       options.drawAnalyser = state;  
     };
 
+    // Add analyser zoom toggling
+    this.setAnalyser= function(state) {
+      analyser.setFullscreen( state );  
+    };
+    
     // Use defaults for any options not provided
     options = extend(defaultOptions, options || {});
 
@@ -1005,7 +1012,7 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
     initializeCraftModel();
 
     /* Create the FlightLogAnalyser object */
-	analyser = new FlightLogAnalyser(flightLog, graphConfig, canvas, craftCanvas, options);
+	analyser = new FlightLogAnalyser(flightLog, graphConfig, canvas, analyserCanvas, options);
 
     //Handle dragging events
     $(canvas).on("mousedown",onMouseDown);

js/main.js

@@ -54,12 +54,13 @@ function BlackboxLogViewer() {
         fieldPresenter = FlightLogFieldPresenter,
 
         hasVideo = false, hasLog = false, hasMarker = false, // add measure feature
-        hasTable = true, hasCraft = true, hasSticks = true, hasAnalyser,
+        hasTable = true, hasCraft = true, hasSticks = true, hasAnalyser, hasAnalyserFullscreen,
 
         isFullscreen = false, // New fullscreen feature (to hide table)
 
         video = $(".log-graph video")[0],
         canvas = $("#graphCanvas")[0],
+        analyserCanvas = $("#analyserCanvas")[0],
         craftCanvas = $("#craftCanvas")[0],
         videoURL = false,
         videoOffset = 0.0,
@@ -466,7 +467,7 @@ function BlackboxLogViewer() {
 
         if(flightLog.getSysConfig().loopTime        != null)    {graphOptions.analyserSampleRate = 1000000 / flightLog.getSysConfig().loopTime; }
 
-        graph = new FlightLogGrapher(flightLog, activeGraphConfig, canvas, craftCanvas, graphOptions);
+        graph = new FlightLogGrapher(flightLog, activeGraphConfig, canvas, craftCanvas, analyserCanvas, graphOptions);
 
         setVideoInTime(false);
         setVideoOutTime(false);
@@ -761,6 +762,15 @@ function BlackboxLogViewer() {
             invalidateGraph();
         });
 
+        $(".view-analyser-fullscreen").click(function() {
+            if(hasAnalyser) {
+                hasAnalyserFullscreen = !hasAnalyserFullscreen; 
+            } else hasAnalyserFullscreen = false;
+            (hasAnalyserFullscreen)?$("html").addClass("has-analyser-fullscreen"):$("html").removeClass("has-analyser-fullscreen");       
+            graph.setAnalyser(hasAnalyserFullscreen);
+            invalidateGraph();
+        });
+
         var logJumpBack = function(fast) {
             var scrollTime = SMALL_JUMP_TIME;
             if(fast!=null) scrollTime = (fast!=0)?(graph.getWindowWidthTime() * fast):SMALL_JUMP_TIME;
@@ -901,7 +911,14 @@ function BlackboxLogViewer() {
                 }
             }),
 
-            keysDialog = new KeysDialog($("#dlgKeysDialog"));
+            keysDialog = new KeysDialog($("#dlgKeysDialog")),
+
+	        exportDialog = new VideoExportDialog($("#dlgVideoExport"), function(newConfig) {
+	            videoConfig = newConfig;
+	            
+	            prefs.set('videoConfig', newConfig);
+	        });
+        
 
         $(".open-graph-configuration-dialog").click(function(e) {
             e.preventDefault();