Release alpha 0.1.9

.github/ISSUE_TEMPLATE/bug_report.md

@@ -31,7 +31,7 @@ If applicable, add screenshots to help explain your problem.
    - What version of ArduPilot is running on the flight controller?
 
 **Error Log**
-Please share the error's found in the console tab of inspect element (found by doing `ctrl + shift + i` and clicking the `console` tab). Either a screenshot or a copy paste of the error would suffice. If there is no error found in the console tab you can leave this blank. If you are struggling to find the console tab click [here](../../help/how_to_find_error_console.png).
+If you received an error message within FGCS, please click on 'Show stack log', then copy and paste it here using the button in the top right. If you don't see the stack log, please share the errors found in the console tab of inspect element (found by doing `ctrl + shift + i` and clicking the `console` tab). Either a screenshot or a copy paste of the error would suffice. If there is no error found in the console tab you can leave this blank. If you are struggling to find the console tab click [here](../../help/how_to_find_error_console.png).
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/windows_build.yml

@@ -35,5 +35,5 @@ jobs:
 
       - name: Run build script
         working-directory: building\windows
-        run: build.ps1 -Version "${{ github.event.inputs.version }}"
+        run: ./build.ps1 -Version "${{ github.event.inputs.version }}"
 

.vscode/settings.json

@@ -13,6 +13,7 @@
         "RSSI",
         "serialutil",
         "SITL",
-        "statustext"
+        "statustext",
+        "SUAS"
     ]
 }

gcs/data/default_settings.json

