Configurator as Web APP (PWA)

.github/workflows/ci.yml

@@ -37,10 +37,14 @@ jobs:
                 echo "BUILD_NAME=inav-configurator_linux_x64_${VERSION}_${BUILD_SUFFIX}" >> $GITHUB_ENV
             - uses: actions/setup-node@v4
               with:
-                node-version: 22
+                node-version: 24
                 #check-latest: true
             - name: Install dependencies
               run: sudo apt-get update && sudo apt-get -y install dpkg fakeroot rpm build-essential libudev-dev
+            - name: Setup Yarn with Corepack
+              run: corepack enable
+            - name: Setup Yarn with Corepack
+              run: corepack enable
             - name: Install deps
               uses: nick-fields/retry@v3
               with:
@@ -90,10 +94,14 @@ jobs:
                 echo "BUILD_NAME=inav-configurator_linux_aarch64_${VERSION}_${BUILD_SUFFIX}" >> $GITHUB_ENV
             - uses: actions/setup-node@v4
               with:
-                node-version: 22
+                node-version: 24
                 #check-latest: true
             - name: Install dependencies
               run: sudo apt-get update && sudo apt-get -y install dpkg fakeroot rpm build-essential libudev-dev
+            - name: Setup Yarn with Corepack
+              run: corepack enable
+            - name: Setup Yarn with Corepack
+              run: corepack enable
             - name: Install deps
               uses: nick-fields/retry@v3
               with:
@@ -142,17 +150,20 @@ jobs:
             echo "BUILD_NAMEarm64=inav-configurator_MacOS_arm64_${VERSION}_${BUILD_SUFFIX}" >> $GITHUB_ENV
         - uses: actions/setup-node@v4
           with:
-            node-version: 22
+            node-version: 24
             #check-latest: true
-        # Workaround due to a bug in node-gyp: https://github.com/electron/rebuild/issues/1116
-        - name: Install Setuptools
-          run: python3 -m pip install --break-system-packages setuptools
+        - name: Renstall X Code cli
+          run: |
+           sudo rm -rf /Library/Developer/CommandLineTools
+           xcode-select --install
+        - name: Setup Yarn with Corepack
+          run: corepack enable
         - name: Install deps
           uses: nick-fields/retry@v3
           with:
             max_attempts: 3
             retry_on: error
-            command: yarn install --foreground-scripts
+            command: yarn install
             timeout_minutes: 10
             on_retry_command: rm -rfv node_modules
         - name: Build MacOS arm64
@@ -190,17 +201,20 @@ jobs:
             echo "BUILD_NAMEx64=inav-configurator_MacOS_x64_${VERSION}_${BUILD_SUFFIX}" >> $GITHUB_ENV
         - uses: actions/setup-node@v4
           with:
-            node-version: 22
+            node-version: 24
             #check-latest: true
-        # Workaround due to a bug in node-gyp: https://github.com/electron/rebuild/issues/1116
-        - name: Install Setuptools
-          run: python3 -m pip install --break-system-packages setuptools
+        - name: Reinstall X Code cli
+          run: |
+           sudo rm -rf /Library/Developer/CommandLineTools
+           xcode-select --install
+        - name: Setup Yarn with Corepack
+          run: corepack enable
         - name: Install deps
           uses: nick-fields/retry@v3
           with:
             max_attempts: 3
             retry_on: error
-            command: yarn install --foreground-scripts
+            command: yarn install
             timeout_minutes: 10
             on_retry_command: rm -rfv node_modules
         - name: Build MacOS x64
@@ -242,18 +256,22 @@ jobs:
               shell: bash
             - uses: actions/setup-node@v4
               with:
-                node-version: 22
+                node-version: 24
             - uses: engineerd/[email protected]
               with: 
                 name: "Wix Toolset 3.1.4"
                 url: "https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip"
                 pathInArchive: "/"
+            - name: Setup Yarn with Corepack
+              run: corepack enable
+            - name: Setup Yarn with Corepack
+              run: corepack enable
             - name: Install deps
               uses: nick-fields/retry@v3
               with:
                 max_attempts: 3
                 retry_on: error
-                command: yarn install --foreground-scripts
+                command: yarn install
                 timeout_minutes: 10
                 on_retry_command: rm -rfv node_modules
             - name: Build Win x64
@@ -295,18 +313,22 @@ jobs:
               shell: bash
             - uses: actions/setup-node@v4
               with:
-                node-version: 22
+                node-version: 24
             - uses: engineerd/[email protected]
               with: 
                 name: "Wix Toolset 3.1.4"
                 url: "https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip"
                 pathInArchive: "/"
+            - name: Setup Yarn with Corepack
+              run: corepack enable
+            - name: Setup Yarn with Corepack
+              run: corepack enable
             - name: Install deps
               uses: nick-fields/retry@v3
               with:
                 max_attempts: 3
                 retry_on: error
-                command: yarn install --foreground-scripts
+                command: yarn install 
                 timeout_minutes: 10
                 on_retry_command: rm -rfv node_modules
             - name: Build Win32
