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.

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

Display of Annotation Type #1192

Merged
merged 27 commits into from
Jul 24, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
fd3e896
resolved merge conflicts
Priya4607 Mar 23, 2020
1ec2869
annotation_type field support for tags, tf_annotation api, cvat-dumpe…
Priya4607 Mar 23, 2020
98f1fd2
unit test fix
Priya4607 Mar 23, 2020
5c170c8
squashed migrations
Priya4607 Mar 23, 2020
732f95c
updated CHANGELOG.md
Priya4607 Apr 13, 2020
b79deae
fixed unit test issues
Priya4607 Apr 13, 2020
cec9060
Resolved merge conflicts
Priya4607 Apr 17, 2020
e21c824
minor fix
Priya4607 Apr 17, 2020
9bb111b
resolved merge conflicts
Priya4607 May 11, 2020
0405dbb
eslint fix
Priya4607 May 11, 2020
9d6a095
updated CHANGELOG.md [1.0.0-beta.2], changed cvat-canvas file
Priya4607 May 29, 2020
00598ab
Unit test case
Priya4607 May 29, 2020
48eca64
Merge branch 'develop' of https://github.com/opencv/cvat into auto_vs…
Priya4607 Jun 2, 2020
4bf3e48
updated CHANGELOG.md [1.1.0-alpha]
Priya4607 Jun 2, 2020
ec69c8a
resolved conflicts
Priya4607 Jun 2, 2020
904a206
fixed unit test
Priya4607 Jun 20, 2020
14659bd
resolved conflicts
Priya4607 Jun 20, 2020
30cda12
*removed empty migration files
Priya4607 Jun 30, 2020
c1149bf
resolved conflicts
Priya4607 Jun 30, 2020
3695a5d
unit test fix
Priya4607 Jun 30, 2020
adf086d
resolved conflicts
Priya4607 Jul 16, 2020
f34ba1f
Merge branch 'develop' of https://github.com/opencv/cvat into auto_vs…
Priya4607 Jul 18, 2020
cccecb0
minor changes
Priya4607 Jul 18, 2020
58e41fa
Merge branch 'develop' of https://github.com/opencv/cvat into auto_vs…
Priya4607 Jul 19, 2020
3513fe7
included migrations
Priya4607 Jul 19, 2020
c3590a1
updated CHANGELOG.md
Priya4607 Jul 20, 2020
562ea5f
updated CHANGELOG.md
Priya4607 Jul 23, 2020
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
1 change: 1 addition & 0 deletions cvat-canvas/src/typescript/canvasModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface DrawData {
numberOfPoints?: number;
initialState?: any;
crosshair?: boolean;
annotation_type?: string;
Copy link
Member

Choose a reason for hiding this comment

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

Let's use camelCase code style on frontend

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay

}

export interface EditData {
Expand Down
35 changes: 28 additions & 7 deletions cvat-canvas/src/typescript/canvasView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
Mode,
Size,
} from './canvasModel';
import { isNullOrUndefined } from 'util';
Copy link
Member

Choose a reason for hiding this comment

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

The symbol is unused


export interface CanvasView {
html(): HTMLDivElement;
Expand Down Expand Up @@ -114,14 +115,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
}
}

private onEditDone(state: any, points: number[]): void {
if (state && points) {
private onEditDone(state: any, points: number[], annotation_type: string): void {
Copy link
Member

Choose a reason for hiding this comment

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

I suppose if a shape was edited it always become manual. Right? It's why I believe we do not need this argument and return value in event details below in this case.

if (state && points && annotation_type) {
const event: CustomEvent = new CustomEvent('canvas.edited', {
bubbles: false,
cancelable: true,
detail: {
state,
points,
annotation_type,
},
});

Expand Down Expand Up @@ -433,9 +435,11 @@ export class CanvasViewImpl implements CanvasView, Listener {
));
if (e.ctrlKey) {
const { points } = state;
const annotation_type = 'Manual';
self.onEditDone(
state,
points.slice(0, pointID * 2).concat(points.slice(pointID * 2 + 2)),
annotation_type,
);
} else if (e.shiftKey) {
self.canvas.dispatchEvent(new CustomEvent('canvas.editstart', {
Expand Down Expand Up @@ -859,6 +863,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
attributes: { ...state.attributes },
zOrder: state.zOrder,
pinned: state.pinned,
annotation_type: state.annotation_type,
};
}

Expand Down Expand Up @@ -1174,7 +1179,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
id: state.clientID,
},
}));
this.onEditDone(state, points);
const annotation_type = 'Manual';
this.onEditDone(state, points, annotation_type);
}
});
}
Expand Down Expand Up @@ -1222,6 +1228,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
+ `${shape.attr('x') + shape.attr('width')},`
+ `${shape.attr('y') + shape.attr('height')}`,
).map((x: number): number => x - offset);
const annotation_type = 'Manual';

