Video single frame annotation

resources/assets/js/videos/components/settingsTab.vue

@@ -26,6 +26,7 @@ export default {
                 'enableJumpByFrame',
                 'jumpStep',
                 'muteVideo',
+                'singleAnnotation',
             ],
             annotationOpacity: 1,
             showMinimap: true,
@@ -38,6 +39,7 @@ export default {
             showThumbnailPreview: true,
             enableJumpByFrame: false,
             muteVideo: true,
+            singleAnnotation: false,
         };
     },
     computed: {
@@ -88,6 +90,12 @@ export default {
         handleUnmuteVideo() {
             this.muteVideo = false;
         },
+        handleSingleAnnotation() {
+            this.singleAnnotation = true;
+        },
+        handleDisableSingleAnnotation() {
+            this.singleAnnotation = false;
+        },
         toggleAnnotationOpacity() {
             if (this.annotationOpacity > 0) {
                 this.annotationOpacity = 0;
@@ -148,6 +156,10 @@ export default {
             this.$emit('update', 'muteVideo', show);
             Settings.set('muteVideo', show);
         },
+        singleAnnotation(show) {
+            this.$emit('update', 'singleAnnotation', show);
+            Settings.set('singleAnnotation', show);
+        },
     },
     created() {
         this.restoreKeys.forEach((key) => {

resources/assets/js/videos/components/videoScreen.vue

@@ -79,14 +79,14 @@
                         <control-button
                             icon="fa-check"
                             title="Finish the point annotation 𝗘𝗻𝘁𝗲𝗿"
-                            :disabled="cantFinishDrawAnnotation"
+                            :disabled="cantFinishDrawAnnotation || singleAnnotation"
                             @click="finishDrawAnnotation"
                             ></control-button>
                         <control-button
                             icon="fa-project-diagram"
                             title="Finish and track the point annotation"
                             v-on:click="finishTrackAnnotation"
-                            :disabled="cantFinishTrackAnnotation || disableJobTracking"
+                            :disabled="cantFinishTrackAnnotation || disableJobTracking || singleAnnotation"
                             :loading="disableJobTracking"
                             ></control-button>
                 </control-button>
@@ -102,7 +102,7 @@
                         <control-button
                             icon="fa-check"
                             title="Finish the rectangle annotation 𝗘𝗻𝘁𝗲𝗿"
-                            :disabled="cantFinishDrawAnnotation"
+                            :disabled="cantFinishDrawAnnotation || singleAnnotation"
                             @click="finishDrawAnnotation"
                             ></control-button>
                 </control-button>
@@ -118,14 +118,14 @@
                         <control-button
                             icon="fa-check"
                             title="Finish the circle annotation 𝗘𝗻𝘁𝗲𝗿"
-                            :disabled="cantFinishDrawAnnotation"
+                            :disabled="cantFinishDrawAnnotation || singleAnnotation"
                             @click="finishDrawAnnotation"
                             ></control-button>
                         <control-button
                             icon="fa-project-diagram"
                             title="Finish and track the circle annotation"
                             v-on:click="finishTrackAnnotation"
-                            :disabled="cantFinishTrackAnnotation || disableJobTracking"
+                            :disabled="cantFinishTrackAnnotation || disableJobTracking || singleAnnotation"
                             :loading="disableJobTracking"
                             ></control-button>
                 </control-button>
@@ -141,7 +141,7 @@
                         <control-button
                             icon="fa-check"
                             title="Finish the line annotation 𝗘𝗻𝘁𝗲𝗿"
-                            :disabled="cantFinishDrawAnnotation"
+                            :disabled="cantFinishDrawAnnotation || singleAnnotation"
                             @click="finishDrawAnnotation"
                             ></control-button>
                 </control-button>
@@ -157,7 +157,7 @@
                             v-if="isDrawingPolygon || isUsingPolygonBrush"
                             icon="fa-check"
                             title="Finish the polygon annotation 𝗘𝗻𝘁𝗲𝗿"
-                            :disabled="cantFinishDrawAnnotation"
+                            :disabled="cantFinishDrawAnnotation || singleAnnotation"
                             @click="finishDrawAnnotation"
                             ></control-button>
                         <control-button
@@ -360,6 +360,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        singleAnnotation: {
+            type: Boolean,
+            default: false,
+        },
         showMousePosition: {
             type: Boolean,
             default: true,

resources/assets/js/videos/components/videoScreen/drawInteractions.vue

@@ -7,21 +7,32 @@ import VectorLayer from '@biigle/ol/layer/Vector';
 import VectorSource from '@biigle/ol/source/Vector';
 import snapInteraction from "./snapInteraction.vue";
 import { isInvalidShape } from '../../../annotations/utils';
+import { Point } from '@biigle/ol/geom';
+import { computeDistance } from '../../utils';
 
 /**
  * Mixin for the videoScreen component that contains logic for the draw interactions.
  *
  * @type {Object}
  */
+
+const POINT_CLICK_COOLDOWN = 400;
+const POINT_CLICK_DISTANCE = 5;
+
 export default {
     mixins: [snapInteraction],
     data() {
         return {
             pendingAnnotation: {},
             autoplayDrawTimeout: null,
             drawEnded: true,
+            lastDrawnPoint: new Point(0, 0),
+            lastDrawnPointTime: 0,
         };
     },
+    props: ({
+        singleAnnotation: Boolean
+    }),
     computed: {
         hasSelectedLabel() {
             return !!this.selectedLabel;
@@ -63,6 +74,9 @@ export default {
         cantFinishTrackAnnotation() {
             return !this.pendingAnnotation.frames || this.pendingAnnotation.frames.length !== 1;
         },
+        singleAnnotationActive() {
+            return this.singleAnnotation;
+        },
     },
     methods: {
         requireSelectedLabel() {
@@ -199,13 +213,20 @@ export default {
             let lastFrame = this.pendingAnnotation.frames[this.pendingAnnotation.frames.length - 1];
 
             if (lastFrame === undefined || lastFrame < this.video.currentTime) {
-                this.pendingAnnotation.frames.push(this.video.currentTime);
-                this.pendingAnnotation.points.push(this.getPointsFromGeometry(e.feature.getGeometry()));
+                if (this.singleAnnotationActive && this.isPointDoubleClick(e)) { 
+                    this.pendingAnnotationSource.once('addfeature', function (e) {
+                        this.removeFeature(e.feature);
+                    });
+                }
+                else {
+                    this.pendingAnnotation.frames.push(this.video.currentTime);
+                    this.pendingAnnotation.points.push(this.getPointsFromGeometry(e.feature.getGeometry()));
 
-                if (!this.video.ended && this.autoplayDraw > 0) {
-                    this.play();
-                    window.clearTimeout(this.autoplayDrawTimeout);
-                    this.autoplayDrawTimeout = window.setTimeout(this.pause, this.autoplayDraw * 1000);
+                    if (!this.video.ended && this.autoplayDraw > 0) {
+                        this.play();
+                        window.clearTimeout(this.autoplayDrawTimeout);
+                        this.autoplayDrawTimeout = window.setTimeout(this.pause, this.autoplayDraw * 1000);
+                    }
                 }
             } else {
                 // If the pending annotation (time) is invalid, remove it again.
@@ -217,6 +238,35 @@ export default {
             }
 
             this.$emit('pending-annotation', this.pendingAnnotation);
+
+            if (this.singleAnnotationActive) {
+                if (this.isDrawingPoint) {
+                    if (this.isPointDoubleClick(e)) {
+                        this.resetPendingAnnotation(this.pendingAnnotation.shape);
+                        return;
+                    }
+                    this.lastDrawnPointTime = new Date().getTime();
+                    this.lastDrawnPoint = e.feature.getGeometry();
+                }
+            this.pendingAnnotationSource.once('addfeature', this.finishDrawAnnotation);
+                /*
+                if (!this.isDrawingPoint) {
+                    this.pendingAnnotationSource.once('addfeature', this.finishDrawAnnotation);
+                }
+                else {
+                    if (this.isPointDoubleClick(e)) {
+                        this.resetPendingAnnotation(this.pendingAnnotation.shape);
+                        return;
+                    }
+                    this.lastDrawnPointTime = new Date().getTime();
+                    this.lastDrawnPoint = e.feature.getGeometry();
+                    this.pendingAnnotationSource.once('addfeature', this.finishDrawAnnotation);
+                } */
+            }
+        },
+        isPointDoubleClick(e) {
+            return new Date().getTime() - this.lastDrawnPointTime < POINT_CLICK_COOLDOWN
+                && computeDistance(this.lastDrawnPoint, e.feature.getGeometry()) < POINT_CLICK_DISTANCE;
         },
     },
     created() {

resources/assets/js/videos/stores/settings.js

@@ -11,6 +11,7 @@ let defaults = {
     enableJumpByFrame: false,
     jumpStep: 5.0,
     muteVideo: true,
+    singleAnnotation: false,
 };
 
 export default new Settings({

resources/assets/js/videos/utils.js

@@ -24,4 +24,10 @@ let getRoundToPrecision = function (reference) {
     };
 };
 
-export {getRoundToPrecision};
+let computeDistance = function (point1, point2) {
+    let p1 = point1.getCoordinates();
+    let p2 = point2.getCoordinates();
+    return Math.sqrt(Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2));
+};
+
+export { getRoundToPrecision, computeDistance };

resources/assets/js/videos/videoContainer.vue

@@ -73,6 +73,7 @@ export default {
                 showThumbnailPreview: true,
                 enableJumpByFrame: false,
                 muteVideo: true,
+                singleAnnotation: false,
             },
             openTab: '',
             urlParams: {

resources/views/manual/tutorials/videos/sidebar.blade.php

@@ -87,5 +87,9 @@
         <p>
             The mute video switch enables or disables the audio track of the video.
         </p>
+
+        <p>
+            The Single Frame Annotation switch allows you to add annotations with a single click by automatically completing them after the first frame. When enabled, additional controls for finishing and tracking are disabled.
+        </p>
     </div>
 @endsection

resources/views/videos/show/content.blade.php

@@ -38,6 +38,7 @@
       :selected-label="selectedLabel"
       :show-label-tooltip="settings.showLabelTooltip"
       :show-minimap="settings.showMinimap"
+      :single-annotation="settings.singleAnnotation"
       :show-mouse-position="settings.showMousePosition"
       :enable-jump-by-frame="settings.enableJumpByFrame"
       :video="video"

resources/views/videos/show/sidebar-settings.blade.php

@@ -52,6 +52,10 @@
                 <div class="sidebar-tab__section">
                     <power-toggle :active="muteVideo" title-off="Mute video" title-on="Unmute video" v-on:on="handleMuteVideo" v-on:off="handleUnmuteVideo">Mute Video</power-toggle>
                 </div>
+
+                <div class="sidebar-tab__section">
+                    <power-toggle :active="singleAnnotation" title-off="Enable Single-Frame Annotation" title-on="Disable Single-Frame Annotation" v-on:on="handleSingleAnnotation" v-on:off="handleDisableSingleAnnotation">Single-Frame Annotation</power-toggle>
+                </div>
             </div>
     </settings-tab>
 </sidebar-tab>