From 7f98941b230db3c597a69e72e61ce2fb5906de30 Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:32:59 -0400
Subject: [PATCH] [photon-client] Change UI naming schema from CV to PV (#955)

---
 .../components/app/photon-camera-stream.vue   |  4 +-
 .../cameras/CameraCalibrationCard.vue         | 32 +++++++-------
 .../components/cameras/CameraSettingsCard.vue |  8 ++--
 .../common/{cv-icon.vue => pv-icon.vue}       |  0
 .../common/{cv-input.vue => pv-input.vue}     |  2 +-
 ...v-number-input.vue => pv-number-input.vue} |  2 +-
 .../common/{cv-radio.vue => pv-radio.vue}     |  2 +-
 ...v-range-slider.vue => pv-range-slider.vue} |  2 +-
 .../common/{cv-select.vue => pv-select.vue}   |  2 +-
 .../common/{cv-slider.vue => pv-slider.vue}   |  2 +-
 .../common/{cv-switch.vue => pv-switch.vue}   |  2 +-
 ...pped-label.vue => pv-tooltipped-label.vue} |  0
 .../dashboard/CameraAndPipelineSelectCard.vue | 30 ++++++-------
 .../components/dashboard/tabs/AprilTagTab.vue | 20 ++++-----
 .../components/dashboard/tabs/ArucoTab.vue    |  8 ++--
 .../components/dashboard/tabs/ContoursTab.vue | 42 +++++++++----------
 .../components/dashboard/tabs/InputTab.vue    | 24 +++++------
 .../components/dashboard/tabs/OutputTab.vue   | 12 +++---
 .../src/components/dashboard/tabs/PnPTab.vue  |  8 ++--
 .../dashboard/tabs/ThresholdTab.vue           | 14 +++----
 .../components/settings/DeviceControlCard.vue |  6 +--
 .../components/settings/LEDControlCard.vue    |  4 +-
 .../src/components/settings/MetricsCard.vue   |  4 +-
 .../components/settings/NetworkingCard.vue    | 22 +++++-----
 24 files changed, 126 insertions(+), 126 deletions(-)
 rename photon-client/src/components/common/{cv-icon.vue => pv-icon.vue} (100%)
 rename photon-client/src/components/common/{cv-input.vue => pv-input.vue} (96%)
 rename photon-client/src/components/common/{cv-number-input.vue => pv-number-input.vue} (94%)
 rename photon-client/src/components/common/{cv-radio.vue => pv-radio.vue} (94%)
 rename photon-client/src/components/common/{cv-range-slider.vue => pv-range-slider.vue} (97%)
 rename photon-client/src/components/common/{cv-select.vue => pv-select.vue} (96%)
 rename photon-client/src/components/common/{cv-slider.vue => pv-slider.vue} (96%)
 rename photon-client/src/components/common/{cv-switch.vue => pv-switch.vue} (93%)
 rename photon-client/src/components/common/{cv-tooltipped-label.vue => pv-tooltipped-label.vue} (100%)

diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 1349da2f9..13f3e7577 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -4,7 +4,7 @@ import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import loadingImage from "@/assets/images/loading.svg";
 import type { StyleValue } from "vue/types/jsx";