this.drawnStates[state.clientID].points = points;
this.canvas.dispatchEvent(new CustomEvent('canvas.resizeshape', {
Expand All @@ -1231,7 +1238,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
id: state.clientID,
},
}));
this.onEditDone(state, points);
this.onEditDone(state, points, annotation_type);
}
});

Expand Down Expand Up @@ -1313,14 +1320,14 @@ export class CanvasViewImpl implements CanvasView, Listener {
}

private addText(state: any): SVG.Text {
const { label, clientID, attributes } = state;
const { label, clientID, attributes, annotation_type } = state;
const attrNames = label.attributes.reduce((acc: any, val: any): void => {
acc[val.id] = val.name;
return acc;
}, {});

return this.adoptedText.text((block): void => {
block.tspan(`${label.name} ${clientID}`).style('text-transform', 'uppercase');
block.tspan(`${label.name} ${clientID} (${annotation_type})`).style('text-transform', 'uppercase');
for (const attrID of Object.keys(attributes)) {
block.tspan(`${attrNames[attrID]}: ${attributes[attrID]}`).attr({
attrID,
Expand All @@ -1333,6 +1340,9 @@ export class CanvasViewImpl implements CanvasView, Listener {

private addRect(points: number[], state: any): SVG.Rect {
const [xtl, ytl, xbr, ybr] = points;
if (typeof (state.annotation_type) === 'undefined') {
Copy link
Member

Choose a reason for hiding this comment

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

How is it possible?

Copy link
Member

Choose a reason for hiding this comment

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

The same question in two cases below

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In some cases, especially in case of tracks, the value becomes UNDEFINED for subsequent frames.

state.annotation_type = 'Manual';
}
const rect = this.adoptedContent.rect().size(xbr - xtl, ybr - ytl).attr({
clientID: state.clientID,
'color-rendering': 'optimizeQuality',
Expand All @@ -1342,6 +1352,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
stroke: state.color,
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
'data-z-order': state.zOrder,
annotation_type: state.annotation_type,
}).move(xtl, ytl)
.addClass('cvat_canvas_shape');

Expand All @@ -1357,6 +1368,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
}

private addPolygon(points: string, state: any): SVG.Polygon {
if (typeof (state.annotation_type) === 'undefined') {
state.annotation_type = 'Manual';
}
const polygon = this.adoptedContent.polygon(points).attr({
clientID: state.clientID,
'color-rendering': 'optimizeQuality',
Expand All @@ -1366,6 +1380,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
stroke: state.color,
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
'data-z-order': state.zOrder,
annotation_type: state.annotation_type,
}).addClass('cvat_canvas_shape');

if (state.occluded) {
Expand All @@ -1380,6 +1395,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
}

private addPolyline(points: string, state: any): SVG.PolyLine {
if (typeof (state.annotation_type) === 'undefined') {
state.annotation_type = 'Manual';
}
const polyline = this.adoptedContent.polyline(points).attr({
clientID: state.clientID,
'color-rendering': 'optimizeQuality',
Expand All @@ -1389,6 +1407,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
stroke: state.color,
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
'data-z-order': state.zOrder,
annotation_type: state.annotation_type,
}).addClass('cvat_canvas_shape');

if (state.occluded) {
Expand Down Expand Up @@ -1424,12 +1443,14 @@ export class CanvasViewImpl implements CanvasView, Listener {
}

private addPoints(points: string, state: any): SVG.PolyLine {
state.annotation_type = 'Manual';
Copy link
Member

Choose a reason for hiding this comment

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

Why points are always manual?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

From my understanding, TF auto annotation API does not support shapes other than rectangles.

Copy link
Member

Choose a reason for hiding this comment

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

@Priya4607
I believe if we introduce functionality that affects the whole CVAT, we shouldn't think only about TF Auto Annotation. There are (and will be) other methods to create automatic annotations. If it works only with tf annotation it should be implemented inside TF Auto Annotation plugin IMHO.

const shape = this.adoptedContent.polyline(points).attr({
'color-rendering': 'optimizeQuality',
'pointer-events': 'none',
'shape-rendering': 'geometricprecision',
'stroke-width': 0,
fill: state.color, // to right fill property when call SVG.Shape::clone()
fill: state.color, // to right fill property when call SVG.Shape::clone(
annotation_type: state.annotation_type,
}).style({
opacity: 0,
});
Expand Down
16 changes: 16 additions & 0 deletions cvat-canvas/src/typescript/drawHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,9 +178,11 @@ export class DrawHandlerImpl implements DrawHandler {
this.cancel();

if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) {
this.drawData.annotation_type = 'Manual';
Copy link
Member

Choose a reason for hiding this comment

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

Should we change this file?
Everything drawn by a user is manual. Right? It seems we need only once put the type in cvat-ui/../../canvas-wrapper.tsx in callback onShapeDrawn

this.onDrawDone({
shapeType,
points: [xtl, ytl, xbr, ybr],
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp);
}
}).on('drawupdate', (): void => {
Expand Down Expand Up @@ -211,9 +213,11 @@ export class DrawHandlerImpl implements DrawHandler {
this.cancel();

if ((xbr - xtl) * (ybr - ytl) >= consts.AREA_THRESHOLD) {
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType,
points: [xtl, ytl, xbr, ybr],
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp);
}
}
Expand Down Expand Up @@ -298,23 +302,29 @@ export class DrawHandlerImpl implements DrawHandler {
if (shapeType === 'polygon'
&& ((box.xbr - box.xtl) * (box.ybr - box.ytl) >= consts.AREA_THRESHOLD)
&& points.length >= 3 * 2) {
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType,
points,
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp);
} else if (shapeType === 'polyline'
&& ((box.xbr - box.xtl) >= consts.SIZE_THRESHOLD
|| (box.ybr - box.ytl) >= consts.SIZE_THRESHOLD)
&& points.length >= 2 * 2) {
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType,
points,
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp);
} else if (shapeType === 'points'
&& (e.target as any).getAttribute('points') !== '0,0') {
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType,
points,
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp);
}
});
Expand Down Expand Up @@ -358,6 +368,7 @@ export class DrawHandlerImpl implements DrawHandler {

const { points } = this.getFinalPolyshapeCoordinates(targetPoints);
this.release();
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType: this.drawData.initialState.shapeType,
objectType: this.drawData.initialState.objectType,
Expand All @@ -366,6 +377,7 @@ export class DrawHandlerImpl implements DrawHandler {
attributes: { ...this.drawData.initialState.attributes },
label: this.drawData.initialState.label,
color: this.drawData.initialState.color,
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey);
});
}
Expand Down Expand Up @@ -398,6 +410,7 @@ export class DrawHandlerImpl implements DrawHandler {
const bbox = this.drawInstance.node.getBBox();
const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox);
this.release();
this.drawData.annotation_type = 'Manual';
this.onDrawDone({
shapeType: this.drawData.initialState.shapeType,
objectType: this.drawData.initialState.objectType,
Expand All @@ -406,6 +419,7 @@ export class DrawHandlerImpl implements DrawHandler {
attributes: { ...this.drawData.initialState.attributes },
label: this.drawData.initialState.label,
color: this.drawData.initialState.color,
annotation_type: this.drawData.annotation_type,
}, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey);
});
}
Expand Down Expand Up @@ -540,6 +554,7 @@ export class DrawHandlerImpl implements DrawHandler {
if (this.drawData.initialState) {
const { offset } = this.geometry;
if (this.drawData.shapeType === 'rectangle') {
this.drawData.annotation_type = 'Manual';
const [xtl, ytl, xbr, ybr] = this.drawData.initialState.points
.map((coord: number): number => coord + offset);

Expand All @@ -566,6 +581,7 @@ export class DrawHandlerImpl implements DrawHandler {
} else {
if (this.drawData.shapeType === 'rectangle') {
if (this.drawData.rectDrawingMethod === RectDrawingMethod.EXTREME_POINTS) {
this.drawData.annotation_type = 'Manual';
// draw box by extreme clicking
this.drawBoxBy4Points();
} else {
Expand Down
2 changes: 2 additions & 0 deletions cvat-core/src/annotations-collection.js
Original file line number Diff line number Diff line change
Expand Up @@ -748,6 +748,7 @@
points: [...state.points],
type: state.shapeType,
z_order: state.zOrder,
annotation_type: state.annotation_type,
});
} else if (state.objectType === 'track') {
constructed.tracks.push({
Expand All @@ -765,6 +766,7 @@
points: [...state.points],
type: state.shapeType,
z_order: state.zOrder,
annotation_type: state.annotation_type,
}],
});
} else {
Expand Down
Loading