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/04/16 14:19:24 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-79] enable switching
page for image labeling
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 6684a5b81a80c97fd35f3670500cbd2f5ca7e8e5
Author: tex <te...@fzi.de>
AuthorDate: Thu Apr 16 15:51:19 2020 +0200
[STREAMPIPES-79] enable switching page for image labeling
---
.../components/image-bar/image-bar.component.html | 8 +--
.../components/image-bar/image-bar.component.ts | 13 ++--
.../image-labeling/image-labeling.component.html | 2 +-
.../image-labeling/image-labeling.component.ts | 81 ++++++++++++++--------
4 files changed, 63 insertions(+), 41 deletions(-)
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index e8f31dd..adb53bd 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -17,8 +17,8 @@
-->
<div fxLayout="row" fxLayoutAlign="space-around center" >
- <button mat-icon-button (click)="previousPage()"> <mat-icon>skip_previous</mat-icon></button>
- <button mat-icon-button (click)="previousImage()"> <mat-icon>keyboard_arrow_left</mat-icon></button>
+ <button mat-icon-button (click)="nextPage()"> <mat-icon>skip_previous</mat-icon></button>
+ <button mat-icon-button (click)="nextImage()"> <mat-icon>keyboard_arrow_left</mat-icon></button>
<div fxLayout="row" fxLayoutAlign="center " class="imageBar">
<img *ngFor="let src of imagesSrcs; let i = index" src="{{src}}" (click)="changeImage(i)"
@@ -26,7 +26,7 @@
</div>
- <button mat-icon-button (click)="nextImage()"> <mat-icon>keyboard_arrow_right</mat-icon></button>
- <button mat-icon-button (click)="nextPage()"> <mat-icon>skip_next</mat-icon></button>
+ <button mat-icon-button (click)="previousImage()"> <mat-icon>keyboard_arrow_right</mat-icon></button>
+ <button mat-icon-button (click)="previousPage()"> <mat-icon>skip_next</mat-icon></button>
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index cb880d9..5784082 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -47,19 +47,20 @@ export class ImageBarComponent implements OnInit {
}
previousImage() {
- if (this.selectedIndex > 0) {
- this.indexChange.emit(this.selectedIndex - 1);
+ if (this.selectedIndex < this.imagesSrcs.length - 1) {
+ this.indexChange.emit(this.selectedIndex + 1);
} else {
this.pageDown.emit();
}
}
nextImage() {
- if (this.selectedIndex < this.imagesSrcs.length - 1) {
- this.indexChange.emit(this.selectedIndex + 1);
+ if (this.selectedIndex > 0) {
+ this.indexChange.emit(this.selectedIndex - 1);
} else {
this.pageUp.emit();
}
}
+
nextPage() {
this.pageUp.emit();
}
@@ -70,10 +71,10 @@ export class ImageBarComponent implements OnInit {
const key = event.key;
switch (key.toLowerCase()) {
case 'q':
- this.previousImage();
+ this.nextImage();
break;
case 'e':
- this.nextImage();
+ this.previousImage();
break;
}
}
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
index 08801cc..0669e12 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
@@ -56,7 +56,7 @@
</sp-image-annotations>
</div>
<br />
- <br />
+ <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum + 1}}</div></div>
<sp-image-bar style="width: 100%"
[imagesSrcs]="imagesSrcs"
[selectedIndex]="imagesIndex"
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 f430817..9b68528 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
@@ -17,7 +17,7 @@
*/
-import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import Konva from 'konva';
import { Annotation } from '../../../core-model/coco/Annotation';
@@ -27,9 +27,9 @@ import { ImageContainerComponent } from '../components/image-container/image-con
import { ICoordinates } from '../model/coordinates';
import { LabelingMode } from '../model/labeling-mode';
import { BrushLabelingService } from '../services/BrushLabeling.service';
+import { CocoFormatService } from '../services/CocoFormat.service';
import { PolygonLabelingService } from '../services/PolygonLabeling.service';
import { ReactLabelingService } from '../services/ReactLabeling.service';
-import { CocoFormatService } from "../services/CocoFormat.service";
@Component({
selector: 'sp-image-labeling',
@@ -43,10 +43,10 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit {
public selectedLabel: {category, label};
// images
- public imagesSrcs;
+ public imagesSrcs = [];
public imagesIndex: number;
- public cocoFiles: CocoFormat[];
+ public cocoFiles: CocoFormat[] = [];
public isHoverComponent;
public brushSize: number;
@@ -59,6 +59,10 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit {
pageIndex = undefined;
pageSum = undefined;
+ // Flags
+ private setImagesIndexToFirst = false;
+ private setImagesIndexToLast = false;
+
public labelingMode: LabelingMode = LabelingMode.ReactLabeling;
@@ -122,32 +126,43 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit {
}
processData(pageResult) {
- this.pageIndex = pageResult.page;
- this.pageSum = pageResult.pageSum;
- const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
- const tmp = [];
- this.cocoFiles = [];
- pageResult.rows.forEach(row => {
- tmp.push(this.restService.getImageUrl(row[imageIndex]))
- this.restService.getCocoFileForImage(row[imageIndex]).subscribe(
- coco => {
- console.log('------------------------------' +
- '--------------------------------')
- if (coco === null) {
- const cocoFile = new CocoFormat();
- this.cocoFormatService.addImage(cocoFile, (row[imageIndex]));
- this.cocoFiles.push(cocoFile);
- } else {
- this.cocoFiles.push(coco as CocoFormat);
- }
- console.log(this.cocoFiles);
+ if (pageResult.rows === undefined) {
+ this.pageIndex = pageResult.pageSum;
+ this.openSnackBar('No new data found');
+ } else {
+ this.pageIndex = pageResult.page;
+ this.pageSum = pageResult.pageSum;
+ if (this.setImagesIndexToFirst) {
+ this.imagesIndex = 0;
+ } else if (this.setImagesIndexToLast) {
+ this.imagesIndex = pageResult.rows.length - 1;
+ }
+ this.setImagesIndexToLast = false;
+ this.setImagesIndexToFirst = false;
+
+ const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
+ const tmp = [];
+ this.cocoFiles = [];
+ pageResult.rows.forEach(row => {
+ tmp.push(this.restService.getImageUrl(row[imageIndex]));
+ this.restService.getCocoFileForImage(row[imageIndex]).subscribe(
+ coco => {
+ if (coco === null) {
+ const cocoFile = new CocoFormat();
+ this.cocoFormatService.addImage(cocoFile, (row[imageIndex]));
+ this.cocoFiles.push(cocoFile);
+ } else {
+ this.cocoFiles.push(coco as CocoFormat);
+ }
+ }
+ );
+
+ });
+ this.imagesSrcs = tmp;
+ }
- }
- );
- });
- this.imagesSrcs = tmp;
}
@@ -266,12 +281,18 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit {
}
handleImagePageUp(e) {
this.save();
- alert('Page Up - Load new data');
+ this.pageIndex += 1;
+ this.setImagesIndexToLast = true;
+ this.loadData();
}
handleImagePageDown(e) {
this.save();
- alert('Page Down - Load new data');
+ if (this.pageIndex - 1 >= 0) {
+ this.pageIndex -= 1;
+ this.setImagesIndexToFirst = true;
+ this.loadData();
+ }
}
/* sp-image-annotations handlers */
@@ -307,7 +328,7 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit {
// TODO
const coco = this.cocoFiles[this.imagesIndex];
const imageSrcSplitted = this.imagesSrcs[this.imagesIndex].split('/');
- const imageRoute = imageSrcSplitted[imageSrcSplitted.length - 2]
+ const imageRoute = imageSrcSplitted[imageSrcSplitted.length - 2];
this.restService.saveCocoFileForImage(imageRoute, JSON.stringify(coco)).subscribe(
res => this.openSnackBar('Saved')
);