Merge pull request #166 from mcgill-robotics/angular-ui-gps-enhancements

Added Debris and fixed the refresh problem, also added offline leaflet.
mcgill-robotics · Aug 9, 2024 · 1fb4eaf · 1fb4eaf
2 parents 6f7ca50 + f8cfa1f
commit 1fb4eaf
Show file tree

Hide file tree

Showing 10 changed files with 389 additions and 90 deletions.
diff --git a/angular_ui_app/package-lock.json b/angular_ui_app/package-lock.json
diff --git a/angular_ui_app/package.json b/angular_ui_app/package.json
@@ -22,6 +22,7 @@
     "bootstrap": "^5.3.1",
     "leaflet": "^1.9.4",
     "leaflet-rotatedmarker": "^0.2.0",
+    "leaflet.offline": "^3.1.0",
     "roslib": "^1.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

diff --git a/angular_ui_app/src/app/components/drive/drive.component.html b/angular_ui_app/src/app/components/drive/drive.component.html
@@ -1,8 +1,17 @@
 <app-generic height="235px" width="640px">
     Controller <button (click)="enableGamepad()">On</button> <button (click)="disableGamepad()">Off</button>
-    <div class="drive">
-        <div id="driveInfo">
-            <hr/>
+    <hr/>
+    <div style="display: flex; justify-content: space-around;">
+        <div>
+            cmd_vel
+            <div>
+                Linear X: {{cmd_vel_lin_x.toFixed(3)}}
+            </div>
+            <div>
+                Angular Z: {{cmd_vel_ang_z.toFixed(3)}}
+            </div>
+        </div>
+        <div>
             Wheel Feedback
             <div style="display: flex; justify-content: space-evenly;">
                 <div>

