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

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

@@ -0,0 +1,481 @@
+<script setup lang="ts">
+import CvSelect from "@/components/common/cv-select.vue";
+import { useStateStore } from "@/stores/StateStore";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
+import { computed, ref } from "vue";
+import CvIcon from "@/components/common/cv-icon.vue";
+import CvInput from "@/components/common/cv-input.vue";
+import { PipelineType } from "@/types/PipelineTypes";
+
+const changeCurrentCameraIndex = (index: number) => {
+  useCameraSettingsStore().setCurrentCameraIndex(index, true);
+
+  switch (useCameraSettingsStore().cameras[index].pipelineSettings.pipelineType) {
+    case PipelineType.Reflective:
+      pipelineType.value = WebsocketPipelineType.Reflective;
+      break;
+    case PipelineType.ColoredShape:
+      pipelineType.value = WebsocketPipelineType.ColoredShape;
+      break;
+    case PipelineType.AprilTag:
+      pipelineType.value = WebsocketPipelineType.AprilTag;
+      break;
+    case PipelineType.Aruco:
+      pipelineType.value = WebsocketPipelineType.Aruco;
+      break;
+  }
+};
+
+// Common RegEx used for naming both pipelines and cameras
+const nameChangeRegex = /^[A-Za-z0-9_ \-)(]*[A-Za-z0-9][A-Za-z0-9_ \-)(.]*$/;
+
+// Camera Name Edit
+const isCameraNameEdit = ref(false);
+const currentCameraName = ref(useCameraSettingsStore().currentCameraSettings.nickname);
+const startCameraNameEdit = () => {
+  currentCameraName.value = useCameraSettingsStore().currentCameraSettings.nickname;
+  isCameraNameEdit.value = true;
+};
+const checkCameraName = (name: string): string | boolean => {
+  if(!nameChangeRegex.test(name)) return "A camera name can only contain letters, numbers, spaces, underscores, hyphens, parenthesis, and periods";
+  if(useCameraSettingsStore().cameraNames.some(cameraName => cameraName === name)) return "This camera name has already been used";
+
+  return true;
+};
+const saveCameraNameEdit = (newName: string) => {
+  useCameraSettingsStore().changeCameraNickname(newName, false)
+      .then(response => {
+        useStateStore().showSnackbarMessage({
+          color: "success",
+          message: response.data.text || response.data
+        });
+        useCameraSettingsStore().currentCameraSettings.nickname = newName;
+      })
+      .catch(error => {
+        if(error.response) {
+          useStateStore().showSnackbarMessage({
+            color: "error",
+            message:  error.response.data.text || error.response.data
+          });
+        } else if(error.request) {
+          useStateStore().showSnackbarMessage({
+            color: "error",
+            message: "Error while trying to process the request! The backend didn't respond."
+          });
+        } else {
+          useStateStore().showSnackbarMessage({
+            color: "error",
+            message: "An error occurred while trying to process the request."
+          });
+        }
+        currentCameraName.value = useCameraSettingsStore().currentCameraSettings.nickname;
+      })
+      .finally(() => isCameraNameEdit.value = false);
+};
+const cancelCameraNameEdit = () => {
+  isCameraNameEdit.value = false;
+  currentCameraName.value = useCameraSettingsStore().currentCameraSettings.nickname;
+};
+
+// Pipeline Name Edit
+const pipelineNamesWrapper = computed<{name: string, value: number}[]>(() => {
+  const pipelineNames = useCameraSettingsStore().pipelineNames.map((name, index) => ({ name: name, value: index }));
+
+  if(useCameraSettingsStore().isDriverMode) {
+    pipelineNames.push({ name: "Driver Mode", value: WebsocketPipelineType.DriverMode });
+  }
+  if(useCameraSettingsStore().isCalibrationMode) {
+    pipelineNames.push({ name: "3D Calibration Mode", value: WebsocketPipelineType.Calib3d });
+  }
+
+  return pipelineNames;
+});
+const isPipelineNameEdit = ref(false);
+const currentPipelineName = ref(useCameraSettingsStore().currentPipelineSettings.pipelineNickname);
+const startPipelineNameEdit = () => {
+  currentPipelineName.value = useCameraSettingsStore().currentPipelineSettings.pipelineNickname;
+  isPipelineNameEdit.value = true;
+};
+const checkPipelineName = (name: string): string | boolean => {
+  if(!nameChangeRegex.test(name)) return "A pipeline name can only contain letters, numbers, spaces, underscores, hyphens, parenthesis, and periods";
+  if(useCameraSettingsStore().pipelineNames.some(pipelineName => pipelineName === name)) return "This pipeline name has already been used";
+
+  return true;
+};
+const savePipelineNameEdit = (name: string) => {
+  useCameraSettingsStore().changeCurrentPipelineNickname(name);
+  isPipelineNameEdit.value = false;
+};
+const cancelPipelineNameEdit = () => {
+  isPipelineNameEdit.value = false;
+  currentPipelineName.value = useCameraSettingsStore().currentPipelineSettings.pipelineNickname;
+};
+
+// Pipeline Creation
+const showPipelineCreationDialog = ref(false);
+const newPipelineName = ref("");
+const newPipelineType = ref<WebsocketPipelineType>(useCameraSettingsStore().currentWebsocketPipelineType);
+const showCreatePipelineDialog = () => {
+  newPipelineName.value = "";
+  newPipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
+  showPipelineCreationDialog.value = true;
+};
+const createNewPipeline = () => {
+  const type = newPipelineType.value;
+  if(type === WebsocketPipelineType.DriverMode || type === WebsocketPipelineType.Calib3d) return;
+  useCameraSettingsStore().createNewPipeline(newPipelineName.value, type);
+  showPipelineCreationDialog.value = false;
+};
+const cancelPipelineCreation = () => {
+  showPipelineCreationDialog.value = false;
+  newPipelineName.value = "";
+  newPipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
+};
+
+// Pipeline Creation
+const showPipelineDeletionConfirmationDialog = ref(false);
+const confirmDeleteCurrentPipeline = () => {
+  useCameraSettingsStore().deleteCurrentPipeline();
+  showPipelineDeletionConfirmationDialog.value = false;
+};
+
+// Pipeline Type Change
+const showPipelineTypeChangeDialog = ref(false);
+const pipelineTypesWrapper = computed<{name: string, value: number}[]>(() => {
+  const pipelineTypes =[
+    { name: "Reflective", value: WebsocketPipelineType.Reflective },
+    { name: "Colored Shape", value: WebsocketPipelineType.ColoredShape },
+    { name: "AprilTag", value: WebsocketPipelineType.AprilTag }
+    // { name: "Aruco", value: WebsocketPipelineType.Aruco }
+  ];
+
+  if(useCameraSettingsStore().isDriverMode) {
+    pipelineTypes.push({ name: "Driver Mode", value: WebsocketPipelineType.DriverMode });
+  }
+  if(useCameraSettingsStore().isCalibrationMode) {
+    pipelineTypes.push({ name: "3D Calibration Mode", value: WebsocketPipelineType.Calib3d });
+  }
+
+  return pipelineTypes;
+});
+const pipelineType = ref<WebsocketPipelineType>(useCameraSettingsStore().currentWebsocketPipelineType);
+const currentPipelineType = computed<WebsocketPipelineType>({
+  get: () => {
+    if(useCameraSettingsStore().isDriverMode) return WebsocketPipelineType.DriverMode;
+    if(useCameraSettingsStore().isCalibrationMode) return WebsocketPipelineType.Calib3d;
+    return pipelineType.value;
+  },
+  set: v => {
+    pipelineType.value = v;
+  }
+});
+const confirmChangePipelineType = () => {
+  const type = currentPipelineType.value;
+  if(type === WebsocketPipelineType.DriverMode || type === WebsocketPipelineType.Calib3d) return;
+  useCameraSettingsStore().changeCurrentPipelineType(type);
+  showPipelineTypeChangeDialog.value = false;
+};
+const cancelChangePipelineType = () => {
+  pipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
+  showPipelineTypeChangeDialog.value = false;
+};
+
+// Change Props whenever the pipeline settings are changed
+useCameraSettingsStore().$subscribe((mutation, state) => {
+  const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
+
+  switch (currentCameraSettings.pipelineSettings.pipelineType) {
+    case PipelineType.Reflective:
+      pipelineType.value = WebsocketPipelineType.Reflective;
+      break;
+    case PipelineType.ColoredShape:
+      pipelineType.value = WebsocketPipelineType.ColoredShape;
+      break;
+    case PipelineType.AprilTag:
+      pipelineType.value = WebsocketPipelineType.AprilTag;
+      break;
+    case PipelineType.Aruco:
+      pipelineType.value = WebsocketPipelineType.Aruco;
+      break;
+  }
+});
+</script>
+
+<template>
+  <v-card
+    color="primary"
+  >
+    <v-row style="padding: 12px 12px 0 24px">
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
+        <cv-select
+          v-if="!isCameraNameEdit"
+          v-model="useStateStore().currentCameraIndex"
+          label="Camera"
+          :items="useCameraSettingsStore().cameraNames"
+          @input="changeCurrentCameraIndex"
+        />
+        <cv-input
+          v-else
+          v-model="currentCameraName"
+          class="pt-2"
+          :input-cols="12-3"
+          :rules="[v => checkCameraName(v)]"
+          label="Camera"
+          @onEnter="saveCameraNameEdit"
+          @onEscape="cancelCameraNameEdit"
+        />
+      </v-col>
+      <v-col
+        cols="2"
+        style="display: flex; align-items: center; justify-content: center"
+      >
+        <cv-icon
+          color="#c5c5c5"
+          icon-name="mdi-pencil"
+          tooltip="Edit Camera Name"
+          @click="startCameraNameEdit"
+        />
+      </v-col>
+    </v-row>
+    <v-row style="padding: 0 12px 0 24px;">
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
+        <cv-select
+          v-if="!isPipelineNameEdit"
+          :value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
+          label="Pipeline"
+          tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
+          :disabled="useCameraSettingsStore().isDriverMode
+            || useCameraSettingsStore().isCalibrationMode"
+          :items="pipelineNamesWrapper"
+          @input="args => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
+        />
+        <cv-input
+          v-else
+          v-model="currentPipelineName"
+          :input-cols="12-3"
+          :rules="[v => checkPipelineName(v)]"
+          label="Pipeline"
+          @onEnter="v => savePipelineNameEdit(v)"
+          @onEscape="cancelPipelineNameEdit"
+        />
+      </v-col>
+      <v-col
+        cols="2"
+        class="pa-0"
+        style="display: flex; align-items: center; justify-content: center"
+      >
+        <v-menu
+          v-if="!useCameraSettingsStore().isDriverMode"
+          offset-y
+          nudge-bottom="7"
+          auto
+        >
+          <template #activator="{ on }">
+            <v-icon
+              color="#c5c5c5"
+              v-on="on"
+              @click="cancelPipelineNameEdit"
+            >
+              mdi-menu
+            </v-icon>
+          </template>
+          <v-list
+            dark
+            dense
+            color="primary"
+          >
+            <v-list-item @click="startPipelineNameEdit">
+              <v-list-item-title>
+                <cv-icon
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-pencil"
+                  tooltip="Edit pipeline name"
+                />
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="showCreatePipelineDialog">
+              <v-list-item-title>
+                <cv-icon
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-plus"
+                  tooltip="Add new pipeline"
+                />
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="showPipelineDeletionConfirmationDialog = true">
+              <v-list-item-title>
+                <cv-icon
+                  color="red darken-2"
+                  :right="true"
+                  icon-name="mdi-delete"
+                  tooltip="Delete pipeline"
+                />
+              </v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="useCameraSettingsStore().duplicatePipeline(useCameraSettingsStore().currentCameraSettings.currentPipelineIndex)">
+              <v-list-item-title>
+                <cv-icon
+                  color="#c5c5c5"
+                  :right="true"
+                  icon-name="mdi-content-copy"
+                  tooltip="Duplicate pipeline"
+                />
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+    </v-row>
+    <v-row style="padding: 0 12px 12px 24px;">
+      <v-col
+        cols="10"
+        class="pa-0"
+      >
+        <cv-select
+          v-model="currentPipelineType"
+          label="Type"
+          tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
+          :disabled="useCameraSettingsStore().isDriverMode
+            || useCameraSettingsStore().isCalibrationMode"
+          :items="pipelineTypesWrapper"
+          @input="showPipelineTypeChangeDialog = true"
+        />
+      </v-col>
+    </v-row>
+    <v-dialog
+      v-model="showPipelineCreationDialog"
+      dark
+      persistent
+      width="500"
+    >
+      <v-card
+        dark
+        color="primary"
+      >
+        <v-card-title
+          class="headline"
+          style="font-family: 'Prompt', sans-serif !important;"
+          primary-title
+        >
+          Create New Pipeline
+        </v-card-title>
+        <v-card-text>
+          <cv-input
+            v-model="newPipelineName"
+            placeholder="Pipeline Name"
+            :label-cols="3"
+            :input-cols="12-3"
+            label="Pipeline Name"
+            :rules="[v => checkPipelineName(v)]"
+          />
+          <cv-select
+            v-model="newPipelineType"
+            :select-cols="12-3"
+            label="Tracking Type"
+            tooltip="Pipeline type, which changes the type of processing that will happen on input frames"
+            :items="[
+              { name: 'Reflective', value: WebsocketPipelineType.Reflective },
+              { name: 'Colored Shape', value: WebsocketPipelineType.ColoredShape },
+              { name: 'AprilTag', value: WebsocketPipelineType.AprilTag }
+              // { name: 'Aruco', value: WebsocketPipelineType.Aruco }
+            ]"
+          />
+        </v-card-text>
+        <v-divider />
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="#ffd843"
+            :disabled="checkPipelineName(newPipelineName) !== true"
+            @click="createNewPipeline"
+          >
+            Save
+          </v-btn>
+          <v-btn
+            color="error"
+            @click="cancelPipelineCreation"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog
+      v-model="showPipelineDeletionConfirmationDialog"
+      dark
+      width="500"
+    >
+      <v-card
+        dark
+        color="primary"
+      >
+        <v-card-title
+          class="headline"
+          style="font-family: 'Prompt', sans-serif !important;"
+          primary-title
+        >
+          Pipeline Deletion Confirmation
+        </v-card-title>
+        <v-card-text>
+          Are you sure you want to delete this pipeline? This cannot be undone.
+        </v-card-text>
+        <v-divider />
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="error"
+            @click="confirmDeleteCurrentPipeline"
+          >
+            Yes, I'm sure
+          </v-btn>
+          <v-btn
+            color="#ffd843"
+            @click="showPipelineDeletionConfirmationDialog = false"
+          >
+            No, take me back
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog
+      v-model="showPipelineTypeChangeDialog"
+      persistent
+      width="600"
+    >
+      <v-card
+        color="primary"
+        dark
+      >
+        <v-card-title>Change Pipeline Type</v-card-title>
+        <v-card-text>
+          Are you sure you want to change the current pipeline type? This will cause all the pipeline settings to be overwritten and they will be lost. If this isn't what you want, duplicate this pipeline first or export settings.
+        </v-card-text>
+        <v-divider />
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="error"
+            @click="confirmChangePipelineType"
+          >
+            Yes, I'm sure
+          </v-btn>
+          <v-btn
+            color="#ffd843"
+            @click="cancelChangePipelineType"
+          >
+            No, take me back
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>

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>

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import { computed, getCurrentInstance, onBeforeUpdate, ref } from "vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
+import InputTab from "@/components/dashboard/tabs/InputTab.vue";
+import ThresholdTab from "@/components/dashboard/tabs/ThresholdTab.vue";
+import ContoursTab from "@/components/dashboard/tabs/ContoursTab.vue";
+import AprilTagTab from "@/components/dashboard/tabs/AprilTagTab.vue";
+import ArucoTab from "@/components/dashboard/tabs/ArucoTab.vue";
+import OutputTab from "@/components/dashboard/tabs/OutputTab.vue";
+import TargetsTab from "@/components/dashboard/tabs/TargetsTab.vue";
+import PnPTab from "@/components/dashboard/tabs/PnPTab.vue";
+import Map3DTab from "@/components/dashboard/tabs/Map3DTab.vue";
+import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
+
+interface ConfigOption {
+  tabName: string,
+  component: Component
+}
+
+const allTabs = Object.freeze({
+  inputTab: {
+    tabName: "Input",
+    component: InputTab
+  },
+  thresholdTab: {
+    tabName: "Threshold",
+    component: ThresholdTab
+  },
+  contoursTab: {
+    tabName: "Contours",
+    component: ContoursTab
+  },
+  apriltagTab: {
+    tabName: "AprilTag",
+    component: AprilTagTab
+  },
+  arucoTab: {
+    tabName: "Aruco",
+    component: ArucoTab
+  },
+  outputTab: {
+    tabName: "Output",
+    component: OutputTab
+  },
+  targetsTab: {
+    tabName: "Targets",
+    component: TargetsTab
+  },
+  pnpTab: {
+    tabName: "PnP",
+    component: PnPTab
+  },
+  map3dTab: {
+    tabName: "3D",
+    component: Map3DTab
+  }
+});
+
+const selectedTabs = ref([0, 0, 0, 0]);
+const getTabGroups = (): ConfigOption[][] => {
+  const smAndDown = getCurrentInstance()?.proxy.$vuetify.breakpoint.smAndDown || false;
+  const mdAndDown = getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false;
+  const lgAndDown = getCurrentInstance()?.proxy.$vuetify.breakpoint.lgAndDown || false;
+  const xl = getCurrentInstance()?.proxy.$vuetify.breakpoint.xl || false;
+
+  if(smAndDown || useCameraSettingsStore().isDriverMode || (mdAndDown && !useStateStore().sidebarFolded)) {
+    return [Object.values(allTabs)];
+  } else if(mdAndDown || !useStateStore().sidebarFolded) {
+    return [
+        [allTabs.inputTab, allTabs.thresholdTab, allTabs.contoursTab, allTabs.apriltagTab, allTabs.arucoTab, allTabs.outputTab],
+        [allTabs.targetsTab, allTabs.pnpTab, allTabs.map3dTab]
+    ];
+  } else if(lgAndDown) {
+    return [
+        [allTabs.inputTab],
+        [allTabs.thresholdTab, allTabs.contoursTab, allTabs.apriltagTab, allTabs.arucoTab, allTabs.outputTab],
+        [allTabs.targetsTab, allTabs.pnpTab, allTabs.map3dTab]
+    ];
+  } else if(xl) {
+    return [
+      [allTabs.inputTab],
+      [allTabs.thresholdTab],
+      [allTabs.contoursTab, allTabs.apriltagTab, allTabs.arucoTab, allTabs.outputTab],
+      [allTabs.targetsTab, allTabs.pnpTab, allTabs.map3dTab]
+    ];
+  }
+
+  return [];
+};
+const tabGroups = computed<ConfigOption[][]>(() => {
+  // Just return the input tab because we know that is always the case in driver mode
+  if(useCameraSettingsStore().isDriverMode) return [[allTabs.inputTab]];
+
+  const allow3d = useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled;
+  const isAprilTag = useCameraSettingsStore().currentWebsocketPipelineType === WebsocketPipelineType.AprilTag;
+  const isAruco = useCameraSettingsStore().currentWebsocketPipelineType === WebsocketPipelineType.Aruco;
+
+  return getTabGroups().map(tabGroup => tabGroup.filter(tabConfig =>
+      !(!allow3d && tabConfig.tabName === "3D") //Filter out 3D tab any time 3D isn't calibrated
+      && !((!allow3d || isAprilTag || isAruco) && tabConfig.tabName === "PnP") //Filter out the PnP config tab if 3D isn't available, or we're doing AprilTags
+      && !((isAprilTag || isAruco) && (tabConfig.tabName === "Threshold")) //Filter out threshold tab if we're doing AprilTags
+      && !((isAprilTag || isAruco) && (tabConfig.tabName === "Contours")) //Filter out contours if we're doing AprilTags
+      && !(!isAprilTag && tabConfig.tabName === "AprilTag") //Filter out apriltag unless we actually are doing AprilTags
+      && !(!isAruco && tabConfig.tabName === "Aruco") //Filter out aruco unless we actually are doing Aruco
+  ));
+});
+
+onBeforeUpdate(() => {
+  // Force the current tab to the input tab on driver mode change
+  if(useCameraSettingsStore().isDriverMode) {
+    selectedTabs.value[0] = 0;
+  }
+});
+</script>
+
+<template>
+  <v-row
+    no-gutters
+    class="tabGroups"
+  >
+    <v-col
+      v-for="(tabGroupData, tabGroupIndex) in tabGroups"
+      :key="tabGroupIndex"
+      :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
+    >
+      <v-card
+        color="primary"
+        height="100%"
+        class="pr-4 pl-4"
+      >
+        <v-tabs
+          v-model="selectedTabs[tabGroupIndex]"
+          grow
+          background-color="primary"
+          dark
+          height="48"
+          slider-color="accent"
+        >
+          <v-tab
+            v-for="(tabConfig, index) in tabGroupData"
+            :key="index"
+          >
+            {{ tabConfig.tabName }}
+          </v-tab>
+        </v-tabs>
+        <div class="pl-4 pr-4 pt-4 pb-2">
+          <KeepAlive>
+            <Component :is="tabGroupData[selectedTabs[tabGroupIndex]].component" />
+          </KeepAlive>
+        </div>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<style>
+.v-slide-group__next--disabled, .v-slide-group__prev--disabled {
+  display: none !important;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
+
+const props = defineProps<{
+  // TODO fully update v-model usage in custom components on Vue3 update
+  value: number[]
+}>();
+
+const emit = defineEmits<{
+  (e: "input", value: number[]): void
+}>();
+
+
+const localValue = computed({
+  get: () => props.value,
+  set: v => emit("input", v)
+});
+
+const processingMode = computed<number>({
+  get: () => useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled ? 1: 0,
+  set: v => {
+    if(useCameraSettingsStore().isCurrentVideoFormatCalibrated) {
+      useCameraSettingsStore().changeCurrentPipelineSetting({ solvePNPEnabled: v === 1 }, true);
+    }
+  }
+});
+</script>
+
+<template>
+  <v-card
+    :disabled="useCameraSettingsStore().isDriverMode || useStateStore().colorPickingMode"
+    class="mt-3"
+    color="primary"
+    style="height: 100%; display: flex; flex-direction: column"
+  >
+    <v-row
+      align="center"
+      class="pa-3 pb-0"
+    >
+      <v-col>
+        <p style="color: white;">
+          Processing Mode
+        </p>
+        <v-btn-toggle
+          v-model="processingMode"
+          mandatory
+          dark
+          class="fill"
+        >
+          <v-btn
+            color="secondary"
+          >
+            <v-icon>mdi-square-outline</v-icon>
+            <span>2D</span>
+          </v-btn>
+          <v-btn
+            color="secondary"
+            :disabled="!useCameraSettingsStore().isCurrentVideoFormatCalibrated"
+          >
+            <v-icon>mdi-cube-outline</v-icon>
+            <span>3D</span>
+          </v-btn>
+        </v-btn-toggle>
+      </v-col>
+    </v-row>
+    <v-row
+      align="center"
+      class="pa-3 pt-0"
+    >
+      <v-col>
+        <p style="color: white;">
+          Stream Display
+        </p>
+        <v-btn-toggle
+          v-model="localValue"
+          :multiple="true"
+          mandatory
+          dark
+          class="fill"
+        >
+          <v-btn
+            color="secondary"
+            class="fill"
+          >
+            <v-icon>mdi-import</v-icon>
+            <span>Raw</span>
+          </v-btn>
+          <v-btn
+            color="secondary"
+            class="fill"
+          >
+            <v-icon>mdi-export</v-icon>
+            <span>Processed</span>
+          </v-btn>
+        </v-btn-toggle>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<style scoped>
+.v-btn-toggle.fill {
+  width: 100%;
+  height: 100%;
+}
+
+.v-btn-toggle.fill > .v-btn {
+  width: 50%;
+  height: 100%;
+}
+
+th {
+  width: 80px;
+  text-align: center;
+}
+</style>

photon-client/src/components/dashboard/tabs/AprilTagTab.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { PipelineType } from "@/types/PipelineTypes";
+import CvSelect from "@/components/common/cv-select.vue";
+import CvSlider from "@/components/common/cv-slider.vue";
+import CvSwitch from "@/components/common/cv-switch.vue";
+import { computed, getCurrentInstance } from "vue";
+import { useStateStore } from "@/stores/StateStore";
+
+// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
+// Defer reference to store access method
+const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div v-if="currentPipelineSettings.pipelineType === PipelineType.AprilTag">
+    <cv-select
+      v-model="currentPipelineSettings.tagFamily"
+      label="Target family"
+      :items="['AprilTag Family 36h11', 'AprilTag Family 25h9', 'AprilTag Family 16h5']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({tagFamily: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.decimate"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Decimate"
+      tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.blur"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Blur"
+      tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
+      :min="0"
+      :max="5"
+      :step="0.1"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({blur: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.threads"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Threads"
+      tooltip="Number of threads spawned by the AprilTag detector"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({threads: value}, false)"
+    />
+    <cv-switch
+      v-model="currentPipelineSettings.refineEdges"
+      class="pt-2"
+      label="Refine Edges"
+      tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({refineEdges: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.decisionMargin"
+      class="pt-2 pb-4"
+      :slider-cols="interactiveCols"
+      label="Decision Margin Cutoff"
+      tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
+      :min="0"
+      :max="250"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decisionMargin: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.numIterations"
+      class="pt-2 pb-4"
+      :slider-cols="interactiveCols"
+      label="Pose Estimation Iterations"
+      tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
+      :min="0"
+      :max="500"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
+    />
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/ArucoTab.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { PipelineType } from "@/types/PipelineTypes";
+import CvSlider from "@/components/common/cv-slider.vue";
+import { computed, getCurrentInstance } from "vue";
+import { useStateStore } from "@/stores/StateStore";
+
+// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
+// Defer reference to store access method
+const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div v-if="currentPipelineSettings.pipelineType === PipelineType.Aruco">
+    <cv-slider
+      v-model="currentPipelineSettings.decimate"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Decimate"
+      tooltip="Increases FPS at the expense of range by reducing image resolution initially"
+      :min="1"
+      :max="8"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({decimate: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.numIterations"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Corner Iterations"
+      tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
+      :min="30"
+      :max="1000"
+      :step="5"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({numIterations: value}, false)"
+    />
+    <cv-slider
+      v-model="currentPipelineSettings.cornerAccuracy"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Corner Accuracy"
+      tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
+      :min="0.01"
+      :max="100"
+      :step="0.01"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerAccuracy: value}, false)"
+    />
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/ContoursTab.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { PipelineType } from "@/types/PipelineTypes";
+import CvRangeSlider from "@/components/common/cv-range-slider.vue";
+import CvSelect from "@/components/common/cv-select.vue";
+import CvSlider from "@/components/common/cv-slider.vue";
+import { computed, getCurrentInstance } from "vue";
+import { useStateStore } from "@/stores/StateStore";
+
+// TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
+// Defer reference to store access method
+const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+// TODO fix cv-range-slider so that store access doesn't need to be deferred
+const contourArea = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.contourArea) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.contourArea = v
+});
+const contourRatio = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.contourRatio) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.contourRatio = v
+});
+const contourFullness = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.contourFullness) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.contourFullness = v
+});
+const contourPerimeter = computed<[number, number]>({
+  get: () => currentPipelineSettings.pipelineType === PipelineType.ColoredShape ? Object.values(currentPipelineSettings.contourPerimeter) as [number, number] : [0, 0] as [number, number],
+  set: v => {
+    if(currentPipelineSettings.pipelineType === PipelineType.ColoredShape) {
+      currentPipelineSettings.contourPerimeter = v;
+    }
+  }
+});
+const contourRadius = computed<[number, number]>({
+  get: () => currentPipelineSettings.pipelineType === PipelineType.ColoredShape ? Object.values(currentPipelineSettings.contourRadius) as [number, number] : [0, 0] as [number, number],
+  set: v => {
+    if(currentPipelineSettings.pipelineType === PipelineType.ColoredShape) {
+      currentPipelineSettings.contourRadius = v;
+    }
+  }
+});
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div>
+    <cv-range-slider
+      v-model="contourArea"
+      label="Area"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.01"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourArea: value}, false)"
+    />
+    <cv-range-slider
+      v-if="useCameraSettingsStore().currentPipelineType !== PipelineType.ColoredShape"
+      v-model="contourRatio"
+      label="Ratio (W/H)"
+      tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.1"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRatio: value}, false)"
+    />
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
+    />
+    <cv-range-slider
+      v-if="useCameraSettingsStore().currentPipelineType === PipelineType.ColoredShape"
+      v-model="contourFullness"
+      label="Fullness"
+      tooltip="Min and max ratio between a contour's area and its bounding rectangle"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFullness: value}, false)"
+    />
+    <cv-range-slider
+      v-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape"
+      v-model="contourPerimeter"
+      label="Perimeter"
+      tooltip="Min and max perimeter of the shape, in pixels"
+      min="0"
+      max="4000"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourPerimeter: value}, false)"
+    />
+    <cv-slider
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourSpecklePercentage"
+      label="Speckle Rejection"
+      tooltip="Rejects contours whose average area is less than the given percentage of the average area of all the other contours"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSpecklePercentage: value}, false)"
+    />
+    <template v-if="currentPipelineSettings.pipelineType === PipelineType.Reflective">
+      <cv-slider
+        v-model="currentPipelineSettings.contourFilterRangeX"
+        label="X Filter Tightness"
+        tooltip="Rejects contours whose center X is further than X standard deviations left/right of the mean X location"
+        :min="0.1"
+        :max="4"
+        :step="0.1"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeX: value}, false)"
+      />
+      <cv-slider
+        v-model="currentPipelineSettings.contourFilterRangeY"
+        label="Y Filter Tightness"
+        tooltip="Rejects contours whose center Y is further than X standard deviations above/below the mean Y location"
+        :min="0.1"
+        :max="4"
+        :step="0.1"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourFilterRangeY: value}, false)"
+      />
+      <cv-select
+        v-model="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode"
+        label="Target Grouping"
+        tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
+        :select-cols="interactiveCols"
+        :items="['Single','Dual','Two or More']"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourGroupingMode: value}, false)"
+      />
+      <cv-select
+        v-model="useCameraSettingsStore().currentPipelineSettings.contourIntersection"
+        label="Target Intersection"
+        tooltip="If target grouping is in dual mode it will use this dropdown to decide how targets are grouped with adjacent targets"
+        :select-cols="interactiveCols"
+        :items="['None','Up','Down','Left','Right']"
+        :disabled="useCameraSettingsStore().currentPipelineSettings.contourGroupingMode === 0"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourIntersection: value}, false)"
+      />
+    </template>
+    <template v-else-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape">
+      <v-divider class="mt-3" />
+      <cv-select
+        v-model="currentPipelineSettings.contourShape"
+        label="Target Shape"
+        tooltip="The shape of targets to look for"
+        :select-cols="interactiveCols"
+        :items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourShape: value}, false)"
+      />
+      <cv-slider
+        v-model="currentPipelineSettings.accuracyPercentage"
+        :disabled="currentPipelineSettings.contourShape < 1"
+        label="Shape Simplification"
+        tooltip="How much we should simply the input contour before checking how many sides it has"
+        :min="0"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({accuracyPercentage: value}, false)"
+      />
+      <cv-slider
+        v-model="currentPipelineSettings.circleDetectThreshold"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Circle match distance"
+        tooltip="How close the centroid of a contour must be to the center of a circle in order for them to be matched"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleDetectThreshold: value}, false)"
+      />
+      <cv-range-slider
+        v-model="contourRadius"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Radius"
+        :min="0"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourRadius: value}, false)"
+      />
+      <cv-slider
+        v-model="currentPipelineSettings.maxCannyThresh"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Max Canny Threshold"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({maxCannyThresh: value}, false)"
+      />
+      <cv-slider
+        v-model="currentPipelineSettings.circleAccuracy"
+        :disabled="currentPipelineSettings.contourShape !== 0"
+        label="Circle Accuracy"
+        :min="1"
+        :max="100"
+        :slider-cols="interactiveCols"
+        @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({circleAccuracy: value}, false)"
+      />
+      <v-divider class="mt-3" />
+    </template>
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourSortMode"
+      label="Target Sort"
+      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
+      :select-cols="interactiveCols"
+      :items="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourSortMode: value}, false)"
+    />
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/InputTab.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import CvSlider from "@/components/common/cv-slider.vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import CvSwitch from "@/components/common/cv-switch.vue";
+import CvSelect from "@/components/common/cv-select.vue";
+import { computed, getCurrentInstance } from "vue";
+import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
+import { useStateStore } from "@/stores/StateStore";
+
+// Due to something with libcamera or something else IDK much about, the 90° rotations need to be disabled if the libcamera drivers are being used.
+const cameraRotations = computed(() => ["Normal", "90° CW", "180°", "90° CCW"].map((v, i) => ({ name: v, value: i, disabled: useSettingsStore().gpuAccelerationEnabled ?  [1, 3].includes(i) : false })));
+
+const streamDivisors = [1, 2, 4, 6];
+const getFilteredStreamDivisors = (): number[] => {
+  const currentResolutionWidth = useCameraSettingsStore().currentVideoFormat.resolution.width;
+  return streamDivisors.filter(x =>
+      useCameraSettingsStore().isDriverMode
+      || !useSettingsStore().gpuAccelerationEnabled
+      || currentResolutionWidth / x < 400);
+};
+const getNumberOfSkippedDivisors = () => streamDivisors.length - getFilteredStreamDivisors().length;
+
+const cameraResolutions = computed(() => useCameraSettingsStore().currentCameraSettings.validVideoFormats.map(f => `${f.resolution.width} X ${f.resolution.height} at ${f.fps} FPS, ${f.pixelFormat}`));
+const handleResolutionChange = (value: number) => {
+  useCameraSettingsStore().changeCurrentPipelineSetting({ cameraVideoModeIndex: value }, false);
+
+  useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: getNumberOfSkippedDivisors() }, false);
+  useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor = 0;
+
+  if(!useCameraSettingsStore().isCurrentVideoFormatCalibrated) {
+    useCameraSettingsStore().changeCurrentPipelineSetting({ solvePNPEnabled: false }, true);
+  }
+};
+
+const streamResolutions = computed(() => {
+  const streamDivisors = getFilteredStreamDivisors();
+  const currentResolution = useCameraSettingsStore().currentVideoFormat.resolution;
+  return streamDivisors
+      .map(x => `${Math.floor(currentResolution.width / x)} X ${Math.floor(currentResolution.height / x)}`);
+});
+const handleStreamResolutionChange = (value: number) => {
+  useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: value + getNumberOfSkippedDivisors() }, false);
+};
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div>
+    <cv-slider
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
+      :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
+      label="Exposure"
+      tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects apparent brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      :step="0.1"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraExposure: args}, false)"
+    />
+    <cv-slider
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
+      label="Brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBrightness: args}, false)"
+    />
+    <cv-switch
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
+      class="pt-2"
+      label="Auto Exposure"
+      :switch-cols="interactiveCols"
+      tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraAutoExposure: args}, false)"
+    />
+    <cv-slider
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
+      label="Camera Gain"
+      tooltip="Controls camera gain, similar to brightness"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraGain: args}, false)"
+    />
+    <cv-slider
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
+      label="Red AWB Gain"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      tooltip="Controls red automatic white balance gain, which affects how the camera captures colors in different conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraRedGain: args}, false)"
+    />
+    <cv-slider
+      v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
+      label="Blue AWB Gain"
+      :min="0"
+      :max="100"
+      :slider-cols="interactiveCols"
+      tooltip="Controls blue automatic white balance gain, which affects how the camera captures colors in different conditions"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({cameraBlueGain: args}, false)"
+    />
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
+      label="Orientation"
+      tooltip="Rotates the camera stream"
+      :items="cameraRotations"
+      :select-cols="interactiveCols"
+      @input="args => useCameraSettingsStore().changeCurrentPipelineSetting({inputImageRotationMode: args}, false)"
+    />
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
+      label="Resolution"
+      tooltip="Resolution and FPS the camera should directly capture at"
+      :items="cameraResolutions"
+      :select-cols="interactiveCols"
+      @input="args => handleResolutionChange(args)"
+    />
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
+      label="Stream Resolution"
+      tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
+      :items="streamResolutions"
+      :select-cols="interactiveCols"
+      @input="args => handleStreamResolutionChange(args)"
+    />
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/Map3DTab.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { PhotonTarget } from "@/types/PhotonTrackingTypes";
+import { useStateStore } from "@/stores/StateStore";
+import Photon3dVisualizer from "@/components/app/photon-3d-visualizer.vue";
+
+const trackedTargets = computed<PhotonTarget[]>(() => useStateStore().pipelineResults?.targets || []);
+</script>
+
+<template>
+  <div>
+    <v-row style="width: 100%">
+      <v-col>
+        <span class="white--text">Target Visualization</span>
+      </v-col>
+    </v-row>
+    <v-row style="width: 100%">
+      <v-col style="display: flex; align-items: center; justify-content: center">
+        <photon3d-visualizer
+          :targets="trackedTargets"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/OutputTab.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import CvSelect from "@/components/common/cv-select.vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
+import CvSwitch from "@/components/common/cv-switch.vue";
+import { computed, getCurrentInstance } from "vue";
+import { RobotOffsetType } from "@/types/SettingTypes";
+import { useStateStore } from "@/stores/StateStore";
+
+const isTagPipeline = computed(() => useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco);
+
+interface MetricItem {
+  header: string,
+  value?: string
+}
+
+const offsetPoints = computed<MetricItem[]>(() => {
+  switch (useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode) {
+    case RobotOffsetPointMode.Single:
+      const value = Object.values(useCameraSettingsStore().currentPipelineSettings.offsetSinglePoint);
+      return [{ header: "Offset Point", value: `(${value[0].toFixed(2)}°, ${value[1].toFixed(2)}°)` }];
+    case RobotOffsetPointMode.Dual:
+      const firstPoint = Object.values(useCameraSettingsStore().currentPipelineSettings.offsetDualPointA);
+      const firstPointArea = useCameraSettingsStore().currentPipelineSettings.offsetDualPointAArea;
+      const secondPoint = Object.values(useCameraSettingsStore().currentPipelineSettings.offsetDualPointB);
+      const secondPointArea = useCameraSettingsStore().currentPipelineSettings.offsetDualPointBArea;
+      return [{ header: "First Offset Point", value: `(${firstPoint[0].toFixed(2)}°, ${firstPoint[1].toFixed(2)}°)` },
+              { header: "First Offset Point Area", value: `${firstPointArea.toFixed(2)}%` },
+              { header: "Second Offset Point", value: `(${secondPoint[0].toFixed(2)}°, ${secondPoint[1].toFixed(2)}°)` },
+              { header: "Second Offset Point Area", value: `${secondPointArea.toFixed(2)}%` }
+      ];
+    default:
+    case RobotOffsetPointMode.None:
+      return [];
+  }
+});
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div>
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
+      label="Target Offset Point"
+      tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
+      :items="['Center','Top','Bottom','Left','Right']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOffsetPointEdge: value}, false)"
+    />
+    <cv-select
+      v-if="!isTagPipeline"
+      v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
+      label="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
+      :items="['Portrait', 'Landscape']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({contourTargetOrientation: value}, false)"
+    />
+    <cv-switch
+      v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
+      label="Show Multiple Targets"
+      tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
+      :disabled="isTagPipeline"
+      :switch-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({outputShowMultipleTargets: value}, false)"
+    />
+    <v-divider />
+    <table
+      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
+      class="metrics-table mt-3 mb-3"
+    >
+      <tr>
+        <th
+          v-for="(item, itemIndex) in offsetPoints"
+          :key="itemIndex"
+          class="metric-item metric-item-title"
+        >
+          {{ item.header }}
+        </th>
+      </tr>
+      <tr>
+        <td
+          v-for="(item, itemIndex) in offsetPoints"
+          :key="itemIndex"
+          class="metric-item"
+        >
+          {{ item.value }}
+        </td>
+      </tr>
+    </table>
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
+      label="Robot Offset Mode"
+      tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
+      :items="['None','Single Point','Dual Point']"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({offsetRobotOffsetMode: value}, false)"
+    />
+    <v-row
+      v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
+      align="center"
+      justify="start"
+    >
+      <v-row v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Single">
+        <v-col>
+          <v-btn
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
+          >
+            Take Point
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-else-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode === RobotOffsetPointMode.Dual">
+        <v-col>
+          <v-btn
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
+          >
+            Take First Point
+          </v-btn>
+        </v-col>
+        <v-col>
+          <v-btn
+            small
+            color="accent"
+            style="width: 100%;"
+            class="black--text"
+            @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
+          >
+            Take Second Point
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-col>
+        <v-btn
+          small
+          color="yellow darken-3"
+          style="width: 100%;"
+          @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
+        >
+          Clear All Points
+        </v-btn>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+.metrics-table{
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: 5px;
+  border: 1px solid white;
+  width: 100%;
+  text-align: center;
+}
+
+.metric-item {
+  padding: 1px 15px 1px 10px;
+  border-right: 1px solid;
+  font-weight: normal;
+  color: white;
+}
+
+.metric-item-title {
+  font-size: 18px;
+  text-decoration: underline;
+  text-decoration-color: #ffd843;
+}
+</style>

