App 723 cameras

web/frontend/cypress/e2e/robot-components/base.cy.ts

@@ -0,0 +1,28 @@
+describe('should interact with base', () => {
+  it('passes', () => {
+    cy.visit('/');
+
+    // Open base
+    cy.contains('h2', 'test_base').should('exist').click();
+
+    // Activate and deactivate keyboard
+    cy.get('[aria-label="Keyboard Disabled"]').should('exist').click();
+    cy.get('[aria-label="Keyboard Enabled"]').should('exist').click();
+
+    // Select camera
+    cy.get('[aria-label="Select Cameras"]').find('[aria-disabled="false"]').click().type('test_camera{enter}{esc}');
+    cy.get('[data-stream-preview="test_camera"').find('video');
+
+    // Confirm that camera component can open stream that is active already
+    // Open camera
+    cy.contains('h2', 'test_camera').should('exist').click();
+
+    // View and hide camera
+    cy.get('[aria-label="View Camera"]').find('button').should('exist').click();
+    cy.get('[aria-label="test_camera camera stream"').should('exist');
+    cy.get('[aria-label="Hide Camera"]').find('button').should('exist').click();
+    cy.get('[aria-label="test_camera camera stream"').should('not.be.visible');
+  });
+});
+
+export {};

web/frontend/package.json

@@ -9,7 +9,7 @@
     "@rollup/plugin-alias": "^4.0.0",
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@viamrobotics/prime": "^0.0.69",
+    "@viamrobotics/prime": "^0.0.71",
     "@viamrobotics/rpc": "^0.1.23",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vueuse/core": "^8.9.4",

web/frontend/src/app.vue

@@ -72,14 +72,14 @@ const status = $ref<Record<string, Status>>({});
 const errors = $ref<Record<string, boolean>>({});
 
 let statusStream: ResponseStream<StreamStatusResponse>;
+let baseCameraState = new Map<string, boolean>();
 let lastStatusTS = Date.now();
 let disableAuthElements = $ref(false);
 let cameraFrameIntervalId = $ref(-1);
 let currentOps = $ref<{ op: Operation.AsObject, elapsed: number }[]>([]);
 let sensorNames = $ref<ResourceName.AsObject[]>([]);
 let resources = $ref<Resource[]>([]);
 let errorMessage = $ref('');
