Change Linked Camera Behavior

client/dive-common/components/ConfidenceSubsection.vue

@@ -19,6 +19,11 @@ export default defineComponent({
       type: Array as PropType<[string, number][]>,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
   },
   setup() {
     const typeStylingRef = useTypeStyling();
@@ -82,12 +87,35 @@ export default defineComponent({
                 }"
               />
             </v-col>
-            <v-col class="type-item-value">
+            <v-col :cols="pair[1] !== 1 && !disabled ? '7' : '8'">
               {{ pair[0] }}
             </v-col>
-            <v-col class="type-score">
+            <v-spacer />
+            <v-col class="type-score shrink mr-1">
               {{ pair[1].toFixed(4) }}
             </v-col>
+            <v-col
+              v-if="pair[1] !== 1 && !disabled"
+              class="shrink"
+            >
+              <v-tooltip
+                open-delay="200"
+                bottom
+              >
+                <template #activator="{ bind, on }">
+                  <v-btn
+                    x-small
+                    icon
+                    v-bind="bind"
+                    v-on="on"
+                    @click="$emit('set-type', pair[0])"
+                  >
+                    <v-icon>mdi-check</v-icon>
+                  </v-btn>
+                </template>
+                <span>Accept {{ pair[0] }} as correct type</span>
+              </v-tooltip>
+            </v-col>
           </v-row>
         </span>
       </v-col>
@@ -97,19 +125,9 @@ export default defineComponent({
 
 <style lang="scss">
 .type-color-box {
-  margin-top: 5px;
   min-width: 10px;
   max-width: 10px;
   min-height: 10px;
   max-height: 10px;
 }
-.type-item-value {
-  max-width: 80%;
-  margin: 0px;
-}
-.type-score {
-  font-size: 1em;
-  max-width: 25%;
-  min-width: 25%;
-}
 </style>

client/dive-common/components/ImageEnhancements.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { useHandler, useImageEnhancements } from 'vue-media-annotator/provides';
+
+export default defineComponent({
+  name: 'ImageEnhancements',
+  description: 'Image controls',
+  setup() {
+    const { setSVGFilters } = useHandler();
+    const imageEnhancements = useImageEnhancements();
+    const range = ref([
+      (imageEnhancements.value.blackPoint ?? 0) * 255.0,
+      (imageEnhancements.value.whitePoint ?? 1) * 255.0,
+    ]);
+    const modifyValue = () => {
+      setSVGFilters({ blackPoint: range.value[0] / 255.0, whitePoint: range.value[1] / 255.0 });
+    };
+    return {
+      modifyValue,
+      range,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="mx-4">
+    <span class="text-body-2">
+      Controls for adjusting images.
+    </span>
+    <v-divider class="my-3" />
+    <v-range-slider
+      v-model="range"
+      :min="0"
+      :max="255"
+      :step="1.0"
+      thumb-label="always"
+      label="Contrast:"
+      class="my-4"
+      @input="modifyValue"
+    />
+    <v-btn
+      block
+      depressed
+      color="warning"
+      class="my-2"
+      @click="range = [0, 255]; modifyValue()"
+    >
+      Reset
+    </v-btn>
+  </div>
+</template>
+
+<style scoped>
+</style>

client/dive-common/components/TrackDetailsPanel.vue

@@ -336,6 +336,8 @@ export default defineComponent({
         :confidence-pairs="
           flatten(selectedTrackList.map((t) => t.confidencePairs)).sort((a, b) => b[1] - a[1])
         "
+        :disabled="selectedTrackList.length > 1"
+        @set-type="selectedTrackList[0].setType($event)"
       />
       <attribute-subsection
         v-if="!mergeInProgress"

client/dive-common/components/Viewer.vue

@@ -9,6 +9,7 @@ import type { AxiosError } from 'axios';
 import Track, { TrackId } from 'vue-media-annotator/track';
 import {
   useAttributes,
+  useImageEnhancements,
   useLineChart,
   useStyling,
   useTrackFilters,
@@ -125,6 +126,13 @@ export default defineComponent({
       addCamera: addSaveCamera,
     } = useSave(datasetId, readonlyState);
 
+    const {
+      imageEnhancements,
+      brightness,
+      intercept,
+      setSVGFilters,
+    } = useImageEnhancements();
+
     const recipes = [
       new PolygonBase(),
       new HeadTail(),
@@ -553,6 +561,7 @@ export default defineComponent({
       setSelectedCamera,
       linkCameraTrack,
       unlinkCameraTrack,
+      setSVGFilters,
     };
 
     provideAnnotator(
@@ -582,6 +591,7 @@ export default defineComponent({
         time,
         visibleModes,
         readOnlyMode: readonlyState,
+        imageEnhancements,
       },
       globalHandler,
     );
@@ -620,6 +630,8 @@ export default defineComponent({
       originalFps: time.originalFps,
       context,
       readonlyState,
+      brightness,
+      intercept,
       /* methods */
       handler: globalHandler,
       save,
@@ -829,7 +841,7 @@ export default defineComponent({
                 :class="{'selected-camera': selectedCamera === camera && camera !== 'singleCam'}"
                 v-bind="{
                   imageData: imageData[camera], videoUrl: videoUrl[camera],
-                  updateTime, frameRate, originalFps, camera }"
+                  updateTime, frameRate, originalFps, camera, brightness, intercept }"
               >
                 <LayerManager :camera="camera" />
               </component>

client/dive-common/store/context.ts

@@ -2,6 +2,7 @@ import Install, { reactive } from '@vue/composition-api';
 import Vue, { VueConstructor } from 'vue';
 /* Components */
 import TypeThreshold from 'dive-common/components/TypeThreshold.vue';
+import ImageEnhancements from 'dive-common/components/ImageEnhancements.vue';
 import MultiCamTools from 'dive-common/components/MultiCamTools.vue';
 
 Vue.use(Install);
@@ -28,6 +29,10 @@ const componentMap: Record<string, ComponentMapItem> = {
     description: 'Multicam Tools',
     component: MultiCamTools,
   },
+  ImageEnhancements: {
+    description: 'Image Enhancements',
+    component: ImageEnhancements,
+  },
 };
 
 function register(item: ComponentMapItem) {

client/platform/desktop/frontend/components/ImportDialog.vue

@@ -187,6 +187,7 @@ export default defineComponent({
             label="Annotation File (Optional)"
             hint="Optional. Load existing annotations. Supports DIVE JSON and VIAME CSV"
             persistent-hint
+            @input="argCopy.trackFileAbsPath = $event"
             @click="openUpload('annotation')"
             @click:prepend-inner="openUpload('annotation')"
             @click:clear="argCopy.trackFileAbsPath=''"
@@ -227,6 +228,7 @@ export default defineComponent({
           label="Configuration File (Optional)"
           hint="Optional. Supports DIVE JSON configuration file."
           persistent-hint
+          @input="argCopy.metaFileAbsPath = $event"
           @click="openUpload('meta')"
           @click:prepend-inner="openUpload('meta')"
           @click:clear="argCopy.metaFileAbsPath=''"

client/src/components/annotators/ImageAnnotator.vue

@@ -51,6 +51,10 @@ export default defineComponent({
       type: String as PropType<string>,
       default: 'singleCam',
     },
+    intercept: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
   },
 
   setup(props) {
@@ -417,14 +421,17 @@ export default defineComponent({
             <feFuncR
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncG
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncB
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
           </feComponentTransfer>
         </filter>

client/src/components/annotators/VideoAnnotator.vue

@@ -102,6 +102,11 @@ export default defineComponent({
       type: String as PropType<string>,
       default: 'singleCam',
     },
+    intercept: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
+
   },
 
   setup(props) {
@@ -301,14 +306,17 @@ export default defineComponent({
             <feFuncR
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncG
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncB
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
           </feComponentTransfer>
         </filter>

client/src/components/annotators/useMediaController.ts

@@ -145,15 +145,25 @@ export function useMediaController() {
       allowCameraTrigger = false;
       Object.entries(geoViewers).forEach(([camera, geoViewer]) => {
         if (geoViewer.value && camera !== camEvent.camera) {
-          geoViewer.value.center(activeMap.center());
-          geoViewer.value.zoom(activeMap.zoom());
-          geoViewer.value.rotation(activeMap.rotation());
+          geoViewer.value.pan(camEvent.event.screenDelta);
         }
       });
       allowCameraTrigger = true;
     }
   });
 
+  bus.$on('zoom', (camEvent: {camera: string; event: GeoEvent}) => {
+    const activeMap = geoViewers[camEvent.camera]?.value;
+    if (activeMap !== undefined && synchronizeCameras.value) {
+      allowCameraTrigger = false;
+      Object.entries(geoViewers).forEach(([camera, geoViewer]) => {
+        if (geoViewer.value && camera !== camEvent.camera) {
+          geoViewer.value.zoom(activeMap.zoom());
+        }
+      });
+      allowCameraTrigger = true;
+    }
+  });
   /**
    * This secondary initialization wrapper solves a sort of
    * chicken-and-egg problem, allowing the function consumer to use
@@ -304,11 +314,17 @@ export function useMediaController() {
 
       //Add in bus control synchronization for cameras
       geoViewers[camera].value.geoOn(geo.event.pan, (e: GeoEvent) => {
-        // Only trigger if not handling other camera interactions.rrrrr
+        // Only trigger if not handling other camera interactions.
         if (allowCameraTrigger) {
           bus.$emit('pan', { camera: camera.toString(), event: e });
         }
       });
+      geoViewers[camera].value.geoOn(geo.event.zoom, (e: GeoEvent) => {
+        // Only trigger if not handling other camera interactions.
+        if (allowCameraTrigger) {
+          bus.$emit('zoom', { camera: camera.toString(), event: e });
+        }
+      });
     }
 
     function prevFrame() {

client/src/components/controls/Controls.vue

@@ -3,6 +3,7 @@ import {
   defineComponent, reactive, watch,
 } from '@vue/composition-api';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
+import context from 'dive-common/store/context';
 import { injectAggregateController } from '../annotators/useMediaController';
 
 export default defineComponent({
@@ -42,12 +43,17 @@ export default defineComponent({
       }
     }
 
+    function toggleEnhancements() {
+      context.toggle('ImageEnhancements');
+    }
+
     return {
       data,
       mediaController,
       dragHandler,
       input,
       togglePlay,
+      toggleEnhancements,
       visible,
     };
   },
@@ -62,6 +68,12 @@ export default defineComponent({
       { bind: 'space', handler: togglePlay, disabled: visible() },
       { bind: 'f', handler: mediaController.nextFrame, disabled: visible() },
       { bind: 'd', handler: mediaController.prevFrame, disabled: visible() },
+      {
+        bind: 'l',
+        handler: () => mediaController.toggleSynchronizeCameras(!mediaController.cameraSync.value),
+        disabled: visible(),
+      },
+
     ]"
   >
     <v-card
@@ -151,6 +163,15 @@ export default defineComponent({
           >
             <v-icon>mdi-image-filter-center-focus</v-icon>
           </v-btn>
+          <v-btn
+            icon
+            small
+            title="Image Enhancements"
+            @click="toggleEnhancements"
+          >
+            <v-icon>mdi-contrast-box</v-icon>
+          </v-btn>
+
           <v-btn
             v-if="mediaController.cameras.value.length > 1"
             icon