`
return {
@@ -124,7 +136,7 @@ const { appendLoading, removeLoading } = useLoading()
domReady().then(appendLoading)
window.onmessage = (ev) => {
- ev.data.payload === 'removeLoading' && removeLoading()
+ ev.data.payload === "removeLoading" && removeLoading()
}
setTimeout(removeLoading, 4999)
diff --git a/gcs/linkStats.html b/gcs/linkStats.html
new file mode 100644
index 000000000..d22a0453c
--- /dev/null
+++ b/gcs/linkStats.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/gcs/package.json b/gcs/package.json
index ae71c4c11..7c66c9e50 100644
--- a/gcs/package.json
+++ b/gcs/package.json
@@ -6,9 +6,10 @@
"name": "Avis-Drone-Labs"
},
"private": true,
- "version": "0.1.9-alpha",
+ "version": "0.2.0-alpha",
"license": "GPL-3.0-only",
"homepage": "https://fgcs.projectfalcon.uk",
+ "githubLink": "https://github.com/Avis-Drone-Labs/FGCS",
"bugs": {
"url": "https://github.com/Avis-Drone-Labs/FGCS/issues/new/choose"
},
diff --git a/gcs/src/about.jsx b/gcs/src/about.jsx
new file mode 100644
index 000000000..ed22e0291
--- /dev/null
+++ b/gcs/src/about.jsx
@@ -0,0 +1,21 @@
+import "./css/index.css" // Needs to be at the top of the file
+import "./css/resizable.css"
+
+// Style imports
+import "@mantine/code-highlight/styles.css"
+import "@mantine/core/styles.css"
+import "@mantine/notifications/styles.css"
+import "@mantine/spotlight/styles.css"
+import "@mantine/tiptap/styles.css"
+
+import React from "react"
+import ReactDOM from "react-dom/client"
+import AboutWindow from "./components/aboutWindow/aboutWindow"
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+ )
+}
diff --git a/gcs/src/components/config/flightModes.jsx b/gcs/src/components/config/flightModes.jsx
index 798bc7fbe..1f144380a 100644
--- a/gcs/src/components/config/flightModes.jsx
+++ b/gcs/src/components/config/flightModes.jsx
@@ -6,27 +6,34 @@
each mode.
*/
// Base imports
-import { useEffect, useState } from "react"
+import { useEffect, useMemo } from "react"
+import {
+ selectAircraftTypeString,
+ selectFlightModeString,
+} from "../../redux/slices/droneInfoSlice"
// 3rd party imports
-import { Button, LoadingOverlay, Select } from "@mantine/core"
-import {
- useListState,
- useLocalStorage,
- useSessionStorage,
-} from "@mantine/hooks"
+import { LoadingOverlay, Select } from "@mantine/core"
-// Helper javascript files
+// Redux
+import { useDispatch, useSelector } from "react-redux"
import {
- COPTER_MODES_FLIGHT_MODE_MAP,
- MAV_AUTOPILOT_INVALID,
- PLANE_MODES_FLIGHT_MODE_MAP,
-} from "../../helpers/mavlinkConstants"
+ emitSetState,
+ selectConnectedToDrone,
+} from "../../redux/slices/droneConnectionSlice"
import {
- showErrorNotification,
- showSuccessNotification,
-} from "../../helpers/notification"
-import { socket } from "../../helpers/socket"
+ emitGetFlightModeConfig,
+ emitRefreshFlightModeData,
+ emitSetFlightMode,
+ selectFlightModeChannel,
+ selectFlightModesList,
+ selectPwmValue,
+ selectRefreshingFlightModeData,
+ setRefreshingFlightModeData,
+} from "../../redux/slices/configSlice"
+
+// Helper javascript files
+import { getFlightModeMap } from "../../helpers/mavlinkConstants"
const FLIGHT_MODE_PWM_VALUES = [
[0, 1230],
@@ -38,105 +45,35 @@ const FLIGHT_MODE_PWM_VALUES = [
]
export default function FlightModes() {
- const [connected] = useSessionStorage({
- key: "connectedToDrone",
- defaultValue: false,
- })
-
- function getCurrentFlightMap(currentFlightState) {
- if (currentFlightState === 1) {
- return PLANE_MODES_FLIGHT_MODE_MAP
- } else if (currentFlightState === 2) {
- return COPTER_MODES_FLIGHT_MODE_MAP
- }
-
- return {}
- }
-
- const [flightModes, flightModesHandler] = useListState([
- "UNKNOWN",
- "UNKNOWN",
- "UNKNOWN",
- "UNKNOWN",
- "UNKNOWN",
- "UNKNOWN",
- ])
- const [flightModeChannel, setFlightModeChannel] = useState("UNKNOWN")
- const [currentFlightMode, setCurrentFlightMode] = useState("UNKNOWN")
- const [aircraftType] = useLocalStorage({
- key: "aircraftType",
- })
- const [currentPwmValue, setCurrentPwmValue] = useState(0)
- const [refreshingFlightModeData, setRefreshingFlightModeData] =
- useState(false)
-
- const flightModesSelectValuesMap = Object.keys(
- getCurrentFlightMap(aircraftType),
- ).map((mappedFlightModeNumber) => ({
- value: mappedFlightModeNumber.toString(),
- label: getCurrentFlightMap(aircraftType)[mappedFlightModeNumber],
- }))
+ const dispatch = useDispatch()
+ const connected = useSelector(selectConnectedToDrone)
+ const flightModes = useSelector(selectFlightModesList)
+ const flightModeChannel = useSelector(selectFlightModeChannel)
+ const refreshingFlightModeData = useSelector(selectRefreshingFlightModeData)
+ const aircraftType = useSelector(selectAircraftTypeString)
+ const currentFlightMode = useSelector(selectFlightModeString)
+ const currentPwmValue = useSelector(selectPwmValue)
+
+ const flightModeSelectDataMap = useMemo(() => {
+ const flightModeMap = getFlightModeMap(aircraftType)
+ return Object.keys(flightModeMap).map((key) => {
+ return {
+ value: key,
+ label: flightModeMap[key],
+ }
+ })
+ }, [aircraftType])
useEffect(() => {
if (!connected) {
return
}
- socket.emit("set_state", { state: "config.flight_modes" })
- socket.emit("get_flight_mode_config")
-
- socket.on("flight_mode_config", (data) => {
- flightModesHandler.setState(data.flight_modes)
- setFlightModeChannel(data.flight_mode_channel)
- setRefreshingFlightModeData(false)
- })
-
- socket.on("set_flight_mode_result", (data) => {
- if (data.success) {
- showSuccessNotification(data.message)
- } else {
- showErrorNotification(data.message)
- }
-
- socket.emit("get_flight_mode_config")
- })
-
- return () => {
- socket.emit("set_state", { state: "config" })
- socket.off("flight_mode_config")
- socket.off("set_flight_mode_result")
- }
+ dispatch(emitSetState("config.flight_modes"))
+ dispatch(emitGetFlightModeConfig())
+ refreshFlightModeData()
}, [connected])
- useEffect(() => {
- socket.on("incoming_msg", (msg) => {
- if (
- msg.mavpackettype === "RC_CHANNELS" &&
- flightModeChannel !== "UNKNOWN"
- ) {
- setCurrentPwmValue(msg[`chan${flightModeChannel}_raw`])
- } else if (
- msg.mavpackettype === "HEARTBEAT" &&
- msg.autopilot !== MAV_AUTOPILOT_INVALID &&
- msg.type
- ) {
- // Get the current flight mode
- let mode = "UNKNOWN"
- if (msg.type === 1) {
- mode = PLANE_MODES_FLIGHT_MODE_MAP[msg.custom_mode]
- } else if (msg.type === 2) {
- mode = COPTER_MODES_FLIGHT_MODE_MAP[msg.custom_mode]
- }
-
- setCurrentFlightMode(mode)
- }
- })
-
- return () => {
- socket.off("incoming_msg")
- }
- }, [flightModeChannel])
-
function isFlightModeActive(mode_idx) {
// Check if the current PWM value is within the range of the flight mode
// If the second value is undefined, then check if the current PWM value is
@@ -153,15 +90,17 @@ export default function FlightModes() {
}
function changeFlightMode(modeNumber, newFlightMode) {
- socket.emit("set_flight_mode", {
- mode_number: modeNumber + 1, // Mode number is 1 + indexed value
- flight_mode: parseInt(newFlightMode),
- })
+ dispatch(
+ emitSetFlightMode({
+ mode_number: modeNumber + 1, // Mode number is 1 + indexed value
+ flight_mode: parseInt(newFlightMode),
+ }),
+ )
}
function refreshFlightModeData() {
- socket.emit("refresh_flight_mode_data")
- setRefreshingFlightModeData(true)
+ dispatch(emitRefreshFlightModeData())
+ dispatch(setRefreshingFlightModeData(true))
}
return (
@@ -178,11 +117,11 @@ export default function FlightModes() {
{flightModes.map((flightModeNumber, idx) => (
+ 
+
+
+
+
+ {packageJson.version} | Made with β€ in the UK
+