iNavFlight · Scavanger · Dec 5, 2024 · Dec 9, 2024 · Dec 14, 2024 · Dec 14, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ npm-debug.log
 npm-debug.log
 inav-configurator.iml
 /out
+/.vite
 .eslintrc.json
 /.project
 /cache/
@@ -16,4 +17,4 @@ inav-configurator.iml
 *.swp
 *.bak
 eeprom.bin
-yarn.lock
+yarn.lock
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -12,7 +12,8 @@
         "args": ["--inspect"],
         "env": {
           "NODE_ENV": "development",
-          "NODE_PATH": "${workspaceFolder}/js/"
+          "NODE_PATH": "${workspaceFolder}/js/",
+          "DEV_TOOLS_MODE": "undocked" // left, right, bottom, undocked, detach
         },
         "cwd": "${workspaceFolder}",
         "console": "integratedTerminal"

diff --git a/README.md b/README.md
@@ -81,8 +81,8 @@ sudo mv inav-configurator.desktop /usr/share/applications/
 For local development, the **node.js** build system is used.
 
 1. Install node.js
-1. From the project folder run `yarn install` and then `npm install`
-1. To build the  and start the configurator:
+1. From the project folder run `npm install` and then `npm install`
+1. To build the and start the configurator:
     - Run `npm start`.
 
 To build the App run `npm run make` to build for your platform.
