This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-234 by this push:
new d28ecfd Rework image labeling
d28ecfd is described below
commit d28ecfda1248ed5e7e3a9f31deddfdeda4a276af
Author: Philipp Zehnder <[email protected]>
AuthorDate: Tue Oct 27 21:29:00 2020 +0100
Rework image labeling
---
.../all_pipeline_elements_jvm.xml | 1 +
.idea/runConfigurations/sinks_internal_jvm.xml | 2 +-
ui/src/app/core-model/coco/Annotation.ts | 1 +
.../image-annotations.component.html | 15 ++++----
.../image-annotations.component.ts | 19 ++++------
.../image-labeling/image-labeling.component.ts | 44 +++++++++++++---------
.../image/services/BrushLabeling.service.ts | 5 ++-
.../core-ui/image/services/CocoFormat.service.ts | 3 +-
.../image/services/PolygonLabeling.service.ts | 7 ++--
.../image/services/ReactLabeling.service.ts | 9 +++--
.../configure-labels/configure-labels.component.ts | 6 +--
11 files changed, 60 insertions(+), 52 deletions(-)
diff --git a/.idea/runConfigurations/all_pipeline_elements_jvm.xml
b/.idea/runConfigurations/all_pipeline_elements_jvm.xml
index 71ff5d7..f367750 100644
--- a/.idea/runConfigurations/all_pipeline_elements_jvm.xml
+++ b/.idea/runConfigurations/all_pipeline_elements_jvm.xml
@@ -11,6 +11,7 @@
<env name="SP_DATA_LAKE_PORT" value="8086" />
<env name="SP_BACKEND_HOST" value="localhost" />
<env name="SP_BACKEND_PORT" value="8030" />
+ <env name="SP_IMAGE_STORAGE_LOCATION" value=".streampipes/spImages/" />
</envs>
<option name="MAIN_CLASS_NAME"
value="org.apache.streampipes.pe.jvm.AllPipelineElementsInit" />
<module name="streampipes-pipeline-elements-all-jvm" />
diff --git a/.idea/runConfigurations/sinks_internal_jvm.xml
b/.idea/runConfigurations/sinks_internal_jvm.xml
index 31c0728..b2b21f3 100644
--- a/.idea/runConfigurations/sinks_internal_jvm.xml
+++ b/.idea/runConfigurations/sinks_internal_jvm.xml
@@ -11,7 +11,7 @@
<env name="SP_DATA_LAKE_PORT" value="8086" />
<env name="SP_BACKEND_HOST" value="localhost" />
<env name="SP_BACKEND_PORT" value="8030" />
- <env name="SP_IMAGE_STORAGE_LOCATION" value="" />
+ <env name="SP_IMAGE_STORAGE_LOCATION" value=".streampipes/spImages/" />
</envs>
<option name="MAIN_CLASS_NAME"
value="org.apache.streampipes.sinks.internal.jvm.SinksInternalJvmInit" />
<module name="streampipes-sinks-internal-jvm" />
diff --git a/ui/src/app/core-model/coco/Annotation.ts
b/ui/src/app/core-model/coco/Annotation.ts
index 811b660..b8bdd40 100644
--- a/ui/src/app/core-model/coco/Annotation.ts
+++ b/ui/src/app/core-model/coco/Annotation.ts
@@ -31,6 +31,7 @@ export class Annotation {
isSelected = false;
isHovered = false;
category_name: string;
+ color: string;
constructor() {
this.segmentation = undefined;
diff --git
a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.html
b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.html
index abfaf1d..f60a0e6 100644
---
a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.html
+++
b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.html
@@ -23,19 +23,20 @@
style="height: 40px; padding-top: 5px; padding-buttom:
5px; border-radius: 50px; margin-bottom: 5px"
[style.background-color]="annotation.isHovered ||
annotation.isSelected ? 'lightgrey' : 'white'">
<mat-form-field>
- <mat-select [value]="annotation.category_name">
+<!-- <mat-select [value]="annotation.category_name">-->
+ <mat-select >
<mat-select-trigger>
- <mat-icon
[style.color]="colorService.getColor(annotation.category_name)">color_lens</mat-icon>
+ <mat-icon
[style.color]="annotation.color">color_lens</mat-icon>
{{annotation.category_name}}
</mat-select-trigger>
- <mat-optgroup *ngFor="let category of categories"
[label]="category">
- <mat-option *ngFor="let label of _labels[category]"
[value]="label" (click)="changeLabel(annotation, label, category)">
- <mat-icon
[style.color]="colorService.getColor(label)">color_lens</mat-icon>
- {{label}}
+<!-- <mat-optgroup *ngFor="let category of categories"
[label]="category">-->
+ <mat-option *ngFor="let label of labels"
[value]="label" (click)="changeLabel(annotation, label)">
+ <mat-icon
[style.color]="label.color">color_lens</mat-icon>
+ {{label.name}}
</mat-option>
- </mat-optgroup>
+<!-- </mat-optgroup>-->
</mat-select>
</mat-form-field>
<button mat-icon-button (click)="delete(annotation)"
style="margin-top: -10px; margin-left: -5px">
<mat-icon>delete_forever</mat-icon></button>
diff --git
a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
index 2fd7dca..c86c322 100644
---
a/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
+++
b/ui/src/app/core-ui/image/components/image-annotations/image-annotations.component.ts
@@ -19,6 +19,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Annotation } from '../../../../core-model/coco/Annotation';
import { ColorService } from '../../services/color.service';
+import { Label } from '../../../../core-model/gen/streampipes-model';
@Component({
selector: 'sp-image-annotations',
@@ -28,24 +29,20 @@ import { ColorService } from '../../services/color.service';
export class ImageAnnotationsComponent implements OnInit {
@Input() annotations: Annotation[];
+
@Input()
- set labels(labels) {
- this._labels = labels;
- this.categories = Object.keys(this._labels);
- }
- @Output() changeAnnotationLabel: EventEmitter<[Annotation, string, string]>
= new EventEmitter<[Annotation, string, string]>();
- @Output() deleteAnnotation: EventEmitter<Annotation> = new
EventEmitter<Annotation>();
+ public labels: Label[];
- private _labels;
- private categories;
+ @Output() changeAnnotationLabel: EventEmitter<[Annotation, Label]> = new
EventEmitter<[Annotation, Label]>();
+ @Output() deleteAnnotation: EventEmitter<Annotation> = new
EventEmitter<Annotation>();
- constructor(public colorService: ColorService) { }
+ constructor() { }
ngOnInit(): void {
}
- changeLabel(annotation, label, category) {
- this.changeAnnotationLabel.emit([annotation, category, label]);
+ changeLabel(annotation, label) {
+ this.changeAnnotationLabel.emit([annotation, label]);
}
delete(annotation) {
diff --git
a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
index 1fe46db..0f16c77 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
@@ -31,6 +31,9 @@ import { CocoFormatService } from
'../services/CocoFormat.service';
import { LabelingModeService } from '../services/LabelingMode.service';
import { PolygonLabelingService } from '../services/PolygonLabeling.service';
import { ReactLabelingService } from '../services/ReactLabeling.service';
+import { Label } from '../../../core-model/gen/streampipes-model';
+import { LabelService } from '../../labels/services/label.service';
+import { unwrapConstructorDependencies } from
'@angular/compiler-cli/src/ngtsc/annotations/src/util';
@Component({
selector: 'sp-image-labeling',
@@ -41,7 +44,7 @@ export class ImageLabelingComponent implements OnInit {
// label
public labels;
- public selectedLabel: {category, label};
+ public selectedLabel: Label;
public _imagesRoutes
@Input()
@@ -63,13 +66,16 @@ export class ImageLabelingComponent implements OnInit {
constructor(private restService: DatalakeRestService, private
reactLabelingService: ReactLabelingService,
private polygonLabelingService: PolygonLabelingService, private
brushLabelingService: BrushLabelingService,
- private snackBar: MatSnackBar, private cocoFormatService:
CocoFormatService,
+ private snackBar: MatSnackBar, private cocoFormatService:
CocoFormatService, private labelService: LabelService,
public labelingMode: LabelingModeService) { }
ngOnInit(): void {
this.isHoverComponent = false;
this.brushSize = 5;
- this.labels = this.restService.getLabels();
+ this.labelService.getAllLabels().subscribe(res => {
+ this.labels = res;
+ });
+ // this.labels = this.restService.getLabels();
}
handleImageIndexChange(index) {
@@ -110,7 +116,7 @@ export class ImageLabelingComponent implements OnInit {
switch (this.labelingMode.getMode()) {
case LabelingMode.PolygonLabeling: {
this.polygonLabelingService.executeLabeling(position);
- this.polygonLabelingService.tempDraw(layer, shift,
this.selectedLabel.label);
+ this.polygonLabelingService.tempDraw(layer, shift, this.selectedLabel);
}
}
}
@@ -120,12 +126,12 @@ export class ImageLabelingComponent implements OnInit {
switch (this.labelingMode.getMode()) {
case LabelingMode.ReactLabeling: {
this.reactLabelingService.executeLabeling(position);
- this.reactLabelingService.tempDraw(layer, shift,
this.selectedLabel.label);
+ this.reactLabelingService.tempDraw(layer, shift, this.selectedLabel);
}
break;
case LabelingMode.BrushLabeling: {
this.brushLabelingService.executeLabeling(position);
- this.brushLabelingService.tempDraw(layer, shift,
this.selectedLabel.label);
+ this.brushLabelingService.tempDraw(layer, shift, this.selectedLabel);
}
}
}
@@ -136,21 +142,23 @@ export class ImageLabelingComponent implements OnInit {
switch (this.labelingMode.getMode()) {
case LabelingMode.ReactLabeling: {
const result = this.reactLabelingService.endLabeling(position);
- const coco = this.cocoFile;
- const annotation =
this.cocoFormatService.addReactAnnotationToFirstImage(coco, result[0],
result[1],
- this.selectedLabel.category, this.selectedLabel.label);
- this.reactLabelingService.draw(annotationLayer, shift, annotation,
this.imageView);
+ if (result !== undefined) {
+ const coco = this.cocoFile;
+ const annotation =
this.cocoFormatService.addReactAnnotationToFirstImage(coco, result[0],
result[1],
+ this.selectedLabel.categoryId, this.selectedLabel.name,
this.selectedLabel.color);
+ this.reactLabelingService.draw(annotationLayer, shift, annotation,
this.imageView, this.selectedLabel.color);
+ }
}
break;
case LabelingMode.PolygonLabeling: {
- this.polygonLabelingService.tempDraw(drawLayer, shift,
this.selectedLabel.label);
+ this.polygonLabelingService.tempDraw(drawLayer, shift,
this.selectedLabel);
}
break;
case LabelingMode.BrushLabeling: {
const result = this.brushLabelingService.endLabeling(position);
const coco = this.cocoFile;
const annotation =
this.cocoFormatService.addBrushAnnotationFirstImage(coco, result[0], result[1],
- this.selectedLabel.category, this.selectedLabel.label);
+ this.selectedLabel.categoryId, this.selectedLabel.name);
this.brushLabelingService.draw(annotationLayer, shift, annotation,
this.imageView);
}
}
@@ -169,7 +177,7 @@ export class ImageLabelingComponent implements OnInit {
const points = this.polygonLabelingService.endLabeling(position);
const coco = this.cocoFile;
const annotation =
this.cocoFormatService.addPolygonAnnotationFirstImage(coco, points,
- this.selectedLabel.category, this.selectedLabel.label);
+ this.selectedLabel.categoryId, this.selectedLabel.name);
this.polygonLabelingService.draw(layer, shift, annotation,
this.imageView);
}
}
@@ -182,7 +190,7 @@ export class ImageLabelingComponent implements OnInit {
annotation.isHovered = false;
annotation.isSelected = false;
if (this.cocoFormatService.isBoxAnnonation(annotation)) {
- this.reactLabelingService.draw(layer, shift, annotation,
this.imageView);
+ this.reactLabelingService.draw(layer, shift, annotation,
this.imageView, annotation.color);
} else if (this.cocoFormatService.isPolygonAnnonation(annotation) &&
!this.cocoFormatService.isBrushAnnonation(annotation)) {
this.polygonLabelingService.draw(layer, shift, annotation,
this.imageView);
} else if (this.cocoFormatService.isBrushAnnonation(annotation)) {
@@ -207,18 +215,18 @@ export class ImageLabelingComponent implements OnInit {
}
/* sp-select-label handler */
- handleLabelChange(label: {category, label}) {
+ handleLabelChange(label: Label) {
this.selectedLabel = label;
}
/* sp-image-annotations handlers */
- handleChangeAnnotationLabel(change: [Annotation, string, string]) {
+ handleChangeAnnotationLabel(change: [Annotation, Label]) {
if (!this.isDrawing) {
const coco = this.cocoFile;
- const categoryId = this.cocoFormatService.getLabelId(coco, change[1],
change[2]);
+ const categoryId = this.cocoFormatService.getLabelId(coco,
change[0].category_id, change[1].name);
change[0].category_id = categoryId;
- change[0].category_name = change[2];
+ change[0].category_name = change[1].categoryId;
this.imageView.redrawAll();
}
}
diff --git a/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
b/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
index 07ffd3b..ea34d93 100644
--- a/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/BrushLabeling.service.ts
@@ -21,6 +21,7 @@ import { Annotation } from
'../../../core-model/coco/Annotation';
import { ICoordinates } from '../model/coordinates';
import { ColorService } from './color.service';
import { LabelingModeService } from './LabelingMode.service';
+import { Label } from '../../../core-model/gen/streampipes-model';
@Injectable()
export class BrushLabelingService {
@@ -54,7 +55,7 @@ export class BrushLabelingService {
return [this.points, this.brushsize];
}
- tempDraw(layer: Konva.Layer, shift: ICoordinates, label: string) {
+ tempDraw(layer: Konva.Layer, shift: ICoordinates, label: Label) {
if (this.isLabeling) {
const tmp = [];
for (let i = 0; i < this.points.length; i += 2) {
@@ -64,7 +65,7 @@ export class BrushLabelingService {
const line = new Konva.Line({
points: tmp,
- stroke: this.colorService.getColor(label),
+ stroke: label.color,
opacity: 0.8,
strokeWidth: this.brushsize,
closed: false
diff --git a/ui/src/app/core-ui/image/services/CocoFormat.service.ts
b/ui/src/app/core-ui/image/services/CocoFormat.service.ts
index a01e62e..42f6f50 100644
--- a/ui/src/app/core-ui/image/services/CocoFormat.service.ts
+++ b/ui/src/app/core-ui/image/services/CocoFormat.service.ts
@@ -55,7 +55,7 @@ export class CocoFormatService {
return category.id;
}
- addReactAnnotationToFirstImage(coco: CocoFormat, cords, size, supercategory,
category): Annotation {
+ addReactAnnotationToFirstImage(coco: CocoFormat, cords, size, supercategory,
category, color): Annotation {
const annotation = new Annotation();
annotation.id = coco.annotations.length + 1;
annotation.iscrowd = 0;
@@ -64,6 +64,7 @@ export class CocoFormatService {
annotation.area = size.x * size.y
annotation.category_id = CocoFormatService.getLabelId(coco, supercategory,
category);
annotation.category_name = category;
+ annotation.color = color;
coco.annotations.push(annotation);
return annotation;
}
diff --git a/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
b/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
index 2c65fee..845c3cb 100644
--- a/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/PolygonLabeling.service.ts
@@ -21,6 +21,7 @@ import { Annotation } from
'../../../core-model/coco/Annotation';
import { ICoordinates } from '../model/coordinates';
import { ColorService } from './color.service';
import { LabelingModeService } from './LabelingMode.service';
+import { Label } from '../../../core-model/gen/streampipes-model';
@Injectable()
export class PolygonLabelingService {
@@ -134,7 +135,7 @@ export class PolygonLabelingService {
return this.points.slice(0, this.points.length - 2);
}
- tempDraw(layer: Konva.Layer, shift: ICoordinates, label: string) {
+ tempDraw(layer: Konva.Layer, shift: ICoordinates, label: Label) {
if (this.isLabeling) {
const tmp = [];
for (let i = 0; i < this.tmpPoints.length; i += 2) {
@@ -144,7 +145,7 @@ export class PolygonLabelingService {
const poly = new Konva.Line({
points: tmp,
- fill: this.colorService.getColor(label),
+ fill: label.color,
stroke: 'black',
opacity: 0.8,
strokeWidth: 4,
@@ -163,7 +164,7 @@ export class PolygonLabelingService {
const poly = new Konva.Line({
points: tmp,
- fill: this.colorService.getColor(annotation.category_name),
+ fill: annotation.color,
stroke: 'black',
opacity: 0.5,
strokeWidth: 4,
diff --git a/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
b/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
index 1c795b2..5c57a51 100644
--- a/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
+++ b/ui/src/app/core-ui/image/services/ReactLabeling.service.ts
@@ -21,6 +21,7 @@ import { Annotation } from
'../../../core-model/coco/Annotation';
import { ICoordinates } from '../model/coordinates';
import { ColorService } from './color.service';
import { LabelingModeService } from './LabelingMode.service';
+import { Label } from '../../../core-model/gen/streampipes-model';
@Injectable()
export class ReactLabelingService {
@@ -53,14 +54,14 @@ export class ReactLabelingService {
}
}
- tempDraw(layer: Konva.Layer, shift: ICoordinates, label: string) {
+ tempDraw(layer: Konva.Layer, shift: ICoordinates, label: Label) {
if (this.isLabeling && (this.reactSize.x > 0 || this.reactSize.y > 0)) {
const box = new Konva.Rect({
x: this.lastPosition.x + shift.x,
y: this.lastPosition.y + shift.y,
width: this.reactSize.x,
height: this.reactSize.y,
- fill: this.colorService.getColor(label),
+ fill: label.color,
opacity: 0.5,
stroke: 'black',
strokeWidth: 4,
@@ -70,13 +71,13 @@ export class ReactLabelingService {
}
}
- draw(layer: Konva.Layer, shift: ICoordinates, annotation: Annotation,
imageView) {
+ draw(layer: Konva.Layer, shift: ICoordinates, annotation: Annotation,
imageView, color: string) {
const rect = new Konva.Rect({
x: annotation.bbox[0] + shift.x,
y: annotation.bbox[1] + shift.y,
width: annotation.bbox[2],
height: annotation.bbox[3],
- fill: this.colorService.getColor(annotation.category_name),
+ fill: color,
opacity: 0.5,
stroke: 'black',
strokeWidth: 4,
diff --git
a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
index 14fdce9..a38baac 100644
---
a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
+++
b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -1,11 +1,7 @@
-import { Component, EventEmitter, HostListener, Input, OnInit, Output } from
'@angular/core';
+import { Component, OnInit } from '@angular/core';
import { ColorService } from '../../../image/services/color.service';
import { LabelService } from '../../services/label.service';
import { Category, Label } from '../../../../core-model/gen/streampipes-model';
-import { fromEvent, interval, timer } from 'rxjs';
-import { debounce, debounceTime, distinctUntilChanged, switchMap } from
'rxjs/operators';
-import { ajax } from 'rxjs/ajax';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'sp-configure-labels',
