Seekbar more metrics (#635)

* Added selection of different values for the seekBar

* fix by tbolin

* fixed my js to let

* typo

* slowly getting rid of smells

* more de-smelling

* I feel dirty

* getting closer

* moved selector into the seekbar
(like its done in the spectrum plots)

Author: VolkerGoeschl

css/main.css

@@ -537,7 +537,7 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
 	display:block;
 }
 
-#analyser {
+#analyser ,#log-seek-bar {
     z-index: 10;
 }
 
@@ -647,10 +647,42 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
 	position: absolute;
 }
 
-.analyser, .map-container {
+.analyser, .map-container, .log-seek-bar {
 	position: absolute;
 }
 
+#log-seek-bar {
+    width: 100%;
+}
+
+.log-seek-bar:hover .non-shift #seekbarTypeSelect {
+    opacity: 1;
+    height: auto;
+    transition: opacity 500ms ease-in;
+}
+
+#seekbarToolbar {
+    position: absolute;
+    top: 8px;
+    left: 20px;
+}
+.log-seek-bar #seekbarTypeSelect {
+    color: #bbb;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    left: 5px;
+    float: left;
+    z-index: 9;
+    position: absolute;
+    font-size: 9px;
+}
+
+.log-seek-bar #seekbarTypeSelect select {
+    border-radius: 3px;
+    padding: 0px 5px;
+}
+
 .log-graph video {
     position:absolute;
     top:0;

index.html

@@ -571,8 +571,12 @@ <h4>Field values</h4>
         </div>
     </div>
     <!-- Log Scroll bar -->
-    <div class="log-seek-bar">
+    <div id="log-seek-bar" class="log-seek-bar">
         <canvas width="200" height="100"></canvas>
+        <span id="seekbarToolbar" class="non-shift">
+            <div id="seekbarType" class="seekBar-selection" data-toggle="tooltip" title="Vaue to plot">
+            </div>
+        </span>
     </div>
     <!-- Status Bar -->
     <div id="status-bar">

js/flightlog.js

@@ -141,6 +141,8 @@ function FlightLog(logData) {
         return {
             times: directory.times,
             avgThrottle: directory.avgThrottle,
+            maxMotorDiff: directory.maxMotorDiff,
+            maxRC: directory.maxRC,
             hasEvent: directory.hasEvent
         };
     };

js/flightlog_index.js

@@ -43,6 +43,8 @@ function FlightLogIndex(logData) {
                     times: [],
                     offsets: [],
                     avgThrottle: [],
+                    maxRC: [],
+                    maxMotorDiff: [],
                     initialIMU: [],
                     initialSlow: [],
                     initialGPSHome: [],
@@ -57,8 +59,12 @@ function FlightLogIndex(logData) {
 
                 iframeCount = 0,
                 motorFields = [],
+                maxRCFields = [],
                 matches,
                 throttleTotal,
+                rcTotal,
+                maxMotor,
+                minMotor,
                 eventInThisChunk = null,
                 parsedHeader,
                 sawEndMarker = false;
@@ -88,11 +94,19 @@ function FlightLogIndex(logData) {
                     lastGPS = [];
 
                 // Identify motor fields so they can be used to show the activity summary bar
-                for (var j = 0; j < 8; j++) {
+                for (let j = 0; j < 8; j++) {
                     if (mainFrameDef.nameToIndex["motor[" + j + "]"] !== undefined) {
                         motorFields.push(mainFrameDef.nameToIndex["motor[" + j + "]"]);
                     }
                 }
+
+                for (let j = 0; j < 3; j++) {
+                    if (mainFrameDef.nameToIndex["rcCommand[" + j + "]"] !== undefined) {
+                        maxRCFields.push(mainFrameDef.nameToIndex["rcCommand[" + j + "]"]);
+                    } else {
+                        console.log("RCField not found");
+                    }
+                }
 
                 // Do we have mag fields? If not mark that data as absent
                 if (magADC[0] === undefined) {
@@ -127,12 +141,25 @@ function FlightLogIndex(logData) {
 
                                     if (motorFields.length) {
                                         throttleTotal = 0;
-                                        for (var j = 0; j < motorFields.length; j++) {
-                                            throttleTotal += frame[motorFields[j]];
+                                        maxMotor = 0;
+                                        minMotor = 2000;
+                                        for (let mofo of motorFields) {
+                                            maxMotor = Math.max(frame[mofo], maxMotor);
+                                            minMotor = Math.min(frame[mofo], minMotor);
+                                            throttleTotal += frame[mofo];
                                         }
 
+                                        intraIndex.maxMotorDiff.push(maxMotor - minMotor);
                                         intraIndex.avgThrottle.push(Math.round(throttleTotal / motorFields.length));
                                     }
+                                    if (maxRCFields.length) {
+                                        rcTotal = 0;
+                                        for (let rcfo of maxRCFields) {
+                                            rcTotal += Math.max(rcTotal,Math.abs(frame[rcfo]));
+                                        }
+
+                                        intraIndex.maxRC.push(rcTotal);
+                                    }
 
                                     /* To enable seeking to an arbitrary point in the log without re-reading anything
                                      * that came before, we have to record the initial state of various items which aren't
@@ -234,7 +261,9 @@ function FlightLogIndex(logData) {
                     offsets: new Array(sourceIndex.offsets.length),
                     minTime: sourceIndex.minTime,
                     maxTime: sourceIndex.maxTime,
-                    avgThrottle: new Array(sourceIndex.avgThrottle.length)
+                    avgThrottle: new Array(sourceIndex.avgThrottle.length),
+                    maxRC: new Array(sourceIndex.maxRC.length),
+                    maxMotorDiff: new Array(sourceIndex.maxMotorDiff.length),
                 };
 
             if (sourceIndex.times.length > 0) {
@@ -257,11 +286,14 @@ function FlightLogIndex(logData) {
             }
 
             if (sourceIndex.avgThrottle.length > 0) {
-                for (j = 0; j < sourceIndex.avgThrottle.length; j++) {
+                // Assuming that avgThrottle, maxRC and maxMotorDiff Arrays are the same length
+                // since they are build in the same loop. Just to get rid of a codesmell on Sonarcloud
+                for (let j = 0; j < sourceIndex.avgThrottle.length; j++) {
                     resultIndex.avgThrottle[j] = sourceIndex.avgThrottle[j] - 1000;
+                    resultIndex.maxRC[j] = sourceIndex.maxRC[j] * 20 - 1000;
+                    resultIndex.maxMotorDiff[j] = sourceIndex.maxMotorDiff[j] * 20 - 1000;
                 }
-            }
-            
+            }           
             resultIndexes[i] = resultIndex;
         }
 

js/main.js

@@ -105,6 +105,7 @@ function BlackboxLogViewer() {
         seekBar = new SeekBar(seekBarCanvas),
 
         seekBarRepaintRateLimited = $.throttle(200, $.proxy(seekBar.repaint, seekBar)),
+        seekBarMode = "avgThrottle",
 
         updateValuesChartRateLimited,
 
@@ -312,6 +313,36 @@ function BlackboxLogViewer() {
         }
     }
 
+    function renderSeekBarPicker(){
+        var
+            seekBarContainer = $(".seekBar-selection"),
+            seekBarPicker,
+            seekBarItems = [
+                ["avgThrottle", "Average motor throttle"],
+                ["maxRC", "Maximum stick input"],
+                ["maxMotorDiff", "Maximum motor differential"],
+            ];
+        seekBarContainer.empty();
+        seekBarPicker = $('<select id="seekbarTypeSelect", class="seekbarTypeSelect">');
+        seekBarPicker.change(function() {
+            let 
+                activity = flightLog.getActivitySummary(),
+                displayItem = $(this).val();
+            seekBarMode = displayItem;
+            seekBar.setActivity(activity.times, activity[displayItem], activity.hasEvent);
+            seekBar.repaint();
+        });
+        for (let item of seekBarItems) {
+            let option;
+            option = $("<option></option>");
+            option.text(item[1]);
+            option.attr("value", item[0]);
+            seekBarPicker.append(option);
+        }
+        seekBarContainer.append(seekBarPicker);
+
+    }
+
     function renderLogFileInfo(file) {
         $(".log-filename").text(file.name);
 
@@ -336,7 +367,7 @@ function BlackboxLogViewer() {
         }
 
         for (index = 0; index < logCount; index++) {
-            var
+            let
                 logLabel,
                 option, holder,
                 error;
@@ -411,9 +442,8 @@ function BlackboxLogViewer() {
 
         var 
             activity = flightLog.getActivitySummary();
-        
-        seekBar.setActivity(activity.times, activity.avgThrottle, activity.hasEvent);
-        
+
+        seekBar.setActivity(activity.times, activity[seekBarMode], activity.hasEvent);
         seekBar.repaint();
 
         // Add flightLog to map
@@ -708,6 +738,7 @@ function BlackboxLogViewer() {
             }
 
             renderLogFileInfo(file);
+            renderSeekBarPicker();
             currentOffsetCache.log      = file.name; // store the name of the loaded log file
             currentOffsetCache.index    = null;      // and clear the index
 
@@ -2092,7 +2123,7 @@ function BlackboxLogViewer() {
                 }
             }
             if (fullPath != null) {
-                const filename = fullPath.replace(/^.*[\\\/]/, '');
+                const filename = fullPath.replace(/^.*[\\/]/, '');
                 const file = new File(fullPath, filename);
                 loadFiles([file]);
             }