photon-client/src/components/dashboard/tabs/PnPTab.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import CvSelect from "@/components/common/cv-select.vue";
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { TargetModel } from "@/types/PipelineTypes";
+import CvSlider from "@/components/common/cv-slider.vue";
+import { computed, getCurrentInstance } from "vue";
+import { useStateStore } from "@/stores/StateStore";
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div>
+    <cv-select
+      v-model="useCameraSettingsStore().currentPipelineSettings.targetModel"
+      label="Target Model"
+      :items="[
+        {name: '2020 High Goal Outer', value: TargetModel.InfiniteRechargeHighGoalOuter},
+        {name: '2020 High Goal Inner', value: TargetModel.InfiniteRechargeHighGoalInner},
+        {name: '2019 Dual Target', value: TargetModel.DeepSpaceDualTarget},
+        {name: '2020 Power Cell (7in)', value: TargetModel.CircularPowerCell7in},
+        {name: '2022 Cargo Ball (9.5in)', value: TargetModel.RapidReactCircularCargoBall},
+        {name: '2016 High Goal', value: TargetModel.StrongholdHighGoal},
+        {name: '200mm AprilTag', value: TargetModel.Apriltag_200mm},
+        {name: '6in (16h5) Aruco', value: TargetModel.Aruco6in_16h5},
+        {name: '6in (16h5) AprilTag', value: TargetModel.Apriltag6in_16h5}
+      ]"
+      :select-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({targetModel: value}, false)"
+    />
+    <cv-slider
+      v-model="useCameraSettingsStore().currentPipelineSettings.cornerDetectionAccuracyPercentage"
+      class="pt-2"
+      :slider-cols="interactiveCols"
+      label="Contour simplification Percentage"
+      :min="0"
+      :max="100"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({cornerDetectionAccuracyPercentage: value}, false)"
+    />
+  </div>
+</template>