@@ -114,7 +114,9 @@ To be able to open Inspector, set environment variable `NODE_ENV` to `developmen
 
 ```NODE_ENV=development npm start``` or ```$env:NODE_ENV="development" | npm start``` for Windows PowerShell
 
-Or use vscode and start a debug session `Debug Configurator` (Just hit F5!)
+Or use VScode and start a debug session `Debug Configurator` (Just hit F5!)
+
+To debug the main thread (source files in `js/main`), just set a breakpoint in VScode.
 
 ## Different map providers
 

diff --git a/forge.config.js b/forge.config.js
@@ -1,24 +1,47 @@
-const path = require('path');
-const fs = require('fs');
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
 
-module.exports = {
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
   packagerConfig: {
     executableName: "inav-configurator",
     asar: false,
     icon: 'images/inav',
-    ignore: [
-      "^(\/\.vscode$)",
-      "^(\/support$)",
-      ".gitattributes",
-      ".gitignore",
-      "3D_model_creation.md",
-      "LICENSE",
-      "MAPPROXY.md",
-      "package-lock.json",
-      "README.md",
-      "inav_icon_128.psd",
-    ]
   },
+  rebuildConfig: {},
+  plugins: [
+    {
+      name: '@electron-forge/plugin-vite',
+      config: {
+        build: [
+          {
+            entry: 'js/main/main.js',
+            config: 'vite.main.config.js',
+          },
+          {
+            entry: 'js/main/preload.js',
+            config: 'vite.preload.config.js',
+          },
+          {
+            entry: 'js/libraries/bluetooth-device-chooser/bt-device-chooser-preload.js',
+            config: 'vite.preload.config.js',
+          },
+        ],
+        renderer: [
+          {
+            name: 'bt_device_chooser',
+            config: 'vite.bt-dc-renderer.config.js',
+          },
+          {
+            name: 'main_window',
+            config: 'vite.main-renderer.config.js',
+          },
+        ],
+      },
+    },
+  ],
   hooks: {
     // Uniform artifact file names
     postMake: async (config, makeResults) => {
@@ -31,9 +54,8 @@ module.exports = {
           console.log('Artifact: ' + newPath);
         });
       });
-    }
+    },
   },
-  rebuildConfig: {},
   makers: [
     {
       name: '@electron-forge/maker-wix',
@@ -48,7 +70,7 @@ module.exports = {
         appUserModelId: "com.inav.configurator",
         icon: path.join(__dirname, "./assets/windows/inav_installer_icon.ico"),
         upgradeCode: "13606ff3-b0bc-4dde-8fac-805bc8aed2f8",
-        ui : {
+        ui: {
           enabled: false,
           chooseDirectory: true,
           images: {

diff --git a/...es/flightindicators/altitude_pressure.svg → ...flightindicators/fi_altitude_pressure.svg b/...es/flightindicators/altitude_pressure.svg → ...flightindicators/fi_altitude_pressure.svg
diff --git a/images/flightindicators/altitude_ticks.svg → ...es/flightindicators/fi_altitude_ticks.svg b/images/flightindicators/altitude_ticks.svg → ...es/flightindicators/fi_altitude_ticks.svg
diff --git a/images/flightindicators/fi_box.svg → images/flightindicators/fi_fi_box.svg b/images/flightindicators/fi_box.svg → images/flightindicators/fi_fi_box.svg
diff --git a/images/flightindicators/fi_circle.svg → images/flightindicators/fi_fi_circle.svg b/images/flightindicators/fi_circle.svg → images/flightindicators/fi_fi_circle.svg
diff --git a/images/flightindicators/fi_needle.svg → images/flightindicators/fi_fi_needle.svg b/images/flightindicators/fi_needle.svg → images/flightindicators/fi_fi_needle.svg
diff --git a/images/flightindicators/fi_needle_small.svg → ...s/flightindicators/fi_fi_needle_small.svg b/images/flightindicators/fi_needle_small.svg → ...s/flightindicators/fi_fi_needle_small.svg
diff --git a/images/flightindicators/fi_tc_airplane.svg → ...es/flightindicators/fi_fi_tc_airplane.svg b/images/flightindicators/fi_tc_airplane.svg → ...es/flightindicators/fi_fi_tc_airplane.svg
diff --git a/...es/flightindicators/heading_mechanics.svg → ...flightindicators/fi_heading_mechanics.svg b/...es/flightindicators/heading_mechanics.svg → ...flightindicators/fi_heading_mechanics.svg
diff --git a/images/flightindicators/heading_yaw.svg → images/flightindicators/fi_heading_yaw.svg b/images/flightindicators/heading_yaw.svg → images/flightindicators/fi_heading_yaw.svg
diff --git a/images/flightindicators/horizon_back.svg → images/flightindicators/fi_horizon_back.svg b/images/flightindicators/horizon_back.svg → images/flightindicators/fi_horizon_back.svg
diff --git a/images/flightindicators/horizon_ball.svg → images/flightindicators/fi_horizon_ball.svg b/images/flightindicators/horizon_ball.svg → images/flightindicators/fi_horizon_ball.svg
diff --git a/images/flightindicators/horizon_circle.svg → ...es/flightindicators/fi_horizon_circle.svg b/images/flightindicators/horizon_circle.svg → ...es/flightindicators/fi_horizon_circle.svg
diff --git a/...es/flightindicators/horizon_mechanics.svg → ...flightindicators/fi_horizon_mechanics.svg b/...es/flightindicators/horizon_mechanics.svg → ...flightindicators/fi_horizon_mechanics.svg
diff --git a/images/flightindicators/speed_mechanics.svg → ...s/flightindicators/fi_speed_mechanics.svg b/images/flightindicators/speed_mechanics.svg → ...s/flightindicators/fi_speed_mechanics.svg
diff --git a/images/flightindicators/turn_coordinator.svg → .../flightindicators/fi_turn_coordinator.svg b/images/flightindicators/turn_coordinator.svg → .../flightindicators/fi_turn_coordinator.svg
diff --git a/...s/flightindicators/vertical_mechanics.svg → ...lightindicators/fi_vertical_mechanics.svg b/...s/flightindicators/vertical_mechanics.svg → ...lightindicators/fi_vertical_mechanics.svg
diff --git a/images/icons/cf_icon_RTH.png → images/icons/map/cf_icon_RTH.png b/images/icons/cf_icon_RTH.png → images/icons/map/cf_icon_RTH.png
diff --git a/images/icons/cf_icon_arrow.png → images/icons/map/cf_icon_arrow.png b/images/icons/cf_icon_arrow.png → images/icons/map/cf_icon_arrow.png
diff --git a/images/icons/cf_icon_elevation_white.svg → images/icons/map/cf_icon_elevation_white.svg b/images/icons/cf_icon_elevation_white.svg → images/icons/map/cf_icon_elevation_white.svg
diff --git a/images/icons/cf_icon_geozone_excl.png → images/icons/map/cf_icon_geozone_excl.png b/images/icons/cf_icon_geozone_excl.png → images/icons/map/cf_icon_geozone_excl.png
diff --git a/images/icons/cf_icon_geozone_incl.png → images/icons/map/cf_icon_geozone_incl.png b/images/icons/cf_icon_geozone_incl.png → images/icons/map/cf_icon_geozone_incl.png
diff --git a/images/icons/cf_icon_geozone_white.svg → images/icons/map/cf_icon_geozone_white.svg b/images/icons/cf_icon_geozone_white.svg → images/icons/map/cf_icon_geozone_white.svg
diff --git a/images/icons/cf_icon_home.png → images/icons/map/cf_icon_home.png b/images/icons/cf_icon_home.png → images/icons/map/cf_icon_home.png
diff --git a/images/icons/icon_mission_airplane.png → ...es/icons/map/cf_icon_mission_airplane.png b/images/icons/icon_mission_airplane.png → ...es/icons/map/cf_icon_mission_airplane.png
diff --git a/images/icons/map/cf_icon_multimission_white.svg b/images/icons/map/cf_icon_multimission_white.svg
diff --git a/images/icons/cf_icon_position.png → images/icons/map/cf_icon_position.png b/images/icons/cf_icon_position.png → images/icons/map/cf_icon_position.png
diff --git a/images/icons/cf_icon_position_LDG.png → images/icons/map/cf_icon_position_LDG.png b/images/icons/cf_icon_position_LDG.png → images/icons/map/cf_icon_position_LDG.png
diff --git a/images/icons/cf_icon_position_LDG_edit.png → ...s/icons/map/cf_icon_position_LDG_edit.png b/images/icons/cf_icon_position_LDG_edit.png → ...s/icons/map/cf_icon_position_LDG_edit.png
diff --git a/images/icons/cf_icon_position_PH.png → images/icons/map/cf_icon_position_PH.png b/images/icons/cf_icon_position_PH.png → images/icons/map/cf_icon_position_PH.png
diff --git a/images/icons/cf_icon_position_PH_edit.png → ...es/icons/map/cf_icon_position_PH_edit.png b/images/icons/cf_icon_position_PH_edit.png → ...es/icons/map/cf_icon_position_PH_edit.png
diff --git a/images/icons/cf_icon_position_POI.png → images/icons/map/cf_icon_position_POI.png b/images/icons/cf_icon_position_POI.png → images/icons/map/cf_icon_position_POI.png
diff --git a/images/icons/cf_icon_position_POI_edit.png → ...s/icons/map/cf_icon_position_POI_edit.png b/images/icons/cf_icon_position_POI_edit.png → ...s/icons/map/cf_icon_position_POI_edit.png
diff --git a/images/icons/cf_icon_position_WP.png → images/icons/map/cf_icon_position_WP.png b/images/icons/cf_icon_position_WP.png → images/icons/map/cf_icon_position_WP.png
diff --git a/images/icons/cf_icon_position_WP_edit.png → ...es/icons/map/cf_icon_position_WP_edit.png b/images/icons/cf_icon_position_WP_edit.png → ...es/icons/map/cf_icon_position_WP_edit.png
diff --git a/images/icons/cf_icon_position_edit.png → images/icons/map/cf_icon_position_edit.png b/images/icons/cf_icon_position_edit.png → images/icons/map/cf_icon_position_edit.png
diff --git a/images/icons/cf_icon_position_head.png → images/icons/map/cf_icon_position_head.png b/images/icons/cf_icon_position_head.png → images/icons/map/cf_icon_position_head.png
diff --git a/images/icons/cf_icon_safehome.png → images/icons/map/cf_icon_safehome.png b/images/icons/cf_icon_safehome.png → images/icons/map/cf_icon_safehome.png
diff --git a/images/icons/cf_icon_safehome_used.png → images/icons/map/cf_icon_safehome_used.png b/images/icons/cf_icon_safehome_used.png → images/icons/map/cf_icon_safehome_used.png
diff --git a/images/icons/cf_icon_safehome_white.svg → images/icons/map/cf_icon_safehome_white.svg b/images/icons/cf_icon_safehome_white.svg → images/icons/map/cf_icon_safehome_white.svg
diff --git a/images/icons/map/cf_settings_white.svg b/images/icons/map/cf_settings_white.svg
diff --git a/index.html b/index.html
@@ -3,12 +3,6 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link type="text/css" rel="stylesheet" href="./src/css/styles.css" media="all" />    
-    <script type="text/javascript">require('./js/configurator_main.js');</script>
-    <!-- TODO: Update to newer Versions and use proper modules (require) -->
-    <script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
-    <script type="text/javascript" src="./js/libraries/three/OrbitControls.js"></script>
-    <script type="text/javascript" src="./js/libraries/three/GLTFLoader.js"></script>
     <title>INAV Configurator</title>
 </head>
 
@@ -82,7 +76,7 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
                             <label for="wireless-mode">
                                 <span class="" data-i18n="wirelessModeSwitch"></span>
                             </label>
-                            <input id="wireless-mode" class=" togglesmall" type="checkbox" />
+                            <input id="wireless-mode" class="togglesmall" type="checkbox" />
                         </div>
                     </div>
                 </div>
@@ -169,9 +163,9 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
                     </div>
                     <div class="battery-legend" i18n="sensorBatteryVoltage"></div>
                     <div class="bottomStatusIcons">
-                        <div class="armedicon cf_tip" data-i18n_title="mainHelpArmed"></div>
-                        <div class="failsafeicon cf_tip" data-i18n_title="mainHelpFailsafe"></div>
-                        <div class="linkicon cf_tip" data-i18n_title="mainHelpLink"></div>
+                        <div id="armedIcon" class="statusicon armed cf_tip" data-i18n_title="mainHelpArmed"></div>
+                        <div id="failsafeicon" class="statusicon failsafe cf_tip" data-i18n_title="mainHelpFailsafe"></div>
+                        <div id="linkicon" class="statusicon link cf_tip" data-i18n_title="mainHelpLink"></div>
                     </div>
                 </div>
             </div>
@@ -382,6 +376,7 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
             </div>
         </div>
     </div>
+    <script type="module" src="/js/configurator_main.js"></script>
 </body>
 
 </html>
diff --git a/js/CliAutoComplete.js b/js/CliAutoComplete.js
@@ -5,9 +5,10 @@
  * Check out the docs at https://github.com/yuku/jquery-textcomplete/tree/v1/doc
  */
 
-const FC = require('./fc')
-const CONFIGURATOR = require('./data_storage');
-const timeout = require('./timeouts');
+import 'jquery-textcomplete';
+import FC from './fc';
+import CONFIGURATOR from './data_storage';
+import timeout from './timeouts';
 
 const CliAutoComplete = {
     configEnabled: false,
@@ -558,4 +559,4 @@ CliAutoComplete._initTextcomplete = function() {
     ]);
 };
 
-module.exports = CliAutoComplete;
+export default CliAutoComplete;
diff --git a/js/appUpdater.js b/js/appUpdater.js
@@ -1,10 +1,10 @@
 'use strict';
 
-const semver = require('semver');
+import semver from 'semver';
 
-const { GUI } = require('./gui');
-const jBox = require('./libraries/jBox/jBox.min');
-const i18n = require('./localization');
+import { GUI } from './gui';
+import jBox from 'jbox';
+import i18n from './localization';
 
 var appUpdater = appUpdater || {};
 
@@ -17,18 +17,21 @@ appUpdater.checkRelease = function (currVersion) {
         let newPrerelase = releaseData.prerelease;
 
         if (newPrerelase == false && semver.gt(newVersion, currVersion)) {
-            GUI.log(newVersion, app.getVersion());
-            GUI.log(currVersion);
-
-            GUI.log(i18n.getMessage('newVersionAvailable'));
-            modalStart = new jBox('Modal', {
-                width: 400,
-                height: 200,
-                animation: false,
-                closeOnClick: false,
-                closeOnEsc: true,
-                content: $('#appUpdateNotification')
-            }).open();
+
+            window.electronAPI.appGetVersion().then(currentVersion => {
+                GUI.log(newVersion, currentVersion);
+                GUI.log(currVersion);
+
+                GUI.log(i18n.getMessage('newVersionAvailable'));
+                modalStart = new jBox('Modal', {
+                    width: 400,
+                    height: 200,
+                    animation: false,
+                    closeOnClick: false,
+                    closeOnEsc: true,
+                    content: $('#appUpdateNotification')
+                }).open();
+            });
         }
     });
 
@@ -40,4 +43,4 @@ appUpdater.checkRelease = function (currVersion) {
     });
 };
 
-module.exports = appUpdater;
+export default appUpdater;
diff --git a/js/bitHelper.js b/js/bitHelper.js
@@ -31,4 +31,4 @@ var BitHelper = function() {
     return self;
 }();
 
-module.exports = BitHelper;
+export default BitHelper;
diff --git a/js/boards.js b/js/boards.js
@@ -60,5 +60,5 @@ BOARD.findDefinition = function (identifier) {
     return DEFAULT_BOARD_DEFINITION;
 };
 
-module.exports = BOARD;
+export default BOARD;