Merge pull request #55 from org-arl/feature/webui-map-vehicle-display

[UI] Map: vehicle display improvements
org-arl · Aug 12, 2020 · 917505b · 917505b
2 parents 88a69c7 + a7736b4
commit 917505b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 25 deletions.
diff --git 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,
@@ -140,7 +141,7 @@ class MapComponent
 
             cursorPosition: null,
 
-            vehiclePositionLocal: null,
+            vehicleStatus: null,
             vehicleErrorRadius: 60,
             vehicleReady: false,
 
@@ -176,9 +177,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 +310,12 @@ class MapComponent
                                             ref={this.vehicleTrailRef}
                                             hidden={(!inNormalMode && !inMissionPlanner) || !this.state.displayVehiclePath}
                                             color="yellow"
-                                            maxSize={1000}/>
+                                            maxSize={1000}
+                                            minDistance={2.0}/>
 
                     {this.state.displayVehicle && (
                         <VehicleMapElement id="vehicle"
-                                           point={this.state.vehiclePositionLocal}
+                                           status={this.state.vehicleStatus}
                                            errorRadius={this.state.vehicleErrorRadius}
                                            ready={this.state.vehicleReady}/>
                     )}
@@ -380,8 +386,7 @@ class MapComponent
                                     </Button>
                                     <Button active={this.state.displayVehiclePath}
                                             onClick={this._onToggleVehiclePath}>
-                                        <img title="Toggle vehicle path" src={pathIcon} height={20} width={20}
-                                             alt="Toggle vehicle path"/>
+                                        <FontAwesomeIcon icon={faShoePrints} title="Toggle vehicle path"/>
                                     </Button>
                                 </Fragment>
                             )}
@@ -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
@@ -1,13 +1,13 @@
 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";
 
 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 (
             <LayerGroup id={this.props.id}>
                 <Marker icon={this.props.ready ? readyMarker : notReadyMarker}
@@ -32,14 +42,20 @@ class VehicleMapElement
                         Lat: {position[0].toFixed(4)},
                         Long: {position[1].toFixed(4)}
                         <br/>
-                        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)}
                     </Popup>
                 </Marker>
                 <Circle center={position} radius={this.props.errorRadius}/>
+                <Polyline positions={bearingLinePositions} color="orange"/>
             </LayerGroup>
         );
     }
+
+    _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
@@ -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,
         });
     }
 }