@@ -1,34 +1,41 @@
 {
-    "General": {
-        "maptilerAPIKey": {
-            "default": "",
-            "type": "string",
-            "display": "Maptiler API Key",
-            "hidden": true
-        },
-        "port": {
-            "default": "4237",
-            "type": "number",
-            "range": [
-                0,
-                65535
-            ],
-            "display": "Backend Port"
-        },
-        "interfaceLanguage": {
-            "default": "English",
-            "type": "option",
-            "options": ["English"],
-            "display": "Interface Language"
-        },
-        "autoCheckForUpdates": {
-            "default": true,
-            "type": "boolean",
-            "display": "Automatically Check for Updates"
-        }
+  "General": {
+    "maptilerAPIKey": {
+      "default": "",
+      "type": "string",
+      "display": "Maptiler API Key",
+      "hidden": true
     },
-    "Params": {},
-    "Config": {},
-    "FGCS": {
+    "mapStyle": {
+      "default": "hybrid",
+      "type": "option",
+      "options": ["satellite", "hybrid", "streets", "outdoor"],
+      "display": "Map Style"
+    },
+    "port": {
+      "default": "4237",
+      "type": "number",
+      "range": [0, 65535],
+      "display": "Backend Port"
+    },
+    "interfaceLanguage": {
+      "default": "English",
+      "type": "option",
+      "options": ["English"],
+      "display": "Interface Language"
+    },
+    "autoCheckForUpdates": {
+      "default": true,
+      "type": "boolean",
+      "display": "Automatically Check for Updates"
+    },
+    "syncMapViews": {
+      "default": false,
+      "type": "boolean",
+      "display": "Sync Dashboard and Missions Map Viewstate"
     }
+  },
+  "Params": {},
+  "Config": {},
+  "FGCS": {}
 }

gcs/electron/main.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, Menu, MenuItemConstructorOptions, MessageBoxOptions, app, dialog, ipcMain, nativeImage, shell } from 'electron'
+import { BrowserWindow, Event, Menu, MenuItemConstructorOptions, MessageBoxOptions, Rectangle, app, dialog, ipcMain, nativeImage, shell } from 'electron'
 import { ChildProcessWithoutNullStreams, spawn, spawnSync } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
@@ -26,6 +26,7 @@ app.commandLine.appendSwitch('force-device-scale-factor', '1')
 
 let win: BrowserWindow | null
 let loadingWin: BrowserWindow | null
+let webcamPopoutWin: BrowserWindow | null
 // 🚧 Use ['ENV_NAME'] avoid vite:define plugin - Vite@2.x
 const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
 
@@ -35,6 +36,8 @@ function getWindow() {
   return BrowserWindow.getFocusedWindow()
 }
 
+// Settings logic
+
 interface Settings {
   version: string,
   settings: object
@@ -98,10 +101,68 @@ function getUserConfiguration(){
 ipcMain.handle("getSettings", () => {return getUserConfiguration(); })
 ipcMain.handle("setSettings", (_, settings) => {saveUserConfiguration(settings)})
 
+// Webcam popout window
+
+const MIN_WEBCAM_HEIGHT: number = 100
+const WEBCAM_TITLEBAR_HEIGHT: number = 28
+
+// Disable unused vars because they are needed for TS function type
+// eslint-disable-next-line no-unused-vars
+type ResizeCallback = (event: Event, arg1: Rectangle) => void;
+
+let currentResizeHandler: ResizeCallback | null = null
+
+function openWebcamPopout(videoStreamId: string, name: string, aspect: number){
+
+  if (webcamPopoutWin === null) return;
+
+  webcamPopoutWin.loadURL("http://localhost:5173/#/webcam?deviceId=" + videoStreamId + "&deviceName=" + name);
+  webcamPopoutWin.setTitle(name);
+
+  // Remove previous resize handler
+  if (currentResizeHandler)
+    webcamPopoutWin.off("will-resize", currentResizeHandler)
+
+  // Create resize handler to maintain aspect ratio
+  currentResizeHandler = function(event, newBounds){
+    event.preventDefault();
+
+    const newWidth = newBounds.width;
+    const newHeight = Math.round((newWidth / aspect) + WEBCAM_TITLEBAR_HEIGHT);
+
+    webcamPopoutWin?.setBounds({
+      x: newBounds.x,
+      y: newBounds.y,
+      width: newWidth,
+      height: newHeight
+    });
+  }
+
+  webcamPopoutWin.on('will-resize', currentResizeHandler);
+
+  // Ensure initial size fits the aspect ratio ()
+  webcamPopoutWin.setSize(webcamPopoutWin.getBounds().width, Math.round(webcamPopoutWin.getBounds().width / aspect) + WEBCAM_TITLEBAR_HEIGHT);
+
+  webcamPopoutWin.setMinimumSize(Math.round(aspect * (MIN_WEBCAM_HEIGHT-28)), MIN_WEBCAM_HEIGHT);
+  webcamPopoutWin.show();
+
+}
+
+function closeWebcamPopout(){
+  webcamPopoutWin?.hide()
+  webcamPopoutWin?.loadURL("http://localhost:5173/#/webcam")
+  win?.webContents.send("webcam-closed");
+}
+
+ipcMain.handle("openWebcamWindow", (_, videoStreamId, name, aspect) => {openWebcamPopout(videoStreamId, name, aspect)})
+ipcMain.handle("closeWebcamWindow", () => closeWebcamPopout())
+
+
 ipcMain.handle("isMac", () => { return process.platform == "darwin" })
 ipcMain.on('close', () => {closeWithBackend()})
 ipcMain.on('minimise', () => {getWindow()?.minimize()})
 ipcMain.on('maximise', () => {getWindow()?.isMaximized() ? getWindow()?.unmaximize() : getWindow()?.maximize()})
+
 ipcMain.on("reload", () => {getWindow()?.reload()})
 ipcMain.on("force_reload", () => {getWindow()?.webContents.reloadIgnoringCache()})
 ipcMain.on("toggle_developer_tools", () => {getWindow()?.webContents.toggleDevTools()})
@@ -132,6 +193,25 @@ function createWindow() {
     frame: false,
   })
 
+  // Create webcam window keep it hidden to avoid delay between popping out windows
+  webcamPopoutWin = new BrowserWindow({
+    width: 400,
+    height: 300,
+    frame: false,
+    alwaysOnTop: true,
+    icon: path.join(process.env.VITE_PUBLIC, 'app_icon.ico'),
+    show: false,
+    title: "Webcam",
+    webPreferences: {
+      nodeIntegration: true,
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true
+    },
+    fullscreen: false,
+    fullscreenable: false,
+  });
+  webcamPopoutWin.loadURL("http://localhost:5173/#/webcam")
+
   // Open links in browser, not within the electron window.
   // Note, links must have target="_blank"
   win.webContents.setWindowOpenHandler((details) => {
@@ -287,6 +367,8 @@ function closeWithBackend() {
   if (process.platform !== 'darwin') {
     app.quit()
     win = null
+    webcamPopoutWin?.close()
+    webcamPopoutWin = null
   }
 
   console.log('Killing backend')
@@ -306,6 +388,7 @@ app.on('before-quit', () => {
     spawnSync('pkill', ['-f', 'fgcs_backend']);
     pythonBackend = null
   }
+  webcamPopoutWin?.close();
 });
 
 app.on('activate', () => {

gcs/electron/preload.js

@@ -9,7 +9,10 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
   getNodeEnv: () => ipcRenderer.invoke('app:get-node-env'),
   getVersion: () => ipcRenderer.invoke('app:get-version'),
   getSettings: () => ipcRenderer.invoke('getSettings'),
-  saveSettings: (settings) => ipcRenderer.invoke('setSettings', settings)
+  saveSettings: (settings) => ipcRenderer.invoke('setSettings', settings),
+  openWebcamWindow: (id, name, aspect) => ipcRenderer.invoke("openWebcamWindow", id, name, aspect),
+  closeWebcamWindow: () => ipcRenderer.invoke('closeWebcamWindow'),
+  onCameraWindowClose: (callback) => ipcRenderer.on("webcam-closed", () => callback())
 })
 
 // `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it.

gcs/package.json

@@ -6,7 +6,7 @@
     "name": "Avis-Drone-Labs"
   },
   "private": true,
-  "version": "0.1.8-alpha",
+  "version": "0.1.9-alpha",
   "license": "GPL-3.0-only",
   "homepage": "https://fgcs.projectfalcon.uk",
   "bugs": {
@@ -26,14 +26,20 @@
   },
   "dependencies": {
     "@headlessui/react": "2.1.4",
-    "@mantine/core": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
+    "@mantine/code-highlight": "^7.17.1",
+    "@mantine/core": "^7.17.3",
+    "@mantine/hooks": "^7.17.3",
     "@mantine/notifications": "^7.4.0",
     "@mantine/spotlight": "^7.15.3",
+    "@mantine/tiptap": "^7.17.4",
     "@reduxjs/toolkit": "^2.2.7",
     "@robloche/chartjs-plugin-streaming": "^3.1.0",
     "@tabler/icons-react": "^2.44.0",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tiptap/extension-link": "^2.11.6",
+    "@tiptap/pm": "^2.11.6",
+    "@tiptap/react": "^2.11.6",
+    "@tiptap/starter-kit": "^2.11.6",
     "@tremor/react": "^3.12.1",
     "@turf/turf": "^7.2.0",
     "chart.js": "^4.4.2",
@@ -52,6 +58,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
     "react-map-gl": "^7.1.6",
     "react-redux": "^9.1.2",
     "react-resizable": "^3.0.5",
@@ -66,6 +73,7 @@
     "tailwind-merge": "^2.1.0",
     "tailwindcss": "^3.3.6",
     "use-sound": "^4.0.1",
+    "uuid": "^11.1.0",
     "vitest": "^2.0.5"
   },
   "devDependencies": {

gcs/src/components/customMantineTheme.jsx

@@ -27,4 +27,5 @@ export const CustomMantineTheme = createTheme({
       tailwindColors.falcongrey[950],
     ],
   },
+  cursorType: "pointer",
 })

gcs/src/components/dashboard/floatingToolbar.jsx

@@ -5,6 +5,7 @@
 // 3rd Party Imports
 import { ActionIcon, Tooltip } from "@mantine/core"
 import { useLocalStorage } from "@mantine/hooks"
+import { centerOfMass, polygon } from "@turf/turf"
 import {
   IconAnchor,
   IconAnchorOff,
@@ -47,10 +48,17 @@ export default function FloatingToolbar({
     )
   }
 
-  function centerMapOnFirstMissionItem() {
+  function centerMapOnMission() {
     if (filteredMissionItems.length > 0) {
-      let lat = parseFloat(filteredMissionItems[0].x * 1e-7)
-      let lon = parseFloat(filteredMissionItems[0].y * 1e-7)
+      let points = filteredMissionItems.map((item) => [
+        item.x * 1e-7,
+        item.y * 1e-7,
+      ])
+      points.push(points[0]) // Close the polygon
+      let geo = polygon([points])
+      let center = centerOfMass(geo).geometry.coordinates
+      let lat = parseFloat(center[0])
+      let lon = parseFloat(center[1])
       mapRef.current.getMap().flyTo({
         center: [lon, lat],
       })
@@ -95,15 +103,15 @@ export default function FloatingToolbar({
         </ActionIcon>
       </Tooltip>
 
-      {/* Center Map on first mission item */}
+      {/* Center Map on full mission */}
       <Tooltip
         label={
           !filteredMissionItems.length > 0 ? "No mission" : "Center on mission"
         }
       >
         <ActionIcon
           disabled={filteredMissionItems.length <= 0}
-          onClick={centerMapOnFirstMissionItem}
+          onClick={centerMapOnMission}
         >
           <IconMapPins />
         </ActionIcon>