Added implementation of native app with nw.js

Author: basdelfos

.gitignore

@@ -4,4 +4,14 @@
 /blackbox-chrome-app.zip
 .idea/workspace.xml
 .idea/tasks.xml
-/.idea/
+/.idea/
+node_modules/
+npm-debug.log
+cache/
+apps/
+dist/
+debug/
+release/
+
+# artefacts for Visual Studio Code
+/.vscode/

Readme.md

@@ -69,6 +69,45 @@ This tool is currently in the Beta stage, so a number of key features have yet t
 - There is no control over the amount of smoothing applied to the graph lines
 - There is no way to single-step between loop iterations with the arrow keys
 
+## Native app build via NW.js
+
+### Development
+
+1. Install node.js
+2. Change to project folder and run `npm install`.
+3. Run `npm start` to build & run the debug flavor.
+
+### App build and release
+
+The tasks are defined in `gulpfile.js` and can be run either via `gulp <task-name>` (if the command is in PATH or via `../node_modules/gulp/bin/gulp.js <task-name>`:
+
+1. Optional, install gulp `npm install --global gulp-cli`.
+2. Run `gulp <taskname> [[platform] [platform] ...]`.
+
+List of possible values of `<task-name>`:
+* **dist** copies all the JS and CSS files in the `./dist` folder.
+* **apps** builds the apps in the `./apps` folder [1].
+* **debug** builds debug version of the apps in the `./debug` folder [1].
+* **release** zips up the apps into individual archives in the `./release` folder [1]. 
+
+[1] Running this task on macOS or Linux requires Wine, since it's needed to set the icon for the Windows app (build for specific platform to avoid errors).
+
+#### Build or release app for one specific platform
+To build or release only for one specific platform you can append the plaform after the `task-name`.
+If no platform is provided, only for the platform you are builing from will be build.
+
+* **MacOS** use `gulp <task-name> --osx64`
+* **Linux** use `gulp <task-name> --linux64`
+* **Windows** use `gulp <task-name> --win32`
+* **ChromeOS** use `gulp <task-name> --chromeos`
+
+You can also use multiple platforms e.g. `gulp <taskname> --osx64 --linux64`.
+
+#### macOS DMG installation background image
+
+The release distribution for macOS uses a DMG file to install the application.
+The PSD source for the DMG backgound image can be found in the root (`dmg-background.png`). After changing the source, export the image to PNG format in folder `./images/`.
+
 ## Flight video won't load, or jumpy flight video upon export
 
 Some flight video formats aren't supported by Chrome, so the viewer can't open them. You can fix this by re-encoding

_locales/en/messages.json

@@ -0,0 +1,20 @@
+{
+    "translation_version": {
+        "message": "0"
+    },
+    "noticeTitle": {
+        "message": "Notice"
+    },
+    "checkForUnstableVersions": {
+        "message": "Show update notifications for unstable versions of the configurator"
+    },
+    "updateNotice": {
+        "message": "You are using an outdated version of the <b>Betaflight Blackbox Explorer</b>.<br>Version <b>$1</b> is available online, please visit <a href=\"$2\" target=\"_blank\">the release page</a> to download and install the latest version with fixes and improvements.<br><br>Please close the app before updating."
+    },
+    "updateWebsite": {
+        "message": "Go to Release Website"
+    },
+    "close": {
+        "message": "Close"
+    }
+}

background.js

@@ -1,9 +1,15 @@
-chrome.app.runtime.onLaunched.addListener(function() {
+'use strict';
+
+function startApplication() {
     chrome.app.window.create('index.html', {
-        'id': 'main',
-        'innerBounds' : {
+        id: 'main',
+        frame: 'chrome',
+        innerBounds : {
             'width' : 1340,
-            'height' : 900
-        }
+            'height' : 920
+        },
+        title: 'Betaflight - Blackbox Explorer'
     });
-});
+}
+
+chrome.app.runtime.onLaunched.addListener(startApplication);

changelog.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Betaflight - Blackbox Explorer Changelog</title>
-    <link rel="icon" type="image/png" href="images/icon-128.png">
+    <link rel="icon" type="image/png" href="images/bf_icon_128.png">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/bootstrap-theme.min.css">
     <style>
@@ -39,6 +39,11 @@
 </head>
 <body>
 <div class="log">
+    <h2> 3.0.0 - Standalone app</h2>
+    
+    <ul>
+        <li>Release of standalone app</li>
+    </ul>
     <h2> 2.5.13 - Minor Fixes</h2>
 
     <ul>

css/main.css

@@ -7,6 +7,17 @@ html, body {
     overflow-y: visible; /* Show page scrollbar when packaged as a Chrome app */
 }
 
+a:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+a.disabled {
+    pointer-events: none;
+    cursor: default;
+    color: #999;
+}
+
 /* Add an extended wide size to the page container for large monitors */
 @media (min-width: 1400px) {
     .container.main-pane {
@@ -1278,3 +1289,46 @@ html.log_open #changelog .wrapper {
     height: calc(100% - 20px);
     margin: 10px 10px 10px 10px;
 }
+
+
+dialog {
+    background-color: white;
+    padding: 1em;
+    height: auto;
+    margin: auto auto;
+    position: absolute;
+    width: 50%;
+    border-radius: 3px;
+    border: 1px solid silver;
+}
+
+dialog h3 {
+    display: block;
+    font-size: 1.17em;
+    -webkit-margin-before: 1em;
+    -webkit-margin-after: 1em;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    font-weight: bold;
+}
+
+.regular-button {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 10px;
+    background-color: #ffbb00;
+    border-radius: 3px;
+    border: 1px solid #dba718;
+    color: #000;
+    font-family: 'open_sansbold', Arial;
+    font-size: 12px;
+    font-weight: bold;
+    text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
+    display: inline-block;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    padding: 0px;
+    padding-left: 9px;
+    padding-right: 9px;
+    line-height: 28px;
+}