From 19b57235fec16741835339878ce3f4193bfb32f4 Mon Sep 17 00:00:00 2001
From: Declan Freeman-Gleason <declanfreemangleason@gmail.com>
Date: Fri, 31 Jul 2020 13:50:50 -0700
Subject: [PATCH] UI bug fixes and feature refinements (#59)

* Rework settings page; touch up contour, output, and 3D tabs; font sizing

No stream placeholder; driver mode refined; cameras page

Make settings snackbar work

Lint fix

Fix settings page padding

Actually hide settings fields if unsupported

* Make toggle buttons less confusing; fix driver toggle; form validation

* Make eyedropper work and make input/select styling more consistent

* Fix color picker and tabbing bugs

* Set up camera and settings pages to talk to the backend

* Add auto reconnect

* Add lots of tooltips and improve related thematic consistency

* Only show output stream while color picking

* Unbreak robot offset

* Increase tooltip delay and refactor tooltip label into a component

* Remove toggle button switching behavior

* Fix PnP tab and add a flag to disable FOV configuration

* Move FPS indicator

* Make GPU acceleration status use one value in the store

* Only allow IPv4 static IPs and remove accidentally committed index
---
 photon-client/package-lock.json               |   5 +-
 photon-client/package.json                    |   2 +-
 photon-client/src/App.vue                     | 102 +++++-
 photon-client/src/assets/eyedropper.svg       |  68 ++++
 photon-client/src/assets/noStream.jpg         | Bin 0 -> 49594 bytes
 .../src/components/common/cv-image.vue        |  31 +-
 .../src/components/common/cv-input.vue        |  24 +-
 .../src/components/common/cv-number-input.vue |  19 +-
 .../src/components/common/cv-range-slider.vue |  25 +-
 .../src/components/common/cv-select.vue       |  16 +-
 .../src/components/common/cv-slider.vue       |  13 +-
 .../src/components/common/cv-switch.vue       |  41 ++-
 .../components/common/cv-tooltipped-label.vue |  26 ++
 .../src/components/pipeline/3D/MiniMap.vue    |   9 +-
 .../pipeline/CameraAndPipelineSelect.vue      |  20 +-
 .../pipeline/OutputTab/DualCalibration.vue    |  21 +-
 .../pipeline/OutputTab/SingleCalibration.vue  |  12 +-
 photon-client/src/main.js                     |   9 +-
 photon-client/src/plugins/ColorPicker.js      |  12 +-
 photon-client/src/router.js                   |   5 +
 photon-client/src/store/index.js              |  42 ++-
 .../Cameras.vue => CamerasView.vue}           | 313 ++++++++++--------
 photon-client/src/views/PipelineView.vue      | 113 +++++--
 .../src/views/PipelineViews/ContoursTab.vue   |  24 +-
 .../src/views/PipelineViews/InputTab.vue      |   6 +
 .../src/views/PipelineViews/OutputTab.vue     |  32 +-
 .../src/views/PipelineViews/PnPTab.vue        |   8 +-
 .../src/views/PipelineViews/TargetsTab.vue    |  19 +-
 .../src/views/PipelineViews/ThresholdTab.vue  | 118 ++++---
 photon-client/src/views/SettingsView.vue      | 124 ++++---
 .../src/views/SettingsViews/General.vue       | 260 ++++++---------
 .../src/views/SettingsViews/Lighting.vue      |  37 +++
 .../src/views/SettingsViews/Networking.vue    | 107 ++++++
 .../src/main/resources/web/index.html         |   2 +-
 34 files changed, 1099 insertions(+), 566 deletions(-)
 create mode 100644 photon-client/src/assets/eyedropper.svg
 create mode 100644 photon-client/src/assets/noStream.jpg
 create mode 100644 photon-client/src/components/common/cv-tooltipped-label.vue
 rename photon-client/src/views/{SettingsViews/Cameras.vue => CamerasView.vue} (58%)
 create mode 100644 photon-client/src/views/SettingsViews/Lighting.vue
 create mode 100644 photon-client/src/views/SettingsViews/Networking.vue

diff --git a/photon-client/package-lock.json b/photon-client/package-lock.json
index f5f9bbaa8..7d9e8eaca 100644
--- a/photon-client/package-lock.json
+++ b/photon-client/package-lock.json
@@ -12282,9 +12282,8 @@
       }
     },
     "vue-native-websocket": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/vue-native-websocket/-/vue-native-websocket-2.0.14.tgz",
-      "integrity": "sha512-oK8+xG1gmqRs4JngHGwEc4zWoRjsdMB20Sz8pemkh4lW2Vr2676/cDRtd30aGnO2xF7Oxf003wS5JO0kypUsCw==",
+      "version": "git+https://github.com/PhotonVision/vue-native-websocket.git#7a327918e03b215b6899b0d648c5130ece1fa912",
+      "from": "git+https://github.com/PhotonVision/vue-native-websocket.git#7a32791",
       "dependencies": {
         "abbrev": {
           "version": "1.0.9",
diff --git a/photon-client/package.json b/photon-client/package.json
index 3acef2efc..eb03563c0 100644
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -17,7 +17,7 @@
     "msgpack5": "^4.2.1",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
-    "vue-native-websocket": "^2.0.14",
+    "vue-native-websocket": "git+https://github.com/PhotonVision/vue-native-websocket.git#7a32791",
     "vue-router": "^3.3.2",
     "vuetify": "^2.2.34",
     "vuex": "^3.4.0"
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index 71b073edf..a0411a0a0 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -25,11 +25,10 @@
           </v-list-item-icon>
         </v-list-item>
 
-        <v-divider />
-
         <v-list-item
           link
           to="dashboard"
+          @click="rollbackPipelineIndex()"
         >
           <v-list-item-icon>
             <v-icon>mdi-view-dashboard</v-icon>
@@ -38,11 +37,22 @@
             <v-list-item-title>Dashboard</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+        <v-list-item
+          link
+          to="cameras"
+          @click="switchToDriverMode()"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-camera</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Cameras</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
         <v-list-item
           link
           to="settings"
         >
-          <!-- TODO: Expandable sub-elements? -->
           <v-list-item-icon>
             <v-icon>mdi-settings</v-icon>
           </v-list-item-icon>
@@ -79,6 +89,24 @@
             <v-list-item-title>Advanced Mode</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+
+        <v-list-item style="position: absolute; bottom: 0; left: 0;">
+          <v-list-item-icon>
+            <v-icon v-if="$store.state.backendConnected">
+              mdi-wifi
+            </v-icon>
+            <v-icon
+              v-else
+              class="pulse"
+              style="border-radius: 100%;"
+            >
+              mdi-wifi-off
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ $store.state.backendConnected ? "Connected" : "Trying to connect..." }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
     <v-content>
@@ -123,6 +151,8 @@
             logView
         },
         data: () => ({
+            // Used so that we can switch back to the previously selected pipeline after camera calibration
+            previouslySelectedIndex: null,
             timer: undefined,
             isLogger: false,
             log: "",
@@ -138,11 +168,16 @@
             },
             compact: {
                 get() {
-                    return this.$store.state.compactMode === undefined ? this.$vuetify.breakpoint.smAndDown : this.$store.state.compactMode || this.$vuetify.breakpoint.smAndDown;
+                    if (this.$store.state.compactMode === undefined) {
+                      return this.$vuetify.breakpoint.smAndDown;
+                    } else {
+                      return this.$store.state.compactMode || this.$vuetify.breakpoint.smAndDown;
+                    }
                 },
                 set(value) {
                     // compactMode is the user's preference for compact mode; it overrides screen size
                     this.$store.commit("compactMode", value);
+                    localStorage.setItem("compactMode", value);
                 },
             }
         },
@@ -165,6 +200,7 @@
 
                 }
             });
+
             this.$options.sockets.onmessage = (data) => {
                 try {
                     let message = this.$msgPack.decode(data.data);
@@ -176,13 +212,24 @@
                 } catch (error) {
                     console.error('error: ' + data.data + " , " + error);
                 }
+            };
+            this.$options.sockets.onopen = () => {
+              this.$store.state.backendConnected = true;
+            };
+
+            let closed = () => {
+              this.$store.state.backendConnected = false;
             }
+            this.$options.sockets.onclose = closed;
+            this.$options.sockets.onerror = closed;
+
+            this.$connect();
         },
         methods: {
             handleMessage(key, value) {
                 if (key === "logMessage") {
-                    console.log(value)
-                    this.logMessage(value, 0)
+                    console.log("[FROM BACKEND]" + value);
+                    this.logMessage(value, 0);
                 } else if (key === "updatePipelineResult") {
                     this.$store.commit('mutatePipelineResults', value)
                 } else if (this.$store.state.hasOwnProperty(key)) {
@@ -192,7 +239,7 @@
                 } else {
                     switch (key) {
                         default: {
-                            console.log(value);
+                            console.error("Unknown message from backend: " + value);
                         }
                     }
                 }
@@ -215,6 +262,16 @@
                 const colors = ["\u001b[31m", "\u001b[32m", "\u001b[33m", "\u001b[34m"]
                 const reset = "\u001b[0m"
                 this.log += `${colors[level]}${message}${reset}\n`
+            },
+            switchToDriverMode() {
+                this.previouslySelectedIndex = this.$store.getters.currentPipelineIndex;
+                this.handleInputWithIndex('currentPipeline', -1)
+            },
+            rollbackPipelineIndex() {
+                if (this.previouslySelectedIndex !== null) {
+                  this.handleInputWithIndex('currentPipeline', this.previouslySelectedIndex)
+                }
+                this.previouslySelectedIndex = null;
             }
         }
     };
@@ -225,6 +282,21 @@
 </style>
 
 <style>
