From 7ffd7492fe4292837d5280d60e172de98ae33742 Mon Sep 17 00:00:00 2001 From: Koay TeongBeng Date: Fri, 10 Apr 2020 15:49:38 +0800 Subject: [PATCH 1/3] update README.md with new contribution guideline --- README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d8ce330..9ea79cd 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,14 @@ # r2c2 -ROS-based second-generation command & control system for marine vehicles +ROS-based second-generation command & control system for marine vehicles -Under development +## Contributing +Please follow the following guideline when contributing to the repo +https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow + +In summary +1. Main collaboration branch is in **dev**. +1. Codes/docs stable to be deployed, demo is in **master**. +1. Feature dev, testing, etc. is a **feature branch** from **dev** +1. Private branch that you don't want others to look is suffixed with **-priv** +1. Keep all exploratory works in separate folders +1. Each folder should have README.md about the folder. From 45d354e5ecd66bb9cc15d22680eaec9dbcd00736 Mon Sep 17 00:00:00 2001 From: Koay TeongBeng Date: Fri, 10 Apr 2020 15:50:36 +0800 Subject: [PATCH 2/3] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 9ea79cd..2ee17ec 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,7 @@ ROS-based second-generation command & control system for marine vehicles ## Contributing -Please follow the following guideline when contributing to the repo -https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow +Please [follow the following guideline](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) when contributing to the repo In summary 1. Main collaboration branch is in **dev**. From 7a8a2b2acd603dd6f8ca45cea9937806341c4932 Mon Sep 17 00:00:00 2001 From: yashdeep97 Date: Fri, 17 Apr 2020 15:25:34 +0800 Subject: [PATCH 3/3] Enable user to draw geo fence using the map UI. --- experiments/WebUI/src/assets/App.css | 19 ++++ .../src/components/content/MapComponent.js | 102 +++++++++++++++--- 2 files changed, 104 insertions(+), 17 deletions(-) diff --git a/experiments/WebUI/src/assets/App.css b/experiments/WebUI/src/assets/App.css index 4ed6cb0..0ffe627 100644 --- a/experiments/WebUI/src/assets/App.css +++ b/experiments/WebUI/src/assets/App.css @@ -150,6 +150,25 @@ .dropdown_styles:hover .dropdown_content {display: block;} +/******* DrawGeoFence styles *******/ +.drawGeoFence_styles{ + position: relative; + display: inline-block; + margin-left: 15px; +} + +.drawGeoFence_content{ + position: absolute; + background-color: #f1f1f1; + /* min-width: 160px; */ + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1001; +} + +.drawGeoFence_content Button { + margin: 3px; +} + /******* Script Control ********/ .subroutine_select_styles{ width: 150px; diff --git a/experiments/WebUI/src/components/content/MapComponent.js b/experiments/WebUI/src/components/content/MapComponent.js index c5eb742..0750a5a 100644 --- a/experiments/WebUI/src/components/content/MapComponent.js +++ b/experiments/WebUI/src/components/content/MapComponent.js @@ -15,7 +15,7 @@ import { Row, Container, Dropdown, Button } from 'react-bootstrap'; import { StyleSheet, css } from 'aphrodite'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faCrosshairs } from '@fortawesome/free-solid-svg-icons' +import { faCrosshairs, faUndo, faSave, faWindowClose } from '@fortawesome/free-solid-svg-icons' import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @@ -72,9 +72,14 @@ class MapComponent extends React.Component { polylineArray: [], pathLimit: 1000, missionPoints: [], + MissionPointsMarkers: [], displayGeoFence: true, displayMissionPts: true, - displayVehiclePath: true + displayVehiclePath: true, + displayVehicle: true, + + drawingGeoFence: false, + drawGeoFence: [] }; @@ -89,6 +94,13 @@ class MapComponent extends React.Component { this.toggleMissionPts = this.toggleMissionPts.bind(this); this.toggleVehiclePath = this.toggleVehiclePath.bind(this); + this.enableDrawGeofence = this.enableDrawGeofence.bind(this); + this.undoGeoFencePoint = this.undoGeoFencePoint.bind(this); + this.saveNewGeoFence = this.saveNewGeoFence.bind(this); + this.cancelNewGeoFence = this.cancelNewGeoFence.bind(this); + + this.mapOnClick = this.mapOnClick.bind(this); + this.vehicleMarker = readyMarker; this.vehicleId = null; @@ -278,6 +290,7 @@ class MapComponent extends React.Component { } viewMission(num){ + // TODO: mission not being shown in first function call. Displays only on second call. this.missionNumber = num; @@ -293,14 +306,14 @@ class MapComponent extends React.Component { this.setState({ missionPoints: this.missions[this.missionNumber] }); - this.MissionPointsMarkers = []; + var MissionPointsMarkers = []; this.missionPointsArray = []; for (var i=0; i < this.state.missionPoints.length; i++){ var lat = this.coordSys.locy2lat(this.state.missionPoints[i].mp.y); var long = this.coordSys.locx2long(this.state.missionPoints[i].mp.x); this.missionPointsArray.push([lat, long]); - this.MissionPointsMarkers.push( + MissionPointsMarkers.push( Lat: {lat.toFixed(4)}, Long: {long.toFixed(4)}
@@ -309,6 +322,9 @@ class MapComponent extends React.Component { ); } + this.setState({ + MissionPointsMarkers: MissionPointsMarkers + }); } recentreMap(e){ @@ -342,6 +358,37 @@ class MapComponent extends React.Component { } } + enableDrawGeofence(e){ + this.setState({ + drawingGeoFence: true + }) + } + + undoGeoFencePoint() { + var array = [...this.state.drawGeoFence]; + if (array.length > 0) { + array.splice(-1, 1); + this.setState({drawGeoFence: array}); + } + } + + saveNewGeoFence(e){ + // TODO: add code to save geofence on vehicle and replace current geofence. + + this.setState({ + drawingGeoFence: false, + // geoFenceCoordinates: this.state.drawGeoFence, + drawGeoFence: [] + }); + } + + cancelNewGeoFence(e){ + this.setState({ + drawingGeoFence: false, + drawGeoFence: [] + }); + } + openNewWindow(tab) { const href = window.location.href; const url = href.substring(0, href.lastIndexOf('/') + 1) + tab; @@ -349,7 +396,12 @@ class MapComponent extends React.Component { } mapOnClick(e) { - console.log("You clicked the map at " + e.latlng); + console.log(e.latlng); + if (this.state.drawingGeoFence) { + this.setState({ + drawGeoFence: [...this.state.drawGeoFence, [e.latlng.lat, e.latlng.lng]] + }); + } } render() { @@ -360,13 +412,28 @@ class MapComponent extends React.Component {
{index+1}
); - const geoFence = this.state.displayGeoFence ? : null; + const geoFence = (this.state.displayGeoFence && !this.state.drawingGeoFence) ? : null; + + const missionPts = (this.state.displayMissionPts && !this.state.drawingGeoFence) ? this.state.MissionPointsMarkers : null; + + const missionPath = (this.state.displayMissionPts && !this.state.drawingGeoFence) ? : null; - const missionPts = this.state.displayMissionPts ? this.MissionPointsMarkers : null; + const vehiclePath = (this.state.displayVehiclePath && !this.state.drawingGeoFence) ? : null; - const missionPath = this.state.displayMissionPts ? : null; + const drawGeoFenceOptions = (this.state.drawingGeoFence) ?
+ + + +
: null; - const vehiclePath = this.state.displayVehiclePath ? : null; + const vehicle = this.state.displayVehicle ? + [ + + Lat: {this.state.vehiclePosition.latitude.toFixed(4)}, Long: {this.state.vehiclePosition.longitude.toFixed(4)}
+ x: {this.state.vehiclePosition.x.toFixed(4)}, y: {this.state.vehiclePosition.y.toFixed(4)} + + , + ] : null; return (
@@ -377,22 +444,18 @@ class MapComponent extends React.Component { minZoom={1} maxZoom={17} /> - - - Lat: {this.state.vehiclePosition.latitude.toFixed(4)}, Long: {this.state.vehiclePosition.longitude.toFixed(4)}
- x: {this.state.vehiclePosition.x.toFixed(4)}, y: {this.state.vehiclePosition.y.toFixed(4)} - - - + {vehicle} {geoFence} {missionPts} {missionPath} {vehiclePath} + +
- {this.openNewWindow(clickedItem)}}/> + {this.openNewWindow(clickedItem)}}/>
@@ -403,6 +466,11 @@ class MapComponent extends React.Component { + +
+ + {drawGeoFenceOptions} +
);