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/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>