+    .pulse {
+        animation: pulse-animation 2s infinite;
+    }
+
+    @keyframes pulse-animation {
+        0% {
+          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+        100% {
+          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+          background-color: rgba(0, 0, 0, 0);
+        }
+    }
+
     .logo {
         width: 100%;
         height: 70px;
@@ -274,6 +346,20 @@
 <style>
   /* Hack */
   .v-divider {
-    border-color: #23add9 !important;
+    border-color: white !important;
+  }
+
+  .v-input {
+    font-size: 1rem !important;
+  }
+</style>
+
+<style lang="scss">
+  @import '~vuetify/src/styles/settings/_variables';
+
+  @media #{map-get($display-breakpoints, 'md-and-down')} {
+    html {
+      font-size: 14px !important;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/photon-client/src/assets/eyedropper.svg b/photon-client/src/assets/eyedropper.svg
new file mode 100644
index 000000000..1736213b9
--- /dev/null
+++ b/photon-client/src/assets/eyedropper.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   id="svg865"
+   sodipodi:docname="eyedropper.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata871">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs869" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1916"
+     inkscape:window-height="1040"
+     id="namedview867"
+     showgrid="false"
+     inkscape:zoom="35.541667"
+     inkscape:cx="12.112544"
+     inkscape:cy="10.171169"
+     inkscape:window-x="0"
+     inkscape:window-y="1458"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg865" />
+  <g
+     id="g905"
+     inkscape:export-xdpi="77.2733"
+     inkscape:export-ydpi="77.2733">
+    <path
+       inkscape:connector-curvature="0"
+       id="path863"
+       d="m 12.28,19.4725 -2.13,-2.13 1.42,-1.41 -7.71,-7.71 -1.86,-4.6 1.5,-1.5 4.6,1.86 7.71,7.71 1.41,-1.42 2.13,2.13 -7.07,7.07 m 8.72,-2.59 c 1.17,1.17 1.17,3.07 0,4.24 -1.17,1.17 -3.07,1.17 -4.24,0 l -1.92,-1.92 4.24,-4.24 1.92,1.92 m -14.03,-11.2 -2.47,-1.06 1.06,2.47 7.44,7.43 1.4,-1.4 z" />
+    <path
+       inkscape:export-ydpi="161.91951"
+       inkscape:export-xdpi="161.91951"
+       d="m 3.5996094,2.6132812 -1.109375,1.109375 1.7246094,4.2636719 7.6503902,7.6503909 a 0.41783994,0.41783994 0 0 1 0,0.591797 l -1.123046,1.115234 1.537109,1.539062 6.480469,-6.480468 -1.53711,-1.53711 -1.115234,1.123047 a 0.41783994,0.41783994 0 0 1 -0.591797,0 L 7.8652344,4.3378906 Z m 0.9101562,1.5917969 a 0.41783994,0.41783994 0 0 1 0.1542969,0.033203 L 7.1347656,5.296875 a 0.41783994,0.41783994 0 0 1 0.1308594,0.089844 l 7.429687,7.4414062 a 0.41783994,0.41783994 0 0 1 0,0.589844 l -1.40039,1.40039 a 0.41783994,0.41783994 0 0 1 -0.589844,0 L 5.265625,7.3867188 A 0.41783994,0.41783994 0 0 1 5.1757812,7.2558594 L 4.1152344,4.7871094 A 0.41783994,0.41783994 0 0 1 4.5097656,4.2050781 Z m 14.5703124,11.3476559 -3.65039,3.650391 1.625,1.625 c 1.010062,1.010062 2.640328,1.010062 3.65039,0 1.010062,-1.010062 1.010062,-2.640327 0,-3.650391 z"
+       id="path889"
+       style="fill:#ffffff;stroke-width:21.16535378;stroke-miterlimit:4;stroke-dasharray:none"
+       inkscape:original="M 3.5 2.1230469 L 2 3.6230469 L 3.859375 8.2226562 L 11.570312 15.931641 L 10.150391 17.341797 L 12.279297 19.472656 L 19.349609 12.402344 L 17.220703 10.273438 L 15.810547 11.693359 L 8.0996094 3.9824219 L 3.5 2.1230469 z M 4.5 4.6230469 L 6.9707031 5.6816406 L 14.400391 13.123047 L 13 14.523438 L 5.5605469 7.0917969 L 4.5 4.6230469 z M 19.080078 14.962891 L 14.839844 19.203125 L 16.759766 21.123047 C 17.929766 22.293047 19.83 22.293047 21 21.123047 C 22.17 19.953047 22.17 18.052813 21 16.882812 L 19.080078 14.962891 z "
+       inkscape:radius="-0.41779816"
+       sodipodi:type="inkscape:offset" />
+  </g>
+</svg>
diff --git a/photon-client/src/assets/noStream.jpg b/photon-client/src/assets/noStream.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b3b4f09b2a4aceb3d4ae511f13436a31e54c1973
GIT binary patch
literal 49594
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

literal 0
HcmV?d00001

diff --git a/photon-client/src/components/common/cv-image.vue b/photon-client/src/components/common/cv-image.vue
index 199665297..a044a3563 100644
--- a/photon-client/src/components/common/cv-image.vue
+++ b/photon-client/src/components/common/cv-image.vue
@@ -1,8 +1,9 @@
 <template>
   <img
-    id="CameraStream"
+    :id="id"
+    crossOrigin="anonymous"
     :style="styleObject"
-    :src="address"
+    :src="src"
     alt=""
     @click="e => $emit('click', e)"
   >
@@ -11,20 +12,24 @@
 <script>
     export default {
         name: "CvImage",
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl'],
-        data: () => {
-            return {}
-        },
+        // eslint-disable-next-line vue/require-prop-types
+        props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
         computed: {
             styleObject: {
                 get() {
                     let ret = {
+                      "border-radius": "3px",
+                      "display": "block",
                       "object-fit": "contain",
+                      "object-position": "50% 50%",
+                      "max-width": "100%",
+                      "margin-left": "auto",
+                      "margin-right": "auto",
                       "max-height": this.maxHeight,
-                      width: `${this.scale}%`,
                       height: `${this.scale}%`,
+                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "") + "default",
                     };
+                    console.log(ret);
 
                     if (this.$vuetify.breakpoint.xl) {
                       ret["max-height"] = this.maxHeightXl;
@@ -34,8 +39,12 @@
 
                     return ret;
                 }
-
-            }
-        }
+            },
+            src: {
+              get() {
+                return this.disconnected ? require("../../assets/noStream.jpg") : this.address;
+              },
+            },
+        },
     }
 </script>
\ No newline at end of file
diff --git a/photon-client/src/components/common/cv-input.vue b/photon-client/src/components/common/cv-input.vue
index 52d641c97..8675035eb 100644
--- a/photon-client/src/components/common/cv-input.vue
+++ b/photon-client/src/components/common/cv-input.vue
@@ -4,16 +4,22 @@
       dense
       align="center"
     >
-      <v-col cols="4">
-        <span class="ml-2">{{ name }}</span>
+      <v-col :cols="12 - (inputCols || 8)">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
-      <v-col cols="8">
+      <v-col :cols="inputCols || 8">
         <v-text-field
           v-model="localValue"
           dark
           dense
+          color="accent"
           :disabled="disabled"
           :error-messages="errorMessage"
+          :rules="rules"
+          class="mt-1 pt-2"
           @keydown="handleKeyboard"
         />
       </v-col>
@@ -22,10 +28,15 @@
 </template>
 s
 <script>
+    import TooltippedLabel from "./cv-tooltipped-label";
+
     export default {
         name: 'Input',
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'disabled', 'errorMessage'],
+        components: {
+          TooltippedLabel
+        },
+        // eslint-disable-next-line vue/require-prop-types
+        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'rules', 'tooltip'],
         data() {
             return {}
         },
@@ -49,6 +60,5 @@ s
     }
 </script>
 
-<style lang="" scoped>
-
+<style lang="css" scoped>
 </style>
\ No newline at end of file
diff --git a/photon-client/src/components/common/cv-number-input.vue b/photon-client/src/components/common/cv-number-input.vue
index f0bbc39d2..efbbfe43d 100644
--- a/photon-client/src/components/common/cv-number-input.vue
+++ b/photon-client/src/components/common/cv-number-input.vue
@@ -4,8 +4,11 @@
       dense
       align="center"
     >
-      <v-col :cols="2">
-        <span>{{ name }}</span>
+      <v-col :cols="labelCols || 2">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
       <v-col>
         <v-text-field
@@ -14,9 +17,11 @@
           class="mt-0 pt-0"
           hide-details
           single-line
+          color="accent"
           type="number"
           style="width: 70px"
           :step="step"
+          :rules="rules"
         />
       </v-col>
     </v-row>
@@ -24,13 +29,15 @@
 </template>
 
 <script>
