From 51c2504f68c2ec88a47d1a89524e54cc4f02d0b9 Mon Sep 17 00:00:00 2001
From: neuenfeldttj <tjneuenfeldt@gmail.com>
Date: Mon, 22 Apr 2024 12:06:07 -0400
Subject: [PATCH 1/2] added cameras tab, cleaned up code

---
 .../frontend/src/components/AutonTask.vue     |  2 +-
 .../frontend/src/components/CameraFeed.vue    | 23 ------------------
 .../frontend/src/components/Cameras.vue       | 24 ++-----------------
 .../frontend/src/components/DMESTask.vue      |  2 +-
 .../frontend/src/components/ISHTask.vue       |  2 +-
 .../frontend/src/components/Menu.vue          |  3 +--
 .../frontend/src/components/MenuButton.vue    |  9 ++++++-
 .../frontend/src/components/SATask.vue        |  2 +-
 .../frontend/src/router/index.ts              | 11 +++++++++
 9 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/src/teleoperation/frontend/src/components/AutonTask.vue b/src/teleoperation/frontend/src/components/AutonTask.vue
index 1cd400907..c56858767 100644
--- a/src/teleoperation/frontend/src/components/AutonTask.vue
+++ b/src/teleoperation/frontend/src/components/AutonTask.vue
@@ -47,7 +47,7 @@
       </div>
     </div>
     <div class="shadow p-3 rounded cameras">
-      <Cameras :primary="true" :isSA="false" :mission="'auton'"/>
+      <Cameras :isSA="false" :mission="'auton'"/>
     </div>
     <div class="shadow p-3 rounded moteus">
       <DriveMoteusStateTable :moteus-state-data="moteusState" />
diff --git a/src/teleoperation/frontend/src/components/CameraFeed.vue b/src/teleoperation/frontend/src/components/CameraFeed.vue
index efbce30af..2620bd880 100644
--- a/src/teleoperation/frontend/src/components/CameraFeed.vue
+++ b/src/teleoperation/frontend/src/components/CameraFeed.vue
@@ -3,19 +3,6 @@
     <canvas :id="'stream-' + id" v-on:click="handleClick"></canvas>
     <div v-if="mission != 'ZED'">
       <p>{{ name }} • ID: {{ id }}</p>
-      <div class="form-group col-md-4">
-          <label for="quality">Quality:</label>
-          <select
-            v-model="quality"
-            min="0"
-            max="4"
-            class="form-control"
-            id="quality"
-            @change="changeQuality()"
-          >
-            <option v-for="i in 5" :key="i">{{ i - 1 }}</option>
-          </select>
-        </div>
       <Checkbox v-if="mission === 'ik'" :name="'IK Camera'" v-on:toggle="toggleIKMode" />
     </div>
   </div>
@@ -52,8 +39,6 @@ export default defineComponent({
 
       // IK Mode
       IKCam: false,
-
-      quality: 2
     }
   },
 
@@ -82,14 +67,6 @@ export default defineComponent({
         this.sendMessage({ type: 'start_click_ik', data: { x: event.offsetX, y: event.offsetY } })
       }
     },
