Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video single frame annotation #1019

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Video single frame annotation #1019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
787630e
Add Single-Frame Annotation button to settings
aneust Dec 19, 2024
867a7bd
Add description for Single-Frame Annotation option
aneust Dec 19, 2024
f4d4478
Add single frame annotation, disable control buttons, prevent double-…
aneust Dec 19, 2024
9f6ec6d
remove duplication
aneust Jan 7, 2025
231fa11
Fix sketch line problem, rework double-click handling
aneust Jan 14, 2025
5261bf0
Merge branch 'master' into videoAnnotation
aneust Jan 14, 2025
a79da52
Implement requested changes
aneust Jan 28, 2025
3cd67f8
Removed unused import
aneust Jan 28, 2025
97b7239
Implement requested changes
aneust Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions resources/assets/js/videos/components/settingsTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default {
'enableJumpByFrame',
'jumpStep',
'muteVideo',
'singleAnnotation',
],
annotationOpacity: 1,
showMinimap: true,
Expand All @@ -38,6 +39,7 @@ export default {
showThumbnailPreview: true,
enableJumpByFrame: false,
muteVideo: true,
singleAnnotation: false,
};
},
computed: {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down
24 changes: 17 additions & 7 deletions resources/assets/js/videos/components/videoScreen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,14 @@
<control-button
icon="fa-check"
title="Finish the point annotation 𝗘𝗻𝘁𝗲𝗿"
:disabled="cantFinishDrawAnnotation"
:disabled="disableFinishDrawAnnotation"
@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="disableFinishTrackAnnotation"
:loading="disableJobTracking"
></control-button>
</control-button>
Expand All @@ -102,7 +102,7 @@
<control-button
icon="fa-check"
title="Finish the rectangle annotation 𝗘𝗻𝘁𝗲𝗿"
:disabled="cantFinishDrawAnnotation"
:disabled="disableFinishDrawAnnotation"
@click="finishDrawAnnotation"
></control-button>
</control-button>
Expand All @@ -118,14 +118,14 @@
<control-button
icon="fa-check"
title="Finish the circle annotation 𝗘𝗻𝘁𝗲𝗿"
:disabled="cantFinishDrawAnnotation"
:disabled="disableFinishDrawAnnotation"
@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="disableFinishTrackAnnotation"
:loading="disableJobTracking"
></control-button>
</control-button>
Expand All @@ -141,7 +141,7 @@
<control-button
icon="fa-check"
title="Finish the line annotation 𝗘𝗻𝘁𝗲𝗿"
:disabled="cantFinishDrawAnnotation"
:disabled="disableFinishDrawAnnotation"
@click="finishDrawAnnotation"
></control-button>
</control-button>
Expand All @@ -157,7 +157,7 @@
v-if="isDrawingPolygon || isUsingPolygonBrush"
icon="fa-check"
title="Finish the polygon annotation 𝗘𝗻𝘁𝗲𝗿"
:disabled="cantFinishDrawAnnotation"
:disabled="disableFinishDrawAnnotation"
@click="finishDrawAnnotation"
></control-button>
<control-button
Expand Down Expand Up @@ -360,6 +360,10 @@ export default {
type: Boolean,
default: true,
},
singleAnnotation: {
type: Boolean,
default: false,
},
showMousePosition: {
type: Boolean,
default: true,
Expand Down Expand Up @@ -429,6 +433,12 @@ export default {
jumpForwardMessage() {
return `Advance video by ${this.jumpStep} s 𝗖𝘁𝗿𝗹+𝗥𝗶𝗴𝗵𝘁 𝗮𝗿𝗿𝗼𝘄`;
},
disableFinishTrackAnnotation() {
return this.cantFinishTrackAnnotation || this.disableJobTracking || this.singleAnnotation
},
disableFinishDrawAnnotation() {
return this.cantFinishDrawAnnotation || this.singleAnnotation
},
},
methods: {
createMap() {
Expand Down
48 changes: 42 additions & 6 deletions resources/assets/js/videos/components/videoScreen/drawInteractions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,35 @@ 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;

Comment on lines +11 to +21
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since computeDistance and the constants are used both in the image annotation tool and the video annotation tool, please create a new file for these and reuse the same function/constants in both tools.

export default {
mixins: [snapInteraction],
data() {
return {
pendingAnnotation: {},
autoplayDrawTimeout: null,
drawEnded: true,
lastDrawnPoint: new Point(0, 0),
lastDrawnPointTime: 0,
};
},
props: {
singleAnnotation: {
type: Boolean,
default: false
}
},
computed: {
hasSelectedLabel() {
return !!this.selectedLabel;
Expand Down Expand Up @@ -199,13 +213,19 @@ 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.singleAnnotation && this.isPointDoubleClick(e)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't you have to check this.isDrawingPoint here, too?

this.pendingAnnotationSource.once('addfeature', function (e) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add the explanation:

// The feature is added to the source only after this event
// is handled, so remove has to happen after the addfeature
// event.

this.removeFeature(e.feature);
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't you return here and skip the rest of the function?

} 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.
Expand All @@ -217,6 +237,22 @@ export default {
}

this.$emit('pending-annotation', this.pendingAnnotation);

if (this.singleAnnotation) {
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);
}
Comment on lines +241 to +251
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel all this can be added to the if above when refactored appropriately. This also would add the ´return` I asked for above.

},
isPointDoubleClick(e) {
return new Date().getTime() - this.lastDrawnPointTime < POINT_CLICK_COOLDOWN
&& computeDistance(this.lastDrawnPoint, e.feature.getGeometry()) < POINT_CLICK_DISTANCE;
},
},
created() {
Expand Down
1 change: 1 addition & 0 deletions resources/assets/js/videos/stores/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ let defaults = {
enableJumpByFrame: false,
jumpStep: 5.0,
muteVideo: true,
singleAnnotation: false,
};

export default new Settings({
Expand Down
8 changes: 7 additions & 1 deletion resources/assets/js/videos/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
1 change: 1 addition & 0 deletions resources/assets/js/videos/videoContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default {
showThumbnailPreview: true,
enableJumpByFrame: false,
muteVideo: true,
singleAnnotation: false,
},
openTab: '',
urlParams: {
Expand Down
4 changes: 4 additions & 0 deletions resources/views/manual/tutorials/videos/sidebar.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions resources/views/videos/show/content.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 4 additions & 0 deletions resources/views/videos/show/sidebar-settings.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The title is not very helpful. What about "Enable always creating single-frame annotations" (and "Disable ...")?

</div>
</div>
</settings-tab>
</sidebar-tab>