Add progress modal for reading and writing mission to drone

Author: 1Blademaster

gcs/src/missions.jsx

@@ -6,12 +6,24 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 
 // 3rd Party Imports
-import { useLocalStorage, useSessionStorage } from "@mantine/hooks"
+import {
+  useDisclosure,
+  useLocalStorage,
+  useSessionStorage,
+} from "@mantine/hooks"
 import { ResizableBox } from "react-resizable"
 import { v4 as uuidv4 } from "uuid"
 
 // Custom component and helpers
-import { Button, Divider, FileButton, Tabs, Tooltip } from "@mantine/core"
+import {
+  Button,
+  Divider,
+  FileButton,
+  Modal,
+  Progress,
+  Tabs,
+  Tooltip,
+} from "@mantine/core"
 import { IconInfoCircle } from "@tabler/icons-react"
 import Layout from "./components/layout"
 import MissionItemsTable from "./components/missions/missionItemsTable"
@@ -71,6 +83,15 @@ export default function Missions() {
 
   const newMissionItemAltitude = 30 // TODO: Make this configurable
 
+  const [
+    missionProgressModalOpened,
+    { open: openMissionProgressModal, close: closeMissionProgressModal },
+  ] = useDisclosure(false)
+  const [missionProgressModalTitle, setMissionProgressModalTitle] = useState(
+    "Mission progress update",
+  )
+  const [missionProgressModalData, setMissionProgressModalData] = useState({})
+
   // Heartbeat data
   const [heartbeatData, setHeartbeatData] = useState({ system_status: 0 })
 
@@ -126,6 +147,8 @@ export default function Missions() {
     })
 
     socket.on("current_mission", (data) => {
+      closeMissionProgressModal()
+
       if (!data.success) {
         showErrorNotification(data.message)
         return
@@ -152,6 +175,8 @@ export default function Missions() {
     })
 
     socket.on("write_mission_result", (data) => {
+      closeMissionProgressModal()
+
       if (data.success) {
         showSuccessNotification(data.message)
       } else {
@@ -194,6 +219,10 @@ export default function Missions() {
       }
     })
 
+    socket.on("current_mission_progress", (data) => {
+      setMissionProgressModalData(data)
+    })
+
     return () => {
       socket.off("incoming_msg")
       socket.off("home_position_result")
@@ -202,6 +231,7 @@ export default function Missions() {
       socket.off("write_mission_result")
       socket.off("import_mission_result")
       socket.off("export_mission_result")
+      socket.off("current_mission_progress")
     }
   }, [connected])
 
@@ -211,6 +241,13 @@ export default function Missions() {
     }
   }, [importFile])
 
