Merge pull request #218 from atomgomba/feature-csv-export

CSV export feature

Author: mikeller

gulpfile.js

@@ -250,6 +250,8 @@ function dist() {
         './js/tools.js',
         './js/user_settings_dialog.js',
         './js/video_export_dialog.js',
+        './js/csv-exporter.js',
+        './js/webworkers/csv-export-worker.js',
         './js/vendor/FileSaver.js',
         './js/vendor/bootstrap.js',
         './js/vendor/bootstrap.min.js',

index.html

@@ -180,6 +180,7 @@ <h1>Welcome to the Enhanced Blackbox Explorer!</h1>
                         <a class="btn btn-primary btn-video-export" data-toggle="tooltip" title="Export your vide and chart setup to file"> Export video...</a>
                         <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>
                         <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 />
@@ -2391,6 +2392,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
     <script src="js/vendor/FileSaver.js"></script>
     <script src="js/vendor/webm-writer-0.1.1.js"></script>
     <script src="js/vendor/semver.js"></script>
+    <script src="node_modules/lodash/lodash.min.js"></script>
     <script src="js/pref_storage.js"></script>
     <script src="js/tools.js"></script>
     <script src="js/cache.js"></script>
@@ -2411,6 +2413,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
     <script src="js/graph_config_dialog.js"></script>
     <script src="js/graph_spectrum.js"></script>
     <script src="js/sticks.js"></script>
+    <script src="js/csv-exporter.js"></script>
     <script src="js/gui.js"></script>
     <script src="js/header_dialog.js"></script>
     <script src="js/keys_dialog.js"></script>

js/csv-exporter.js

@@ -0,0 +1,47 @@
+"use strict";
+
+/**
+ * @typedef {object} ExportOptions
+ * @property {string} columnDelimiter
+ * @property {string} stringDelimiter
+ * @property {boolean} quoteStrings
+ */
+
+/**
+ * @constructor
+ * @param {FlightLog} flightLog 
+ * @param {ExportOptions} [opts={}]
+ */
+let CsvExporter = function(flightLog, opts={}) {
+
+    var opts = _.merge({
+        columnDelimiter: ",",
+        stringDelimiter: "\"",
+        quoteStrings: true,
+    }, opts);
+
+    /** 
+     * @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/csv-export-worker.js");
+
+        worker.onmessage = event => {
+            success(event.data);
+            worker.terminate();
+        };
+        worker.postMessage({
+            sysConfig: flightLog.getSysConfig(),
+            fieldNames: flightLog.getMainFieldNames(),
+            frames: frames,
+            opts: opts,
+        });
+    }
+
+    // exposed functions
+    return {
+        dump: dump,
+    };
+};

js/main.js

@@ -861,6 +861,28 @@ function BlackboxLogViewer() {
         reader.readAsText(file);
     }
 
+    function exportCsv(file, options={}) {
+
+        function onSuccess(data) {
+            console.debug("CSV export finished in", (performance.now() - startTime) / 1000, "secs");
+            if (!data) {
+                console.debug("Empty data, nothing to save");
+                return;
+            }
+            let blob = new Blob([data], {type: 'text/csv'}),
+                e    = document.createEvent('MouseEvents'),
+                a    = document.createElement('a');
+            a.download = file || $(".log-filename").text() + ".csv";
+            a.href = window.URL.createObjectURL(blob);
+            a.dataset.downloadurl =  ['text/csv', 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();
+        CsvExporter(flightLog, options).dump(onSuccess);
+    }
+
     // New workspaces feature; local storage of user configurations
     prefs.get('workspaceGraphConfigs', function(item) {
         if(item) {
@@ -1344,7 +1366,12 @@ function BlackboxLogViewer() {
             saveWorkspaces();
             e.preventDefault();
         });
-        
+
+        $(".btn-csv-export").click(function(e) {
+            setGraphState(GRAPH_STATE_PAUSED);
+            exportCsv();
+            e.preventDefault();
+        });
 
         if (FlightLogVideoRenderer.isSupported()) {
             $(".btn-video-export").click(function(e) {

js/webworkers/csv-export-worker.js

@@ -0,0 +1,45 @@
+importScripts("/node_modules/lodash/lodash.min.js");
+
+onmessage = function(event) {
+
+    /**
+     * Converts `null` and other empty non-numeric values to empty string.
+     * 
+     * @param {object} value is not a number
+     * @returns {string}
+     */
+    function normalizeEmpty(value) {
+        return !!value ? value : "";
+    }
+
+    /**
+     * @param {array} columns 
+     * @returns {string}
+     */
+    function joinColumns(columns) {
+        return _(columns)
+            .map(value => 
+                _.isNumber(value)
+                ? value
+                : stringDelim + normalizeEmpty(value) + stringDelim)
+            .join(opts.columnDelimiter);
+    }
+
+    let opts = event.data.opts,
+        stringDelim = opts.quoteStrings
+            ? opts.stringDelimiter
+            : "",
+        mainFields = _([joinColumns(event.data.fieldNames)])
+            .concat(_(event.data.frames)
+                .flatten()
+                .map(row => joinColumns(row))
+                .value())
+            .join("\n"),
+        headers = _(event.data.sysConfig)
+            .map((value, key) => joinColumns([key, value]))
+            .join("\n"),
+        result = headers + "\n" + mainFields;
+
+    postMessage(result);
+    
+};

package-lock.json

@@ -22,7 +22,9 @@
   },
   "author": "The Betaflight open source project.",
   "license": "GPL-3.0",
-  "dependencies": {},
+  "dependencies": {
+    "lodash": "^4.17.10"
+  },
   "devDependencies": {
     "command-exists": "^1.2.7",
     "del": "^3.0.0",