You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by te...@apache.org on 2020/02/21 16:15:46 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-78] enable change label
of annotation
This is an automated email from the ASF dual-hosted git repository.
tex pushed a commit to branch image-labeling
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 9befb2f7ebdcd8c799657cc5538c949026c935ac
Author: tex <te...@fzi.de>
AuthorDate: Fri Feb 21 17:15:29 2020 +0100
[STREAMPIPES-78] enable change label of annotation
---
ui/src/app/core-ui/imageLabeler/imageLabeler.component.css | 8 ++++++++
.../app/core-ui/imageLabeler/imageLabeler.component.html | 14 ++++++++++++--
ui/src/app/core-ui/imageLabeler/imageLabeler.component.ts | 9 +++++++--
3 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.css b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.css
index 6b71ce7..167341a 100644
--- a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.css
+++ b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.css
@@ -46,3 +46,11 @@ labelCategorySelectContainer {
::ng-deep .mat-form-field-underline {
background-color: rgba(255, 255, 255, 0.8);
}
+
+::ng-deep .mat-optgroup-label {
+ background-color: #FFFFFF !important;
+}
+
+::ng-deep .mat-option {
+ background-color: #FFFFFF !important;
+}
\ No newline at end of file
diff --git a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.html b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.html
index d97936d..a40fba5 100644
--- a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.html
+++ b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.html
@@ -25,7 +25,7 @@
style="padding-left: 5px; padding-right: 5px; border-radius: 50px; font-size: 20px;">
<mat-form-field style="margin-top: -15px; margin-bottom: -10px">
<mat-select [(value)]="labelCategory">
- <mat-option style="background-color: #FFFFFF" *ngFor="let labelCategory of labelCategories" [value]="labelCategory">
+ <mat-option *ngFor="let labelCategory of labelCategories" [value]="labelCategory">
{{labelCategory}}
</mat-option>
</mat-select>
@@ -65,12 +65,22 @@
<div fxLayout="column" fxLayoutAlign="space-between center">
<h2>Annotations</h2>
+
+
<mat-list>
<mat-list-item *ngFor="let annotation of coco?.annotations" (mouseover)="enterAnnotation(annotation)" (mouseout)="leaveAnnotation(annotation)"
style="height: 30px; padding-top: 5px; padding-buttom: 5px; border-radius: 50px; margin-bottom: 5px"
[style.background-color]="annotation.isHovered || annotation.isSelected ? 'lightgrey' : 'white'">
<mat-icon matListIcon [style.color]="getColor(coco.getLabelById(annotation.category_id))" style="margin-top: -8px;">color_lens</mat-icon>
- <h4 style="margin-top: -3px;"> {{annotation.id}} - {{coco.getLabelById(annotation.category_id)}}</h4>
+ <mat-form-field>
+ <mat-select [value]="coco.getLabelById(annotation.category_id)">
+ <mat-optgroup *ngFor="let labelCategor of labelCategories" [label]="labelCategor">
+ <mat-option *ngFor="let label of labels[labelCategor]" [value]="label" (click)="changeLabel(annotation, label, labelCategory)">
+ {{label}}
+ </mat-option>
+ </mat-optgroup>
+ </mat-select>
+ </mat-form-field>
<button mat-icon-button (click)="deleteAnnotation(annotation)" style="margin-top: -10px; margin-left: 10px"> <mat-icon>delete_forever</mat-icon></button>
</mat-list-item>
</mat-list>
diff --git a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.ts b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.ts
index f52c4f5..b308cd9 100644
--- a/ui/src/app/core-ui/imageLabeler/imageLabeler.component.ts
+++ b/ui/src/app/core-ui/imageLabeler/imageLabeler.component.ts
@@ -139,8 +139,6 @@ export class ImageLabelerComponent implements OnInit, AfterViewInit {
this.isRightMouseDown = true;
ImageTranslationHelper.mouseDown(this.getCanvasCords(e.clientX, e.clientY), this.imageTranslationX, this.imageTranslationY);
}
-
-
}
imageMouseMove(e) {
@@ -342,6 +340,13 @@ export class ImageLabelerComponent implements OnInit, AfterViewInit {
}
}
+ changeLabel(annonation, label, category) {
+ console.log(label, category)
+ let labelId = this.coco.getLabelId(label, category);
+ annonation.category_id = labelId;
+ this.draw();
+ }
+