Add option to start simulator via docker

gcs/data/default_settings.json

@@ -31,6 +31,12 @@
       "default": false,
       "type": "boolean",
       "display": "Speech Announcements"
+    },
+    "experimentalDeveloperFeatures": {
+      "default": false,
+      "type": "boolean",
+      "display": "Experimental Developer Features",
+      "description": "These may be unstable and can cause unexpected bugs or crashes."
     }
   },
   "Dashboard": {

gcs/src/components/connectionProgress.jsx

@@ -0,0 +1,22 @@
+import { Progress } from "@mantine/core"
+
+export default function ConnectionProgress({ connecting, status }) {
+  return (
+    <>
+      {connecting &&
+        status.message !== null &&
+        typeof status.progress === "number" && (
+          <>
+            <p className="text-center my-4">{status.message}</p>
+            <Progress
+              animated
+              size="lg"
+              transitionDuration={300}
+              value={status.progress}
+              className="w-full mx-auto my-auto"
+            />
+          </>
+        )}
+    </>
+  )
+}

gcs/src/components/navbar.jsx

@@ -16,7 +16,6 @@ import {
   Group,
   LoadingOverlay,
   Modal,
-  Progress,
   SegmentedControl,
   Select,
   Tabs,
@@ -78,6 +77,10 @@ import { useEffect } from "react"
 import { twMerge } from "tailwind-merge"
 import { showErrorNotification } from "../helpers/notification.js"
 
+// Modals
+import SimulationModal from "./toolbar/simulationModal.jsx"
+import ConnectionProgress from "./connectionProgress.jsx"
+
 export default function Navbar() {
   // Redux
   const dispatch = useDispatch()
@@ -320,22 +323,10 @@ export default function Navbar() {
           </Group>
         </form>
 
-        {connecting &&
-          droneConnectionStatus.message !== null &&
-          typeof droneConnectionStatus.progress === "number" && (
-            <>
-              <p className="text-center my-4">
-                {droneConnectionStatus.message}
-              </p>
-              <Progress
-                animated
-                size="lg"
-                transitionDuration={300}
-                value={droneConnectionStatus.progress}
-                className="w-full mx-auto my-auto"
-              />
-            </>
-          )}
+        <ConnectionProgress
+          connecting={connecting}
+          status={droneConnectionStatus}
+        />
       </Modal>
 
       <Modal
@@ -402,6 +393,8 @@ export default function Navbar() {
         )}
       </Modal>
 
+      <SimulationModal />
+
       <div className="w-full flex justify-between gap-x-4 xl:grid xl:grid-cols-2 xl:gap-0">
         <div className="flex items-center wrap">
           {/* Navigation */}

gcs/src/components/toolbar/menus/advanced.jsx

@@ -5,11 +5,14 @@
 // Local Imports
 import { useDispatch } from "react-redux"
 import { setForwardingAddressModalOpened } from "../../../redux/slices/droneConnectionSlice"
+import { setSimulationModalOpened } from "../../../redux/slices/simulationParamsSlice"
 import MenuItem from "./menuItem"
 import MenuTemplate from "./menuTemplate"
+import { useSettings } from "../../../helpers/settings"
 
 export default function AdvancedMenu(props) {
   const dispatch = useDispatch()
+  const { getSetting } = useSettings()
   return (
     <MenuTemplate
       title="Advanced"
@@ -28,6 +31,14 @@ export default function AdvancedMenu(props) {
           dispatch(setForwardingAddressModalOpened(true))
         }}
       />
+      {getSetting("General.experimentalDeveloperFeatures") && (
+        <MenuItem
+          name="SITL Simulator"
+          onClick={() => {
+            dispatch(setSimulationModalOpened(true))
+          }}
+        />
+      )}
     </MenuTemplate>
   )
 }