photon-client/src/components/dashboard/tabs/TargetsTab.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { PipelineType } from "@/types/PipelineTypes";
+import { useStateStore } from "@/stores/StateStore";
+</script>
+
+<template>
+  <div>
+    <v-row
+      align="start"
+      class="pb-4"
+      style="height: 300px;"
+    >
+      <!-- Simple table height must be set here and in the CSS for the fixed-header to work -->
+      <v-simple-table
+        fixed-header
+        height="100%"
+        dense
+        dark
+      >
+        <template #default>
+          <thead style="font-size: 1.25rem;">
+            <tr>
+              <th class="text-center">
+                Target Count
+              </th>
+              <th
+                v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco"
+                class="text-center"
+              >
+                Fiducial ID
+              </th>
+              <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <th class="text-center">
+                  Pitch &theta;&deg;
+                </th>
+                <th class="text-center">
+                  Yaw &theta;&deg;
+                </th>
+                <th class="text-center">
+                  Skew &theta;&deg;
+                </th>
+                <th class="text-center">
+                  Area %
+                </th>
+              </template>
+              <template v-else>
+                <th class="text-center">
+                  X meters
+                </th>
+                <th class="text-center">
+                  Y meters
+                </th>
+                <th class="text-center">
+                  Z Angle &theta;&deg;
+                </th>
+              </template>
+              <template v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag && useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <th class="text-center">
+                  Ambiguity %
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(target, index) in useStateStore().pipelineResults?.targets"
+              :key="index"
+            >
+              <td>{{ index }}</td>
+              <td v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag || useCameraSettingsStore().currentPipelineType === PipelineType.Aruco">
+                {{ target.fiducialId }}
+              </td>
+              <template v-if="!useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.pitch.toFixed(2) }}&deg;</td>
+                <td>{{ target.yaw.toFixed(2) }}&deg;</td>
+                <td>{{ target.skew.toFixed(2) }}&deg;</td>
+                <td>{{ target.area.toFixed(2) }}&deg;</td>
+              </template>
+              <template v-else-if="useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.pose?.x.toFixed(2) }}&nbsp;m</td>
+                <td>{{ target.pose?.y.toFixed(2) }}&nbsp;m</td>
+                <td>{{ (target.pose?.angle_z * 180.0 / Math.PI).toFixed(2) }}&deg;</td>
+              </template>
+              <template v-if="useCameraSettingsStore().currentPipelineType === PipelineType.AprilTag && useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+                <td>{{ target.ambiguity?.toFixed(2) }}%</td>
+              </template>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.v-data-table {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-color: #006492 !important;
+
+  th, td {
+    background-color: #006492 !important;
+    font-size: 1rem !important;
+  }
+
+  td {
+    font-family: monospace !important;
+  }
+
+  tbody :hover td {
+    background-color: #005281 !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0.55em;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ffd843;
+    border-radius: 10px;
+  }
+}
+</style>

