[PhotonClient] Vite and Typescript complete refactor (#884)

photon-client/src/components/dashboard/CamerasCard.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
+import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { PipelineType } from "@/types/PipelineTypes";
+import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
+
+defineProps<{
+  // TODO fully update v-model usage in custom components on Vue3 update
+  value: number[]
+}>();
+
+const driverMode = computed<boolean>({
+  get: () => useCameraSettingsStore().isDriverMode,
+  set: v => useCameraSettingsStore().changeCurrentPipelineIndex(v ? -1 : useCameraSettingsStore().currentCameraSettings.lastPipelineIndex || 0, true)
+});
+
+const fpsTooLow = computed<boolean>(() => {
+  const currFPS = useStateStore().pipelineResults?.fps || 0;
+  const targetFPS = useCameraSettingsStore().currentVideoFormat.fps;
+  const driverMode = useCameraSettingsStore().isDriverMode;
+  const gpuAccel = useSettingsStore().general.gpuAcceleration !== undefined;
+  const isReflective = useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective;
+
+  return (currFPS - targetFPS) < -5 && currFPS !== 0 && !driverMode && gpuAccel && isReflective;
+});
+</script>
+
+<template>
+  <v-card
+    color="primary"
+    height="100%"
+    style="display: flex; flex-direction: column"
+    dark
+  >
+    <v-card-title
+      class="pb-0 mb-0 pl-4 pt-1"
+      style="min-height: 50px; justify-content: space-between; align-content: center"
+    >
+      <div class="pt-2">
+        <span class="mr-4">Cameras</span>
+        <v-chip
+          label
+          :color="fpsTooLow ? 'error' : 'transparent'"
+          :text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
+          style="font-size: 1rem; padding: 0; margin: 0"
+        >
+          <span class="pr-1">
+            Processing @ {{ Math.round(useStateStore().pipelineResults?.fps || 0) }}&nbsp;FPS &ndash;
+          </span>
+          <span v-if="fpsTooLow && !useCameraSettingsStore().currentPipelineSettings.inputShouldShow && useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.Reflective">
+            HSV thresholds are too broad; narrow them for better performance
+          </span>
+          <span v-else-if="fpsTooLow && useCameraSettingsStore().currentPipelineSettings.inputShouldShow">
+            stop viewing the raw stream for better performance
+          </span>
+          <span v-else>
+            {{ Math.min(Math.round(useStateStore().pipelineResults?.latency || 0), 9999) }} ms latency
+          </span>
+        </v-chip>
+      </div>
+      <div>
+        <v-switch
+          v-model="driverMode"
+          label="Driver Mode"
+          style="margin-left: auto;"
+          color="accent"
+          class="pt-2"
+        />
+      </div>
+    </v-card-title>
+    <v-divider style="border-color: white" />
+    <v-row
+      class="pl-3 pr-3 pt-3 pb-3"
+      style="flex-wrap: nowrap; justify-content: center"
+    >
+      <v-col
+        v-show="value.includes(0)"
+        style="max-width: 500px; display: flex; align-items: center"
+      >
+        <photon-camera-stream
+          id="input-camera-stream"
+          stream-type="Raw"
+          style="width: 100%; height: auto"
+        />
+      </v-col>
+      <v-col
+        v-show="value.includes(1)"
+        style="max-width: 500px; display: flex; align-items: center"
+      >
+        <photon-camera-stream
+          id="output-camera-stream"
+          stream-type="Processed"
+          style="width: 100%; height: auto"
+        />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>