-let activePreviews = $ref<string[]>([]);
 let connectionManager = $ref<{
   statuses: {
     resources: boolean;
@@ -492,37 +492,24 @@ const filteredInputControllerList = () => {
 };
 
 const viewCamera = async (name: string, isOn: boolean) => {
-  const streamContainers = document.querySelectorAll(`[data-stream="${name}"]`);
-
   if (isOn) {
     try {
-      await addStream(name);
-      for (const container of streamContainers) {
-        container.querySelector('img')?.remove();
-      }
-
-      const previews = document.querySelectorAll(`[data-stream-preview="${name}"]`);
-      for (const preview of previews) {
-        preview.removeAttribute('hidden');
+      // only add stream if base camera is not active
+      if (!baseCameraState.get(name)) {
+        await addStream(name);
       }
     } catch (error) {
       displayError(error as ServiceError);
     }
-
-    return;
-  }
-
-  try {
-    const previews = document.querySelectorAll(`[data-stream-preview="${name}"]`);
-    for (const preview of previews) {
-      preview.setAttribute('hidden', 'true');
-    }
-    await removeStream(name);
-    for (const container of streamContainers) {
-      container.querySelector('img')?.remove();
+  } else {
+    try {
+      // only remove stream if base camera is not active
+      if (!baseCameraState.get(name)) {
+        await removeStream(name);
+      }
+    } catch (error) {
+      displayError(error as ServiceError);
     }
-  } catch (error) {
-    displayError(error as ServiceError);
   }
 };
 
@@ -625,16 +612,8 @@ const waitForClientAndStart = async () => {
   }
 };
 
-const handleSelectCamera = async (event: string) => {
-  if (event === '') {
-    await Promise.all(activePreviews.map((preview) => viewCamera(preview, false)));
-    activePreviews = [];
-    return;
-  }
-
-  const previews = event.split(',');
-  await Promise.all(previews.map((preview) => viewCamera(preview, !activePreviews.includes(preview))));
-  activePreviews = previews;
+const updatedBaseCameraState = (e: Map<string, boolean>) => {
+  baseCameraState = e;
 };
 
 onMounted(async () => {
@@ -706,7 +685,7 @@ onMounted(async () => {
       :key="base.name"
       :name="base.name"
       :resources="resources"
-      @showcamera="handleSelectCamera($event)"
+      @base-camera-state="updatedBaseCameraState($event)"
     />
 
     <!-- ******* GANTRY *******  -->

web/frontend/src/components/base.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { grpc } from '@improbable-eng/grpc-web';
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { computeKeyboardBaseControls, BaseControlHelper } from '../rc/control_helpers';
 import baseApi from '../gen/proto/api/component/base/v1/base_pb.esm';
 import commonApi from '../gen/proto/api/common/v1/common_pb.esm';
@@ -25,7 +25,7 @@ type SpinTypes = 'Clockwise' | 'Counterclockwise'
 type Directions = 'Forwards' | 'Backwards'
 
 interface Emits {
-  (event: 'showcamera', value: string): void
+  (event: 'base-camera-state', value: Map<string, boolean>): void
 }
 
 const emit = defineEmits<Emits>();
@@ -42,12 +42,17 @@ const speed = ref(200);
 const spinSpeed = ref(90);
 const angle = ref(0);
 
-const resetDiscreteState = () => {
-  movementMode.value = 'Straight';
-  movementType.value = 'Continuous';
-  direction.value = 'Forwards';
-  spinType.value = 'Clockwise';
-};
+let videoStreamStates = new Map<string, boolean>();
+
+const resetStreamState = () => {
+  for (var value of filterResources(props.resources, 'rdk', 'component', 'camera')) {
+    videoStreamStates.set(value.name, false);
+  }
+}
+
+onMounted(() => {
+  resetStreamState();
+})
 
 const setMovementMode = (mode: MovementModes) => {
   movementMode.value = mode;
@@ -131,36 +136,40 @@ const baseRun = () => {
   }
 };
 
-const viewPreviewCamera = async (name: string, isOn: boolean) => {
-  if (isOn) {
-    try {
-      await addStream(name);
-    } catch (error) {
-      displayError(error as ServiceError);
-    }
-    return;
-  }
+const viewPreviewCamera = async (name: string) => {
+  for (let [key, value] of videoStreamStates) {
+    const streamContainers = document.querySelector(`[data-stream="${key}"]`);
 
-  try {
-    await removeStream(name);
-  } catch (error) {
-    displayError(error as ServiceError);
+    // Only turn on if state is off
+    if (name.includes(key) && value === false) {
+      try {
+        // Only add stream if other components have not already
+        if (streamContainers?.classList.contains('hidden')) {
+          await addStream(key);
+        }
+        videoStreamStates.set(key, true);
+        emit('base-camera-state', videoStreamStates);
+      } catch (error) {
+        displayError(error as ServiceError);
+      }
+    // Only turn off if state is on
+    } else if (!name.includes(key) && value === true) {
+      try {
+        // Only remove stream if other components are not using the stream
+        if (streamContainers?.classList.contains('hidden')) {
+          await removeStream(key);
+        }
+        videoStreamStates.set(key, false);
+        emit('base-camera-state', videoStreamStates);
+      } catch (error) {
+        displayError(error as ServiceError);
+      }
+    }
   }
 };
 
 const handleTabSelect = (tab: Tabs) => {
   selectedItem.value = tab;
-
-  if (tab === 'Keyboard') {
-    viewPreviewCamera(props.name, true);
-  } else {
-    viewPreviewCamera(props.name, false);
-    resetDiscreteState();
-  }
-};
-
-const handleSelectCamera = (event: string) => {
-  emit('showcamera', event);
 };
 
 </script>
@@ -196,7 +205,7 @@ const handleSelectCamera = (event: string) => {
         class="h-auto p-4"
       >
         <div class="grid grid-cols-2">
-          <div class="mt-2">
+          <div>
             <KeyboardInput
               :name="name"
               @keyboard-ctl="baseKeyboardCtl(name, $event)"
@@ -207,12 +216,13 @@ const handleSelectCamera = (event: string) => {
               class="mb-4"
               variant="multiple"
               placeholder="Select Cameras"
+              aria-label="Select Cameras"
               :options="
                 filterResources(resources, 'rdk', 'component', 'camera')
                   .map(({ name }) => name)
                   .join(',')
               "
-              @input="handleSelectCamera($event.detail.value)"
+              @input="viewPreviewCamera($event.detail.value)"
             />
             <template
               v-for="basecamera in filterResources(
@@ -226,7 +236,7 @@ const handleSelectCamera = (event: string) => {
               <div
                 v-if="basecamera"
                 :data-stream-preview="basecamera.name"
-                class="mb-4 border border-white"
+                :class="{ 'hidden': !videoStreamStates.get(basecamera.name) }"
               />
             </template>
           </div>

web/frontend/src/components/camera.vue

@@ -95,11 +95,12 @@ const exportScreenshot = (cameraName: string) => {
         <div class="pt-4">
           <div class="flex items-center gap-2">
             <v-switch
+              :label="camera ? 'Hide Camera' : 'View Camera'"
+              :aria-label="camera ? 'Hide Camera' : 'View Camera'"
               id="camera"
               :value="camera ? 'on' : 'off'"
               @input="toggleExpand"
             />
-            <span class="pr-2 text-xs">View Camera</span>
           </div>
 
           <div class="float-right pb-4">
@@ -172,18 +173,19 @@ const exportScreenshot = (cameraName: string) => {
             </div>
           </div>
           <div
-            v-if="camera"
+            :aria-label="`${props.cameraName} camera stream`"
             :data-stream="props.cameraName"
+            :class="{ 'hidden': !camera }"
             class="clear-both h-fit transition-all duration-300 ease-in-out"
           />
         </div>
         <div class="pt-4">
-          <div class="flex items-center gap-2">
+          <div class="flex align-top items-center gap-2">
             <v-switch
+              :label="pcdExpanded ? 'Hide Point Cloud Data' : 'View Point Cloud Data'"
               :value="pcdExpanded ? 'on' : 'off'"
               @input="togglePCDExpand"
             />
-            <span class="pr-0.5 text-xs">Point Cloud Data</span>
             <InfoButton :info-rows="['When turned on, point cloud will be recalculated']" />
           </div>
 

web/frontend/src/components/keyboard-input.vue

@@ -109,16 +109,14 @@ onClickOutside(root, () => {
     class="h-23 flex w-full flex-col items-center"
   >
     <div
-      class="flex gap-2 pb-4"
+      class="flex gap-2 pb-4 w-48"
       @click="toggleKeyboard"
     >
       <v-switch
+        :label="isActive ? 'Keyboard Enabled' : 'Keyboard Disabled'"
         class="pr-4"
         :value="isActive ? 'on' : 'off'"
       />
-      <h3>
-        Keyboard {{ isActive ? 'active' : 'disabled' }}
-      </h3>
     </div>
     <div
       v-for="(lineKeys, index) in keysLayout"