Add KeepIn and KeepOut geofence boxes

  ## Why is this being changed?

This is being changed because of Northrop's requirement of having a
KeepIn and KeepOut box for all vehicles. The KeepIn area is an area that
all vehicles must stay inside of, and will be about the size of the
mission field/runway. The KeepOut area is an area that all vehicles must
stay outside of, and will be the location of all student/Northrop
observers.

  ## What was changed to address this problem?

In order to address the problem, two geofence buttons were created
inside of the missionWindow UI tah tallows the GCS operator to
dynamically create the two boxes individually, separating them by
color.

  ## How was this change tested?

This change was tested with npm test.

Author: rSchwartz1

src/common/struct/Vehicle.ts

@@ -260,11 +260,6 @@ export default class Vehicle {
     this.sendMessage({
       type: 'start',
       jobType,
-      geofence: {
-        topLeft: [0, 0],
-        botRight: [0, 0],
-        keepOut: true,
-      },
     });
 
     this.updateEventHandler.addHandler<VehicleStatus>('status', (value): boolean => {

src/renderer/mainWindow/map/MapContainer.tsx

@@ -318,7 +318,7 @@ export default class MapContainer extends Component<ThemeProps, State> {
     boundingBoxes.forEach((boundingBox): void => {
       if (!newBoundingBoxes[boundingBox.name]) {
         newBoundingBoxes[boundingBox.name] = {
-          color: boundingBox.color || 'red',
+          color: boundingBox.color || 'black',
           bounds: boundingBox.bounds || (viewport.center && {
             top: viewport.center[0],
             bottom: viewport.center[0],

src/renderer/missionWindow/MissionWindow.tsx

@@ -54,23 +54,22 @@ const title: { [missionName in MissionInformation.MissionName]: string } = {
   uuvRescue: 'UUV Rescue',
 };
 
-type GeofenceChecklistType = 'geofenceTop' | 'geofenceLeft' | 'geofenceRight' | 'geofenceBottom';
+type GeofenceChecklistType = 'geofenceKeepInTop' | 'geofenceKeepInLeft' | 'geofenceKeepInRight' | 'geofenceKeepInBottom' | 'geofenceKeepOutTop' | 'geofenceKeepOutLeft' | 'geofenceKeepOutRight' | 'geofenceKeepOutBottom';
 
 const checklistCache: { [check in GeofenceChecklistType ]: number | undefined} = {
-  geofenceTop: undefined,
-  geofenceLeft: undefined,
-  geofenceRight: undefined,
-  geofenceBottom: undefined,
+  geofenceKeepInTop: undefined,
+  geofenceKeepInLeft: undefined,
+  geofenceKeepInRight: undefined,
+  geofenceKeepInBottom: undefined,
+  geofenceKeepOutTop: undefined,
+  geofenceKeepOutLeft: undefined,
+  geofenceKeepOutRight: undefined,
+  geofenceKeepOutBottom: undefined,
 };
 
-type Locked = {
-  geofence: boolean;
-};
-
-const lockedCache: Locked = {
-  geofence: true,
-};
+type Locked = { geofenceKeepIn: boolean, geofenceKeepOut: boolean };
 
+const lockedCache: Locked = { geofenceKeepIn: true, geofenceKeepOut: true };
 
 interface State {
   /**
@@ -223,50 +222,98 @@ export default class MissionWindow extends Component<ThemeProps, State> {
     const name = event.target.name as GeofenceChecklistType;
     const value = parseInt(event.target.value, 10) || 0;
     switch (name) {
-      case 'geofenceTop':
+      case 'geofenceKeepInTop':
+        ipc.postUpdateBoundingBoxes(true, {
+          name: 'Geofence Keep In',
+          bounds: {
+            top: value,
+            bottom: checklist.geofenceKeepInBottom as number,
+            left: checklist.geofenceKeepInLeft as number,
+            right: checklist.geofenceKeepInRight as number,
+          },
+        });
+        break;
+
+      case 'geofenceKeepInLeft':
+        ipc.postUpdateBoundingBoxes(true, {
+          name: 'Geofence Keep In',
+          bounds: {
+            top: checklist.geofenceKeepInTop as number,
+            bottom: checklist.geofenceKeepInBottom as number,
+            left: value,
+            right: checklist.geofenceKeepInRight as number,
+          },
+        });
+        break;
+
+      case 'geofenceKeepInRight':
+        ipc.postUpdateBoundingBoxes(true, {
+          name: 'Geofence Keep In',
+          bounds: {
+            top: checklist.geofenceKeepInTop as number,
+            bottom: checklist.geofenceKeepInBottom as number,
+            left: checklist.geofenceKeepInLeft as number,
+            right: value,
+          },
+        });
+        break;
+
+      case 'geofenceKeepInBottom':
         ipc.postUpdateBoundingBoxes(true, {
-          name: 'Geofencing',
+          name: 'Geofence Keep In',
+          bounds: {
+            top: checklist.geofenceKeepInTop as number,
+            bottom: value,
+            left: checklist.geofenceKeepInLeft as number,
+            right: checklist.geofenceKeepInRight as number,
+          },
+        });
+        break;
+
+      case 'geofenceKeepOutTop':
+        ipc.postUpdateBoundingBoxes(true, {
+          name: 'Geofence Keep Out',
           bounds: {
             top: value,
-            bottom: checklist.geofenceBottom as number,
-            left: checklist.geofenceLeft as number,
-            right: checklist.geofenceRight as number,
+            bottom: checklist.geofenceKeepOutBottom as number,
+            left: checklist.geofenceKeepOutLeft as number,
+            right: checklist.geofenceKeepOutRight as number,
           },
         });
         break;
 
-      case 'geofenceLeft':
+      case 'geofenceKeepOutLeft':
         ipc.postUpdateBoundingBoxes(true, {
-          name: 'Geofencing',
+          name: 'Geofence Keep Out',
           bounds: {
-            top: checklist.geofenceTop as number,
-            bottom: checklist.geofenceBottom as number,
+            top: checklist.geofenceKeepOutTop as number,
+            bottom: checklist.geofenceKeepOutBottom as number,
             left: value,
-            right: checklist.geofenceRight as number,
+            right: checklist.geofenceKeepOutRight as number,
           },
         });
         break;
 
-      case 'geofenceRight':
+      case 'geofenceKeepOutRight':
         ipc.postUpdateBoundingBoxes(true, {
-          name: 'Geofencing',
+          name: 'Geofence Keep Out',
           bounds: {
-            top: checklist.geofenceTop as number,
-            bottom: checklist.geofenceBottom as number,
-            left: checklist.geofenceLeft as number,
+            top: checklist.geofenceKeepOutTop as number,
+            bottom: checklist.geofenceKeepOutBottom as number,
+            left: checklist.geofenceKeepOutLeft as number,
             right: value,
           },
         });
         break;
 
-      case 'geofenceBottom':
+      case 'geofenceKeepOutBottom':
         ipc.postUpdateBoundingBoxes(true, {
-          name: 'Geofencing',
+          name: 'Geofence Keep Out',
           bounds: {
-            top: checklist.geofenceTop as number,
+            top: checklist.geofenceKeepOutTop as number,
             bottom: value,
-            left: checklist.geofenceLeft as number,
-            right: checklist.geofenceRight as number,
+            left: checklist.geofenceKeepOutLeft as number,
+            right: checklist.geofenceKeepOutRight as number,
           },
         });
         break;
@@ -368,11 +415,18 @@ export default class MissionWindow extends Component<ThemeProps, State> {
 
     boundingBoxes.forEach((boxpoint): void => {
       switch (boxpoint.name) {
-        case 'Geofencing':
-          checks.geofenceTop = boxpoint.bounds.top;
-          checks.geofenceRight = boxpoint.bounds.right;
-          checks.geofenceLeft = boxpoint.bounds.left;
-          checks.geofenceBottom = boxpoint.bounds.bottom;
+        case 'Geofence Keep In':
+          checks.geofenceKeepInTop = boxpoint.bounds.top;
+          checks.geofenceKeepInRight = boxpoint.bounds.right;
+          checks.geofenceKeepInLeft = boxpoint.bounds.left;
+          checks.geofenceKeepInBottom = boxpoint.bounds.bottom;
+          break;
+
+        case 'Geofence Keep Out':
+          checks.geofenceKeepOutTop = boxpoint.bounds.top;
+          checks.geofenceKeepOutRight = boxpoint.bounds.right;
+          checks.geofenceKeepOutLeft = boxpoint.bounds.left;
+          checks.geofenceKeepOutBottom = boxpoint.bounds.bottom;
           break;
 
         default: break;
@@ -447,8 +501,11 @@ export default class MissionWindow extends Component<ThemeProps, State> {
   private unlockParameterInputs(waypointType: string): void {
     const { locked: newLocked } = this.state;
 
-    if (waypointType === 'geofence') {
-      newLocked.geofence = false;
+    if (waypointType === 'geofenceKeepIn') {
+      newLocked.geofenceKeepIn = false;
+    }
+    if (waypointType === 'geofenceKeepOut') {
+      newLocked.geofenceKeepOut = false;
     }
 
     this.setState({ locked: newLocked });
@@ -486,10 +543,14 @@ export default class MissionWindow extends Component<ThemeProps, State> {
      */
 
     const unlockStartMissionButton = information[missionName].parameters !== undefined
-      && checklist.geofenceTop !== undefined
-      && checklist.geofenceBottom !== undefined
-      && checklist.geofenceLeft !== undefined
-      && checklist.geofenceRight !== undefined;
+      && checklist.geofenceKeepInTop !== undefined
+      && checklist.geofenceKeepInBottom !== undefined
+      && checklist.geofenceKeepInLeft !== undefined
+      && checklist.geofenceKeepInRight !== undefined
+      && checklist.geofenceKeepOutTop !== undefined
+      && checklist.geofenceKeepOutBottom !== undefined
+      && checklist.geofenceKeepOutLeft !== undefined
+      && checklist.geofenceKeepOutRight !== undefined;
 
     return (
       <div className={`missionWrapper${theme === 'dark' ? '_dark' : ''}`}>
@@ -516,16 +577,27 @@ export default class MissionWindow extends Component<ThemeProps, State> {
           <h1 style={{ marginTop: 0 }}>Options</h1>
           <MissionOptions title={title} missionNames={missionNames} options={options} />
         </div>
-        <div className="geofenceContainer">
-          <h1>Geofencing</h1>
-          <input className="inputFields" type="number" name="geofenceScanTop" value={checklist.geofenceTop || ''} disabled={locked.geofence} onChange={this.onChange} placeholder="Top" />
+        <div className="geofenceKeepInContainer">
+          <h1>Geofence Keep In</h1>
+          <input className="inputFields" type="number" name="geofenceKeepInTop" value={checklist.geofenceKeepInTop || ''} disabled={locked.geofenceKeepIn} onChange={this.onChange} placeholder="Top" />
+          <br />
+          <input className="inputFields" type="number" name="geofenceKeepInBottom" value={checklist.geofenceKeepInBottom || ''} disabled={locked.geofenceKeepIn} onChange={this.onChange} placeholder="Bottom" />
+          <br />
+          <input className="inputFields" type="number" name="geofenceKeepInLeft" value={checklist.geofenceKeepInLeft || ''} disabled={locked.geofenceKeepIn} onChange={this.onChange} placeholder="Left" />
+          <br />
+          <input className="inputFields" type="number" name="geofenceKeepInRight" value={checklist.geofenceKeepInRight || ''} disabled={locked.geofenceKeepIn} onChange={this.onChange} placeholder="Right" />
+          <CreateBoundingBoxButton theme={theme} name="geofenceKeepIn" value="Geofence Keep In" color="green" />
+        </div>
+        <div className="geofenceKeepOutContainer">
+          <h1>Geofence Keep Out</h1>
+          <input className="inputFields" type="number" name="geofenceKeepOutTop" value={checklist.geofenceKeepOutTop || ''} disabled={locked.geofenceKeepOut} onChange={this.onChange} placeholder="Top" />
           <br />
-          <input className="inputFields" type="number" name="geofenceBottom" value={checklist.geofenceBottom || ''} disabled={locked.geofence} onChange={this.onChange} placeholder="Bottom" />
+          <input className="inputFields" type="number" name="geofenceKeepOutBottom" value={checklist.geofenceKeepOutBottom || ''} disabled={locked.geofenceKeepOut} onChange={this.onChange} placeholder="Bottom" />
           <br />
-          <input className="inputFields" type="number" name="geofenceLeft" value={checklist.geofenceLeft || ''} disabled={locked.geofence} onChange={this.onChange} placeholder="Left" />
+          <input className="inputFields" type="number" name="geofenceKeepOutLeft" value={checklist.geofenceKeepOutLeft || ''} disabled={locked.geofenceKeepOut} onChange={this.onChange} placeholder="Left" />
           <br />
-          <input className="inputFields" type="number" name="geofenceRight" value={checklist.geofenceRight || ''} disabled={locked.geofence} onChange={this.onChange} placeholder="Right" />
-          <CreateBoundingBoxButton theme={theme} name="geofence" value="Geofencing" />
+          <input className="inputFields" type="number" name="geofenceKeepOutRight" value={checklist.geofenceKeepOutRight || ''} disabled={locked.geofenceKeepOut} onChange={this.onChange} placeholder="Right" />
+          <CreateBoundingBoxButton theme={theme} name="geofenceKeepOut" value="Geofence Keep Out" color="red" />
         </div>
         <div className="buttonContainer">
           {status === 'ready' && <button type="button" disabled={!unlockStartMissionButton} onClick={this.postStartMissions}>Start Missions</button>}

src/renderer/missionWindow/extra/CreateBoundingBoxButton.tsx

@@ -13,6 +13,11 @@ export interface CreateBoundingBoxButtonProps extends ThemeProps{
    * Name of the box itself, when it shows up on the map.
    */
   value: string;
+
+  /**
+   * Color of the box as it appears on the map.
+   */
+  color: string;
 }
 
 export default class CreateBoundingBoxButton extends PureComponent<CreateBoundingBoxButtonProps> {
@@ -23,9 +28,9 @@ export default class CreateBoundingBoxButton extends PureComponent<CreateBoundin
   }
 
   private onClick(): void {
-    const { name, value } = this.props;
+    const { name, value, color } = this.props;
     ipc.postUnlockParameterInputs(name);
-    ipc.postCreateBoundingBoxes({ name: value });
+    ipc.postCreateBoundingBoxes({ name: value, color });
   }
 
   public render(): ReactNode {

src/renderer/missionWindow/mission.css

@@ -6,14 +6,14 @@
   height: 100%;
   width: 100;
   grid-template-areas:
-    'selector  selector  selector  mapping'
-    'parameter parameter parameter mapping'
-    'parameter parameter parameter mapping'
-    'parameter parameter parameter mapping'
-    'geofence  geofence  geofence  options'
-    'geofence  geofence  geofence  options'
-    'button    button    button    options';
-  grid-template-rows: 25px 1fr 1fr 0.8fr 1fr 0.3fr 25px;
+    'selector       selector       selector        mapping'
+    'parameter      parameter      parameter       mapping'
+    'parameter      parameter      parameter       mapping'
+    'parameter      parameter      parameter       mapping'
+    'geofenceKeepIn geofenceKeepIn geofenceKeepOut options'
+    'geofenceKeepIn geofenceKeepIn geofenceKeepOut options'
+    'button         button         button          options';
+  grid-template-rows: 25px 1fr 1fr 1fr 1fr 0.3fr 25px;
   grid-template-columns: repeat(4, 1fr);
 }
 
@@ -27,8 +27,13 @@
   padding-left: 20px;
 }
 
-.geofenceContainer {
-  grid-area: geofence;
+.geofenceKeepInContainer {
+  grid-area: geofenceKeepIn;
+  padding-left: 20px;
+}
+
+.geofenceKeepOutContainer {
+  grid-area: geofenceKeepOut;
   padding-left: 20px;
 }
 

src/renderer/missionWindow/parameter/VTOLSearch.tsx

@@ -233,7 +233,7 @@ export class VTOLSearch extends Component<VTOLSearchProps, State> {
         <input className="inputFields" type="number" name="quickScanLeft" value={checklist.quickScanLeft || ''} disabled={locked.quickScan} onChange={this.onChange} placeholder="Left" />
         <br />
         <input className="inputFields" type="number" name="quickScanRight" value={checklist.quickScanRight || ''} disabled={locked.quickScan} onChange={this.onChange} placeholder="Right" />
-        <CreateBoundingBoxButton theme={theme} name="quickScan" value="Bounding Box" />
+        <CreateBoundingBoxButton theme={theme} name="quickScan" value="Bounding Box" color="red" />
       </div>
     );
   }