From c45c3941f14bb187d57e02a535c652bf3b8d7973 Mon Sep 17 00:00:00 2001 From: Nick Ng Date: Wed, 12 Aug 2020 18:33:46 +0800 Subject: [PATCH 1/2] vehicle bearing indicator, improved vehicle trail --- .../WebUI/src/components/map/MapComponent.js | 31 +++++++++++-------- .../src/components/map/VehicleMapElement.js | 28 +++++++++++++---- .../components/map/VehicleTrailMapElement.js | 18 ++++++++--- 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/experiments/WebUI/src/components/map/MapComponent.js b/experiments/WebUI/src/components/map/MapComponent.js index e8d0949..db41ff9 100644 --- a/experiments/WebUI/src/components/map/MapComponent.js +++ b/experiments/WebUI/src/components/map/MapComponent.js @@ -140,7 +140,7 @@ class MapComponent cursorPosition: null, - vehiclePositionLocal: null, + vehicleStatus: null, vehicleErrorRadius: 60, vehicleReady: false, @@ -176,9 +176,13 @@ class MapComponent this.gateway.subscribe(this.gateway.topic('org.arl.jc2.enums.C2Topics.MISSIONSTATUS')); this.gateway.addMessageListener((msg) => { if (msg.__clazz__ === 'org.arl.jc2.messages.VehicleStatus') { - this._updateVehiclePosition({ - x: msg.pos.x, - y: msg.pos.y, + this._updateVehicleStatus({ + point: { + x: msg.pos.x, + y: msg.pos.y, + }, + bearing: msg.bearing, + speed: msg.speed, }); } else if (msg.__clazz__ === 'org.arl.jc2.messages.MissionStatusNtf') { console.log(msg); @@ -305,11 +309,12 @@ class MapComponent ref={this.vehicleTrailRef} hidden={(!inNormalMode && !inMissionPlanner) || !this.state.displayVehiclePath} color="yellow" - maxSize={1000}/> + maxSize={1000} + minDistance={2.0}/> {this.state.displayVehicle && ( )} @@ -525,12 +530,12 @@ class MapComponent }); } - _updateVehiclePosition(point) { + _updateVehicleStatus(status) { this.setState({ - vehiclePositionLocal: point, + vehicleStatus: status, }); if (this.vehicleTrailRef.current) { - this.vehicleTrailRef.current.addPoint(point); + this.vehicleTrailRef.current.addPoint(status.point); } this._checkVehicleReadiness(); } @@ -547,8 +552,8 @@ class MapComponent points.push(...localBounds); } } - if (this.state.vehiclePositionLocal) { - points.push([this.state.vehiclePositionLocal.x, this.state.vehiclePositionLocal.y]); + if (this.state.vehicleStatus && this.state.vehicleStatus.point) { + points.push([this.state.vehicleStatus.point.x, this.state.vehicleStatus.point.y]); } if (points.length > 1) { const localBounds = this._getBounds(points); @@ -993,11 +998,11 @@ class MapComponent // TODO Not the actual vehicle readiness check _checkVehicleReadiness() { if (this.state.vehicleReady) { - if (!this.state.coordSys || !this.state.vehiclePositionLocal) { + if (!this.state.coordSys || !this.state.vehicleStatus) { this._setVehicleNotReady(); } } else { - if (this.state.coordSys && this.state.vehiclePositionLocal) { + if (this.state.coordSys && this.state.vehicleStatus) { this._setVehicleReady(); } } diff --git a/experiments/WebUI/src/components/map/VehicleMapElement.js b/experiments/WebUI/src/components/map/VehicleMapElement.js index 902066e..b17dac3 100644 --- a/experiments/WebUI/src/components/map/VehicleMapElement.js +++ b/experiments/WebUI/src/components/map/VehicleMapElement.js @@ -1,5 +1,5 @@ import React, {PureComponent} from "react"; -import {Circle, LayerGroup, Marker, Popup} from "react-leaflet"; +import {Circle, LayerGroup, Marker, Polyline, Popup} from "react-leaflet"; import {notReadyMarker, readyMarker} from "../../lib/MapIcons"; import CoordSysContext from "./CoordSysContext"; import {checkComponentDidUpdate} from "../../lib/react-debug-utils"; @@ -7,7 +7,7 @@ import {checkComponentDidUpdate} from "../../lib/react-debug-utils"; const DEBUG = false; /** - * Props: id, point, errorRadius, ready + * Props: id, status, errorRadius, ready */ class VehicleMapElement extends PureComponent { @@ -20,10 +20,20 @@ class VehicleMapElement render() { const coordSys = this.context; - if (!coordSys || !this.props.point) { + if (!coordSys || !this.props.status || !this.props.status.point) { return null; } - const position = [coordSys.locy2lat(this.props.point.y), coordSys.locx2long(this.props.point.x)]; + const status = this.props.status; + const position = this._toPosition(status.point); + + const bearingInRadians = status.bearing * Math.PI / 180.0; + const bearingMultiplier = (status.speed * 10.0) + 1.0; + const bearingPoint = { + x: status.point.x + (Math.sin(bearingInRadians) * bearingMultiplier), + y: status.point.y + (Math.cos(bearingInRadians) * bearingMultiplier), + }; + const bearingLinePositions = [position, this._toPosition(bearingPoint)]; + return ( - x: {this.props.point.x.toFixed(2)}, - y: {this.props.point.y.toFixed(2)} + x: {status.point.x.toFixed(2)}, + y: {status.point.y.toFixed(2)} + ); } + + _toPosition(point) { + const coordSys = this.context; + return [coordSys.locy2lat(point.y), coordSys.locx2long(point.x)]; + } } export default VehicleMapElement; diff --git a/experiments/WebUI/src/components/map/VehicleTrailMapElement.js b/experiments/WebUI/src/components/map/VehicleTrailMapElement.js index 75399a4..5d28e7d 100644 --- a/experiments/WebUI/src/components/map/VehicleTrailMapElement.js +++ b/experiments/WebUI/src/components/map/VehicleTrailMapElement.js @@ -6,7 +6,7 @@ import {checkComponentDidUpdate} from "../../lib/react-debug-utils"; const DEBUG = false; /** - * Props: id, color, maxSize, hidden + * Props: id, color, maxSize, minDistance, hidden */ class VehicleTrailMapElement extends PureComponent { @@ -18,6 +18,7 @@ class VehicleTrailMapElement this.state = { positions: [], + lastPoint: null, }; } @@ -44,13 +45,22 @@ class VehicleTrailMapElement return; } const positions = this.state.positions; + if (this.state.lastPoint && this.props.minDistance) { + const dx = this.state.lastPoint.x - point.x; + const dy = this.state.lastPoint.y - point.y; + const distance = Math.sqrt((dx * dx) + (dy * dy)); + if (distance < this.props.minDistance) { + return; + } + } positions.push([coordSys.locy2lat(point.y), coordSys.locx2long(point.x)]); - // TODO Improve point culling - if (positions.length > this.props.maxSize) { - positions.splice(0, positions.length - this.props.maxSize); + const size = positions.length; + if (size > this.props.maxSize) { + positions.splice(0, size - this.props.maxSize); } this.setState({ positions: [...positions], + lastPoint: point, }); } } From a7736b4a8f302d384345d670fe9af9276c3799cd Mon Sep 17 00:00:00 2001 From: Nick Ng Date: Wed, 12 Aug 2020 18:38:26 +0800 Subject: [PATCH 2/2] updated toggle vehicle path icon --- experiments/WebUI/src/components/map/MapComponent.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/experiments/WebUI/src/components/map/MapComponent.js b/experiments/WebUI/src/components/map/MapComponent.js index db41ff9..73c16e6 100644 --- a/experiments/WebUI/src/components/map/MapComponent.js +++ b/experiments/WebUI/src/components/map/MapComponent.js @@ -13,6 +13,7 @@ import { faRoute, faSatellite, faSave, + faShoePrints, faTimes, faTrashAlt, faUndo, @@ -385,8 +386,7 @@ class MapComponent )}