+    import TooltippedLabel from "./cv-tooltipped-label";
+
     export default {
         name: 'NumberInput',
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'step'],
-        data() {
-            return {}
+        components: {
+            TooltippedLabel,
         },
+      // eslint-disable-next-line vue/require-prop-types
+        props: ['name', 'value', 'step', 'labelCols', 'rules', 'tooltip'],
         computed: {
             localValue: {
                 get() {
diff --git a/photon-client/src/components/common/cv-range-slider.vue b/photon-client/src/components/common/cv-range-slider.vue
index 7180e29f1..7253c9ee3 100644
--- a/photon-client/src/components/common/cv-range-slider.vue
+++ b/photon-client/src/components/common/cv-range-slider.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
-    <v-row dense align="center">
-      <v-col :cols="2">
-        <span>{{ name }}</span>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col cols="2">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
-      <v-col :cols="10">
+      <v-col cols="10">
         <v-range-slider
           :value="localValue"
           :max="max"
@@ -12,7 +18,7 @@
           hide-details
           class="align-center"
           dark
-          color="#ffd843"
+          color="accent"
           :step="step"
           @input="handleInput"
           @mousedown="$emit('rollback', localValue)"
@@ -20,6 +26,7 @@
           <template v-slot:prepend>
             <v-text-field
               dark
+              color="accent"
               :value="localValue[0]"
               :max="max"
               :min="min"
@@ -38,6 +45,7 @@
           <template v-slot:append>
             <v-text-field
               dark
+              color="accent"
               :value="localValue[1]"
               :max="max"
               :min="min"
@@ -59,10 +67,15 @@
 </template>
 
 <script>
+import TooltippedLabel from "./cv-tooltipped-label";
+
 export default {
   name: "RangeSlider",
+  components: {
+    TooltippedLabel,
+  },
   // eslint-disable-next-line vue/require-prop-types
-  props: ["name", "min", "max", "value", "step"],
+  props: ["name", "min", "max", "value", "step", "tooltip"],
   data() {
     return {
       prependFocused: false,
diff --git a/photon-client/src/components/common/cv-select.vue b/photon-client/src/components/common/cv-select.vue
index 93b548c43..145bf1779 100644
--- a/photon-client/src/components/common/cv-select.vue
+++ b/photon-client/src/components/common/cv-select.vue
@@ -5,7 +5,10 @@
       align="center"
     >
       <v-col :cols="12 - (selectCols || 9)">
-        <span>{{ name }}</span>
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
       <v-col :cols="selectCols || 9">
         <v-select
@@ -17,6 +20,7 @@
           color="accent"
           item-color="secondary"
           :disabled="disabled"
+          :rules="rules"
           @change="$emit('rollback', localValue)"
         />
       </v-col>
@@ -25,13 +29,15 @@
 </template>
 
 <script>
+import TooltippedLabel from "./cv-tooltipped-label";
+
     export default {
         name: 'Select',
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['list', 'name', 'value', 'disabled', 'selectCols'],
-        data() {
-            return {}
+        components: {
+            TooltippedLabel,
         },
+      // eslint-disable-next-line vue/require-prop-types
+        props: ['list', 'name', 'value', 'disabled', 'selectCols', 'rules', 'tooltip'],
         computed: {
             localValue: {
                 get() {
diff --git a/photon-client/src/components/common/cv-slider.vue b/photon-client/src/components/common/cv-slider.vue
index 015d4254c..ecb5a5d2c 100644
--- a/photon-client/src/components/common/cv-slider.vue
+++ b/photon-client/src/components/common/cv-slider.vue
@@ -5,7 +5,10 @@
       align="center"
     >
       <v-col :cols="12 - (sliderCols || 8)">
-        <span>{{ name }}</span>
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
       <v-col :cols="sliderCols || 8">
         <v-slider
@@ -27,6 +30,7 @@
           <template v-slot:append>
             <v-text-field
               dark
+              color="accent"
               :max="max"
               :min="min"
               :disabled="disabled"
@@ -49,10 +53,15 @@
 </template>
 
 <script>
+import TooltippedLabel from "./cv-tooltipped-label";
+
 export default {
   name: "Slider",
+  components: {
+    TooltippedLabel,
+  },
   // eslint-disable-next-line vue/require-prop-types
-  props: ["min", "max", "name", "value", "step", "sliderCols", "disabled"],
+  props: ["min", "max", "name", "value", "step", "sliderCols", "disabled", "tooltip"],
   data() {
     return {
       isFocused: false,
diff --git a/photon-client/src/components/common/cv-switch.vue b/photon-client/src/components/common/cv-switch.vue
index 0128c9abd..69b080233 100644
--- a/photon-client/src/components/common/cv-switch.vue
+++ b/photon-client/src/components/common/cv-switch.vue
@@ -4,10 +4,13 @@
       dense
       align="center"
     >
-      <v-col :cols="2">
-        <span>{{ name }}</span>
+      <v-col :cols="textCols || 2">
+        <tooltipped-label
+          :tooltip="tooltip"
+          :text="name"
+        />
       </v-col>
-      <v-col>
+      <v-col :cols="12 - (textCols || 2)">
         <v-switch
           v-model="localValue"
           dark
@@ -21,24 +24,26 @@
 </template>
 
 <script>
-    export default {
-        name: 'CVSwitch',
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'disabled'],
-        data() {
-            return {}
-        },
-        computed: {
-            localValue: {
-                get() {
-                    return this.value;
-                },
-                set(value) {
-                    this.$emit('input', value)
-                }
+import TooltippedLabel from "./cv-tooltipped-label";
+
+export default {
+    name: 'CVSwitch',
+    components: {
+        TooltippedLabel,
+    },
+  // eslint-disable-next-line vue/require-prop-types
+    props: ['name', 'value', 'disabled', 'textCols', 'tooltip'],
+    computed: {
+        localValue: {
+            get() {
+                return this.value;
+            },
+            set(value) {
+                this.$emit('input', value)
             }
         }
     }
+}
 </script>
 
 <style lang="" scoped>
diff --git a/photon-client/src/components/common/cv-tooltipped-label.vue b/photon-client/src/components/common/cv-tooltipped-label.vue
new file mode 100644
index 000000000..36766ef64
--- /dev/null
+++ b/photon-client/src/components/common/cv-tooltipped-label.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-tooltip
+      :disabled="tooltip === undefined"
+      right
+      open-delay="600"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <span
+          style="cursor: text !important;"
+          v-bind="attrs"
+          v-on="on"
+        >{{ text }}</span>
+      </template>
+      <span>{{ tooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'TooltippedLabel',
+        // eslint-disable-next-line vue/require-prop-types
+        props: ['text', 'tooltip'],
+    }
+</script>
\ No newline at end of file
diff --git a/photon-client/src/components/pipeline/3D/MiniMap.vue b/photon-client/src/components/pipeline/3D/MiniMap.vue
index f9bd1a4fd..c513f2ca9 100644
--- a/photon-client/src/components/pipeline/3D/MiniMap.vue
+++ b/photon-client/src/components/pipeline/3D/MiniMap.vue
@@ -24,9 +24,9 @@
         name: "MiniMap",
         props: {
           // eslint-disable-next-line vue/require-default-prop
-            targets: Array,
+          targets: Array,
           // eslint-disable-next-line vue/require-default-prop
-            horizontalFOV: Number
+          horizontalFOV: Number
         },
         data() {
             return {
@@ -75,7 +75,6 @@
 
             this.$nextTick(function () {
                 this.drawPlayer();
-
             });
         },
         methods: {
@@ -88,8 +87,8 @@
             },
             drawTarget(index, target) {
                 // first save the untranslated/unrotated context
-                let x = 800 - (160 * target.translation.x); // getting meters as pixels
-                let y = 400 - (160 * target.translation.y);
+                let x = 800 - (160 * target.x); // getting meters as pixels
+                let y = 400 - (160 * target.y);
                 this.ctx.save();
                 this.ctx.beginPath();
                 // move the rotation point to the center of the rect
diff --git a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
index dfbd9fc76..db4ca176b 100644
--- a/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
+++ b/photon-client/src/components/pipeline/CameraAndPipelineSelect.vue
@@ -18,6 +18,7 @@
           v-else
           v-model="newCameraName"
           name="Camera"
+          input-cols="9"
           :error-message="checkCameraName"
           @Enter="saveCameraNameChange"
         />
@@ -63,8 +64,10 @@
         <CVselect
           v-model="currentPipelineIndex"
           name="Pipeline"
-          :list="['Driver Mode'].concat($store.getters.pipelineList)"
-          @input="handleInputWithIndex('currentPipeline',currentPipelineIndex - 1)"
+          tooltip="Each pipeline runs on a camera output and stores a unique set of processing settings"
+          :disabled="$store.getters.isDriverMode"
+          :list="($store.getters.isDriverMode ? ['Driver Mode'] : []).concat($store.getters.pipelineList)"
+          @input="handleInputWithIndex('currentPipeline', currentPipelineIndex)"
         />
       </v-col>
       <v-col
@@ -128,15 +131,6 @@
           </v-list>
         </v-menu>
       </v-col>
-
-      <!--      <v-btn-->
-      <!--        outlined-->
-      <!--        color="accent"-->
-      <!--        @click="handleInput('command','save')"-->
-      <!--      >-->
-      <!--        <v-icon>save</v-icon>-->
-      <!--        Save-->
-      <!--      </v-btn>-->
     </v-row>
     <!--pipeline duplicate dialog-->
     <v-dialog
@@ -305,10 +299,10 @@
             },
             currentPipelineIndex: {
                 get() {
-                    return this.$store.getters.currentPipelineIndex + 1;
+                    return this.$store.getters.currentPipelineIndex + this.$store.getters.isDriverMode ? 1 : 0;
                 },
                 set(value) {
-                    this.$store.commit('currentPipelineIndex', value - 1);
+                    this.$store.commit('currentPipelineIndex', value - this.$store.getters.isDriverMode ? 1 : 0);
                 }
             }
         },
diff --git a/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue b/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
index 761ef4d40..a5f2e7f84 100644
--- a/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/DualCalibration.vue
@@ -4,34 +4,33 @@
       align="center"
       justify="start"
     >
-      <v-col
-        style="padding-right:0"
-        :cols="3"
-      >
+      <v-col cols="4">
         <v-btn
           small
-          color="#ffd843"
+          color="accent"
+          style="width: 100%;"
+          class="black--text"
           @click="takePointA"
         >
           Take Point A
         </v-btn>
       </v-col>
-      <v-col
-        style="margin-left:0"
-        :cols="3"
-      >
+      <v-col cols="4">
         <v-btn
           small
-          color="#ffd843"
+          color="accent"
+          style="width: 100%;"
+          class="black--text"
           @click="takePointB"
         >
           Take Point B
         </v-btn>
       </v-col>
-      <v-col>
+      <v-col cols="4">
         <v-btn
           small
           color="yellow darken-3"
+          style="width: 100%;"
           @click="clearSlope"
         >
           Clear All Points
diff --git a/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue b/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
index b5db36a50..d9571c197 100644
--- a/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
+++ b/photon-client/src/components/pipeline/OutputTab/SingleCalibration.vue
@@ -4,22 +4,22 @@
       align="center"
       justify="start"
     >
-      <v-col
-        style="padding-right:0"
-        :cols="3"
-      >
+      <v-col cols="6">
         <v-btn
           small
-          color="#ffd843"
+          color="accent"
+          class="black--text"
+          style="width: 100%;"
           @click="takePoint"
         >
           Take Point
         </v-btn>
       </v-col>
-      <v-col>
+      <v-col cols="6">
         <v-btn
           small
           color="yellow darken-3"
+          style="width: 100%;"
           @click="clearPoint"
         >
           Clear Point
diff --git a/photon-client/src/main.js b/photon-client/src/main.js
index a2c2ae312..2dc8c5e64 100644
--- a/photon-client/src/main.js
+++ b/photon-client/src/main.js
@@ -15,15 +15,14 @@ if (process.env.NODE_ENV === "production") {
     Vue.prototype.$address = location.hostname + ":5800";
 }
 
-const wsURL = 'ws://' + Vue.prototype.$address + '/websocket';
-
-const ws = new WebSocket(wsURL);
-ws.binaryType = "arraybuffer";
+const wsURL = '//' + Vue.prototype.$address + '/websocket';
 
 import VueNativeSock from 'vue-native-websocket';
 
 Vue.use(VueNativeSock, wsURL, {
-    WebSocket: ws
+    reconnection: true,
+    connectManually: true,
+    format: "arraybuffer",
 });
 Vue.use(VueAxios, axios);
 Vue.prototype.$msgPack = msgPack(true);
diff --git a/photon-client/src/plugins/ColorPicker.js b/photon-client/src/plugins/ColorPicker.js
index 6e6fd9b8b..0078b058a 100644
--- a/photon-client/src/plugins/ColorPicker.js
+++ b/photon-client/src/plugins/ColorPicker.js
@@ -2,8 +2,10 @@ var canvas = undefined;
 var image = undefined;
 
 function initColorPicker() {
-    canvas = document.createElement('canvas');
-    image = document.getElementById('CameraStream');
+    if (!canvas)
+        canvas = document.createElement('canvas');
+
+    image = document.querySelector('#normal-stream');
     canvas.width = image.width;
     canvas.height = image.height;
 }
@@ -15,11 +17,12 @@ function initColorPicker() {
 //calls the function to handle the button (either eyedrop,expand or shrink)
 function colorPickerClick(event, currentFunction, currentRange) {
     let rect = image.getBoundingClientRect();
-    let x = Math.round(event.clientX - rect.left);
-    let y = Math.round(event.clientY - rect.top);
+    let x = Math.round((event.clientX - rect.left) / rect.width * image.width);
+    let y = Math.round((event.clientY - rect.top) / rect.height * image.height);
     let context = canvas.getContext('2d');
     context.drawImage(image, 0, 0, image.width, image.height);
     let pixelData = context.getImageData(x, y, 1, 1).data;
+
     if (currentFunction !== undefined) {
         return currentFunction(pixelData, currentRange);
     }
@@ -114,6 +117,7 @@ function shrinkRange(range, color) {
                 range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
         }
     }
+
     return inside;//returns if color is inside or not
 }
 
diff --git a/photon-client/src/router.js b/photon-client/src/router.js
index 239ff2ab5..78ce7b35d 100644
--- a/photon-client/src/router.js
+++ b/photon-client/src/router.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Dashboard from "./views/PipelineView";
+import Cameras from "./views/CamerasView";
 import Settings from "./views/SettingsView";
 import Docs from "./views/DocsView";
 Vue.use(Router);
@@ -15,6 +16,10 @@ export default new Router({
         path: '/dashboard',
         name: 'Dashboard',
         component: Dashboard
+    }, {
+        path: '/cameras',
+        name: 'Cameras',
+        component: Cameras
     }, {
         path: '/settings',
         name: 'Settings',
diff --git a/photon-client/src/store/index.js b/photon-client/src/store/index.js
index 0f62dfadf..7b759ef6f 100644
--- a/photon-client/src/store/index.js
+++ b/photon-client/src/store/index.js
@@ -21,8 +21,10 @@ export default new Vuex.Store({
         undoRedo: undoRedo
     },
     state: {
+        backendConnected: false,
+        colorPicking: false,
         saveBar: false,
-        compactMode: undefined, // Compact mode is initially unset on purpose
+        compactMode: localStorage.getItem("compactMode") === undefined ? undefined : localStorage.getItem("compactMode") === "true", // Compact mode is initially unset on purpose
         currentCameraIndex: 0,
         selectedOutputs: [0, 1], // 0 indicates normal, 1 indicates threshold
         cameraSettings: [ // This is a list of objects representing the settings of all cameras
@@ -42,6 +44,7 @@ export default new Vuex.Store({
                     }
                 ],
                 fov: 70.0,
+                isFovConfigurable: true,
                 calibrated: false,
                 currentPipelineSettings: {
                     pipelineType: 2, // One of "driver", "reflective", "shape"
@@ -72,7 +75,8 @@ export default new Vuex.Store({
                     offsetRobotOffsetMode: 0,
                     solvePNPEnabled: false,
                     targetRegion: 0,
-                    contourTargetOrientation: 1
+                    contourTargetOrientation: 1,
+                    is3D: false,
 
                     // Settings that apply to shape
                 }
@@ -89,10 +93,34 @@ export default new Vuex.Store({
                     skew: 0,
                     area: 0,
                     // 3D only
-                    pose: {x: 0, y: 0, rot: 0},
+                    pose: {x: 0, y: 0, rotation: 0},
                 }]
             }
-        ]
+        ],
+        settings: {
+            general: {
+                version: "Unknown",
+                // Empty string means unsupported, otherwise the value in the string is the transfer mode
+                gpuAcceleration: "",
+
+                hardwareModel: "Unknown",
+                hardwarePlatform: "Unknown",
+            },
+            networking: {
+                teamNumber: 0,
+
+                supported: true,
+                // Below options are only configurable if supported is true
+                connectionType: 0, // 0 = DHCP, 1 = Static
+                staticIp: "",
+                netmask: "",
+                hostname: "photonvision",
+            },
+            lighting: {
+                supported: true,
+                brightness: 0.0,
+            },
+        }
     },
     mutations: {
         saveBar: set('saveBar'),
@@ -103,6 +131,10 @@ export default new Vuex.Store({
         networkSettings: set('networkSettings'),
         selectedOutputs: set('selectedOutputs'),
 
+        is3D: (state, val) => {
+            state.cameraSettings[state.currentCameraIndex].currentPipelineSettings.is3D = val;
+        },
+
         currentPipelineIndex: (state, val) => {
             const settings = state.cameraSettings[state.currentCameraIndex];
             Vue.set(settings, 'currentPipelineIndex', val);
@@ -114,9 +146,7 @@ export default new Vuex.Store({
                 if (!payload.hasOwnProperty(key)) continue;
                 const value = payload[key];
                 const settings = state.cameraSettings[state.currentCameraIndex].currentPipelineSettings;
-                if (key === "selectedOutputs") console.log(settings);
                 if (settings.hasOwnProperty(key)) {
-                    if (key === "selectedOutputs") console.log('here');
                     Vue.set(settings, key, value);
                 }
             }
diff --git a/photon-client/src/views/SettingsViews/Cameras.vue b/photon-client/src/views/CamerasView.vue
similarity index 58%
rename from photon-client/src/views/SettingsViews/Cameras.vue
rename to photon-client/src/views/CamerasView.vue
index d33820220..7e2666751 100644
--- a/photon-client/src/views/SettingsViews/Cameras.vue
+++ b/photon-client/src/views/CamerasView.vue
@@ -1,133 +1,180 @@
 <template>
   <div>
-    <div>
-      <CVselect
-        v-model="currentCameraIndex"
-        name="Camera"
-        :list="$store.getters.cameraList"
-        @input="handleInput('currentCamera',currentCameraIndex)"
-      />
-      <CVnumberinput
-        v-model="cameraSettings.fov"
-        name="Diagonal FOV"
-      />
-      <br>
-      <CVnumberinput
-        v-model="cameraSettings.tilt"
-        name="Camera pitch"
-        :step="0.01"
-      />
-      <br>
-      <v-btn
-        style="margin-top:10px"
-        small
-        color="#ffd843"
-        @click="sendCameraSettings"
+    <v-row
+      no-gutters
+      class="pa-3"
+    >
+      <v-col
+        cols="12"
+        md="7"
       >
-        Save Camera Settings
-      </v-btn>
-    </div>
-    <div style="margin-top: 15px">
-      <span>3D Calibration</span>
-      <v-divider
-        color="white"
-        style="margin-bottom: 10px"
-      />
-      <v-row>
-        <v-col>
-          <CVselect
-            v-model="resolutionIndex"
-            name="Resolution"
-            :list="stringResolutionList"
-          />
-        </v-col>
-        <v-col>
-          <CVnumberinput
-            v-model="squareSize"
-            name="Square Size (in)"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col>
-          <v-btn
-            small
-            :color="calibrationModeButton.color"
-            :disabled="checkResolution"
-            @click="sendCalibrationMode"
-          >
-            {{ calibrationModeButton.text }}
-          </v-btn>
-        </v-col>
-        <v-col>
-          <v-btn
-            small
-            :color="cancellationModeButton.color"
-            :disabled="checkCancellation"
-            @click="sendCalibrationFinish"
-          >
-            {{ cancellationModeButton.text }}
-          </v-btn>
-        </v-col>
-        <v-col>
-          <v-btn
-            color="whitesmoke"
-            small
-            @click="downloadBoard"
-          >
-            Download Checkerboard
-          </v-btn>
-          <a
-            ref="calibrationFile"
-            style="color: black; text-decoration: none; display: none"
-            :href="require('../../assets/chessboard.png')"
-            download="Calibration Board.png"
-          />
-        </v-col>
-      </v-row>
-      <v-row v-if="isCalibrating">
-        <v-col>
-          <span>Snapshot Amount: {{ snapshotAmount }}</span>
-        </v-col>
-      </v-row>
-      <div v-if="isCalibrating">
-        <v-checkbox
-          v-model="isAdvanced"
-          label="Advanced Menu"
+        <v-card
+          class="mb-3 pr-6 pb-3"
+          color="primary"
           dark
+        >
+          <v-card-title>Camera Settings</v-card-title>
+          <div class="ml-5">
+            <CVselect
+              v-model="currentCameraIndex"
+              name="Camera"
+              select-cols="10"
+              :list="$store.getters.cameraList"
+              @input="handleInput('currentCamera',currentCameraIndex)"
+            />
+            <CVnumberinput
+              v-if="cameraSettings.isFovConfigurable"
+              v-model="cameraSettings.fov"
+              tooltip="Field of view (in degrees) of the camera measured across the diagonal of the frame"
+              name="Diagonal FOV"
+            />
+            <br>
+            <CVnumberinput
+              v-model="cameraSettings.tilt"
+              name="Camera pitch"
+              tooltip="How many degrees above the horizontal the physical camera is tilted"
+              :step="0.01"
+            />
+            <br>
+            <v-btn
+              style="margin-top:10px"
+              small
+              color="secondary"
+              @click="sendCameraSettings"
+            >
+              <v-icon left>
+                mdi-content-save
+              </v-icon>
+              Save Camera Settings
+            </v-btn>
+          </div>
+        </v-card>
+        <v-card
+          class="pr-6 pb-3"
+          color="primary"
+          dark
+        >
+          <v-card-title>Camera Calibration</v-card-title>
+          <div class="ml-5">
+            <v-row>
+              <v-col cols="8">
+                <CVselect
+                  v-model="resolutionIndex"
+                  name="Resolution"
+                  :list="stringResolutionList"
+                />
+              </v-col>
+              <v-col
+                cols="4"
+                align-self="center"
+              >
+                <CVnumberinput
+                  v-model="squareSize"
+                  name="Square Size (in)"
+                  tooltip="Length of one side of the checkerboard's square in inches"
+                  label-cols="unset"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-btn
+                  small
+                  color="secondary"
+                  :disabled="checkResolution"
+                  @click="sendCalibrationMode"
+                >
+                  {{ calibrationModeButton.text }}
+                </v-btn>
+              </v-col>
+              <v-col>
+                <v-btn
+                  small
+                  color="red"
+                  :disabled="checkCancellation"
+                  @click="sendCalibrationFinish"
+                >
+                  {{ cancellationModeButton.text }}
+                </v-btn>
+              </v-col>
+              <v-col>
+                <v-btn
+                  color="accent"
+                  small
+                  outlined
+                  @click="downloadBoard"
+                >
+                  <v-icon left>
+                    mdi-download
+                  </v-icon>
+                  Download Checkerboard
+                </v-btn>
+                <a
+                  ref="calibrationFile"
+                  style="color: black; text-decoration: none; display: none"
+                  :href="require('../assets/chessboard.png')"
+                  download="Calibration Board.png"
+                />
+              </v-col>
+            </v-row>
+            <v-row v-if="isCalibrating">
+              <v-col>
+                <span>Snapshot Amount: {{ snapshotAmount }}</span>
+              </v-col>
+            </v-row>
+            <div v-if="isCalibrating">
+              <v-checkbox
+                v-model="isAdvanced"
+                label="Advanced Menu"
+                dark
+              />
+              <div v-if="isAdvanced">
+                <CVslider
+                  v-model="$store.getters.pipeline.exposure"
+                  name="Exposure"
+                  :min="0"
+                  :max="100"
+                  @input="e=> handleInput('exposure', e)"
+                />
+                <CVslider
+                  v-model="$store.getters.pipeline.brightness"
+                  name="Brightness"
+                  :min="0"
+                  :max="100"
+                  @input="e=> handleInput('brightness', e)"
+                />
+                <CVslider
+                  v-if="$store.getters.pipeline.gain !== -1"
+                  v-model="$store.getters.pipeline.gain"
+                  name="Gain"
+                  :min="0"
+                  :max="100"
+                  @input="e=> handleInput('gain', e)"
+                />
+                <CVselect
+                  v-model="$store.getters.pipeline.videoModeIndex"
+                  name="FPS"
+                  :list="stringFpsList"
+                  @input="changeFps"
+                />
+              </div>
+            </div>
+          </div>
+        </v-card>
+      </v-col>
+      <v-col
+        class="pl-md-3 pt-3 pt-md-0"
+        cols="12"
+        md="5"
+      >
+        <CVimage
+          :address="$store.getters.streamAddress[1]"
+          :disconnected="!$store.state.backendConnected"
+          scale="100"
+          style="border-radius: 5px;"
         />
-        <div v-if="isAdvanced">
-          <CVslider
-            v-model="$store.getters.pipeline.exposure"
-            name="Exposure"
-            :min="0"
-            :max="100"
-            @input="e=> handleInput('exposure', e)"
-          />
-          <CVslider
-            v-model="$store.getters.pipeline.brightness"
-            name="Brightness"
-            :min="0"
-            :max="100"
-            @input="e=> handleInput('brightness', e)"
-          />
-          <CVslider
-            v-if="$store.getters.pipeline.gain !== -1"
-            v-model="$store.getters.pipeline.gain"
-            name="Gain"
-            :min="0"
-            :max="100"
-            @input="e=> handleInput('gain', e)"
-          />
-          <CVselect
-            v-model="$store.getters.pipeline.videoModeIndex"
-            name="FPS"
-            :list="stringFpsList"
-            @input="changeFps"
-          />
-        </div>
-      </div>
-    </div>
+      </v-col>
+    </v-row>
     <v-snackbar
       v-model="snack"
       top
@@ -139,16 +186,18 @@
 </template>
 
 <script>
-    import CVselect from '../../components/common/cv-select'
-    import CVnumberinput from '../../components/common/cv-number-input'
-    import CVslider from '../../components/common/cv-slider'
+    import CVselect from '../components/common/cv-select';
+    import CVnumberinput from '../components/common/cv-number-input';
+    import CVslider from '../components/common/cv-slider';
+    import CVimage from "../components/common/cv-image";
 
     export default {
-        name: 'CameraSettings',
+        name: 'Cameras',
         components: {
             CVselect,
             CVnumberinput,
-            CVslider
+            CVslider,
+            CVimage
         },
         data() {
             return {
@@ -243,7 +292,7 @@
             },
             cameraSettings: {
                 get() {
-                    return this.$store.getters.cameraSettings;
+                    return this.$store.getters.currentCameraSettings;
                 },
                 set(value) {
                     this.$store.commit('cameraSettings', value);
@@ -252,7 +301,7 @@
         },
         methods: {
             downloadBoard() {
-                this.axios.get("http://" + this.$address + require('../../assets/chessboard.png'), {responseType: 'blob'}).then((response) => {
+                this.axios.get("http://" + this.$address + require('../assets/chessboard.png'), {responseType: 'blob'}).then((response) => {
                     require('downloadjs')(response.data, "Calibration Board", "image/png")
                 })
             },
diff --git a/photon-client/src/views/PipelineView.vue b/photon-client/src/views/PipelineView.vue
index 96fda1040..fd1023bb4 100644
--- a/photon-client/src/views/PipelineView.vue
+++ b/photon-client/src/views/PipelineView.vue
@@ -11,42 +11,58 @@
       >
         <v-col
           cols="12"
-          :class="['pb-3 ', $store.getters.isDriverMode ? '' : 'pr-lg-3']"
-          :lg="$store.getters.isDriverMode ? 12 : 8"
+          :class="['pb-3 ', 'pr-lg-3']"
+          lg="8"
           align-self="stretch"
         >
           <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="height: 10%;"
+              style="height: 15%; min-height: 50px;"
             >
-              Cameras
+              <div>
+                Cameras <span
+                  class="pl-2 caption grey--text text--lighten-2"
+                  style="line-height: 220%; display: inline-block; vertical-align: bottom;"
+                >{{ parseFloat(fps).toFixed(2) }} FPS</span>
+              </div>
+              <v-switch
+                v-model="driverMode"
+                label="Driver Mode"
+                style="margin-left: auto;"
+                color="accent"
+              />
             </v-card-title>
             <v-row
               align="center"
-              style="height: 90%;"
             >
               <v-col
                 v-for="idx in (selectedOutputs instanceof Array ? selectedOutputs : [selectedOutputs])"
                 :key="idx"
                 cols="12"
                 :md="selectedOutputs.length === 1 ? 12 : Math.floor(12 / selectedOutputs.length)"
+                class="pb-0 pt-0"
+                style="height: 100%;"
               >
                 <div style="position: relative; width: 100%; height: 100%;">
                   <cvImage
+                    :id="idx === 0 ? 'normal-stream' : ''"
                     :address="$store.getters.streamAddress[idx]"
+                    :disconnected="!$store.state.backendConnected"
                     scale="100"
-                    max-height="300px"
-                    max-height-md="320px"
-                    max-height-xl="450px"
+                    :max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
+                    :max-height-md="$store.getters.isDriverMode ? '50vh' : '320px'"
+                    :max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
                     :alt="'Stream' + idx"
+                    :color-picking="$store.state.colorPicking && idx == 0"
                     @click="onImageClick"
                   />
-                  <span style="position: absolute; top: 2%; left: 2%; font-size: 28px; -webkit-text-stroke: 1px black;">{{ parseFloat(fps).toFixed(2) }}</span>
+                  <!--                  <span class="fps-indicator">{{ parseFloat(fps).toFixed(2) }}</span>-->
                 </div>
               </v-col>
             </v-row>
@@ -55,7 +71,7 @@
         <v-col
           cols="12"
           class="pb-3"
-          :lg="$store.getters.isDriverMode ? 12 : 4"
+          lg="4"
           align-self="stretch"
         >
           <v-card
@@ -64,7 +80,7 @@
             <camera-and-pipeline-select />
           </v-card>
           <v-card
-            v-if="!$store.getters.isDriverMode"
+            :disabled="$store.getters.isDriverMode || $store.state.colorPicking"
             class="mt-3"
             color="primary"
           >
@@ -82,14 +98,18 @@
                   dark
                   class="fill"
                 >
-                  <v-btn color="secondary">
-                    <v-icon>mdi-cube-outline</v-icon>
-                    <span>3D</span>
-                  </v-btn>
-                  <v-btn color="secondary">
+                  <v-btn
+                    color="secondary"
+                  >
                     <v-icon>mdi-crop-square</v-icon>
                     <span>2D</span>
                   </v-btn>
+                  <v-btn
+                    color="secondary"
+                  >
+                    <v-icon>mdi-cube-outline</v-icon>
+                    <span>3D</span>
+                  </v-btn>
                 </v-btn-toggle>
               </v-col>
               <v-col lg="12">
@@ -146,7 +166,7 @@
               slider-color="accent"
             >
               <v-tab
-                v-for="(tab, i) in tabs.filter(it => it.name !== '3D' || is3D)"
+                v-for="(tab, i) in tabs.filter(it => it.name !== '3D' || $store.getters.currentPipelineSettings.is3D)"
                 :key="i"
               >
                 {{ tab.name }}
@@ -154,12 +174,10 @@
             </v-tabs>
             <div class="pl-4 pr-4 pt-2">
               <keep-alive>
-                <!-- vision component -->
                 <component
                   :is="(tabs[selectedTabs[idx]] || tabs[0]).component"
-                  ref="component"
+                  :ref="(tabs[selectedTabs[idx]] || tabs[0]).name"
                   v-model="$store.getters.pipeline"
-                  :is3d="is3D"
                   @update="$emit('save')"
                 />
               </keep-alive>
@@ -211,12 +229,20 @@
         },
         data() {
             return {
-                selectedTabs: [0, 0, 0, 0],
+                selectedTabsData: [0, 0, 0, 0],
                 snackbar: false,
-                is3D: false,
+                counterData: 0,
             }
         },
         computed: {
+            selectedTabs: {
+                get() {
+                  return this.$store.getters.isDriverMode ? [0] : this.selectedTabsData;
+                },
+                set(value) {
+                  this.selectedTabsData = value;
+                }
+            },
             tabGroups: {
                 get() {
                     let tabs = {
@@ -248,10 +274,10 @@
 
                     // 2D array of tab names and component names; each sub-array is a separate tab group
                     let ret = [];
-                    if (this.$vuetify.breakpoint.smAndDown || !this.$store.state.compactMode || this.$store.getters.isDriverMode) {
+                    if (this.$vuetify.breakpoint.smAndDown || this.$store.getters.isDriverMode || (this.$vuetify.breakpoint.mdAndDown && !this.$store.state.compactMode)) {
                         // One big tab group with all the tabs
                         ret[0] = Object.values(tabs);
-                    } else if (this.$vuetify.breakpoint.mdAndDown) {
+                    } else if (this.$vuetify.breakpoint.mdAndDown || !this.$store.state.compactMode) {
                         // Two tab groups, one with "input, threshold, contours, output" and the other with "target info, 3D"
                         ret[0] = [tabs.input, tabs.threshold, tabs.contours, tabs.output];
                         ret[1] = [tabs.targets, tabs.pnp];
@@ -273,10 +299,20 @@
             },
             processingMode: {
                 get() {
-                    return this.is3D ? 0 : 1;
+                    return this.$store.getters.currentPipelineSettings.is3D ? 1 : 0;
                 },
                 set(value) {
-                    this.is3D = value === 0;
+                    this.$store.getters.currentPipelineSettings.is3D = value === 1;
+                    this.handlePipelineUpdate("is3D", value === 1);
+                }
+            },
+            driverMode: {
+                get() {
+                  return this.$store.getters.isDriverMode;
+                },
+                set(value) {
+                  this.$store.getters.currentCameraSettings.currentPipelineIndex = value ? -1 : 0;
+                  this.handleInputWithIndex('currentPipeline', value ? -1 : 0);
                 }
             },
             selectedOutputs: {
@@ -284,7 +320,9 @@
                 get() {
                     // We switch the selector to single-select only on sm-and-down size devices, so we have to return a Number instead of an Array in that state
                     let ret;
-                    if (!this.$store.getters.isDriverMode) {
+                    if (this.$store.state.colorPicking) {
+                        ret = [0]; // We want the input stream only while color picking
+                    } else if (!this.$store.getters.isDriverMode) {
                         ret = this.$store.state.selectedOutputs || [0];
                     } else {
                         ret = [1]; // We want the output stream in driver mode
@@ -324,9 +362,12 @@
         },
         methods: {
             onImageClick(event) {
-                if (this.selectedTab === 1) {
-                    this.$refs.component.onClick(event);
-                }
+                // Only run on the input stream
+                if (event.target.alt !== "Stream0") return;
+                // Get a reference to the threshold tab (if it is shown) and call its "onClick" method
+                let ref = this.$refs["Threshold"];
+                if (ref && ref[0])
+                  ref[0].onClick(event)
             },
         }
     }
@@ -343,12 +384,12 @@
         height: 100%;
     }
 
-    .colsClass {
-        padding: 0 !important;
-    }
-
-    .videoClass {
-        text-align: center;
+    .fps-indicator {
+      position: absolute;
+      top: 2%;
+      left: 2%;
+      font-size: 1.75rem;
+      text-shadow: 1px 1px 5px rgba(1, 1, 1, 0.65);
     }
 
     th {
diff --git a/photon-client/src/views/PipelineViews/ContoursTab.vue b/photon-client/src/views/PipelineViews/ContoursTab.vue
index 5190eaeab..b58fad8a9 100644
--- a/photon-client/src/views/PipelineViews/ContoursTab.vue
+++ b/photon-client/src/views/PipelineViews/ContoursTab.vue
@@ -12,6 +12,7 @@
     <CVrangeSlider
       v-model="contourRatio"
       name="Ratio (W/H)"
+      tooltip="Min and max ratio between the width and height of a contour's bounding rectangle"
       min="0"
       max="100"
       step="0.1"
@@ -21,6 +22,7 @@
     <CVrangeSlider
       v-model="contourFullness"
       name="Fullness"
+      tooltip="Min and max ratio between a contour's area and its bounding rectangle"
       min="0"
       max="100"
       @input="handlePipelineData('contourFullness')"
@@ -29,6 +31,7 @@
     <CVslider
       v-model="contourSpecklePercentage"
       name="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="largeBox"
@@ -37,7 +40,8 @@
     />
     <CVselect
       v-model="contourGroupingMode"
-      name="Target Group"
+      name="Target Grouping"
+      tooltip="Whether or not every two targets are paired with each other (good for e.g. 2019 targets)"
       :select-cols="largeBox"
       :list="['Single','Dual']"
       @input="handlePipelineData('targetGroup')"
@@ -46,12 +50,22 @@
     <CVselect
       v-model="contourIntersection"
       name="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="largeBox"
       :list="['None','Up','Down','Left','Right']"
       :disabled="contourGroupingMode === 0"
       @input="handlePipelineData('contourIntersection')"
       @rollback="e=> rollback('contourIntersection',e)"
     />
+    <CVselect
+      v-model="contourSortMode"
+      name="Target Sort"
+      tooltip="Chooses the sorting mode used to determine the 'best' targets to provide to user code"
+      :select-cols="largeBox"
+      :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
+      @input="handlePipelineData('contourSortMode')"
+      @rollback="e => rollback('contourSortMode', e)"
+    />
   </div>
 </template>
 
@@ -122,6 +136,14 @@
                     this.$store.commit("mutatePipeline", {"contourGroupingMode": val});
                 }
             },
+            contourSortMode: {
+              get() {
+                return this.$store.getters.currentPipelineSettings.contourSortMode
+              },
+              set(val) {
+                this.$store.commit("mutatePipeline", {"contourSortMode": val});
+              }
+            },
             contourIntersection: {
                 get() {
                     return this.$store.getters.currentPipelineSettings.contourIntersection
diff --git a/photon-client/src/views/PipelineViews/InputTab.vue b/photon-client/src/views/PipelineViews/InputTab.vue
index bcee6a7ba..19bac375e 100644
--- a/photon-client/src/views/PipelineViews/InputTab.vue
+++ b/photon-client/src/views/PipelineViews/InputTab.vue
@@ -5,6 +5,7 @@
       name="Exposure"
       min="0"
       max="100"
+      tooltip="Directly controls how much light is allowed to fall onto the sensor, which affects brightness"
       :slider-cols="largeBox"
       @input="handlePipelineData('cameraExposure')"
       @rollback="e => rollback('cameraExposure', e)"
@@ -14,6 +15,7 @@
       name="Brightness"
       min="0"
       max="100"
+      tooltip="Controls camera postprocessing that brightens or darkens the image uniformly"
       :slider-cols="largeBox"
       @input="handlePipelineData('cameraBrightness')"
       @rollback="e => rollback('cameraBrightness', e)"
@@ -24,6 +26,7 @@
       name="Gain"
       min="0"
       max="100"
+      tooltip="Controls automatic white balance gain, which affects how the camera captures colors in different conditions"
       :slider-cols="largeBox"
       @input="handlePipelineData('cameraGain')"
       @rollback="e => rollback('cameraGain', e)"
@@ -31,6 +34,7 @@
     <CVselect
       v-model="inputImageRotationMode"
       name="Orientation"
+      tooltip="Rotates the camera stream"
       :list="['Normal','90° CW','180°','90° CCW']"
       :select-cols="largeBox"
       @input="handlePipelineData('inputImageRotationMode')"
@@ -39,6 +43,7 @@
     <CVselect
       v-model="cameraVideoModeIndex"
       name="Resolution"
+      tooltip="Resolution and FPS the camera should directly capture at"
       :list="resolutionList"
       :select-cols="largeBox"
       @input="handlePipelineData('cameraVideoModeIndex')"
@@ -47,6 +52,7 @@
     <CVselect
       v-model="streamingFrameDivisor"
       name="Stream Resolution"
+      tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
       :list="streamResolutionList"
       :select-cols="largeBox"
       @input="handlePipelineData('streamingFrameDivisor')"
diff --git a/photon-client/src/views/PipelineViews/OutputTab.vue b/photon-client/src/views/PipelineViews/OutputTab.vue
index 602b5b61f..f9efa8063 100644
--- a/photon-client/src/views/PipelineViews/OutputTab.vue
+++ b/photon-client/src/views/PipelineViews/OutputTab.vue
@@ -1,18 +1,12 @@
 <template>
   <div>
-    <span>Contour Sorting</span>
+    <span>Target Manipulation</span>
     <v-divider class="mt-2" />
-    <CVselect
-      v-model="contourSortMode"
-      name="Sort Mode"
-      :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
-      @input="handlePipelineData('contourSortMode')"
-      @rollback="e => rollback('contourSortMode', e)"
-    />
 
     <CVselect
       v-model="contourTargetOffsetPointEdge"
       name="Target Offset Point"
+      tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
       :list="['Center','Top','Bottom','Left','Right']"
       @input="handlePipelineData('contourTargetOffsetPointEdge')"
       @rollback="e=> rollback('contourTargetOffsetPointEdge', e)"
@@ -21,6 +15,7 @@
     <CVselect
       v-model="contourTargetOrientation"
       name="Target Orientation"
+      tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
       :list="['Portrait', 'Landscape']"
       @input="handlePipelineData('contourTargetOrientation')"
       @rollback="e=> rollback('contourTargetOrientation', e)"
@@ -29,7 +24,9 @@
     <CVswitch
       v-model="outputShowMultipleTargets"
       name="Show Multiple Targets"
+      tooltip="If enabled, up to five targets will be displayed and sent to user code"
       class="mb-4"
+      text-cols="3"
       @input="handlePipelineData('outputShowMultipleTargets')"
 
       @rollback="e=> rollback('outputShowMultipleTargets', e)"
@@ -39,6 +36,7 @@
     <CVselect
       v-model="offsetRobotOffsetMode"
       name="Robot Offset Mode"
+      tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
       :list="['None','Single Point','Dual Point']"
       @input="handlePipelineData('offsetRobotOffsetMode')"
       @rollback="e=> rollback('offsetRobotOffsetMode',e)"
@@ -93,16 +91,6 @@
             }
         },
         computed: {
-
-            contourSortMode: {
-
-                get() {
-                    return this.$store.getters.currentPipelineSettings.contourSortMode
-                },
-                set(val) {
-                    this.$store.commit("mutatePipeline", {"contourSortMode": val});
-                }
-            },
             contourTargetOffsetPointEdge: {
                 get() {
                     return this.$store.getters.currentPipelineSettings.contourTargetOffsetPointEdge
@@ -138,13 +126,13 @@
 
             selectedComponent: {
                 get() {
-                    switch (this.value.calibrationMode) {
+                    switch (this.offsetRobotOffsetMode) {
                         case 0:
-                            return "";
+                            return null;
                         case 1:
-                            return "Single Point";
+                            return SingleCalibration;
                         case 2:
-                            return "Dual Point"
+                            return DualCalibration;
                     }
                     return ""
                 }
diff --git a/photon-client/src/views/PipelineViews/PnPTab.vue b/photon-client/src/views/PipelineViews/PnPTab.vue
index bd7eef73a..402378ec1 100644
--- a/photon-client/src/views/PipelineViews/PnPTab.vue
+++ b/photon-client/src/views/PipelineViews/PnPTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- Special hidden upload input that gets 'clicked' when the user selects the right dropdown item' -->
+    <!-- Special hidden upload input that gets 'clicked' when the user selects the right dropdown item -->
     <input
       ref="file"
       type="file"
@@ -21,7 +21,6 @@
       item-value="data"
       @change="onModelSelect"
     />
-    <v-divider />
     <CVslider
       v-model="value.accuracy"
       class="pt-2"
@@ -33,7 +32,6 @@
       @input="handleData('accuracy')"
       @rollback="e => rollback('accuracy', e)"
     />
-    <v-divider class="pb-2" />
     <mini-map
       class="miniMapClass"
       :targets="targets"
@@ -77,7 +75,7 @@
         computed: {
             targets: {
                 get() {
-                    return "FIXME"; // TODO fix
+                    return this.$store.getters.currentPipelineResults.targets;
                 }
             },
             horizontalFOV: {
@@ -100,7 +98,7 @@
             let tmp = [];
             for (let t in FRCtargetsConfig) {
                 if (FRCtargetsConfig.hasOwnProperty(t)) {
-                    tmp.push({name: t, data: FRCtargetsConfig[t]})
+                    tmp.push({name: t, data: FRCtargetsConfig[t]});
                 }
             }
 
diff --git a/photon-client/src/views/PipelineViews/TargetsTab.vue b/photon-client/src/views/PipelineViews/TargetsTab.vue
index b6324c86b..536874a62 100644
--- a/photon-client/src/views/PipelineViews/TargetsTab.vue
+++ b/photon-client/src/views/PipelineViews/TargetsTab.vue
@@ -13,12 +13,12 @@
         dark
       >
         <template v-slot:default>
-          <thead style="font-size: 20px;">
+          <thead style="font-size: 1.25rem;">
             <tr>
               <th class="text-center">
                 Target
               </th>
-              <template v-if="!is3D">
+              <template v-if="!$store.getters.currentPipelineSettings.is3D">
                 <th class="text-center">
                   Pitch
                 </th>
@@ -32,7 +32,7 @@
               <th class="text-center">
                 Area
               </th>
-              <template v-if="is3D">
+              <template v-if="$store.getters.currentPipelineSettings.is3D">
                 <th class="text-center">
                   X
                 </th>
@@ -51,17 +51,17 @@
               :key="index"
             >
               <td>{{ index }}</td>
-              <template v-if="!is3D">
+              <template v-if="!$store.getters.currentPipelineSettings.is3D">
                 <td>{{ parseFloat(value.pitch).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.yaw).toFixed(2) }}</td>
                 <td>{{ parseFloat(value.skew).toFixed(2) }}</td>
               </template>
               <td>{{ parseFloat(value.area).toFixed(2) }}</td>
-              <template v-if="is3D">
+              <template v-if="$store.getters.currentPipelineSettings.is3D">
                 <!-- TODO: Make sure that units are correct -->
                 <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
                 <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
-                <td>{{ parseFloat(value.pose.rot).toFixed(2) }}&deg;</td>
+                <td>{{ parseFloat(value.pose.rotation).toFixed(2) }}&deg;</td>
               </template>
             </tr>
           </tbody>
@@ -74,9 +74,6 @@
 <script>
     export default {
         name: "TargetsTab",
-        props: {
-          is3D: Boolean,
-        }
     }
 </script>
 
@@ -97,6 +94,10 @@
         font-size: 1rem !important;
     }
 
+    .v-data-table td {
+      font-family: monospace !important;
+    }
+
     /** This is unfortunately the only way to override table background color **/
     .theme--dark.v-data-table tbody tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
         background: #005281;
diff --git a/photon-client/src/views/PipelineViews/ThresholdTab.vue b/photon-client/src/views/PipelineViews/ThresholdTab.vue
index 3f856f260..1c7b5e1c0 100644
--- a/photon-client/src/views/PipelineViews/ThresholdTab.vue
+++ b/photon-client/src/views/PipelineViews/ThresholdTab.vue
@@ -3,6 +3,7 @@
     <CVrangeSlider
       v-model="hsvHue"
       name="Hue"
+      tooltip="Describes color"
       :min="0"
       :max="180"
       @input="handlePipelineData('hsvHue')"
@@ -11,6 +12,7 @@
     <CVrangeSlider
       v-model="hsvSaturation"
       name="Saturation"
+      tooltip="Describes colorfulness; the smaller this value the 'whiter' the color becomes"
       :min="0"
       :max="255"
       @input="handlePipelineData('hsvSaturation')"
@@ -19,53 +21,81 @@
     <CVrangeSlider
       v-model="hsvValue"
       name="Value"
+      tooltip="Describes lightness; the smaller this value the 'blacker' the color becomes"
       :min="0"
       :max="255"
       @input="handlePipelineData('hsvValue')"
       @rollback="e => rollback('value',e)"
     />
+    <div class="pt-3 white--text">
+      Color Picker
+    </div>
     <v-divider
       class="mt-3"
     />
-    <v-row justify="center">
-      <v-btn
-        color="accent"
-        class="ma-5 black--text"
-        small
-        @click="setFunction(1)"
-      >
-        <v-icon>colorize</v-icon>
-        Eye drop
-      </v-btn>
-      <v-btn
-        color="accent"
-        class="ma-5 black--text"
-        small
-        @click="setFunction(2)"
-      >
-        <v-icon>add</v-icon>
-        Expand Selection
-      </v-btn>
-      <v-btn
-        color="accent"
-        class="ma-5 black--text"
-        small
-        @click="setFunction(3)"
-      >
-        <v-icon>remove</v-icon>
-        Shrink Selection
-      </v-btn>
+    <v-row
+      justify="center"
+      class="mt-3 mb-3"
+    >
+      <template v-if="!$store.state.colorPicking">
+        <v-btn
+          color="accent"
+          class="ma-2 black--text"
+          small
+          @click="setFunction(3)"
+        >
+          <v-icon left>
+            mdi-minus
+          </v-icon>
+          Shrink Range
+        </v-btn>
+        <v-btn
+          color="accent"
+          class="ma-2 black--text"
+          small
+          @click="setFunction(1)"
+        >
+          <v-icon left>
+            mdi-plus-minus
+          </v-icon>
+          Set To Average
+        </v-btn>
+        <v-btn
+          color="accent"
+          class="ma-2 black--text"
+          small
+          @click="setFunction(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="setFunction(0)"
+        >
+          Cancel
+        </v-btn>
+      </template>
     </v-row>
-    <v-divider />
+    <v-divider class="mb-3" />
     <CVswitch
       v-model="erode"
       name="Erode"
+      tooltip="Removes pixels around the edges of white areas in the thresholded image"
       @input="handlePipelineData('erode')"
       @rollback="e => rollback('erode',e)"
     />
     <CVswitch
       v-model="dilate"
       name="Dilate"
+      tooltip="Adds pixels around the edges of white areas in the thresholded image"
       @input="handlePipelineData('dilate')"
       @rollback="e => rollback('dilate',e)"
     />
@@ -143,14 +173,27 @@
         methods: {
             onClick(event) {
                 if (this.currentFunction !== undefined) {
+                    this.colorPicker.initColorPicker();
+
+                    let s = this.$store.getters.currentPipelineSettings;
                     let hsvArray = this.colorPicker.colorPickerClick(event, this.currentFunction,
-                        [[this.value.hue[0], this.value.saturation[0], this.value.value[0]], [this.value.hue[1], this.value.saturation[1], this.value.value[1]]]);
+                        [
+                                [s.hsvHue[0], s.hsvSaturation[0], s.hsvValue[0]],
+                                [s.hsvHue[1], s.hsvSaturation[1], s.hsvValue[1]]
+                        ].map(hsv => hsv.map(it => it || 0)));
+                    // That `map` calls are to make sure that we don't let any undefined/null values slip in
                     this.currentFunction = undefined;
+                    this.$store.state.colorPicking = false;
+
+                    s.hsvHue = [hsvArray[0][0], hsvArray[1][0]];
+                    s.hsvSaturation = [hsvArray[0][1], hsvArray[1][1]];
+                    s.hsvValue = [hsvArray[0][2], hsvArray[1][2]];
+
                     let msg = this.$msgPack.encode({
                         "changePipelineSetting": {
-                            'hsvHue': [hsvArray[0][0], hsvArray[1][0]],
-                            'hsvSaturation': [hsvArray[0][1], hsvArray[1][1]],
-                            'hsvValue': [hsvArray[0][2], hsvArray[1][2]],
+                            'hsvHue': s.hsvHue,
+                            'hsvSaturation': s.hsvSaturation,
+                            'hsvValue': s.hsvValue,
                             'outputShowThresholded': this.showThresholdState,
                             'cameraIndex': this.$store.state.currentCameraIndex
                         }
@@ -160,15 +203,11 @@
                 }
             },
             setFunction(index) {
-                this.showThresholdState = this.value.outputShowThresholded;
-                if (this.showThresholdState === true) {
-                    this.value.outputShowThresholded = false;
-                    this.handlePipelineData('outputShowThresholded')
-                }
                 switch (index) {
                     case 0:
                         this.currentFunction = undefined;
-                        break;
+                        this.$store.state.colorPicking = false;
+                        return;
                     case 1:
                         this.currentFunction = this.colorPicker.eyeDrop;
                         break;
@@ -179,6 +218,7 @@
                         this.currentFunction = this.colorPicker.shrink;
                         break;
                 }
+                this.$store.state.colorPicking = true;
             }
         }
     }
diff --git a/photon-client/src/views/SettingsView.vue b/photon-client/src/views/SettingsView.vue
index d18094c29..b487f7d63 100644
--- a/photon-client/src/views/SettingsView.vue
+++ b/photon-client/src/views/SettingsView.vue
@@ -1,64 +1,73 @@
 <template>
   <div>
-    <v-row>
+    <v-row
+      class="pa-3"
+      no-gutters
+    >
       <v-col
-        class="colsClass"
-        cols="6"
+        cols="12"
+        style="max-width: 1400px"
       >
-        <v-tabs
-          v-model="selectedTab"
-          background-color="#232c37"
-          dark
-          fixed-tabs
-          height="50"
-          slider-color="#ffd843"
+        <v-form
+          ref="form"
+          v-model="valid"
         >
-          <v-tab to="">
-            General
-          </v-tab>
-          <v-tab to="">
-            Cameras
-          </v-tab>
-        </v-tabs>
-        <div style="padding-left:30px">
-          <component
-            :is="selectedComponent"
-            @update="$emit('save')"
-          />
-        </div>
-      </v-col>
-      <v-col
-        v-show="selectedTab === 1"
-        class="colsClass"
-      >
-        <div class="videoClass">
-          <cvImage
-            :address="$store.getters.streamAddress"
-            :scale="75"
-          />
-        </div>
+          <v-card
+            v-for="item in tabList"
+            :key="item.name"
+            dark
+            class="mb-3 pr-6 pb-3"
+            style="background-color: #006492;"
+          >
+            <v-card-title>{{ item.name }}</v-card-title>
+            <component
+              :is="item"
+              class="ml-5"
+            />
+          </v-card>
+          <v-btn
+            color="accent"
+            style="color: black; width: 100%;"
+            :disabled="!valid"
+            @click="sendGeneralSettings()"
+          >
+            Save
+          </v-btn>
+        </v-form>
       </v-col>
     </v-row>
+    <v-snackbar
+      v-model="snack"
+      top
+      :color="snackbar.color"
+    >
+      <span>{{ snackbar.text }}</span>
+    </v-snackbar>
   </div>
 </template>
 
 <script>
-    import General from './SettingsViews/General'
-    import Cameras from './SettingsViews/Cameras'
+    import Networking from './SettingsViews/Networking'
+    import Lighting from "./SettingsViews/Lighting";
     import cvImage from '../components/common/cv-image'
+    import General from "./SettingsViews/General";
 
 
     export default {
         name: 'SettingsTab',
         components: {
             cvImage,
-            General,
-            Cameras,
+            // General,
         },
         data() {
             return {
                 selectedTab: 0,
-                tabList: [General, Cameras]
+                valid: true, // Are all settings valid
+                snack: false,
+                snackbar: {
+                  color: "accent",
+                  text: ""
+                },
             }
         },
         computed: {
@@ -67,6 +76,39 @@
                     return this.tabList[this.selectedTab];
                 }
             },
+            settings: {
+                get() {
+                    return this.$store.state.settings;
+                }
+            },
+            tabList: {
+                get() {
+                    return [General, Networking].concat(this.$store.state.settings.lighting.supported ? Lighting : []);
+                }
+            }
+        },
+        methods: {
+            sendGeneralSettings() {
+                const self = this;
+                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
+                    function (response) {
+                        if (response.status === 200) {
+                            self.snackbar = {
+                                color: "success",
+                                text: "Settings updated successfully"
+                            };
+                            self.snack = true;
+                        }
+                    },
+                    function (error) {
+                        self.snackbar = {
+                            color: "error",
+                            text: (error.response || {data: "Couldn't save settings"}).data
+                        };
+                        self.snack = true;
+                    }
+                )
+            },
         }
     }
 </script>
@@ -81,8 +123,4 @@
         height: auto !important;
         vertical-align: middle;
     }
-
-    .colsClass {
-        padding: 0 !important;
-    }
 </style>
\ No newline at end of file
diff --git a/photon-client/src/views/SettingsViews/General.vue b/photon-client/src/views/SettingsViews/General.vue
index cb128429b..3aa0f2006 100644
--- a/photon-client/src/views/SettingsViews/General.vue
+++ b/photon-client/src/views/SettingsViews/General.vue
@@ -1,86 +1,55 @@
 <template>
   <div>
-    <div style="margin-top: 15px">
-      <span>General Settings:</span>
-      <v-divider color="white" />
-    </div>
-    <CVnumberinput
-      v-model="settings.teamNumber"
-      name="Team Number"
-    />
-    <CVradio
-      v-model="settings.connectionType"
-      :list="['DHCP','Static']"
-    />
-    <v-divider color="white" />
-    <CVinput
-      v-model="settings.ip"
-      name="IP"
-      :disabled="isDisabled"
-    />
-    <CVinput
-      v-model="settings.netmask"
-      name="NetMask"
-      :disabled="isDisabled"
-    />
-    <CVinput
-      v-model="settings.gateway"
-      name="Gateway"
-      :disabled="isDisabled"
-    />
-    <v-divider color="white" />
-    <CVinput
-      v-model="settings.hostname"
-      name="Hostname"
-    />
-    <v-btn
-      style="margin-top:10px"
-      small
-      color="#ffd843"
-      @click="sendGeneralSettings"
-    >
-      Save General Settings
-    </v-btn>
-    <div style="margin-top: 20px">
-      <span>Install or Update:</span>
-      <v-divider color="white" />
-    </div>
-    <div v-if="!isLoading">
-      <v-row
-        dense
-        align="center"
+    <span>Version: {{ settings.version }}</span>
+    &mdash;
+    <span>Hardware model: {{ settings.hardwareModel }}</span>
+    &mdash;
+    <span>Platform: {{ settings.hardwarePlatform }}</span>
+    &mdash;
+    <span>GPU Acceleration: {{ settings.gpuAcceleration ? "Enabled" : "Unsupported" }}{{ settings.gpuAcceleration ? " (" + settings.gpuAcceleration + " mode)" : "" }}</span>
+    <v-row>
+      <v-col
+        cols="12"
+        sm="6"
+        lg="4"
       >
-        <v-col :cols="3">
-          <span>Choose a newer version: </span>
-        </v-col>
-        <v-col :cols="6">
-          <v-file-input
-            v-model="file"
-            accept=".jar"
-            dark
-          />
-        </v-col>
-      </v-row>
-      <v-btn
-        small
-        @click="installOrUpdate"
+        <v-btn
+          color="secondary"
+          @click="$refs.exportSettings.click()"
+        >
+          <v-icon left>
+            mdi-download
+          </v-icon> Export Settings
+        </v-btn>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+        lg="4"
       >
-        {{ fileUploadText }}
-      </v-btn>
-    </div>
-    <div
-      v-else
-      style="text-align: center; margin-top: 20px"
-    >
-      <v-progress-circular
-        color="white"
-        :indeterminate="true"
-        size="32"
-        width="4"
-      />
-      <br>
-      <span>Please wait this may take a while</span>
-    </div>
+        <v-btn
+          color="secondary"
+          @click="$refs.importSettings.click()"
+        >
+          <v-icon left>
+            mdi-upload
+          </v-icon> Import Settings
+        </v-btn>
+      </v-col>
+      <v-col
+        cols="12"
+        lg="4"
+      >
+        <v-btn
+          color="red"
+          @click="restartDevice"
+        >
+          <v-icon left>
+            mdi-restart
+          </v-icon> Restart Device
+        </v-btn>
+      </v-col>
+    </v-row>
     <v-snackbar
       v-model="snack"
       top
@@ -88,101 +57,70 @@
     >
       <span>{{ snackbar.text }}</span>
     </v-snackbar>
+
+    <!-- Special hidden upload input that gets 'clicked' when the user imports settings -->
+    <input
+      ref="importSettings"
+      type="file"
+      accept=".zip"
+      style="display: none;"
+
+      @change="readImportedSettings"
+    >
+    <!-- Special hidden link that gets 'clicked' when the user exports settings -->
+    <a
+      ref="exportSettings"
+      style="color: black; text-decoration: none; display: none"
+      href="/api/settings/export"
+      download="photonvision-settings.zip"
+    />
   </div>
 </template>
 
 <script>
-    import CVnumberinput from '../../components/common/cv-number-input'
-    import CVradio from '../../components/common/cv-radio'
-    import CVinput from '../../components/common/cv-input'
-
     export default {
         name: 'General',
-        components: {
-            CVnumberinput,
-            CVradio,
-            CVinput
-        },
         data() {
-            return {
-                file: undefined,
-                snackbar: {
-                    color: "success",
-                    text: ""
-                },
-                snack: false,
-                isLoading: false
-            }
+          return {
+            snack: false,
+            snackbar: {
+              color: "success",
+              text: ""
+            },
+          }
         },
         computed: {
-            fileUploadText() {
-                if (this.file !== undefined) {
-                    return "Update and run at startup"
-                } else {
-                    return "Run current version at startup"
-                }
-            },
-            isDisabled() {
-                return this.settings.connectionType === 0;
-            },
-            settings: {
-                get() {
-                    return this.$store.state.settings;
-                }
-            }
+          settings() {
+            return this.$store.state.settings.general;
+          }
         },
         methods: {
-            sendGeneralSettings() {
-                const self = this;
-                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
-                    function (response) {
-                        if (response.status === 200) {
-                            self.snackbar = {
-                                color: "success",
-                                text: "Save successful, Please restart for changes to take action"
-                            };
-                            self.snack = true;
-                        }
-                    },
-                    function (error) {
-                        self.snackbar = {
-                            color: "error",
-                            text: error.response.data
-                        };
-                        self.snack = true;
-                    }
-                )
-            },
-            installOrUpdate() {
-                let formData = new FormData();
-                formData.append('file', this.file);
-                if (this.file !== undefined) {
-                    this.isLoading = true;
-                }
-                this.axios.post("http://" + this.$address + "/api/install", formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data'
-                    }
-                }).then(() => {
-                    this.snackbar = {
-                        color: "success",
-                        text: "Installation successful"
-                    };
-                    this.isLoading = false;
-                    this.snack = true;
-                }).catch(error => {
-                    this.snackbar = {
-                        color: "error",
-                        text: error.response.data
-                    };
-                    this.isLoading = false;
-                    this.snack = true;
-                })
-            }
+          readImportedSettings(event) {
+            let formData = new FormData();
+            formData.append("zipData", event.target.files[0]);
+            this.axios.post("http://" + this.$address + "/api/settings/import", formData,
+                    {headers: {"Content-Type": "multipart/form-data"}}).then(() => {
+              this.snackbar = {
+                color: "success",
+                text: "Settings imported successfully",
+              };
+            }).catch(() => {
+              this.snackbar = {
+                color: "error",
+                text: "Couldn't import settings",
+              }
+            });
+            this.snack = true;
+          },
+          restartDevice() {
+            this.axios.post("http://" + this.$address + "/api/restart");
+          }
         }
     }
 </script>
 
-<style lang="" scoped>
-
+<style lang="css" scoped>
+    .v-btn {
+        width: 100%;
+    }
 </style>
\ No newline at end of file
diff --git a/photon-client/src/views/SettingsViews/Lighting.vue b/photon-client/src/views/SettingsViews/Lighting.vue
new file mode 100644
index 000000000..960e3d16a
--- /dev/null
+++ b/photon-client/src/views/SettingsViews/Lighting.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <CVslider
+      v-model="settings.brightness"
+      class="pt-2"
+      slider-cols="12"
+      name="Brightness"
+      min="0"
+      max="100"
+      @input="handleData('accuracy')"
+      @rollback="e => rollback('accuracy', e)"
+    />
+  </div>
+</template>
+
+<script>
+    import CVslider from "../../components/common/cv-slider";
+
+    export default {
+        name: 'LEDs',
+        components: {
+            CVslider,
+        },
+        computed: {
+            isDHCP() {
+                return this.settings.connectionType === 0;
+            },
+            settings() {
+                return this.$store.state.settings.lighting;
+            }
+        },
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>
\ No newline at end of file
diff --git a/photon-client/src/views/SettingsViews/Networking.vue b/photon-client/src/views/SettingsViews/Networking.vue
new file mode 100644
index 000000000..3de8e1e07
--- /dev/null
+++ b/photon-client/src/views/SettingsViews/Networking.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <CVnumberinput
+      v-model="settings.teamNumber"
+      name="Team Number"
+      :rules="[v => (v > 0) || 'Team number must be greater than zero', v => (v < 10000) || 'Team number must have fewer than five digits']"
+    />
+    <template v-if="$store.state.settings.networking.supported">
+      <CVradio
+        v-model="settings.connectionType"
+        :list="['DHCP','Static']"
+      />
+      <template v-if="!isDHCP">
+        <CVinput
+          v-model="settings.ip"
+          :input-cols="inputCols"
+          :rules="[v => isIPv4(v) || 'Invalid IPv4 address']"
+          name="IP"
+        />
+        <CVinput
+          v-model="settings.netmask"
+          :input-cols="inputCols"
+          :rules="[v => isSubnetMask(v) || 'Invalid subnet mask']"
+          name="Subnet Mask"
+        />
+      </template>
+    </template>
+    <CVinput
+      v-model="settings.hostname"
+      :input-cols="inputCols"
+      :rules="[v => isHostname(v) || 'Invalid hostname']"
+      name="Hostname"
+    />
+  </div>
+</template>
+
+<script>
+    import CVnumberinput from '../../components/common/cv-number-input'
+    import CVradio from '../../components/common/cv-radio'
+    import CVinput from '../../components/common/cv-input'
+
+    // https://stackoverflow.com/a/17871737
+    const ipv4Regex = /^((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])$/;
+    // https://stackoverflow.com/a/18494710
+    const hostnameRegex = /^([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)+(\.([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*))*$/;
+
+    export default {
+        name: 'Networking',
+        components: {
+            CVnumberinput,
+            CVradio,
+            CVinput
+        },
+        data() {
+            return {
+                file: undefined,
+                snackbar: {
+                    color: "success",
+                    text: ""
+                },
+                snack: false,
+                isLoading: false
+            }
+        },
+        computed: {
+            inputCols() {
+              return this.$vuetify.breakpoint.smAndUp ? 10 : 7;
+            },
+            isDHCP() {
+                return this.settings.connectionType === 0;
+            },
+            settings() {
+                return this.$store.state.settings.networking;
+            }
+        },
+        methods: {
+            isIPv4(v) {
+              return ipv4Regex.test(v);
+            },
+            isHostname(v) {
+              return hostnameRegex.test(v);
+            },
+            // https://www.freesoft.org/CIE/Course/Subnet/6.htm
+            // https://stackoverflow.com/a/13957228
+            isSubnetMask(v) {
+              // Has to be valid IPv4 so we'll start here
+              if (!this.isIPv4(v)) return false;
+
+              let octets = v.split(".").map(it => Number(it));
+              let restAreOnes = false;
+              for (let i = 3; i >= 0; i--) {
+                for (let j = 0; j < 8; j++) {
+                  let bitValue = (octets[i] >>> j & 1) == 1;
+                  if (restAreOnes && !bitValue)
+                    return false;
+                  restAreOnes = bitValue;
+                }
+              }
+              return true;
+            }
+        },
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>
diff --git a/photon-server/src/main/resources/web/index.html b/photon-server/src/main/resources/web/index.html
index f008dfd12..988f55e6a 100644
--- a/photon-server/src/main/resources/web/index.html
+++ b/photon-server/src/main/resources/web/index.html
@@ -1 +1 @@
-<p>UI has not been copied!</p>
\ No newline at end of file
+<p>UI has not been copied!</p>