Add measure feature

Press M to mark a point on the graph, as you scroll time from mark is
then shown on toolbar, press M again to clear marker.

Author: Gary Keeble

css/main.css

@@ -313,6 +313,13 @@ html.has-log .log-seek-bar {
     display:block;
 }
 
+html .graph-time-marker-group > .graph-time-marker {
+    display:none;
+}
+html.has-marker .graph-time-marker-group > .graph-time-marker {
+    display:inline-block;
+}
+
 .log-metadata, .log-field-values {
     display:none;
 }

index.html

@@ -206,6 +206,9 @@ <h4>Time</h4>
                     <div class="form-group">
                         <input type="text" class="form-control graph-time" value="1.0" size="8">
                     </div>
+                    <div class="form-group graph-time-marker-group">
+                        <input type="text" class="form-control graph-time-marker" value="0" size="8">
+                    </div>
                 </div>
             </li>
             <li class="log-sync-panel">

js/grapher.js

@@ -439,7 +439,12 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
 
         canvasContext.fillText(formatTime(timeMsec, true), canvas.width - frameLabelTextWidthFrameTime - 8, canvas.height - 8 - drawingParams.fontSizeFrameLabel - 8);
         // update time field on toolbar
-        $(".graph-time").val(formatTime(timeMsec, true));
+//        $(".graph-time").val(formatTime(timeMsec, true));
+//        if(hasMarker) {
+//            $(".graph-time-marker").val(formatTime(timeMsec-markerTime, true));
+//        }
+        
+
     }
 
     /**

js/main.js

@@ -93,7 +93,7 @@ function BlackboxLogViewer() {
         graphLegend = null,
         fieldPresenter = FlightLogFieldPresenter,
 
-        hasVideo = false, hasLog = false,
+        hasVideo = false, hasLog = false, hasMarker = false, // add measure feature
         video = $(".log-graph video")[0],
         canvas = $("#graphCanvas")[0],
         craftCanvas = $("#craftCanvas")[0],
@@ -102,6 +102,8 @@ function BlackboxLogViewer() {
 
         videoExportInTime = false,
         videoExportOutTime = false,
+
+        markerTime = 0, // New marker time
 
         graphRendersCount = 0,
 
@@ -191,6 +193,12 @@ function BlackboxLogViewer() {
             }
 
             table.append(rows.join(""));
+
+            // update time field on toolbar
+            $(".graph-time").val(formatTime(currentBlackboxTime/1000, true));
+            if(hasMarker) {
+                $(".graph-time-marker").val(formatTime((currentBlackboxTime-markerTime)/1000, true));
+            }
         }
     }
 
@@ -595,7 +603,12 @@ function BlackboxLogViewer() {
     function onLegendSelectionChange() {
         updateCanvasSize();
     }
-    
+
+    function markerSet(state) { // update marker field
+        hasMarker = state;
+        (state)?$("html").addClass("has-marker"):$("html").removeClass("has-marker");       
+    }
+        
     prefs.get('videoConfig', function(item) {
         if (item) {
             videoConfig = item;
@@ -888,6 +901,15 @@ function BlackboxLogViewer() {
                             }
                         }                        
                         e.preventDefault();
+                    break;
+                    case "M".charCodeAt(0):
+                        if (!(shifted)) {
+                            markerTime = currentBlackboxTime;
+                            $(".graph-time-marker").val(formatTime(0));
+                            markerSet(!hasMarker);
+                        }                        
+                        e.preventDefault();
+                    break;
                     // Add my shortcuts
                     case " ".charCodeAt(0): // start/stop playback
                             logPlayPause();

js/tools.js

@@ -168,22 +168,23 @@ function leftPad(string, pad, minLength) {
 }
 
 function formatTime(msec, displayMsec) {
+// modify function to allow negative times.
     var
-        secs, mins, hours;
+        ms, secs, mins, hours;
 
-    msec = Math.round(msec);
+    ms = Math.round(Math.abs(msec));
 
-    secs = Math.floor(msec / 1000);
-    msec %= 1000;
+    secs = Math.floor(ms / 1000);
+    ms %= 1000;
 
     mins = Math.floor(secs / 60);
     secs %= 60;
 
     hours = Math.floor(mins / 60);  
     mins %= 60;
 
-    return (hours ? leftPad(hours, "0", 2) + ":" : "") + leftPad(mins, "0", 2) + ":" + leftPad(secs, "0", 2)
-        + (displayMsec ? "." + leftPad(msec, "0", 3) : "");
+    return ((msec<0)?'-':'') + (hours ? leftPad(hours, "0", 2) + ":" : "") + leftPad(mins, "0", 2) + ":" + leftPad(secs, "0", 2)
+        + (displayMsec ? "." + leftPad(ms, "0", 3) : "");
 }
 
 function stringTimetoMsec(input) {