@@ -322,3 +344,4 @@ jobs:
                 name: ${{env.BUILD_NAMEia32}}_MSI
                 path: ./out/make/wix/ia32/*.msi
 
+

.gitignore

@@ -10,14 +10,15 @@ inav-configurator.iml
 .eslintrc.json
 /.project
 /cache/
-/dist/
 /apps/
 /build/
+/dist/
+/dev-dist/
 *~
 *.swp
 *.bak
 eeprom.bin
-
-# ctags
-tags
-TAGS
+
+# ctags
+tags
+TAGS

index.html

@@ -4,6 +4,8 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>INAV Configurator</title>
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
 </head>
 
 <body>

js/appUpdater.js

@@ -2,7 +2,7 @@
 
 import semver from 'semver';
 
-import { GUI } from './gui';
+import GUI from './gui';
 import jBox from 'jbox';
 import i18n from './localization';
 

js/bridge.js

@@ -0,0 +1,160 @@
+
+import pkg from './../package.json' assert { type: 'json' };
+import webSerial from './web/serial';
+import webLocalStorage from './web/localStoreage';
+
+const usbBootloaders =  [
+  { vendorId: 1155, productId: 57105, name: 'STM DFU'}, 
+  { vendorId: 11836, productId: 57105, name: 'AT32 DFU'}
+];
+
+const bridge = {
+
+    isElectron: false,
+    serialEvents: new EventTarget(),
+    bootloaderIds: usbBootloaders,
+
+    init: function() {
+        this.isElectron = typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0;
+        if (this.isElectron) {
+            window.electronAPI.onSerialData(buffer => this.serialEvents.dispatchEvent(new CustomEvent('data', { detail: buffer })));
+            window.electronAPI.serialClose(() => this.serialEvents.dispatchEvent(new CustomEvent('close')));
+            window.electronAPI.onSerialError(error => this.serialEvents.dispatchEvent(new CustomEvent('error', { detail: error })))
+
+        } else {
+            webSerial.events.addEventListener('data', event => this.serialEvents.dispatchEvent(new CustomEvent('data', { detail: event.detail })));
+            webSerial.events.addEventListener('close', () => this.serialEvents.dispatchEvent(new CustomEvent('close')));
+            webSerial.events.addEventListener('error', event => this.serialEvents.dispatchEvent(new CustomEvent('error', { detail: event.detail })));
+        }
+    },
+
+
+    proxy: function(url) {
+        if (this.isElectron) {
+            return url;
+        } else {
+            // Use a cloudflare worker as a proxy to bypass CORS policy  
+            return `https://proxy.inav.workers.dev/?url=${url}`
+        }
+    },
+
+    readFile: async function(file) {
+         if (this.isElectron) {
+            const response = await window.electronAPI.readFile(file);
+            return {
+                error: response.error,
+                data: response.error ? null : response.toString()
+            }
+        } else {
+            try {
+                const text = await file.text();
+                return {
+                    error: false,
+                    data: text
+                }
+            } catch (error) {
+                return {
+                    error: error,
+                    data: null
+                }
+            }
+         }
+    },
+
+    writeFile: async function (filename, data, binary = false) {
+        if (this.isElectron) {
+            return window.electronAPI.writeFile(filename, data);
+        } else {
+            const blob = new Blob([data],  {type: binary ? 'application/octet-stream' : 'text/plain'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename,
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            return false;
+        }
+    },
+
+    getAppLocale : function() {
+        if (this.isElectron) {
+            return window.electronAPI.appGetLocale();
+        } else {
+            return navigator.language;
+        }
+    },
+
+    storeGet: function(key, defaultValue) {
+        if (this.isElectron) {
+            return window.electronAPI.storeGet(key, defaultValue);
+        } else {
+            return webLocalStorage.get(key, defaultValue);
+        }
+    },
+
+    storeSet: function(key, value) {
+        if (this.isElectron) {
+            window.electronAPI.storeSet(key, value);
+        } else {
+            webLocalStorage.set(key, value);
+        }
+    },
+
+    storeDelete: function(key) {
+        if (this.isElectron) {
+            window.electronAPI.storeDelete(key);
+        } else {
+            webLocalStorage.delete(key);
+        }
+    },
+
+    getAppVersion: function() {
+        if (this.isElectron) {
+            return window.electronAPI.appGetVersion();
+        } else {
+            return pkg.version;
+        }
+    },
+
+    serialConnect: function(path, options) {
+        if (this.isElectron) {
+            return window.electronAPI.serialConnect(path, options);
+        } else {
+            return webSerial.connect(path, options);
+        }
+    },
+
+    serialClose: function() {
+        if (this.isElectron) {
+            return window.electronAPI.serialClose();
+        } else {
+           return webSerial.close();
+        }
+    },
+
+    serialSend: function(data) {
+        if (this.isElectron) {
+            return window.electronAPI.serialSend(data);
+        } else {
+            return webSerial.send(data);
+        }
+    },
+
+    listSerialDevices: async function () {
+        if (this.isElectron) {
+            return window.electronAPI.listSerialDevices();
+        } else {
+            return webSerial.getDevices();
+        }
+    },
+
+    requestWebSerialPermission: async function () {
+        if (!this.isElectron)    {
+            return webSerial.requestPermission();
+        }
+    },
+}
+
+export default bridge;