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

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);
                 }
             }
         },

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

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