diff --git a/angular_ui_app/src/app/components/drive/drive.component.ts b/angular_ui_app/src/app/components/drive/drive.component.ts
@@ -12,6 +12,7 @@ export class DriveComponent {
   ros: ROSLIB.Ros;
   gamepad_drive_pub: ROSLIB.Topic;
   pan_tilt_pub: ROSLIB.Topic;
+  drive_control_sub: ROSLIB.Topic;
 
   gagamepadService: GamepadService;
 
@@ -20,6 +21,9 @@ export class DriveComponent {
 
   angle_delta: number = 0.5;
 
+  cmd_vel_lin_x: number = 0;
+  cmd_vel_ang_z: number = 0;
+
   constructor(private gamepadService: GamepadService, private rosService: RosService) {
     this.ros = this.rosService.getRos();
   }
@@ -31,6 +35,17 @@ export class DriveComponent {
       messageType : 'std_msgs/Float32MultiArray'
     });
 
+    this.drive_control_sub = new ROSLIB.Topic({
+      ros: this.ros,
+      name: '/rover_velocity_controller/cmd_vel',
+      messageType: 'geometry_msgs/Twist'
+    });
+
+    this.drive_control_sub.subscribe((message: any) => {
+      this.cmd_vel_lin_x = message.linear.x;
+      this.cmd_vel_ang_z = message.angular.z;
+    });
+
     this.pan_tilt_pub = new ROSLIB.Topic({
       ros: this.ros,
       name: '/pantiltCmd',

diff --git a/angular_ui_app/src/app/components/gps/gps.component.html b/angular_ui_app/src/app/components/gps/gps.component.html
@@ -1,11 +1,87 @@
 <link rel="stylesheet" href="/assets/leaflet.css" />
 
 <app-generic height="375px" width="375px">
-  <div class="gps">
-    <div class="map-container">
-      <div class="map-frame">
-        <div id="map"></div>
-      </div>
+  <div id="map">
+    <div>
+      <a id="updateMarkersBtn" (click)="showModal = true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
+      </svg></a>
     </div>
   </div>
-</app-generic>
+</app-generic>
+
+<div class='modal' *ngIf="showModal === true">
+  <div class="inner-modal">
+    <button style="position: absolute; top: 10px; right: 10px;" (click)="showModal = false">Close</button>
+    Add Landmark
+    <div>
+      <input type="text" #landmarkNameInput placeholder="Landmark Name">
+      <input type="number" #landmarkLatInput placeholder="Latitude">
+      <input type="number" #landmarkLngInput placeholder="Longitude">
+    </div>
+    <button (click)="addLandmark(landmarkNameInput.value, landmarkLatInput.value, landmarkLngInput.value)">Add</button>
+
+    <hr/>
+
+    Add Debris
+    <div>
+      <input type="text" #debrisNameInput placeholder="Debris Name">
+      <input type="number" #debrisLatInput placeholder="Latitude">
+      <input type="number" #debrisLngInput placeholder="Longitude">
+      <input type="number" #debrisRadius placeholder="Radius (m)">
+  </div>
+  <button (click)="addDebrisArea(debrisNameInput.value, debrisLatInput.value, debrisLngInput.value, debrisRadius.value)">Add</button>
+
+  <hr/>
+  <div class="list-section">
+    <h3>Landmarks</h3>
+    <div class="scrollable-list">
+      <table class="table" data-bs-theme="dark">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Lat</th>
+            <th scope="col">Long</th>
+            <th scope="col">Remove</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let marker of markerDict | keyvalue">
+            <td>{{marker.key}}</td>
+            <td>{{marker.value.getLatLng().lat}}</td>
+            <td>{{marker.value.getLatLng().lng}}</td>
+            <td><button class="btn btn-danger p-1 m-0" (click)="removeMarker(marker.key)">x</button></td>  
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <hr/>
+
+  <div class="list-section">
+    <h3>Debris</h3>
+    <div class="scrollable-list">
+      <table class="table" data-bs-theme="dark">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Lat</th>
+            <th scope="col">Long</th>
+            <th scope="col">Radius</th>
+            <th scope="col">Remove</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let debris of debrisDict | keyvalue">
+            <td>{{debris.key}}</td>
+            <td>{{debris.value.getLatLng().lat}}</td>
+            <td>{{debris.value.getLatLng().lng}}</td>
+            <td>{{debris.value.getRadius()}}</td>
+            <td><button class="btn btn-danger p-1 m-0" (click)="removeMarker(debris.key)">x</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
diff --git a/angular_ui_app/src/app/components/gps/gps.component.scss b/angular_ui_app/src/app/components/gps/gps.component.scss
@@ -1,13 +1,77 @@
-.map-container {
-  height: 372px;
-  width: 372px;
-  // border: 1px solid black;
+#map {
+  height: 100%;
 }
 
-.map-frame {
-  height: 100%;
+#updateMarkersBtn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px;
+  z-index: 4000;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: black;
+  background-color: #fff;
+  // box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+  border: 2px solid rgba(0,0,0,0.2)
 }
 
-#map {
+#updateMarkersBtn:active {
+  background-color: #c7c7c7;
+}
+
+#updateMarkersBtn:hover {
+  background-color: #f4f4f4;
+}
+
+.modal {
+  position: fixed;
+  width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.39);
+  z-index: 5000;
+  border-radius: 5px;
+
+}
+
+.inner-modal {
+  position: relative;
+  width: 900px;
+  height: 870px;
+  background-color: rgb(42, 63, 71);
+  padding: 20px;
+  border-radius: 5px;
+  border: #B6CA7B 2px solid;
+  position: absolute;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 }
+
+.scrollable-list {
+  height: 200px;
+  width: 95%;
+  margin: auto;
+  border: 1px solid black;
+  overflow-y: scroll;
+}
+
+.form-section {
+  margin-bottom: 20px;
+}
+
+
+.list-section {
+  margin-bottom: 20px;
+}
+
+button {
+  margin-top: 10px;
+}
+
+span {
+  align-content: center;
+}