Add marker to graph as a custom event

Marker is now shown on the graph as a red event.

Adjusted width of chart to allow more toolbar area.

Moved the update of the current time text box into the main routine for
tidiness.

Author: Gary Keeble

css/main.css

@@ -9,7 +9,7 @@ html, body {
 /* Add an extended wide size to the page container for large monitors */
 @media (min-width: 1400px) {
     .container.main-pane {
-        width:1280px;
+        width:1320px;
     }
 }
 

js/flightlog_fielddefs.js

@@ -23,9 +23,10 @@ var
         GTUNE_CYCLE_RESULT: 20,
         FLIGHT_MODE: 30, // New Event type
 
+        CUSTOM : 250, // Virtual Event Code - Never part of Log File.
         LOG_END: 255
     }),
-    
+        
     FLIGHT_LOG_FLIGHT_MODE_NAME = makeReadOnly([
         "ANGLE_MODE",
         "HORIZON_MODE",

js/grapher.js

@@ -438,12 +438,6 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
             frameLabelTextWidthFrameTime = canvasContext.measureText("00:00.000").width;
 
         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));
-//        if(hasMarker) {
-//            $(".graph-time-marker").val(formatTime(timeMsec-markerTime, true));
-//        }
-        
 
     }
 
@@ -641,6 +635,9 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
             case FlightLogEvent.FLIGHT_MODE:
                 drawEventLine(x, labelY, "Flight Mode Change" + eventToFriendly(event.data.newFlags, event.data.lastFlags), "rgba(0,0,255,0.75)", 3);
             break;
+            case FlightLogEvent.CUSTOM: // Virtual Events shown in RED
+                drawEventLine(x, labelY, (event.label)?event.label:'EVENT', "rgba(255,0,0,0.75)", 3);
+            break;
             default:
                 drawEventLine(x);
         }
@@ -677,6 +674,19 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
                 }
             }
         }
+
+        // Add custom markers
+
+        // Draw Marker Event Line
+        var markerEvent = blackboxLogViewer.getMarker();
+        if(markerEvent!=null) {
+            if(markerEvent.state) drawEvent(
+                {
+                event:FlightLogEvent.CUSTOM,
+                time:markerEvent.time,
+                label:'Marker:' +formatTime((markerEvent.time-flightLog.getMinTime())/1000, true) 
+                }, sequenceNum++);
+        }
     }
 
     /**
@@ -838,7 +848,7 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, options)
 
             // Draw events
             drawEvents(chunks);
-            
+
             // Draw details at the current time
             var
                 centerFrame = flightLog.getSmoothedFrameAtTime(windowCenterTime);

js/main.js

@@ -195,7 +195,7 @@ function BlackboxLogViewer() {
             table.append(rows.join(""));
 
             // update time field on toolbar
-            $(".graph-time").val(formatTime(currentBlackboxTime/1000, true));
+            $(".graph-time").val(formatTime((currentBlackboxTime-flightLog.getMinTime())/1000, true));
             if(hasMarker) {
                 $(".graph-time-marker").val(formatTime((currentBlackboxTime-markerTime)/1000, true));
             }
@@ -604,11 +604,18 @@ function BlackboxLogViewer() {
         updateCanvasSize();
     }
 
-    function markerSet(state) { // update marker field
+    function setMarker(state) { // update marker field
         hasMarker = state;
         (state)?$("html").addClass("has-marker"):$("html").removeClass("has-marker");       
     }
-        
+
+    this.getMarker = function() { // get marker field
+        return {
+            state:hasMarker,
+            time:markerTime
+            };
+    }
+           
     prefs.get('videoConfig', function(item) {
         if (item) {
             videoConfig = item;
@@ -906,7 +913,8 @@ function BlackboxLogViewer() {
                         if (!(shifted)) {
                             markerTime = currentBlackboxTime;
                             $(".graph-time-marker").val(formatTime(0));
-                            markerSet(!hasMarker);
+                            setMarker(!hasMarker);
+                            invalidateGraph();
                         }                        
                         e.preventDefault();
                     break;