Convert from Chrome App to Electron

.gitignore

@@ -1,4 +1,5 @@
 /.settings/
 /.project
 .DS_Store
-/blackbox-chrome-app.zip
+node_modules
+/dist/

Makefile

@@ -1,8 +1,12 @@
-# Package up the current git revision for submission to the Chrome webstore
-all : blackbox-chrome-app.zip
+all : build/icon.icns build/icon.ico
+
+# Mac icons (this build tool is only on Mac)
+build/icon.icns : build/blackbox.iconset/*
+	iconutil -c icns build/blackbox.iconset --output build/icon.icns
+
+build/icon.ico : build/blackbox.iconset/*
+	node_modules/.bin/to-ico build/blackbox.iconset/icon_16x16.png build/blackbox.iconset/icon_32x32.png build/blackbox.iconset/icon_64x64.png \
+	       build/blackbox.iconset/icon_128x128.png build/blackbox.iconset/icon_256x256.png > build/icon.ico
 
 clean :
-	rm blackbox-chrome-app.zip
 
-blackbox-chrome-app.zip : js/*
-	git archive --format zip --output $@ master 

Readme.md

@@ -8,28 +8,38 @@ be played behind the log. You can export the graphs as a WebM video to share wit
 
 ## Installation
 
-There are three methods of installation available:
+You can grab our desktop app for Windows (32 and 64 bit), macOS and Linux (.deb) from our
+[GitHub releases page](https://github.com/cleanflight/blackbox-log-viewer/releases).
 
-### Chrome Web Store method
+On Windows, download the ".exe" installer, run it, and you should end up with an icon on your desktop.
 
-The easiest way to get the explorer (if you have Google Chrome) is to install it from the Chrome Web Store:
+On macOS, download the ".dmg" archive. Open it up, and drag the Blackbox Explorer icon to the Applications
+folder to install it.
 
-https://chrome.google.com/webstore/detail/cleanflight-blackbox-expl/cahpidddaimdojnddnahjpnefajpheep
+On Debian-based Linux (such as Ubuntu), download the ".deb" package that matches your architecture (32 or 64 bit). 
+You can install that on Ubuntu with something like:
 
-This will add it to your computer as a Chrome App.
+```
+dpkg -i cleanflight-blackbox-explorer_1.0.0_amd64.deb
 
-### Manual Chrome App install
-Download the contents of this repository by clicking the "download ZIP" button on the right of this page. Unpack
-the zip somewhere on your computer. In Google Chrome, open up the Extensions page, tick the "developer mode" tickbox, 
-click the "load unpacked extension" button, and point it at the unpacked folder. This will add it as a Chrome App.
+# Install any dependencies that prevented the deb from finishing installation:
+apt-get install -f
+```
 
-### Run as a webpage
-Download the contents of this repository by clicking the "download ZIP" button on the right of this page. Unpack
-the zip somewhere on your computer, and double click "index.html" file to open it with your web browser. 
+After installing, Blackbox Explorer will automatically keep itself up to date on Windows and macOS. You'll
+need to manually download new versions on Linux.
 
-Note that the "video export" feature is only available when opened with Google Chrome. Also, running it this way will 
-limit the exported flight video to 500MB in size. Use one of the previous Chrome App install methods to unlock 
->500MB video export.
+## Running from source without installation
+
+If you're a developer, you can run Blackbox Explorer without installing one of our binary releases.
+Clone this repository, install Node JS (I suggest the 6.9 LTS release), and run "npm install" in the root of our repo in order to fetch
+our dependencies. Now you can launch the application by running "npm start", or start it with the JavaScript
+inspector enabled with "npm run debug".
+
+## Legacy browser / Chrome version
+
+We're dropping support for our old "Chrome App" version, since Chrome will drop support for Chrome apps in 2017. 
+You can still find that [legacy version here](https://github.com/cleanflight/blackbox-log-viewer/tree/chrome-legacy) if you want it.
 
 ## Usage
 Click the "Open log file/video" button at the top right and select your logged ".TXT" file and your flight video (if 
@@ -55,15 +65,10 @@ Or you may want to plot vbat against throttle to examine your battery's performa
 
 ## Notes
 
-This tool has not been tested on Internet Explorer, but definitely won't work on versions earlier than version 9.
-
 Your web browser must support the video codec that your flight video uses in order to play it. Firefox doesn't support
 H.264 videos on Mac, so if your video won't play, try Google Chrome instead. If it still won't play, follow the 
 instructions in the next section to convert your video using Handbrake.
 
-The best performing web browser tends to be Google Chrome, especially when trying to play your flight video at the same
-time.
-
 This tool is currently in the Beta stage, so a number of key features have yet to be implemented:
 
 - There is no control over the amount of smoothing applied to the graph lines

css/main.css → app/css/main.css

@@ -19,6 +19,12 @@ html, body {
     }
 }
 
+.app-version {
+    font-size:50%;
+    margin-left: 0.25em;
+    opacity: 0.5;
+}
+
 .log-info {
     max-width: 30em;
 }

index.html → app/index.html

@@ -1,18 +1,21 @@
 <!DOCTYPE html>
-<html class="no-js">
+<html>
 <head>
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<link rel="stylesheet" href="css/bootstrap.min.css">
-<link rel="stylesheet" href="css/bootstrap-theme.min.css">
+<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
+<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.css">
 <link rel="stylesheet" href="css/jquery.nouislider.min.css">
 <link rel="stylesheet" href="css/main.css">
 
-<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+<script>
+    window.$ = window.jQuery = require('jquery');
+    require('bootstrap');
+</script>
+
 </head>
 <body>
     <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
@@ -35,7 +38,7 @@
     <div class="welcome-pane">
         <div class="container">
             <div class="jumbotron">
-                <h1>Welcome to Blackbox Explorer!</h1>
+                <h1>Welcome to Blackbox Explorer!<small class="app-version"></small></h1>
                 <p>This tool allows you to view and analyze logs created by Cleanflight's Blackbox feature.</p>
                 <span class="btn btn-primary btn-lg btn-file"> Open log file/video <input type="file" class="file-open" multiple></span>
             </div>
@@ -378,7 +381,6 @@ <h4 class="modal-title">Export video</h4>
                                 <label class="col-sm-3 control-label">File size</label>
                                 <div class="col-sm-9">
                                     <p class="form-control-static video-export-size"></p>
-                                    <div class="alert alert-danger" role="alert">You must install this tool as a Chrome App in order to export videos larger than 500MB</div>
                                 </div>
                             </div>
                             <div class="form-group">
@@ -402,13 +404,9 @@ <h4 class="modal-title">Export video</h4>
         </div>
     </div>
 
-    <script src="js/vendor/jquery-1.11.3.min.js"></script>
-    <script src="js/vendor/bootstrap.min.js"></script>
     <script src="js/vendor/jquery.ba-throttle-debounce.js"></script>
     <script src="js/vendor/three.min.js"></script>
     <script src="js/vendor/jquery.nouislider.all.min.js"></script>
-    <script src="js/vendor/FileSaver.js"></script>
-    <script src="js/vendor/webm-writer-0.1.1.js"></script>
     <script src="js/pref_storage.js"></script>
     <script src="js/tools.js"></script>
     <script src="js/cache.js"></script>

js/flightlog_video_renderer.js → app/js/flightlog_video_renderer.js

@@ -1,5 +1,11 @@
 "use strict";
 
+const
+    {dialog} = require('electron').remote,
+    fs = require('fs'),
+
+    WebMWriter = require('webm-writer');
+
 /**
  * Render a video of the given log using the given videoOptions (user video settings) and logParameters.
  * 
@@ -83,44 +89,31 @@ function FlightLogVideoRenderer(flightLog, logParameters, videoOptions, events)
         }
     }
 
-    function supportsFileWriter() {
-        return !!(chrome && chrome.fileSystem);
-    }
-
     /**
-     * Returns a Promise that resolves to a FileWriter for the file the user chose, or fails if the user cancels/
+     * Returns a Promise that resolves to a fd for the file the user chose, or fails if the user cancels/
      * something else bad happens.
      */