+  function resetMissionProgressModalData() {
+    setMissionProgressModalData({
+      message: "",
+      progress: null,
+    })
+  }
+
   function isGlobalFrameHomeCommand(waypoint) {
     const globalFrameValue = parseInt(
       Object.keys(MAV_FRAME_LIST).find(
@@ -414,6 +451,9 @@ export default function Missions() {
 
   function readMissionFromDrone() {
     socket.emit("get_current_mission", { type: activeTab })
+    setMissionProgressModalTitle(`Reading ${activeTab} from drone`)
+    resetMissionProgressModalData()
+    openMissionProgressModal()
   }
 
   function writeMissionToDrone() {
@@ -427,6 +467,9 @@ export default function Missions() {
     } else if (activeTab === "rally") {
       socket.emit("write_current_mission", { type: "rally", items: rallyItems })
     }
+    setMissionProgressModalTitle(`Writing ${activeTab} to drone`)
+    resetMissionProgressModalData()
+    openMissionProgressModal()
   }
 
   function importMissionFromFile(filePath) {
@@ -548,6 +591,40 @@ export default function Missions() {
 
   return (
     <Layout currentPage="missions">
+      <Modal
+        opened={missionProgressModalOpened}
+        onClose={closeMissionProgressModal}
+        title={missionProgressModalTitle}
+        closeOnClickOutside={false}
+        closeOnEscape={false}
+        withCloseButton={false}
+        centered
+        overlayProps={{
+          backgroundOpacity: 0.55,
+          blur: 3,
+        }}
+      >
+        <div className="flex flex-col items-center justify-center mt-4">
+          {missionProgressModalData.message && (
+            <p className="text-center mb-2">
+              {missionProgressModalData.message}
+            </p>
+          )}
+
+          {(missionProgressModalData.progress !== null ||
+            missionProgressModalData !== undefined) && (
+            <Progress
+              color="lime"
+              animated
+              size="lg"
+              transitionDuration={300}
+              value={missionProgressModalData.progress * 100}
+              className="w-full mx-auto my-auto"
+            />
+          )}
+        </div>
+      </Modal>
+
       {/* Banner to let people know that things are still under development */}
       <div className="bg-falconred-700 text-white text-center">
         Missions is still under development so some features are still missing.

radio/app/controllers/missionController.py

@@ -1,7 +1,7 @@
 from __future__ import annotations
 
 import os
-from typing import TYPE_CHECKING, Any, List
+from typing import TYPE_CHECKING, Any, Callable, List, Optional
 
 import serial
 from app.customTypes import Number, Response
@@ -89,9 +89,15 @@ def _getCommandName(self, command: int) -> str:
         except KeyError:
             return f"Unknown command {command}"
 
-    def getCurrentMission(self, mission_type: int) -> Response:
+    def getCurrentMission(
+        self, mission_type: int, progressUpdateCallback: Optional[Callable]
+    ) -> Response:
         """
         Get the current mission of a specific type from the drone.
+
+        Args:
+            mission_type (int): The type of mission to get. 0=Mission,1=Fence,2=Rally.
+            progressUpdateCallback (Optional[Callable]): A callback function to update the progress of the mission fetch.
         """
         mission_type_check = self._checkMissionType(mission_type)
         if not mission_type_check.get("success"):
@@ -100,7 +106,7 @@ def getCurrentMission(self, mission_type: int) -> Response:
         failure_message = "Could not get current mission"
 
         try:
-            mission_items = self.getMissionItems(mission_type=mission_type)
+            mission_items = self.getMissionItems(mission_type, progressUpdateCallback)
             if not mission_items.get("success"):
                 return {
                     "success": False,
@@ -152,12 +158,15 @@ def getCurrentMissionAll(self) -> Response:
             },
         }
 
-    def getMissionItems(self, mission_type: int) -> Response:
+    def getMissionItems(
+        self, mission_type: int, progressUpdateCallback: Optional[Callable]
+    ) -> Response:
         """
         Get all mission items of a specific type from the drone.
 
         Args:
             mission_type (int): The type of mission to get. 0=Mission,1=Fence,2=Rally.
+            progressUpdateCallback (Optional[Callable]): A callback function to update the progress of the mission fetch.
         """
         mission_type_check = self._checkMissionType(mission_type)
         if not mission_type_check.get("success"):
@@ -213,6 +222,12 @@ def getMissionItems(self, mission_type: int) -> Response:
                     f"Got response for mission count of {response.count} for mission type {response.mission_type}"
                 )
                 loader.clear()
+
+                if progressUpdateCallback:
+                    progressUpdateCallback(
+                        f"Received count of {response.count} waypoints", 0
+                    )
+
                 self.drone.is_listening = True
                 for i in range(0, response.count):
                     retry_count = 0
@@ -231,6 +246,12 @@ def getMissionItems(self, mission_type: int) -> Response:
 
                         if item_response_data:
                             loader.add(item_response_data)
+
+                            if progressUpdateCallback:
+                                progressUpdateCallback(
+                                    f"Received waypoint {i+1}", (i + 1) / response.count
+                                )
+
                             break
                         else:
                             self.drone.logger.warning(
@@ -512,13 +533,19 @@ def _parseWaypointsListIntoLoader(
         )
         return loader
 
-    def uploadMission(self, mission_type: int, waypoints: List[dict]) -> Response:
+    def uploadMission(
+        self,
+        mission_type: int,
+        waypoints: List[dict],
+        progressUpdateCallback: Optional[Callable],
+    ) -> Response:
         """
         Uploads the current mission to the drone. This method overwrites the current loader if the upload is successful.
 
         Args:
             mission_type (int): The type of mission to upload. 0=Mission,1=Fence,2=Rally.
             waypoints (List[dict]): The list of waypoints to upload. Each waypoint should be a dict with the required fields.
+            progressUpdateCallback (Optional[Callable]): A callback function to update the progress of the mission writing.
         """
         mission_type_check = self._checkMissionType(mission_type)
         if not mission_type_check.get("success"):
@@ -577,6 +604,12 @@ def uploadMission(self, mission_type: int, waypoints: List[dict]) -> Response:
                     )
                     self.drone.master.mav.send(new_loader.item(response.seq))
 
+                    if progressUpdateCallback:
+                        progressUpdateCallback(
+                            f"Sending waypoint {response.seq + 1}",
+                            (response.seq + 1) / (new_loader.count()),
+                        )
+
                     if response.seq == new_loader.count() - 1:
                         mission_ack_response = self.drone.master.recv_match(
                             type=[

radio/app/endpoints/mission.py

@@ -29,6 +29,15 @@ class ControlMissionType(TypedDict):
     action: str
 
 
+def progressUpdateCallback(message: str, progress: float) -> None:
+    """
+    Callback that is used to update the frontend with the current mission function progress.
+    """
+    socketio.emit(
+        "current_mission_progress", {"message": message, "progress": progress}
+    )
+
+
 @socketio.on("get_current_mission")
 def getCurrentMission(data: CurrentMissionType) -> None:
     """
@@ -62,7 +71,7 @@ def getCurrentMission(data: CurrentMissionType) -> None:
         return
 
     result = droneStatus.drone.missionController.getCurrentMission(
-        mission_type_array.index(mission_type)
+        mission_type_array.index(mission_type), progressUpdateCallback
     )
 
     if not result.get("success"):
@@ -143,7 +152,7 @@ def writeCurrentMission(data: WriteCurrentMissionType) -> None:
     items = data.get("items", [])
 
     result = droneStatus.drone.missionController.uploadMission(
-        mission_type_array.index(mission_type), items
+        mission_type_array.index(mission_type), items, progressUpdateCallback
     )
     if not result.get("success"):
         logger.error(result.get("message"))