added gpx exporter

Author: bonchan

index.html

@@ -181,6 +181,7 @@ <h1>Welcome to the Enhanced Blackbox Explorer!</h1>
                         <a class="btn btn-primary btn-workspaces-export" data-toggle="tooltip" title="Export your workspace configurations to file">
                             Export Workspaces...</a>
                         <a class="btn btn-primary btn-csv-export" data-toggle="tooltip" title="Export your current graphs to CSV file"> Export CSV...</a>
+                        <a class="btn btn-primary btn-gpx-export" data-toggle="tooltip" title="Export your flight to GPX file"> Export GPX...</a>
                         <span class="btn btn-primary btn-file" data-toggle="tooltip" title="Open another log file, video file, exported workspace file or configuration dump file">
                             Open log file/video
                             <input type="file" class="file-open" accept=".bbl,.txt,.cfl,.bfl,.log,.avi,.mov,.mp4,.mpeg,.json" multiple />
@@ -3100,6 +3101,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
     <script src="js/graph_spectrum.js"></script>
     <script src="js/sticks.js"></script>
     <script src="js/csv-exporter.js"></script>
+    <script src="js/gpx-exporter.js"></script>
     <script src="js/gui.js"></script>
     <script src="js/header_dialog.js"></script>
     <script src="js/keys_dialog.js"></script>

js/gpx-exporter.js

@@ -0,0 +1,32 @@
+"use strict";
+
+/**
+ * @constructor
+ * @param {FlightLog} flightLog 
+ */
+let GpxExporter = function(flightLog) {
+
+    /** 
+     * @param {function} success is a callback triggered when export is done
+     */
+    function dump(success) {
+        let frames = _(flightLog.getChunksInTimeRange(flightLog.getMinTime(), flightLog.getMaxTime()))
+                .map(chunk => chunk.frames).value(),
+            worker = new Worker("/js/webworkers/gpx-export-worker.js");
+
+        worker.onmessage = event => {
+            success(event.data);
+            worker.terminate();
+        };
+        worker.postMessage({
+            sysConfig: flightLog.getSysConfig(),
+            fieldNames: flightLog.getMainFieldNames(),
+            frames: frames,
+        });
+    }
+
+    // exposed functions
+    return {
+        dump: dump,
+    };
+};

js/main.js

@@ -923,6 +923,28 @@ function BlackboxLogViewer() {
         CsvExporter(flightLog, options).dump(onSuccess);
     }
 
+    function exportGpx(file) {
+
+        function onSuccess(data) {
+            console.debug("Gpx export finished in", (performance.now() - startTime) / 1000, "secs");
+            if (!data) {
+                console.debug("Empty data, nothing to save");
+                return;
+            }
+            let blob = new Blob([data], {type: 'GPX File'}),
+                e    = document.createEvent('MouseEvents'),
+                a    = document.createElement('a');
+            a.download = file || $(".log-filename").text() + ".gpx";
+            a.href = window.URL.createObjectURL(blob);
+            a.dataset.downloadurl =  ['GPX File', a.download, a.href].join(':');
+            e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+            a.dispatchEvent(e);
+        }
+
+        let startTime = performance.now();
+        GpxExporter(flightLog).dump(onSuccess);
+    }
+
     function newGraphConfig(newConfig) {
         lastGraphConfig = graphConfig; // Remember the last configuration.
         graphConfig = newConfig;
@@ -1441,6 +1463,11 @@ function BlackboxLogViewer() {
             exportCsv();
             e.preventDefault();
         });
+        $(".btn-gpx-export").click(function(e) {
+            setGraphState(GRAPH_STATE_PAUSED);
+            exportGpx();
+            e.preventDefault();
+        });
 
         if (FlightLogVideoRenderer.isSupported()) {
             $(".btn-video-export").click(function(e) {

js/webworkers/gpx-export-worker.js

@@ -0,0 +1,60 @@
+importScripts("/node_modules/lodash/lodash.min.js");
+
+onmessage = function (event) {
+  const header = `<?xml version="1.0" encoding="UTF-8"?>
+    <gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd" xmlns:gpx_style="http://www.topografix.com/GPX/gpx_style/0/2" 
+    version="1.1" 
+    creator="https://github.com/betaflight/blackbox-log-viewer">
+    <metadata>
+        <author>
+            <name>Betaflight Blackbox Explorer</name>
+            <link href="https://github.com/betaflight/blackbox-log-viewer"></link>
+        </author>
+    </metadata>`;
+
+  const footer = "</gpx>";
+
+  const timeIndex = event.data.fieldNames.indexOf("time");
+  const latIndex = event.data.fieldNames.indexOf("GPS_coord[0]");
+  const lngIndex = event.data.fieldNames.indexOf("GPS_coord[1]");
+  const altitudeIndex = event.data.fieldNames.indexOf("GPS_altitude");
+  const speedIndex = event.data.fieldNames.indexOf("GPS_speed");
+  const groundCourseIndex = event.data.fieldNames.indexOf("GPS_ground_course");
+  const numSatIndex = event.data.fieldNames.indexOf("GPS_numSat");
+
+  let trkpts = "";
+  for (var chunk of event.data.frames) {
+    for (var frame of chunk) {
+      if (!frame[latIndex] || !frame[lngIndex]) continue;
+      const timeMillis = Math.floor(frame[timeIndex] / 1000);
+      const lat = frame[latIndex] / 10000000;
+      const lng = frame[lngIndex] / 10000000;
+      const altitude = frame[altitudeIndex] / 10;
+      const speed = frame[speedIndex] / 100;
+      const groundCourse = frame[groundCourseIndex] / 10;
+      const numSat = frame[numSatIndex];
+
+      let date = new Date(event.data.sysConfig["Log start datetime"]);
+      date.setTime(date.getTime() + timeMillis);
+
+      let trkpt = `<trkpt lat="${lat}" lon="${lng}">`;
+      trkpt += `<ele>${altitude}</ele>`;
+      trkpt += `<time>${date.toISOString()}</time>`;
+      trkpt += `<speed>${speed}</speed>`;
+      trkpt += `<degreesType>${groundCourse}</degreesType>`;
+      trkpt += `<sat>${numSat}</sat>`;
+      trkpt += `</trkpt>\n`;
+
+      trkpts += trkpt;
+    }
+  }
+
+  let trk = 
+  `<trk>
+    <name>new</name>
+    <type>Flight</type>
+    <trkseg>${trkpts}</trkseg>
+   </trk>`;
+
+  postMessage(header + "\n" + trk + "\n" + footer);
+};