Skip to content

Add KeepIn and KeepOut geofence boxes #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add KeepIn and KeepOut geofence boxes #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/common/struct/Vehicle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/mainWindow/map/MapContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
172 changes: 122 additions & 50 deletions src/renderer/missionWindow/MissionWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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' : ''}`}>
Expand All @@ -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>}
Expand Down
9 changes: 7 additions & 2 deletions src/renderer/missionWindow/extra/CreateBoundingBoxButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand All @@ -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 {
Expand Down
25 changes: 15 additions & 10 deletions src/renderer/missionWindow/mission.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/missionWindow/parameter/VTOLSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
Loading