photon-client/src/components/dashboard/tabs/ThresholdTab.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted } from "vue";
+import CvRangeSlider from "@/components/common/cv-range-slider.vue";
+import CvSwitch from "@/components/common/cv-switch.vue";
+import { useStateStore } from "@/stores/StateStore";
+import { ColorPicker, type HSV } from "@/lib/ColorPicker";
+
+const averageHue = computed<number>(() => {
+  const isHueInverted = useCameraSettingsStore().currentPipelineSettings.hueInverted;
+  let val = Object.values(useCameraSettingsStore().currentPipelineSettings.hsvHue).reduce((a, b) => a + b, 0);
+
+  if(isHueInverted) val += 180;
+  if (val > 360) val -= 360;
+
+  return val;
+});
+
+// TODO fix cv-range-slider so that store access doesn't need to be deferred
+const hsvHue = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.hsvHue) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.hsvHue = v
+});
+const hsvSaturation = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.hsvSaturation) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.hsvSaturation = v
+});
+const hsvValue = computed<[number, number]>({
+  get: () => Object.values(useCameraSettingsStore().currentPipelineSettings.hsvValue) as [number, number],
+  set: v => useCameraSettingsStore().currentPipelineSettings.hsvValue = v
+});
+
+let selectedEventMode: 0 | 1 | 2 | 3 = 0;
+const handleStreamClick = (event: MouseEvent) => {
+  if(!useStateStore().colorPickingMode || selectedEventMode === 0) return;
+
+  const cameraStream = document.getElementById("input-camera-stream");
+  if(cameraStream === null) return;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = cameraStream.clientWidth;
+  canvas.height = cameraStream.clientHeight;
+
+  // Get the (x, y) position of the click with (0, 0) in the top left corner
+  const rect = cameraStream.getBoundingClientRect();
+  const x = Math.round((event.clientX - rect.left) / rect.width * cameraStream.clientWidth);
+  const y = Math.round((event.clientY - rect.top) / rect.height * cameraStream.clientHeight);
+
+  const context = canvas.getContext("2d");
+  if(context === null) return;
+
+  context.drawImage(cameraStream as CanvasImageSource, 0, 0, cameraStream.clientWidth, cameraStream.clientHeight);
+  const colorPicker = new ColorPicker(context.getImageData(x, y, 1, 1).data);
+
+  // Calculate HSV values based on the mode
+  let selectedHSVData: [HSV, HSV] = [[0, 0, 0], [0, 0, 0]];
+  if(selectedEventMode === 1) {
+    selectedHSVData = colorPicker.selectedColorRange();
+  } else {
+    const currentHue = Object.values(useCameraSettingsStore().currentPipelineSettings.hsvHue);
+    const currentSaturation = Object.values(useCameraSettingsStore().currentPipelineSettings.hsvSaturation);
+    const currentValue = Object.values(useCameraSettingsStore().currentPipelineSettings.hsvValue);
+
+    const currentData: [HSV, HSV] = [
+      [currentHue[0], currentSaturation[0], currentValue[0]],
+      [currentHue[1], currentSaturation[1], currentValue[1]]
+    ];
+
+    if(selectedEventMode === 2) {
+      selectedHSVData = colorPicker.expandColorRange(currentData);
+    } else if(selectedEventMode === 3) {
+      selectedHSVData = colorPicker.shrinkColorRange(currentData);
+    }
+  }
+
+  // Update the store and backend with the new HSV values
+  useCameraSettingsStore().changeCurrentPipelineSetting({
+    hsvHue: [selectedHSVData[0][0], selectedHSVData[1][0]],
+    hsvSaturation: [selectedHSVData[0][1], selectedHSVData[1][1]],
+    hsvValue: [selectedHSVData[0][2], selectedHSVData[1][2]]
+  }, true);
+
+  disableColorPicking();
+};
+
+// Put some default values in case color picking was enabled before the enableColorPicking method is called
+let inputShowing = true;
+let outputShowing = false;
+const enableColorPicking = (mode: 1 | 2 | 3) => {
+  useStateStore().colorPickingMode = true;
+  inputShowing = useCameraSettingsStore().currentPipelineSettings.inputShouldShow;
+  outputShowing = useCameraSettingsStore().currentPipelineSettings.outputShouldShow;
+  useCameraSettingsStore().changeCurrentPipelineSetting({ outputShouldDraw: false, inputShouldShow: true, outputShouldShow: false }, true);
+  selectedEventMode = mode;
+};
+const disableColorPicking = () => {
+  useStateStore().colorPickingMode = false;
+  useCameraSettingsStore().changeCurrentPipelineSetting({ outputShouldDraw: true, inputShouldShow: inputShowing, outputShouldShow: outputShowing }, true);
+  selectedEventMode = 0;
+};
+
+onMounted(() => {
+  const cameraStream = document.getElementById("input-camera-stream");
+  if(cameraStream === null) return;
+
+  cameraStream.addEventListener("click", handleStreamClick);
+});
+onBeforeUnmount(() => {
+  const cameraStream = document.getElementById("input-camera-stream");
+  if(cameraStream === null) return;
+
+  cameraStream.removeEventListener("click", handleStreamClick);
+});
+
+const interactiveCols = computed(() => (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)) ? 9 : 8;
+</script>
+
+<template>
+  <div
+    class="threshold-modifiers"
+    :style="{'--averageHue': averageHue}"
+  >
+    <cv-range-slider
+      id="hue-slider"
+      v-model="hsvHue"
+      :class="useCameraSettingsStore().currentPipelineSettings.hueInverted ? 'inverted-slider' : 'normal-slider'"
+      label="Hue"
+      tooltip="Describes color"
+      :min="0"
+      :max="180"
+      :slider-cols="interactiveCols"
+      :inverted="useCameraSettingsStore().currentPipelineSettings.hueInverted"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvHue: value}, false)"
+    />
+    <cv-range-slider
+      id="sat-slider"
+      v-model="hsvSaturation"
+      class="normal-slider"
+      label="Saturation"
+      tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
+      :min="0"
+      :max="255"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvSaturation: value}, false)"
+    />
+    <cv-range-slider
+      id="value-slider"
+      v-model="hsvValue"
+      class="normal-slider"
+      label="Value"
+      tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
+      :min="0"
+      :max="255"
+      :slider-cols="interactiveCols"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hsvValue: value}, false)"
+    />
+    <cv-switch
+      v-model="useCameraSettingsStore().currentPipelineSettings.hueInverted"
+      label="Invert Hue"
+      :switch-cols="interactiveCols"
+      tooltip="Selects the hue range outside of the hue slider bounds instead of inside"
+      @input="value => useCameraSettingsStore().changeCurrentPipelineSetting({hueInverted: value}, false)"
+    />
+    <v-divider
+      class="mt-3"
+    />
+    <div>
+      <div class="pt-3 white--text">
+        Color Picker
+      </div>
+      <v-row
+        justify="center"
+        class="mt-3 mb-3"
+      >
+        <template v-if="!useStateStore().colorPickingMode">
+          <v-btn
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
+          >
+            <v-icon left>
+              mdi-minus
+            </v-icon>
+            Shrink Range
+          </v-btn>
+          <v-btn
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(1)"
+          >
+            <v-icon left>
+              mdi-plus-minus
+            </v-icon>
+            {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average
+          </v-btn>
+          <v-btn
+            color="accent"
+            class="ma-2 black--text"
+            small
+            @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3: 2)"
+          >
+            <v-icon left>
+              mdi-plus
+            </v-icon>
+            Expand Range
+          </v-btn>
+        </template>
+        <template v-else>
+          <v-btn
+            color="accent"
+            class="ma-2 black--text"
+            style="width: 30%;"
+            small
+            @click="disableColorPicking"
+          >
+            Cancel
+          </v-btn>
+        </template>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="css">
+.threshold-modifiers {
+  --averageHue: 0;
+}
+#hue-slider >>> .v-slider {
+  background: linear-gradient( to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100% );
+  border-radius: 10px;
+  box-shadow: 0 0 5px #333, inset 0 0 3px #333;
+}
+#sat-slider >>> .v-slider {
+  background: linear-gradient( to right, #fff 0%, hsl(var(--averageHue), 100%, 50%) 100% );
+  border-radius: 10px;
+  box-shadow: 0 0 5px #333, inset 0 0 3px #333;
+}
+#value-slider >>> .v-slider {
+  background: linear-gradient( to right, #000 0%, hsl(var(--averageHue), 100%, 50%) 100% );
+  border-radius: 10px;
+  box-shadow: 0 0 5px #333, inset 0 0 3px #333;
+}
+>>> .v-slider__thumb {
+  outline: black solid thin;
+}
+.normal-slider >>> .v-slider__track-fill {
+  outline: black solid thin;
+}
+
+.inverted-slider >>> .v-slider__track-background {
+  outline: black solid thin;
+}
+</style>