-    function openFileForWrite(suggestedName, onComplete) {
+    function openFileForWrite(suggestedName) {
         return new Promise(function(resolve, reject) {
-            chrome.fileSystem.chooseEntry({type: 'saveFile', suggestedName: suggestedName, 
-                    accepts: [{extensions: ['webm']}]}, function(fileEntry) {
-                var 
-                    error = chrome.runtime.lastError;
-
-                if (error) {
-                    if (error.message == "User cancelled") {
-                        reject(null);
-                    } else {
-                        reject(error.message);
+            dialog.showSaveDialog({
+                title: "Write video to file...",
+                defaultPath: suggestedName,
+                filters: [
+                    {
+                        name: "WebM video",
+                        extensions: ["webm"]
                     }
+                ]
+            }, function(filename) {
+                if (!filename) {
+                    reject(null);
                 } else {
-                    fileEntry.createWriter(function (fileWriter) {
-                        fileWriter.onerror = function (e) {
-                            console.error(e);
-                        };
-
-                        fileWriter.onwriteend = function() {
-                            fileWriter.onwriteend = null;
-
-                            resolve(fileWriter);
-                        };
-
-                        // If the file already existed then we need to truncate it to avoid doing a partial rewrite
-                        fileWriter.truncate(0);
-                    }, function (e) {
-                        // File is not readable or does not exist!
-                        reject(e);
+                    fs.open(filename, "w", (err, fd) => {
+                        if (err) {
+                            reject(err);
+                        } else {
+	                        resolve(fd);
+                        }
                     });
                 }
             });
@@ -136,11 +129,7 @@ function FlightLogVideoRenderer(flightLog, logParameters, videoOptions, events)
     }
 
     function finishRender() {
-        videoWriter.complete().then(function(webM) {
-            if (webM) {
-                window.saveAs(webM, "video.webm");
-            }
-
+        videoWriter.complete().then(function() {
             notifyCompletion(true, frameIndex);
         });
     }
@@ -245,20 +234,15 @@ function FlightLogVideoRenderer(flightLog, logParameters, videoOptions, events)
                 frameRate: videoOptions.frameRate,
             };
 
-        if (supportsFileWriter()) {
-            openFileForWrite("video.webm").then(function(fileWriter) {
-                webMOptions.fileWriter = fileWriter;
-
-                videoWriter = new WebMWriter(webMOptions);
-                renderChunk();
-            }, function(error) {
-                console.error(error);
-                notifyCompletion(false);
-            });
-        } else {
+        openFileForWrite("video.webm").then(function(fd) {
+            webMOptions.fd = fd;
+
             videoWriter = new WebMWriter(webMOptions);
             renderChunk();
-        }
+        }, function(error) {
+            console.error(error);
+            notifyCompletion(false);
+        });
     };
 
     /**
@@ -267,15 +251,7 @@ function FlightLogVideoRenderer(flightLog, logParameters, videoOptions, events)
     this.getWrittenSize = function() {
         return videoWriter ? videoWriter.getWrittenSize() : 0;
     };
-
-    /**
-     * Returns true if the video can be saved directly to disk (bypassing memory caching). If so, the user
-     * will be prompted for a filename when the start() method is called.
-     */
-    this.willWriteDirectToDisk = function() {
-        return supportsFileWriter();
-    };
-
+
     canvas.width = videoOptions.width;
     canvas.height = videoOptions.height;
 
@@ -308,19 +284,3 @@ function FlightLogVideoRenderer(flightLog, logParameters, videoOptions, events)
         logParameters.flightVideo.muted = true;
     }
 }
-
-/**
- * Is video rendering supported on this web browser? We require the ability to encode canvases to WebP.
- */
-FlightLogVideoRenderer.isSupported = function() {
-    var
-        canvas = document.createElement('canvas');
-
-    canvas.width = 16;
-    canvas.height = 16;
-
-    var
-        encoded = canvas.toDataURL('image/webp', {quality: 0.9});
-
-    return encoded && encoded.match(/^data:image\/webp;/);
-};

js/main.js → app/js/main.js

@@ -1,15 +1,10 @@
 "use strict";
 
+const
+    {app} = require('electron').remote;
+
 function BlackboxLogViewer() {
-    function supportsRequiredAPIs() {
-        return window.File && window.FileReader && window.FileList && Modernizr.canvas;
-    }
-
-    if (!supportsRequiredAPIs()) {
-        alert("Your browser does not support the APIs required for reading log files.");
-    }
-
-    var
+    const
         GRAPH_STATE_PAUSED = 0,
         GRAPH_STATE_PLAY = 1,
 
@@ -675,31 +670,19 @@ function BlackboxLogViewer() {
             graphConfigDialog.show(flightLog, graphConfig);
         });
 
-        if (FlightLogVideoRenderer.isSupported()) {
-            $(".btn-video-export").click(function(e) {
-                setGraphState(GRAPH_STATE_PAUSED);
-
-                exportDialog.show(flightLog, {
-                    graphConfig: activeGraphConfig,
-                    inTime: videoExportInTime,
-                    outTime: videoExportOutTime,
-                    flightVideo: hasVideo ? video.cloneNode() : false,
-                    flightVideoOffset: videoOffset
-                }, videoConfig);
-
-                e.preventDefault();
-            });
-        } else {
-            $(".btn-video-export")
-                .addClass('disabled')
-                .css('pointer-events', 'all !important')
-                .attr({
-                    'data-toggle': 'tooltip',
-                    'data-placement': 'bottom',
-                    'title': "Not supported by your browser, use Google Chrome instead"
-                })
-                .tooltip();
-        }
+        $(".btn-video-export").click(function(e) {
+            setGraphState(GRAPH_STATE_PAUSED);
+
+            exportDialog.show(flightLog, {
+                graphConfig: activeGraphConfig,
+                inTime: videoExportInTime,
+                outTime: videoExportOutTime,
+                flightVideo: hasVideo ? video.cloneNode() : false,
+                flightVideoOffset: videoOffset
+            }, videoConfig);
+
+            e.preventDefault();
+        });
 
         $(window).resize(updateCanvasSize);
 
@@ -784,6 +767,8 @@ function BlackboxLogViewer() {
         });
 
         seekBar.onSeek = setCurrentBlackboxTime;
+
+        $(".app-version").text("v" + app.getVersion());
     });
 }