From c7c89107315ab30d43b0d370a4cc93dd028e050a Mon Sep 17 00:00:00 2001 From: Nicholas Sherlock Date: Mon, 28 Nov 2016 22:32:17 +1300 Subject: [PATCH] Convert from Chrome App to Electron --- .gitattributes | 2 - .gitignore | 3 +- Makefile | 14 +- Readme.md | 45 +- {css => app/css}/jquery.nouislider.min.css | 0 {css => app/css}/main.css | 6 + .../fonts}/glyphicons-halflings-regular.eot | Bin .../fonts}/glyphicons-halflings-regular.svg | 0 .../fonts}/glyphicons-halflings-regular.ttf | Bin .../fonts}/glyphicons-halflings-regular.woff | Bin .../fonts}/glyphicons-halflings-regular.woff2 | Bin index.html => app/index.html | 20 +- {js => app/js}/cache.js | 0 {js => app/js}/craft_2d.js | 0 {js => app/js}/craft_3d.js | 0 {js => app/js}/datastream.js | 0 {js => app/js}/decoders.js | 0 {js => app/js}/expo.js | 0 {js => app/js}/flightlog.js | 0 {js => app/js}/flightlog_fielddefs.js | 0 {js => app/js}/flightlog_fields_presenter.js | 0 {js => app/js}/flightlog_index.js | 0 {js => app/js}/flightlog_parser.js | 0 {js => app/js}/flightlog_video_renderer.js | 108 +- {js => app/js}/graph_config.js | 0 {js => app/js}/graph_config_dialog.js | 0 {js => app/js}/graph_legend.js | 0 {js => app/js}/grapher.js | 0 {js => app/js}/imu.js | 0 {js => app/js}/main.js | 53 +- {js => app/js}/pref_storage.js | 0 {js => app/js}/seekbar.js | 0 {js => app/js}/tools.js | 0 .../js}/vendor/jquery.ba-throttle-debounce.js | 0 .../js}/vendor/jquery.nouislider.all.min.js | 0 {js => app/js}/vendor/three.js | 0 {js => app/js}/vendor/three.min.js | 0 {js => app/js}/video_export_dialog.js | 6 +- app/main/index.js | 83 + app/main/updater.js | 72 + app/package.json | 18 + background.js | 9 - build/blackbox.iconset/icon_128x128.png | Bin 0 -> 3429 bytes build/blackbox.iconset/icon_128x128@2x.png | Bin 0 -> 6501 bytes build/blackbox.iconset/icon_16x16.png | Bin 0 -> 628 bytes build/blackbox.iconset/icon_16x16@2x.png | Bin 0 -> 1167 bytes build/blackbox.iconset/icon_256x256.png | Bin 0 -> 6503 bytes build/blackbox.iconset/icon_256x256@2x.png | Bin 0 -> 12495 bytes build/blackbox.iconset/icon_32x32.png | Bin 0 -> 1167 bytes build/blackbox.iconset/icon_32x32@2x.png | Bin 0 -> 1992 bytes build/blackbox.iconset/icon_512x512.png | Bin 0 -> 12520 bytes build/blackbox.iconset/icon_512x512@2x.png | Bin 0 -> 24836 bytes build/blackbox.iconset/icon_64x64.png | Bin 0 -> 1989 bytes build/blackbox.iconset/icon_64x64@2x.png | Bin 0 -> 3431 bytes build/icon.icns | Bin 0 -> 254346 bytes build/icon.ico | Bin 0 -> 105091 bytes build/icon.svg | 642 ++ css/bootstrap-theme.css | 587 -- css/bootstrap-theme.css.map | 1 - css/bootstrap-theme.min.css | 5 - css/bootstrap.css | 6800 ----------------- css/bootstrap.css.map | 1 - css/bootstrap.min.css | 5 - images/icon-128.png | Bin 10763 -> 0 bytes js/vendor/FileSaver.js | 216 - js/vendor/bootstrap.js | 2363 ------ js/vendor/bootstrap.min.js | 7 - js/vendor/jquery-1.11.3.min.js | 5 - .../modernizr-2.6.2-respond-1.1.0.min.js | 11 - js/vendor/npm.js | 13 - js/vendor/webm-writer-0.1.1.js | 1048 --- manifest.json | 16 - package.json | 46 + test/index.html | 14 - test/index.js | 62 - 75 files changed, 966 insertions(+), 11315 deletions(-) delete mode 100644 .gitattributes rename {css => app/css}/jquery.nouislider.min.css (100%) rename {css => app/css}/main.css (98%) rename {fonts => app/fonts}/glyphicons-halflings-regular.eot (100%) rename {fonts => app/fonts}/glyphicons-halflings-regular.svg (100%) rename {fonts => app/fonts}/glyphicons-halflings-regular.ttf (100%) rename {fonts => app/fonts}/glyphicons-halflings-regular.woff (100%) rename {fonts => app/fonts}/glyphicons-halflings-regular.woff2 (100%) rename index.html => app/index.html (96%) rename {js => app/js}/cache.js (100%) rename {js => app/js}/craft_2d.js (100%) rename {js => app/js}/craft_3d.js (100%) rename {js => app/js}/datastream.js (100%) rename {js => app/js}/decoders.js (100%) rename {js => app/js}/expo.js (100%) rename {js => app/js}/flightlog.js (100%) rename {js => app/js}/flightlog_fielddefs.js (100%) rename {js => app/js}/flightlog_fields_presenter.js (100%) rename {js => app/js}/flightlog_index.js (100%) rename {js => app/js}/flightlog_parser.js (100%) rename {js => app/js}/flightlog_video_renderer.js (75%) rename {js => app/js}/graph_config.js (100%) rename {js => app/js}/graph_config_dialog.js (100%) rename {js => app/js}/graph_legend.js (100%) rename {js => app/js}/grapher.js (100%) rename {js => app/js}/imu.js (100%) rename {js => app/js}/main.js (94%) rename {js => app/js}/pref_storage.js (100%) rename {js => app/js}/seekbar.js (100%) rename {js => app/js}/tools.js (100%) rename {js => app/js}/vendor/jquery.ba-throttle-debounce.js (100%) rename {js => app/js}/vendor/jquery.nouislider.all.min.js (100%) rename {js => app/js}/vendor/three.js (100%) rename {js => app/js}/vendor/three.min.js (100%) rename {js => app/js}/video_export_dialog.js (97%) create mode 100755 app/main/index.js create mode 100644 app/main/updater.js create mode 100644 app/package.json delete mode 100644 background.js create mode 100644 build/blackbox.iconset/icon_128x128.png create mode 100644 build/blackbox.iconset/icon_128x128@2x.png create mode 100644 build/blackbox.iconset/icon_16x16.png create mode 100644 build/blackbox.iconset/icon_16x16@2x.png create mode 100644 build/blackbox.iconset/icon_256x256.png create mode 100644 build/blackbox.iconset/icon_256x256@2x.png create mode 100644 build/blackbox.iconset/icon_32x32.png create mode 100644 build/blackbox.iconset/icon_32x32@2x.png create mode 100644 build/blackbox.iconset/icon_512x512.png create mode 100644 build/blackbox.iconset/icon_512x512@2x.png create mode 100644 build/blackbox.iconset/icon_64x64.png create mode 100644 build/blackbox.iconset/icon_64x64@2x.png create mode 100644 build/icon.icns create mode 100755 build/icon.ico create mode 100644 build/icon.svg delete mode 100644 css/bootstrap-theme.css delete mode 100644 css/bootstrap-theme.css.map delete mode 100644 css/bootstrap-theme.min.css delete mode 100644 css/bootstrap.css delete mode 100644 css/bootstrap.css.map delete mode 100644 css/bootstrap.min.css delete mode 100644 images/icon-128.png delete mode 100644 js/vendor/FileSaver.js delete mode 100644 js/vendor/bootstrap.js delete mode 100644 js/vendor/bootstrap.min.js delete mode 100644 js/vendor/jquery-1.11.3.min.js delete mode 100644 js/vendor/modernizr-2.6.2-respond-1.1.0.min.js delete mode 100644 js/vendor/npm.js delete mode 100644 js/vendor/webm-writer-0.1.1.js delete mode 100644 manifest.json create mode 100644 package.json delete mode 100644 test/index.html delete mode 100644 test/index.js diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index b800a31..0000000 --- a/.gitattributes +++ /dev/null @@ -1,2 +0,0 @@ -/screenshots export-ignore -Makefile export-ignore diff --git a/.gitignore b/.gitignore index 62b496f..17289f7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /.settings/ /.project .DS_Store -/blackbox-chrome-app.zip +node_modules +/dist/ diff --git a/Makefile b/Makefile index 2867011..4c1db6e 100644 --- a/Makefile +++ b/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 \ No newline at end of file diff --git a/Readme.md b/Readme.md index 334d14c..c77c90b 100644 --- a/Readme.md +++ b/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 diff --git a/css/jquery.nouislider.min.css b/app/css/jquery.nouislider.min.css similarity index 100% rename from css/jquery.nouislider.min.css rename to app/css/jquery.nouislider.min.css diff --git a/css/main.css b/app/css/main.css similarity index 98% rename from css/main.css rename to app/css/main.css index 476b957..4cd5a76 100644 --- a/css/main.css +++ b/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; } diff --git a/fonts/glyphicons-halflings-regular.eot b/app/fonts/glyphicons-halflings-regular.eot similarity index 100% rename from fonts/glyphicons-halflings-regular.eot rename to app/fonts/glyphicons-halflings-regular.eot diff --git a/fonts/glyphicons-halflings-regular.svg b/app/fonts/glyphicons-halflings-regular.svg similarity index 100% rename from fonts/glyphicons-halflings-regular.svg rename to app/fonts/glyphicons-halflings-regular.svg diff --git a/fonts/glyphicons-halflings-regular.ttf b/app/fonts/glyphicons-halflings-regular.ttf similarity index 100% rename from fonts/glyphicons-halflings-regular.ttf rename to app/fonts/glyphicons-halflings-regular.ttf diff --git a/fonts/glyphicons-halflings-regular.woff b/app/fonts/glyphicons-halflings-regular.woff similarity index 100% rename from fonts/glyphicons-halflings-regular.woff rename to app/fonts/glyphicons-halflings-regular.woff diff --git a/fonts/glyphicons-halflings-regular.woff2 b/app/fonts/glyphicons-halflings-regular.woff2 similarity index 100% rename from fonts/glyphicons-halflings-regular.woff2 rename to app/fonts/glyphicons-halflings-regular.woff2 diff --git a/index.html b/app/index.html similarity index 96% rename from index.html rename to app/index.html index 8ff0158..feddb25 100644 --- a/index.html +++ b/app/index.html @@ -1,18 +1,21 @@ - + - - - + + - + +