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