-    changeQuality: function () {
-      this.sendMessage({
-        type: 'sendCameras',
-        primary: this.mission === 'sa',
-        device: this.id,
-        resolution: parseInt(this.quality)
-      })
-    },
     
     toggleIKMode: function () {
       this.IKCam = !this.IKCam
diff --git a/src/teleoperation/frontend/src/components/Cameras.vue b/src/teleoperation/frontend/src/components/Cameras.vue
index 786f7b60b..55f8be2cd 100644
--- a/src/teleoperation/frontend/src/components/Cameras.vue
+++ b/src/teleoperation/frontend/src/components/Cameras.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="wrap row">
     <div class="col">
-      <h3>Cameras ({{ num_available }} available)</h3>
       <div class="row justify-content-md-left">
         <div class="form-group col-md-4">
           <label for="Camera Name">Camera name</label>
@@ -40,12 +39,12 @@
     <div class="col">
       <h3>All Cameras</h3>
       <div class="d-flex justify-content-end" v-if="isSA">
-        <button class="btn btn-primary btn-lg custom-btn" @click="takePanorama()">
+        <button class="btn btn-primary btn-lg" @click="takePanorama()">
           Take Panorama
         </button>
       </div>
     </div>
-    <CameraDisplay :streamOrder="streamOrder" :mission="mission" :names="names" :qualities="qualities"></CameraDisplay>
+    <CameraDisplay :streamOrder="streamOrder" :mission="mission" :names="names"></CameraDisplay>
   </div>
 </template>
 
@@ -62,10 +61,6 @@ export default {
   },
 
   props: {
-    primary: {
-      type: Boolean,
-      required: true
-    },
     isSA: {
       type: Boolean,
       required: true
@@ -82,10 +77,7 @@ export default {
       cameraIdx: 0,
       cameraName: '',
       capacity: 4,
-      qualities: reactive(new Array(9).fill(-1)),
       streamOrder: reactive([]),
-
-      num_available: -1
     }
   },
 
@@ -123,19 +115,9 @@ export default {
     setCamIndex: function (index: number) {
       // every time a button is pressed, it changes cam status and adds/removes from stream
       this.camsEnabled[index] = !this.camsEnabled[index]
-      if (this.camsEnabled[index]) this.qualities[index] = 2 //if enabling camera, turn on medium quality
       this.changeStream(index)
     },
 
-    sendCameras: function (index: number) {
-      this.sendMessage({
-        type: 'sendCameras',
-        primary: this.primary,
-        device: index,
-        resolution: this.qualities[index]
-      })
-    },
-
     addCameraName: function () {
       this.names[this.cameraIdx] = this.cameraName
     },
@@ -145,9 +127,7 @@ export default {
       if (found) {
         this.streamOrder.splice(this.streamOrder.indexOf(index), 1)
         this.streamOrder.push(-1)
-        this.qualities[index] = -1 //close the stream when sending it to comms
       } else this.streamOrder[this.streamOrder.indexOf(-1)] = index
-      this.sendCameras(index)
     },
 
     takePanorama() {
diff --git a/src/teleoperation/frontend/src/components/DMESTask.vue b/src/teleoperation/frontend/src/components/DMESTask.vue
index b83e5ff9b..668223102 100644
--- a/src/teleoperation/frontend/src/components/DMESTask.vue
+++ b/src/teleoperation/frontend/src/components/DMESTask.vue
@@ -22,7 +22,7 @@
     </div>
 
     <div class="shadow p-3 rounded cameras">
-      <Cameras :primary="true" :isSA="false" :mission="'ik'" />
+      <Cameras :isSA="false" :mission="'ik'" />
     </div>
     <div v-if="type === 'DM'" class="shadow p-3 rounded odom">
       <OdometryReading :odom="odom" />
diff --git a/src/teleoperation/frontend/src/components/ISHTask.vue b/src/teleoperation/frontend/src/components/ISHTask.vue
index 8be0a6a1c..08e46c76a 100644
--- a/src/teleoperation/frontend/src/components/ISHTask.vue
+++ b/src/teleoperation/frontend/src/components/ISHTask.vue
@@ -25,7 +25,7 @@
       <SelectSite @site="onSiteChange" />
     </div>
     <div class="shadow p-3 rounded cameras">
-      <Cameras :primary="primary" :isSA="false" :mission="'sa'" />
+      <Cameras :isSA="false" :mission="'sa'" />
     </div>
     <div class="shadow p-3 rounded benedicts">
       <AminoBenedict :site="site" :isAmino="false" />
diff --git a/src/teleoperation/frontend/src/components/Menu.vue b/src/teleoperation/frontend/src/components/Menu.vue
index cfea3f72e..cea3a9804 100644
--- a/src/teleoperation/frontend/src/components/Menu.vue
+++ b/src/teleoperation/frontend/src/components/Menu.vue
@@ -13,8 +13,7 @@
         <MenuButton link="/ISHTask" name="ISH GUI" />
         <MenuButton link="/SATask" name="Sample Acquisition GUI" />
         <MenuButton link="/AutonTask" name="Autonomy Mission" />
-        <MenuButton link="/Control" name="Temp Controls GUI" />
-        <MenuButton link="/ROSDebug" name="ROS Debug Tools" />
+        <MenuButton link="/Cameras" name="Cameras" />
       </fieldset>
     </div>
   </div>
diff --git a/src/teleoperation/frontend/src/components/MenuButton.vue b/src/teleoperation/frontend/src/components/MenuButton.vue
index 6218a81f8..88998202e 100644
--- a/src/teleoperation/frontend/src/components/MenuButton.vue
+++ b/src/teleoperation/frontend/src/components/MenuButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <a class="btn btn-primary" :href="link">{{ name }}</a>
+  <a class="btn btn-primary" :href="link" :target="calcTarget">{{ name }}</a>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
@@ -16,6 +16,13 @@ export default defineComponent({
       type: String,
       required: true
     }
+  },
+
+  computed: {
+    calcTarget() {
+      if (this.name == "Cameras") return ")blank";
+      else return "_self"
+    }
   }
 })
 </script>
diff --git a/src/teleoperation/frontend/src/components/SATask.vue b/src/teleoperation/frontend/src/components/SATask.vue
index 7b0bc13d0..e9776bdba 100644
--- a/src/teleoperation/frontend/src/components/SATask.vue
+++ b/src/teleoperation/frontend/src/components/SATask.vue
@@ -28,7 +28,7 @@
       <BasicWaypointEditor :odom="odom" />
     </div>
     <div class="shadow p-3 rounded cameras">
-      <Cameras :primary="true" :isSA="true" :mission="'sa'" />
+      <Cameras :isSA="true" :mission="'sa'" />
     </div>
     <div class="shadow p-3 rounded soildata">
       <SoilData />
diff --git a/src/teleoperation/frontend/src/router/index.ts b/src/teleoperation/frontend/src/router/index.ts
index f34e022f1..495e00bf9 100644
--- a/src/teleoperation/frontend/src/router/index.ts
+++ b/src/teleoperation/frontend/src/router/index.ts
@@ -4,6 +4,7 @@ import DMESTask from '../components/DMESTask.vue'
 import AutonTask from '../components/AutonTask.vue'
 import ISHTask from '../components/ISHTask.vue'
 import SATask from '../components/SATask.vue'
+import Cameras from '../components/Cameras.vue'
 
 const routes = [
   {
@@ -41,7 +42,17 @@ const routes = [
     path: '/ISHTask',
     name: 'ISHTask',
     component: ISHTask
+  },
+  {
+    path: '/Cameras',
+    name: 'Cameras',
+    component: Cameras,
+    props: {
+      isSA: false,
+      mission: 'other'
+    }
   }
+  
 ]
 const router = createRouter({
   history: createWebHistory(),

From cac3618f0af388ad04f7b6e16ae85a3af39565aa Mon Sep 17 00:00:00 2001
From: qhdwight <qhdwight@gmail.com>
Date: Sat, 27 Apr 2024 17:22:01 -0400
Subject: [PATCH 2/2] Launch both cameras and main

---
 launch/basestation.launch                                | 3 ++-
 src/teleoperation/frontend/src/components/MenuButton.vue | 9 +--------
 src/teleoperation/gui_chromium.sh                        | 4 +++-
 src/teleoperation/gui_chromium_cameras.sh                | 3 +++
 src/teleoperation/gui_chromium_menu.sh                   | 3 +++
 5 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100755 src/teleoperation/gui_chromium_cameras.sh
 create mode 100755 src/teleoperation/gui_chromium_menu.sh

diff --git a/launch/basestation.launch b/launch/basestation.launch
index 47f7dd691..10679cc71 100644
--- a/launch/basestation.launch
+++ b/launch/basestation.launch
@@ -14,7 +14,8 @@
 
   <node if="$(arg run_frontend)" name="gui_frontend" pkg="mrover" type="gui_frontend.sh" cwd="node" required="true" />
   <node if="$(arg run_backend)" name="gui_backend" pkg="mrover" type="gui_backend.sh" cwd="node" required="true" />
-  <node if="$(arg run_browser)" name="gui_chromium" pkg="mrover" type="gui_chromium.sh" />
+  <node if="$(arg run_browser)" name="gui_chromium_menu" pkg="mrover" type="gui_chromium_menu.sh" />
+  <node if="$(arg run_browser)" name="gui_chromium_cameras" pkg="mrover" type="gui_chromium_cameras.sh" />
 
   <group if="$(arg run_rviz)">
     <arg name="rvizconfig" default="$(find mrover)/config/rviz/basestation.rviz" />
diff --git a/src/teleoperation/frontend/src/components/MenuButton.vue b/src/teleoperation/frontend/src/components/MenuButton.vue
index 88998202e..5b0c47f68 100644
--- a/src/teleoperation/frontend/src/components/MenuButton.vue
+++ b/src/teleoperation/frontend/src/components/MenuButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <a class="btn btn-primary" :href="link" :target="calcTarget">{{ name }}</a>
+  <a class="btn btn-primary" :href="link">{{ name }}</a>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
@@ -17,13 +17,6 @@ export default defineComponent({
       required: true
     }
   },
-
-  computed: {
-    calcTarget() {
-      if (this.name == "Cameras") return ")blank";
-      else return "_self"
-    }
-  }
 })
 </script>
 
diff --git a/src/teleoperation/gui_chromium.sh b/src/teleoperation/gui_chromium.sh
index 3f5e50061..e83d1c054 100755
--- a/src/teleoperation/gui_chromium.sh
+++ b/src/teleoperation/gui_chromium.sh
@@ -4,4 +4,6 @@
 # Chromium currently only supports this when using VA-API hardware acceleration
 # It uses the WebCodecs API to decode
 # You can easily test if your setup works with this URL: https://w3c.github.io/webcodecs/samples/video-decode-display/
-chromium --enable-features=VaapiVideoDecodeLinuxGL --app=http://localhost:8080
+readonly FLAGS="--enable-features=VaapiVideoDecodeLinuxGL"
+readonly ADDRESS="http://localhost:8080"
+chromium ${FLAGS} --app=${ADDRESS}/$1
diff --git a/src/teleoperation/gui_chromium_cameras.sh b/src/teleoperation/gui_chromium_cameras.sh
new file mode 100755
index 000000000..ef6bade5b
--- /dev/null
+++ b/src/teleoperation/gui_chromium_cameras.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+$(dirname $0)/gui_chromium.sh Cameras
diff --git a/src/teleoperation/gui_chromium_menu.sh b/src/teleoperation/gui_chromium_menu.sh
new file mode 100755
index 000000000..a259fcd1c
--- /dev/null
+++ b/src/teleoperation/gui_chromium_menu.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+$(dirname $0)/gui_chromium.sh