-import CvIcon from "@/components/common/cv-icon.vue";
+import PvIcon from "@/components/common/pv-icon.vue";
 
 const props = defineProps<{
   streamType: "Raw" | "Processed";
@@ -65,7 +65,7 @@ const handleCaptureClick = () => {
       @click="handleStreamClick"
     />
     <div class="stream-overlay" :style="overlayStyle">
-      <cv-icon
+      <pv-icon
         icon-name="mdi-camera-image"
         tooltip="Capture and save a frame of this stream"
         class="ma-1 mr-2"
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 969dffa86..f9bdbf133 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -5,11 +5,11 @@ import { CalibrationBoardTypes, type Resolution, type VideoFormat } from "@/type
 import JsPDF from "jspdf";
 import { font as PromptRegular } from "@/assets/fonts/PromptRegular";
 import MonoLogo from "@/assets/images/logoMono.png";
-import CvSlider from "@/components/common/cv-slider.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
 import { useStateStore } from "@/stores/StateStore";
-import CvSwitch from "@/components/common/cv-switch.vue";
-import CvSelect from "@/components/common/cv-select.vue";
-import CvNumberInput from "@/components/common/cv-number-input.vue";
+import PvSwitch from "@/components/common/pv-switch.vue";
+import PvSelect from "@/components/common/pv-select.vue";
+import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 
 const settingsValid = ref(true);
@@ -224,7 +224,7 @@ const endCalibration = () => {
         <v-row>
           <v-col cols="12" md="6">
             <v-form ref="form" v-model="settingsValid">
-              <cv-select
+              <pv-select
                 v-model="useStateStore().calibrationData.videoFormatIndex"
                 label="Resolution"
                 :select-cols="7"
@@ -232,7 +232,7 @@ const endCalibration = () => {
                 tooltip="Resolution to calibrate at (you will have to calibrate every resolution you use 3D mode on)"
                 :items="getUniqueVideoResolutionStrings()"
               />
-              <cv-select
+              <pv-select
                 v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
                 label="Decimation"
                 tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
@@ -242,7 +242,7 @@ const endCalibration = () => {
                   (v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: v }, false)
                 "
               />
-              <cv-select
+              <pv-select
                 v-model="boardType"
                 label="Board Type"
                 tooltip="Calibration board pattern to use"
@@ -250,7 +250,7 @@ const endCalibration = () => {
                 :items="['Chessboard', 'Dotboard']"
                 :disabled="isCalibrating"
               />
-              <cv-number-input
+              <pv-number-input
                 v-model="squareSizeIn"
                 label="Pattern Spacing (in)"
                 tooltip="Spacing between pattern features in inches"
@@ -258,7 +258,7 @@ const endCalibration = () => {
                 :rules="[(v) => v > 0 || 'Size must be positive']"
                 :label-cols="5"
               />
-              <cv-number-input
+              <pv-number-input
                 v-model="patternWidth"
                 label="Board Width (in)"
                 tooltip="Width of the board in dots or chessboard squares"
@@ -266,7 +266,7 @@ const endCalibration = () => {
                 :rules="[(v) => v >= 4 || 'Width must be at least 4']"
                 :label-cols="5"
               />
-              <cv-number-input
+              <pv-number-input
                 v-model="patternHeight"
                 label="Board Height (in)"
                 tooltip="Height of the board in dots or chessboard squares"
@@ -317,7 +317,7 @@ const endCalibration = () => {
         </v-row>
         <v-row v-if="isCalibrating">
           <v-col cols="12" class="pt-0">
-            <cv-slider
+            <pv-slider
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
               :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
               label="Exposure"
@@ -328,7 +328,7 @@ const endCalibration = () => {
               :step="0.1"
               @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraExposure: args }, false)"
             />
-            <cv-slider
+            <pv-slider
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
               label="Brightness"
               :min="0"
@@ -338,7 +338,7 @@ const endCalibration = () => {
                 (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBrightness: args }, false)
               "
             />
-            <cv-switch
+            <pv-switch
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
               class="pt-2"
               label="Auto Exposure"
@@ -348,7 +348,7 @@ const endCalibration = () => {
                 (args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)
               "
             />
-            <cv-slider
+            <pv-slider
               v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
               label="Camera Gain"
@@ -357,7 +357,7 @@ const endCalibration = () => {
               :max="100"
               @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraGain: args }, false)"
             />
-            <cv-slider
+            <pv-slider
               v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
               label="Red AWB Gain"
@@ -366,7 +366,7 @@ const endCalibration = () => {
               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
+            <pv-slider
               v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
               v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
               label="Blue AWB Gain"
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index cc40394b7..844b6d3f6 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CvSelect from "@/components/common/cv-select.vue";
-import CvNumberInput from "@/components/common/cv-number-input.vue";
+import PvSelect from "@/components/common/pv-select.vue";
+import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { ref, watchEffect } from "vue";
@@ -47,7 +47,7 @@ watchEffect(() => {
   <v-card class="mb-3 pr-6 pb-3" color="primary" dark>
     <v-card-title>Camera Settings</v-card-title>
     <div class="ml-5">
-      <cv-select
+      <pv-select
         v-model="useStateStore().currentCameraIndex"
         label="Camera"
         :items="useCameraSettingsStore().cameraNames"
@@ -59,7 +59,7 @@ watchEffect(() => {
           }
         "
       />
-      <cv-number-input
+      <pv-number-input
         v-model="currentFov"
         :tooltip="
           !useCameraSettingsStore().currentCameraSettings.fov.managedByVendor
diff --git a/photon-client/src/components/common/cv-icon.vue b/photon-client/src/components/common/pv-icon.vue
similarity index 100%
rename from photon-client/src/components/common/cv-icon.vue
rename to photon-client/src/components/common/pv-icon.vue
diff --git a/photon-client/src/components/common/cv-input.vue b/photon-client/src/components/common/pv-input.vue
similarity index 96%
rename from photon-client/src/components/common/cv-input.vue
rename to photon-client/src/components/common/pv-input.vue
index a61e2ca14..ff3434132 100644
--- a/photon-client/src/components/common/cv-input.vue
+++ b/photon-client/src/components/common/pv-input.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/photon-client/src/components/common/cv-number-input.vue b/photon-client/src/components/common/pv-number-input.vue
similarity index 94%
rename from photon-client/src/components/common/cv-number-input.vue
rename to photon-client/src/components/common/pv-number-input.vue
index 67237bbb7..8b359a754 100644
--- a/photon-client/src/components/common/cv-number-input.vue
+++ b/photon-client/src/components/common/pv-number-input.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 import { computed } from "vue";
 
 const props = withDefaults(
diff --git a/photon-client/src/components/common/cv-radio.vue b/photon-client/src/components/common/pv-radio.vue
similarity index 94%
rename from photon-client/src/components/common/cv-radio.vue
rename to photon-client/src/components/common/pv-radio.vue
index 33006fe4c..8777f719b 100644
--- a/photon-client/src/components/common/cv-radio.vue
+++ b/photon-client/src/components/common/pv-radio.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/pv-range-slider.vue
similarity index 97%
rename from photon-client/src/components/common/cv-range-slider.vue
rename to photon-client/src/components/common/pv-range-slider.vue
index 936799326..fb23ac947 100644
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/pv-range-slider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/photon-client/src/components/common/cv-select.vue b/photon-client/src/components/common/pv-select.vue
similarity index 96%
rename from photon-client/src/components/common/cv-select.vue
rename to photon-client/src/components/common/pv-select.vue
index cc5ee815e..a681914d4 100644
--- a/photon-client/src/components/common/cv-select.vue
+++ b/photon-client/src/components/common/pv-select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 interface SelectItem {
   name: string | number;
diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/pv-slider.vue
similarity index 96%
rename from photon-client/src/components/common/cv-slider.vue
rename to photon-client/src/components/common/pv-slider.vue
index 74138793c..0fb59d61a 100644
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/photon-client/src/components/common/cv-switch.vue b/photon-client/src/components/common/pv-switch.vue
similarity index 93%
rename from photon-client/src/components/common/cv-switch.vue
rename to photon-client/src/components/common/pv-switch.vue
index 58cd3d6ff..d3115807d 100644
--- a/photon-client/src/components/common/cv-switch.vue
+++ b/photon-client/src/components/common/pv-switch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 import { computed } from "vue";
 
 const props = withDefaults(
diff --git a/photon-client/src/components/common/cv-tooltipped-label.vue b/photon-client/src/components/common/pv-tooltipped-label.vue
similarity index 100%
rename from photon-client/src/components/common/cv-tooltipped-label.vue
rename to photon-client/src/components/common/pv-tooltipped-label.vue
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index adb0fa846..b01b4a4dd 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import CvSelect from "@/components/common/cv-select.vue";
+import PvSelect from "@/components/common/pv-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 PvIcon from "@/components/common/pv-icon.vue";
+import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 
 const changeCurrentCameraIndex = (index: number) => {
@@ -211,14 +211,14 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
   <v-card color="primary">
     <v-row style="padding: 12px 12px 0 24px">
       <v-col cols="10" class="pa-0">
-        <cv-select
+        <pv-select
           v-if="!isCameraNameEdit"
           v-model="useStateStore().currentCameraIndex"
           label="Camera"
           :items="useCameraSettingsStore().cameraNames"
           @input="changeCurrentCameraIndex"
         />
-        <cv-input
+        <pv-input
           v-else
           v-model="currentCameraName"
           class="pt-2"
@@ -230,12 +230,12 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
         />
       </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" />
+        <pv-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
+        <pv-select
           v-if="!isPipelineNameEdit"
           :value="useCameraSettingsStore().currentCameraSettings.currentPipelineIndex"
           label="Pipeline"
@@ -244,7 +244,7 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :items="pipelineNamesWrapper"
           @input="(args) => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
         />
-        <cv-input
+        <pv-input
           v-else
           v-model="currentPipelineName"
           :input-cols="12 - 3"
@@ -262,17 +262,17 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           <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" />
+                <pv-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" />
+                <pv-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" />
+                <pv-icon color="red darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
               </v-list-item-title>
             </v-list-item>
             <v-list-item
@@ -283,7 +283,7 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
               "
             >
               <v-list-item-title>
-                <cv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
+                <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
               </v-list-item-title>
             </v-list-item>
           </v-list>
@@ -292,7 +292,7 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
     </v-row>
     <v-row style="padding: 0 12px 12px 24px">
       <v-col cols="10" class="pa-0">
-        <cv-select
+        <pv-select
           v-model="currentPipelineType"
           label="Type"
           tooltip="Changes the pipeline type, which changes the type of processing that will happen on input frames"
@@ -306,7 +306,7 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
       <v-card dark color="primary">
         <v-card-title> Create New Pipeline </v-card-title>
         <v-card-text>
-          <cv-input
+          <pv-input
             v-model="newPipelineName"
             placeholder="Pipeline Name"
             :label-cols="3"
@@ -314,7 +314,7 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
             label="Pipeline Name"
             :rules="[(v) => checkPipelineName(v)]"
           />
-          <cv-select
+          <pv-select
             v-model="newPipelineType"
             :select-cols="12 - 3"
             label="Tracking Type"
diff --git a/photon-client/src/components/dashboard/tabs/AprilTagTab.vue b/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
index 5da6d959f..fa56016a5 100644
--- a/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
+++ b/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
@@ -1,9 +1,9 @@
 <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 PvSelect from "@/components/common/pv-select.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
+import PvSwitch from "@/components/common/pv-switch.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 
@@ -22,14 +22,14 @@ const interactiveCols = computed(
 
 <template>
   <div v-if="currentPipelineSettings.pipelineType === PipelineType.AprilTag">
-    <cv-select
+    <pv-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
+    <pv-slider
       v-model="currentPipelineSettings.decimate"
       class="pt-2"
       :slider-cols="interactiveCols"
@@ -39,7 +39,7 @@ const interactiveCols = computed(
       :max="8"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ decimate: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.blur"
       class="pt-2"
       :slider-cols="interactiveCols"
@@ -50,7 +50,7 @@ const interactiveCols = computed(
       :step="0.1"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ blur: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.threads"
       class="pt-2"
       :slider-cols="interactiveCols"
@@ -60,14 +60,14 @@ const interactiveCols = computed(
       :max="8"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ threads: value }, false)"
     />
-    <cv-switch
+    <pv-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
+    <pv-slider
       v-model="currentPipelineSettings.decisionMargin"
       class="pt-2 pb-4"
       :slider-cols="interactiveCols"
@@ -77,7 +77,7 @@ const interactiveCols = computed(
       :max="250"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ decisionMargin: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.numIterations"
       class="pt-2 pb-4"
       :slider-cols="interactiveCols"
diff --git a/photon-client/src/components/dashboard/tabs/ArucoTab.vue b/photon-client/src/components/dashboard/tabs/ArucoTab.vue
index 2bef88c7d..13b2807ed 100644
--- a/photon-client/src/components/dashboard/tabs/ArucoTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ArucoTab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
-import CvSlider from "@/components/common/cv-slider.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 
@@ -20,7 +20,7 @@ const interactiveCols = computed(
 
 <template>
   <div v-if="currentPipelineSettings.pipelineType === PipelineType.Aruco">
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.decimate"
       class="pt-2"
       :slider-cols="interactiveCols"
@@ -30,7 +30,7 @@ const interactiveCols = computed(
       :max="8"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ decimate: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.numIterations"
       class="pt-2"
       :slider-cols="interactiveCols"
@@ -41,7 +41,7 @@ const interactiveCols = computed(
       :step="5"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ numIterations: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="currentPipelineSettings.cornerAccuracy"
       class="pt-2"
       :slider-cols="interactiveCols"
diff --git a/photon-client/src/components/dashboard/tabs/ContoursTab.vue b/photon-client/src/components/dashboard/tabs/ContoursTab.vue
index f99e679a3..dfdc65d2c 100644
--- a/photon-client/src/components/dashboard/tabs/ContoursTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ContoursTab.vue
@@ -1,9 +1,9 @@
 <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 PvRangeSlider from "@/components/common/pv-range-slider.vue";
+import PvSelect from "@/components/common/pv-select.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 
@@ -11,7 +11,7 @@ import { useStateStore } from "@/stores/StateStore";
 // 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
+// TODO fix pv-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)
@@ -58,7 +58,7 @@ const interactiveCols = computed(
 
 <template>
   <div>
-    <cv-range-slider
+    <pv-range-slider
       v-model="contourArea"
       label="Area"
       :min="0"
@@ -67,7 +67,7 @@ const interactiveCols = computed(
       :step="0.01"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourArea: value }, false)"
     />
-    <cv-range-slider
+    <pv-range-slider
       v-if="useCameraSettingsStore().currentPipelineType !== PipelineType.ColoredShape"
       v-model="contourRatio"
       label="Ratio (W/H)"
@@ -78,7 +78,7 @@ const interactiveCols = computed(
       :step="0.1"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRatio: value }, false)"
     />
-    <cv-select
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
       label="Target Orientation"
       tooltip="Used to determine how to calculate target landmarks, as well as aspect ratio"
@@ -88,7 +88,7 @@ const interactiveCols = computed(
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
       "
     />
-    <cv-range-slider
+    <pv-range-slider
       v-if="useCameraSettingsStore().currentPipelineType === PipelineType.ColoredShape"
       v-model="contourFullness"
       label="Fullness"
@@ -98,7 +98,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourFullness: value }, false)"
     />
-    <cv-range-slider
+    <pv-range-slider
       v-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape"
       v-model="contourPerimeter"
       label="Perimeter"
@@ -108,7 +108,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourPerimeter: value }, false)"
     />
-    <cv-slider
+    <pv-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"
@@ -120,7 +120,7 @@ const interactiveCols = computed(
       "
     />
     <template v-if="currentPipelineSettings.pipelineType === PipelineType.Reflective">
-      <cv-slider
+      <pv-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"
@@ -130,7 +130,7 @@ const interactiveCols = computed(
         :slider-cols="interactiveCols"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourFilterRangeX: value }, false)"
       />
-      <cv-slider
+      <pv-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"
@@ -140,7 +140,7 @@ const interactiveCols = computed(
         :slider-cols="interactiveCols"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourFilterRangeY: value }, false)"
       />
-      <cv-select
+      <pv-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)"
@@ -148,7 +148,7 @@ const interactiveCols = computed(
         :items="['Single', 'Dual', 'Two or More']"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourGroupingMode: value }, false)"
       />
-      <cv-select
+      <pv-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"
@@ -160,7 +160,7 @@ const interactiveCols = computed(
     </template>
     <template v-else-if="currentPipelineSettings.pipelineType === PipelineType.ColoredShape">
       <v-divider class="mt-3" />
-      <cv-select
+      <pv-select
         v-model="currentPipelineSettings.contourShape"
         label="Target Shape"
         tooltip="The shape of targets to look for"
@@ -168,7 +168,7 @@ const interactiveCols = computed(
         :items="['Circle', 'Polygon', 'Triangle', 'Quadrilateral']"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourShape: value }, false)"
       />
-      <cv-slider
+      <pv-slider
         v-model="currentPipelineSettings.accuracyPercentage"
         :disabled="currentPipelineSettings.contourShape < 1"
         label="Shape Simplification"
@@ -178,7 +178,7 @@ const interactiveCols = computed(
         :slider-cols="interactiveCols"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ accuracyPercentage: value }, false)"
       />
-      <cv-slider
+      <pv-slider
         v-model="currentPipelineSettings.circleDetectThreshold"
         :disabled="currentPipelineSettings.contourShape !== 0"
         label="Circle match distance"
@@ -190,7 +190,7 @@ const interactiveCols = computed(
           (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ circleDetectThreshold: value }, false)
         "
       />
-      <cv-range-slider
+      <pv-range-slider
         v-model="contourRadius"
         :disabled="currentPipelineSettings.contourShape !== 0"
         label="Radius"
@@ -199,7 +199,7 @@ const interactiveCols = computed(
         :slider-cols="interactiveCols"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourRadius: value }, false)"
       />
-      <cv-slider
+      <pv-slider
         v-model="currentPipelineSettings.maxCannyThresh"
         :disabled="currentPipelineSettings.contourShape !== 0"
         label="Max Canny Threshold"
@@ -208,7 +208,7 @@ const interactiveCols = computed(
         :slider-cols="interactiveCols"
         @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ maxCannyThresh: value }, false)"
       />
-      <cv-slider
+      <pv-slider
         v-model="currentPipelineSettings.circleAccuracy"
         :disabled="currentPipelineSettings.contourShape !== 0"
         label="Circle Accuracy"
@@ -219,7 +219,7 @@ const interactiveCols = computed(
       />
       <v-divider class="mt-3" />
     </template>
-    <cv-select
+    <pv-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"
diff --git a/photon-client/src/components/dashboard/tabs/InputTab.vue b/photon-client/src/components/dashboard/tabs/InputTab.vue
index 1780736e0..52cfef129 100644
--- a/photon-client/src/components/dashboard/tabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/InputTab.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import CvSlider from "@/components/common/cv-slider.vue";
+import PvSlider from "@/components/common/pv-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 PvSwitch from "@/components/common/pv-switch.vue";
+import PvSelect from "@/components/common/pv-select.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
@@ -69,7 +69,7 @@ const interactiveCols = computed(
 
 <template>
   <div>
-    <cv-slider
+    <pv-slider
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraExposure"
       :disabled="useCameraSettingsStore().currentCameraSettings.pipelineSettings.cameraAutoExposure"
       label="Exposure"
@@ -80,7 +80,7 @@ const interactiveCols = computed(
       :step="0.1"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraExposure: args }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraBrightness"
       label="Brightness"
       :min="0"
@@ -88,7 +88,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraBrightness: args }, false)"
     />
-    <cv-switch
+    <pv-switch
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraAutoExposure"
       class="pt-2"
       label="Auto Exposure"
@@ -96,7 +96,7 @@ const interactiveCols = computed(
       tooltip="Enables or Disables camera automatic adjustment for current lighting conditions"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraAutoExposure: args }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-if="useCameraSettingsStore().currentPipelineSettings.cameraGain >= 0"
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraGain"
       label="Camera Gain"
@@ -106,7 +106,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ cameraGain: args }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-if="useCameraSettingsStore().currentPipelineSettings.cameraRedGain !== -1"
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraRedGain"
       label="Red AWB Gain"
@@ -116,7 +116,7 @@ const interactiveCols = computed(
       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
+    <pv-slider
       v-if="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain !== -1"
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraBlueGain"
       label="Blue AWB Gain"
@@ -126,7 +126,7 @@ const interactiveCols = computed(
       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
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.inputImageRotationMode"
       label="Orientation"
       tooltip="Rotates the camera stream"
@@ -134,7 +134,7 @@ const interactiveCols = computed(
       :select-cols="interactiveCols"
       @input="(args) => useCameraSettingsStore().changeCurrentPipelineSetting({ inputImageRotationMode: args }, false)"
     />
-    <cv-select
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.cameraVideoModeIndex"
       label="Resolution"
       tooltip="Resolution and FPS the camera should directly capture at"
@@ -142,7 +142,7 @@ const interactiveCols = computed(
       :select-cols="interactiveCols"
       @input="(args) => handleResolutionChange(args)"
     />
-    <cv-select
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
       label="Stream Resolution"
       tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
diff --git a/photon-client/src/components/dashboard/tabs/OutputTab.vue b/photon-client/src/components/dashboard/tabs/OutputTab.vue
index ab9def29e..5116b6ee3 100644
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import CvSelect from "@/components/common/cv-select.vue";
+import PvSelect from "@/components/common/pv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
-import CvSwitch from "@/components/common/cv-switch.vue";
+import PvSwitch from "@/components/common/pv-switch.vue";
 import { computed, getCurrentInstance } from "vue";
 import { RobotOffsetType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
@@ -53,7 +53,7 @@ const interactiveCols = computed(
 
 <template>
   <div>
-    <cv-select
+    <pv-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)"
@@ -63,7 +63,7 @@ const interactiveCols = computed(
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
       "
     />
-    <cv-select
+    <pv-select
       v-if="!isTagPipeline"
       v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOrientation"
       label="Target Orientation"
@@ -74,7 +74,7 @@ const interactiveCols = computed(
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
       "
     />
-    <cv-switch
+    <pv-switch
       v-model="useCameraSettingsStore().currentPipelineSettings.outputShowMultipleTargets"
       label="Show Multiple Targets"
       tooltip="If enabled, up to five targets will be displayed and sent via PhotonLib, instead of just one"
@@ -124,7 +124,7 @@ const interactiveCols = computed(
         </td>
       </tr>
     </table>
-    <cv-select
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode"
       label="Robot Offset Mode"
       tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
diff --git a/photon-client/src/components/dashboard/tabs/PnPTab.vue b/photon-client/src/components/dashboard/tabs/PnPTab.vue
index e129759b8..dddf4b072 100644
--- a/photon-client/src/components/dashboard/tabs/PnPTab.vue
+++ b/photon-client/src/components/dashboard/tabs/PnPTab.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import CvSelect from "@/components/common/cv-select.vue";
+import PvSelect from "@/components/common/pv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { TargetModel } from "@/types/PipelineTypes";
-import CvSlider from "@/components/common/cv-slider.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
 import { computed, getCurrentInstance } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 
@@ -17,7 +17,7 @@ const interactiveCols = computed(
 
 <template>
   <div>
-    <cv-select
+    <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.targetModel"
       label="Target Model"
       :items="[
@@ -34,7 +34,7 @@ const interactiveCols = computed(
       :select-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ targetModel: value }, false)"
     />
-    <cv-slider
+    <pv-slider
       v-model="useCameraSettingsStore().currentPipelineSettings.cornerDetectionAccuracyPercentage"
       class="pt-2"
       :slider-cols="interactiveCols"
diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
index 5ac8deab9..bfcab45d6 100644
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -1,8 +1,8 @@
 <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 PvRangeSlider from "@/components/common/pv-range-slider.vue";
+import PvSwitch from "@/components/common/pv-switch.vue";
 import { useStateStore } from "@/stores/StateStore";
 import { ColorPicker, type HSV } from "@/lib/ColorPicker";
 
@@ -16,7 +16,7 @@ const averageHue = computed<number>(() => {
   return val;
 });
 
-// TODO fix cv-range-slider so that store access doesn't need to be deferred
+// TODO fix pv-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)
@@ -135,7 +135,7 @@ const interactiveCols = computed(
 
 <template>
   <div class="threshold-modifiers" :style="{ '--averageHue': averageHue }">
-    <cv-range-slider
+    <pv-range-slider
       id="hue-slider"
       v-model="hsvHue"
       :class="useCameraSettingsStore().currentPipelineSettings.hueInverted ? 'inverted-slider' : 'normal-slider'"
@@ -147,7 +147,7 @@ const interactiveCols = computed(
       :inverted="useCameraSettingsStore().currentPipelineSettings.hueInverted"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ hsvHue: value }, false)"
     />
-    <cv-range-slider
+    <pv-range-slider
       id="sat-slider"
       v-model="hsvSaturation"
       class="normal-slider"
@@ -158,7 +158,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ hsvSaturation: value }, false)"
     />
-    <cv-range-slider
+    <pv-range-slider
       id="value-slider"
       v-model="hsvValue"
       class="normal-slider"
@@ -169,7 +169,7 @@ const interactiveCols = computed(
       :slider-cols="interactiveCols"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ hsvValue: value }, false)"
     />
-    <cv-switch
+    <pv-switch
       v-model="useCameraSettingsStore().currentPipelineSettings.hueInverted"
       label="Invert Hue"
       :switch-cols="interactiveCols"
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
index f18db799b..157bb6b7b 100644
--- a/photon-client/src/components/settings/DeviceControlCard.vue
+++ b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import CvSelect from "@/components/common/cv-select.vue";
+import PvSelect from "@/components/common/pv-select.vue";
 import axios from "axios";
 
 const restartProgram = () => {
@@ -248,8 +248,8 @@ const handleSettingsImport = () => {
               <v-card-title>Import Settings</v-card-title>
               <v-card-text>
                 Upload and apply previously saved or exported PhotonVision settings to this device
-                <v-row class="mt-6 ml-4 mr-8">
-                  <cv-select
+                <v-row class="mt-6 ml-4">
+                  <pv-select
                     v-model="importType"
                     label="Type"
                     tooltip="Select the type of settings file you are trying to upload"
diff --git a/photon-client/src/components/settings/LEDControlCard.vue b/photon-client/src/components/settings/LEDControlCard.vue
index 2a8a86c49..646c80940 100644
--- a/photon-client/src/components/settings/LEDControlCard.vue
+++ b/photon-client/src/components/settings/LEDControlCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CvSlider from "@/components/common/cv-slider.vue";
+import PvSlider from "@/components/common/pv-slider.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 </script>
 
@@ -7,7 +7,7 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
   <v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
     <v-card-title>LED Control</v-card-title>
     <div class="ml-5">
-      <cv-slider
+      <pv-slider
         v-model="useSettingsStore().lighting.brightness"
         label="Brightness"
         class="pt-2"
diff --git a/photon-client/src/components/settings/MetricsCard.vue b/photon-client/src/components/settings/MetricsCard.vue
index 081e26cd7..e79b3f031 100644
--- a/photon-client/src/components/settings/MetricsCard.vue
+++ b/photon-client/src/components/settings/MetricsCard.vue
@@ -2,7 +2,7 @@
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { computed, onBeforeMount, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import CvIcon from "@/components/common/cv-icon.vue";
+import PvIcon from "@/components/common/pv-icon.vue";
 
 interface MetricItem {
   header: string;
@@ -100,7 +100,7 @@ onBeforeMount(() => {
   <v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
     <v-card-title style="display: flex; justify-content: space-between">
       <span>Stats</span>
-      <cv-icon icon-name="mdi-reload" color="white" tooltip="Reload Metrics" hover @click="fetchMetrics" />
+      <pv-icon icon-name="mdi-reload" color="white" tooltip="Reload Metrics" hover @click="fetchMetrics" />
     </v-card-title>
     <v-row class="pt-2 pa-4 ma-0 ml-5 pb-1">
       <v-card-subtitle class="ma-0 pa-0 pb-2" style="font-size: 16px"> General Metrics </v-card-subtitle>
diff --git a/photon-client/src/components/settings/NetworkingCard.vue b/photon-client/src/components/settings/NetworkingCard.vue
index 93bb33016..0a81f6b39 100644
--- a/photon-client/src/components/settings/NetworkingCard.vue
+++ b/photon-client/src/components/settings/NetworkingCard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { computed, ref } from "vue";
-import CvInput from "@/components/common/cv-input.vue";
-import CvRadio from "@/components/common/cv-radio.vue";
-import CvSwitch from "@/components/common/cv-switch.vue";
-import CvSelect from "@/components/common/cv-select.vue";
+import PvInput from "@/components/common/pv-input.vue";
+import PvRadio from "@/components/common/pv-radio.vue";
+import PvSwitch from "@/components/common/pv-switch.vue";
+import PvSelect from "@/components/common/pv-select.vue";
 import { NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 
@@ -89,7 +89,7 @@ const currentNetworkInterfaceIndex = computed<number>({
     <v-card-title>Networking</v-card-title>
     <div class="ml-5">
       <v-form ref="form" v-model="settingsValid">
-        <cv-input
+        <pv-input
           v-model="useSettingsStore().network.ntServerAddress"
           label="Team Number/NetworkTables Server Address"
           tooltip="Enter the Team Number or the IP address of the NetworkTables Server"
@@ -114,7 +114,7 @@ const currentNetworkInterfaceIndex = computed<number>({
         >
           The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect.
         </v-banner>
-        <cv-radio
+        <pv-radio
           v-model="useSettingsStore().network.connectionType"
           label="IP Assignment Mode"
           tooltip="DHCP will make the radio (router) automatically assign an IP address; this may result in an IP address that changes across reboots. Static IP assignment means that you pick the IP address and it won't change."
@@ -122,7 +122,7 @@ const currentNetworkInterfaceIndex = computed<number>({
           :list="['DHCP', 'Static']"
           :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
         />
-        <cv-input
+        <pv-input
           v-if="useSettingsStore().network.connectionType === NetworkConnectionType.Static"
           v-model="useSettingsStore().network.staticIp"
           :input-cols="12 - 4"
@@ -130,7 +130,7 @@ const currentNetworkInterfaceIndex = computed<number>({
           :rules="[(v) => isValidIPv4(v) || 'Invalid IPv4 address']"
           :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
         />
-        <cv-input
+        <pv-input
           v-model="useSettingsStore().network.hostname"
           label="Hostname"
           :input-cols="12 - 4"
@@ -139,7 +139,7 @@ const currentNetworkInterfaceIndex = computed<number>({
         />
         <v-divider class="pb-3" />
         <span style="font-weight: 700">Advanced Networking</span>
-        <cv-switch
+        <pv-switch
           v-model="useSettingsStore().network.shouldManage"
           :disabled="!useSettingsStore().network.canManage"
           label="Manage Device Networking"
@@ -147,7 +147,7 @@ const currentNetworkInterfaceIndex = computed<number>({
           :label-cols="4"
           class="pt-2"
         />
-        <cv-select
+        <pv-select
           v-model="currentNetworkInterfaceIndex"
           label="NetworkManager interface"
           :disabled="!(useSettingsStore().network.shouldManage && useSettingsStore().network.canManage)"
@@ -168,7 +168,7 @@ const currentNetworkInterfaceIndex = computed<number>({
         >
           Photon cannot detect any wired connections! Please send program logs to the developers for help.
         </v-banner>
-        <cv-switch
+        <pv-switch
           v-model="useSettingsStore().network.runNTServer"
           label="Run NetworkTables Server (Debugging Only)"
           tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."