docs: update README.md for pwa flow (#731)

* docs: update README.md for pwa flow

* Update README.md

* Update README.md

---------

Co-authored-by: Mark Haslinghuis <mark@numloq.nl>

Author: chmelevskij

README.md

@@ -1,157 +1,131 @@
 # Betaflight Blackbox Explorer
 
-[![Latest version](https://img.shields.io/github/v/release/betaflight/blackbox-log-viewer)](https://github.com/betaflight/blackbox-log-viewer/releases) [![Build](https://img.shields.io/github/actions/workflow/status/betaflight/blackbox-log-viewer/nightly.yml?branch=master)](https://github.com/betaflight/blackbox-log-viewer/actions/workflows/nightly.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=betaflight_blackbox-log-viewer&metric=alert_status)](https://sonarcloud.io/dashboard?id=betaflight_blackbox-log-viewer) [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
+[![Latest version](https://img.shields.io/github/v/release/betaflight/blackbox-log-viewer)](https://github.com/betaflight/blackbox-log-viewer/releases)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=betaflight_blackbox-log-viewer&metric=alert_status)](https://sonarcloud.io/dashboard?id=betaflight_blackbox-log-viewer)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
 
 ![Main explorer interface](screenshots/main-interface.jpg)
 
-This tool allows you to open logs recorded by Betaflight's Blackbox feature in your web browser. You can seek through
-the log to examine graphed values at each timestep. If you have a flight video, you can load that in as well and it'll
-be played behind the log. You can export the graphs as a WebM video to share with others.
+This tool allows you to open logs recorded by Betaflight's Blackbox feature in
+your web browser. You can seek through the log to examine graphed values at each
+timestep. If you have a flight video, you can load that in as well and it'll be
+played behind the log. You can export the graphs as a WebM video to share with
+others.
 
 ## Installation
 
-### Standalone
-
-Betaflight 4.3 users should use the [latest nightly release](https://github.com/betaflight/blackbox-log-viewer-nightlies).
-Users of earlier Betaflight firmware should first try the nightly release, but if some fields don't render properly, try an earlier version from [Releases](https://github.com/betaflight/blackbox-log-viewer/releases).
-### Notes
-
-#### Windows users
-
-The minimum required version of Windows is Windows 8.
+Current blackbox explorer version is built as
+[PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app).
+Meaning it can work in both online and offline modes as regular desktop app
+would.
 
-#### MacOS X users
+### Web
 
-Changes to the security model used in the latest versions of MacOS X 10.14 (Mojave) and 10.15 (Catalina) mean that the operating system will show an error message ('"Betaflight\ Blackbox\ Explorer.app" is damaged and can’t be opened. You should move it to the Trash.') when trying to install the application. To work around this, run the following command in a terminal before installing: `sudo xattr -rd com.apple.quarantine /Applications/Betaflight\ Blackbox\ Explorer.app`.
+1. Visit https://blackbox.betaflight.com/
+2. Use the app
 
-### Unstable Testing Versions
-
-Unstable testing versions of the latest builds of the Betaflight Blackbox Explorer for most platforms can be downloaded from [here](https://github.com/betaflight/blackbox-log-viewer-nightlies/releases).
+### Standalone
 
-**Be aware that these versions are intended for testing / feedback only, and may be buggy or broken.**
+1. Visit https://blackbox.betaflight.com/
+2. Follow the procedure to install PWA on your platform. On MacOS chrome:
+![Url bar PWA install](screenshots/url-bar.webp)
+![PWA install dialog](screenshots/pwa-install-dialog.webp)
 
 ## Usage
-Click the "Open log file/video" button at the top right and select your log file and your flight video (if you recorded one).
 
-You can scroll through the log by clicking or dragging on the seek bar that appears underneath the main graph. The 
-current time is represented by the vertical red bar in the center of the graph. You can also click and drag left and
-right on the graph area to scrub backwards and forwards.
+Click the "Open log file/video" button at the top right and select your log file
+and your flight video (if you recorded one).
+
+You can scroll through the log by clicking or dragging on the seek bar that
+appears underneath the main graph. The current time is represented by the
+vertical red bar in the center of the graph. You can also click and drag left
+and right on the graph area to scrub backwards and forwards.
 
 ### Syncing your log to your flight video
 
-The blackbox plays a short beep on the buzzer when arming, and this corresponds with the start of the logged data.
-You can sync your log against your flight video by pressing the "start log here" button when you hear the beep in the
-video. You can tune the alignment of the log manually by pressing the nudge left and nudge right buttons in the log
-sync section, or by editing the value in the "log sync" box. Positive values move the log toward the end of the video, 
+The blackbox plays a short beep on the buzzer when arming, and this corresponds
+with the start of the logged data.  You can sync your log against your flight
+video by pressing the "start log here" button when you hear the beep in the
+video. You can tune the alignment of the log manually by pressing the nudge left
+and nudge right buttons in the log sync section, or by editing the value in the
+"log sync" box. Positive values move the log toward the end of the video,
 negative values move it towards the beginning.
 
 ### Customizing the graph display
 
-Click the "Graph Setup" button on the right side of the display in order to choose which fields should be plotted on
-the graph. You may, for example, want to remove the default gyro plot and add separate gyro plots for each rotation axis.
-Or you may want to plot vbat against throttle to examine your battery's performance.
-
-## Native app build via NW.js
+Click the "Graph Setup" button on the right side of the display in order to
+choose which fields should be plotted on the graph. You may, for example, want
+to remove the default gyro plot and add separate gyro plots for each rotation
+axis.  Or you may want to plot vbat against throttle to examine your battery's
+performance.
 
-### Development
+## Developing
 
-1. Install node.js
-2. Install yarn: `npm install yarn -g`.
-3. Change to project folder and run `yarn install`.
-4. Run `yarn start` to build & run the debug flavor.
+### Node setup
 
-### App build and release
+We are using [nvm](https://github.com/nvm-sh/nvm) to manage the correct node
+vesion, follow the install instruction there. After which from blackbox directory
+just run:
 
-The tasks are defined in `gulpfile.js` and can be run through yarn:
+```bash
+nvm use
 ```
-yarn 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).
+### Yarn
 
-#### Setting up and building on a Mac
+For dependency management we are using [yarn](https://yarnpkg.com/), follow the
+instruction there to install it.
 
-- Install GitHub desktop application from https://desktop.github.com and open the GitHub Desktop application.
-- At https://github.com/betaflight/betaflight-configurator, select Clone or Download > Open in Desktop
+### Development mode
 
-(The GitHub Desktop application should come to the front and create a repository (not necessarily where you want it).  The blackbox-log-viewer repository (folder) should appear under the list of local repositories.  You can find your local repository location on your mac using the 'Locate in Finder' command GitHub Desktop  It can be moved somewhere more else, but you'll then need to tell Github where you're moved it to.)
-
-Open Terminal.app and install or update homebrew:
-```
-/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
-```
-install node 8.x and yarn, if already installed, agree to update them
-```
-brew install node@8 yarn
-```
-Change Terminal's working directory wherever you put blackbox-log-viewer folder; easiest way is to type 'cd ' in Terminal then drag the blackbox-log-viewer folder from the Finder to the terminal window.  Or use a terminal command like 
-```
-cd ~/mydirectorypath/blackbox-log-viewer
-```
+We are using [vite](https://vitejs.dev/) for development setup. It provides
+bundling and various optimisations like hot module reloading.
 
-install dependencies into that folder (ignoring many confusing messages) with:
-```
-yarn install
-```
+With `node` and `yarn` setup, to start developing run:
 
-finally build the DMG itself, which will end up in blackbox-log-viewer/release/, with:
-```
-yarn gulp release
-```
-or just:
-```
-gulp release
-```
-For a build with debugging capabilities (use F12 to open the debug console):
-```
+```bash
 yarn start
 ```
 
+This will start development server on http://localhost:5173/.
 
+## Installing Dev Build locally
 
-#### Build or release app for one specific platform
-To build or release only for one specific platform you can append the platform after the `task-name`.
-If no platform is provided, only for the platform you are building from will be build.
-
-* **MacOS X** use `yarn gulp <task-name> --osx64`
-* **Linux** use `yarn gulp <task-name> --linux64`
-* **Windows** use `yarn gulp <task-name> --win64`
-
-`<task-name>` would typically be `release`.  You can also use multiple platforms e.g. `yarn gulp <taskname> --osx64 --linux64`. Other platforms like `--win32` and `--linux32` can be used too, but they are not officially supported, so use them at your own risk.
-
-#### macOS DMG installation background image
-
-The release distribution for macOS uses a DMG file to install the application.
-The PSD source for the DMG background image can be found in the root (`dmg-background.png`). After changing the source, export the image to PNG format in folder `./images/`.
-
-#### Leverage GitHub-Actions to build binaries
-
-You can use the GitHub `Actions` tab in your fork to build binaries as well. Select `Actions`>`Manual Build`>`Run Workflow`. Choose your custom branch and click `Run workflow`. The workflow will dispatch in a few moments and upon completion, the build "Artifacts" will be available for download from within the workflow run.
+If you want to have latest and greatest version installed on your machine from
+the tip of the repository:
+1. First need to build the application:
+```bash
+yarn build
+```
+2. Start the application in `preview` mode
+```bash
+yarn preview
+```
+3. Visit http://localhost:4173/
+4. Follow the steps from [Standalone](#standalone)
 
 ## 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
-your video using the free tool [Handbrake][]. Open your original video using Handbrake. In the output settings, choose
-MP4 as the format, and H.264 as the video codec.
+Some flight video formats aren't supported by Chrome, so the viewer can't open
+them. You can fix this by re-encoding your video using the free tool
+[Handbrake][]. Open your original video using Handbrake. In the output settings,
+choose MP4 as the format, and H.264 as the video codec.
 
-Because of [Google Bug #66631][], Chrome is unable to accurately seek within H.264 videos that use B-frames. This is
-mostly fine when viewing the flight video inside Blackbox Explorer. However, if you use the "export video" feature, this
-bug will cause the flight video in the background of the exported video to occasionally jump backwards in time for a
-couple of frames, causing a very glitchy appearance.
+Because of [Google Bug #66631][], Chrome is unable to accurately seek within
+H.264 videos that use B-frames. This is mostly fine when viewing the flight
+video inside Blackbox Explorer. However, if you use the "export video" feature,
+this bug will cause the flight video in the background of the exported video to
+occasionally jump backwards in time for a couple of frames, causing a very
+glitchy appearance.
 
-To fix that issue, you need to tell Handbrake to render every frame as an intraframe, which will avoid any problematic
-B-frames. Do that by adding "keyint=1" into the Additional Options box:
+To fix that issue, you need to tell Handbrake to render every frame as an
+intraframe, which will avoid any problematic B-frames. Do that by adding
+"keyint=1" into the Additional Options box:
 
 ![Handbrake settings](screenshots/handbrake.png)
 
-Hit start to begin re-encoding your video. Once it finishes, you should be able to load the new video into the Blackbox
-Explorer.
+Hit start to begin re-encoding your video. Once it finishes, you should be able
+to load the new video into the Blackbox Explorer.
 
 [Handbrake]: https://handbrake.fr/
 [Google Bug #66631]: http://code.google.com/p/chromium/issues/detail?id=66631