CVAT-3D-M3 (cvat-ai#2768)

* CVAT-3D Updated the Mime Types with Bin Support, added dependency of open3D * CVAT-3D Added additional column as Dimension for engine_task table and created a relatedfiles table for PCD to Image mapping. * Added Support for 3D file Upload in BIN and PCD. * Added Dimension attribute defaulting to 2D for importer and exporter. * Added props passing for dimension attribute, filtering of import, Migration Scripts and Dimension attribute for MpegChunk Writers * Modified code as per review comments * Updated Unit test cases for 3D task creation * Refactored Dimension Enum in UI and backend code * Resolving conflicts * Updated Unit Test Case * Refactored TaskDimension to DimensionType, Simplified usage of Dimension accross classes * Removing manually created test files * Removing old pcd mime-type mapping * Added test files generated by synthetic data using open3d * Merged with develop branch latest changes * Added libraries required for open3d * Added files * Added synthethic pcd,bin and img test files * Modified test file name * Trigger travis ci * Modified test case to ignore 3D preview images * Trigger notification * Deleting DS Store files * Modified test cases as per review comments * Checking pre-commit hook * Fixed Lint issues - precommit hook verification * Added changes for CVAT-3D Milestone2 changes - Frame Navigation, photo context hide and show * Modified changes * Added canvas3D for 3D Perspective * Added missing files * Added code to get image context for 3D view * Codacy check for stylesheet * Modified frame navigantion for 3D View * Modified style for context-image * Trigger notification * Added Support for 3D file Upload in BIN and PCD. * Added props passing for dimension attribute, filtering of import, Migration Scripts and Dimension attribute for MpegChunk Writers * Modified code as per review comments * Refactored Dimension Enum in UI and backend code * Merged with develop branch latest changes * Added files * Added changes for CVAT-3D Milestone2 changes - Frame Navigation, photo context hide and show * Modified changes * Added canvas3D for 3D Perspective * Added missing files * Added code to get image context for 3D view * Codacy check for stylesheet * Modified frame navigantion for 3D View * Modified style for context-image * Changed cvat-data lint issues * Modified to use opencv as per review comments * Removed unwanted imports * Fixed css and added usage of hooks * Merged Develop branch code * Removed unused data structures * Removed unused data structures * Refactored unused data structures * Added three js dependency in cvat ui package-lock.json * Merged develop branch code and refactored code * Fixed snyk issue * Modified Camera Icon in photo-context * Update icons.tsx * Remove unused svg file * Modified changelog file * Added changes for CVAT-3D Milestone3 * Added missing line as per codacy check Co-authored-by: cdp <cdp123>
kenu · Feb 23, 2021 · 5fdcfb5 · 5fdcfb5
1 parent 698c948
commit 5fdcfb5
Show file tree

Hide file tree

Showing 16 changed files with 538 additions and 153 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CVAT-3D: Load all frames corresponding to the job instance
   (<https://github.com/openvinotoolkit/cvat/pull/2645>)
 - Intelligent scissors with OpenCV javascript (<https://github.com/openvinotoolkit/cvat/pull/2689>)
+- CVAT-3D: Visualize 3D point cloud spaces in 3D View, Top View Side View and Front View (<https://github.com/openvinotoolkit/cvat/pull/2768>)
 - [Inside Outside Guidence](https://github.com/shiyinzhang/Inside-Outside-Guidance) serverless
   function for interative segmentation
 - Pre-built [cvat_server](https://hub.docker.com/r/openvino/cvat_server) and

diff --git a/components/analytics/docker-compose.analytics.yml b/components/analytics/docker-compose.analytics.yml
@@ -70,9 +70,9 @@ services:
         http_proxy: ${http_proxy}
         https_proxy: ${https_proxy}
     environment:
-        LOGSTASH_OUTPUT_HOST: elasticsearch:9200
-        LOGSTASH_OUTPUT_USER:
-        LOGSTASH_OUTPUT_PASS:
+      LOGSTASH_OUTPUT_HOST: elasticsearch:9200
+      LOGSTASH_OUTPUT_USER:
+      LOGSTASH_OUTPUT_PASS:
     depends_on: ['cvat_elasticsearch']
     restart: always
 

diff --git a/cvat-canvas3d/README.md b/cvat-canvas3d/README.md
@@ -28,7 +28,6 @@ npm run build -- --mode=development     # without a minification
 interface Canvas3d {
   html(): HTMLDivElement;
   setup(frameData: any): void;
-  fitCanvas(): void;
   mode(): Mode;
   isAbleToChangeFrame(): boolean;
   render(): void;
@@ -46,5 +45,4 @@ console.log('Current mode is ', window.canvas.mode());
 
 // Put canvas to a html container
 htmlContainer.appendChild(canvas.html());
-canvas.fitCanvas();
 ```
diff --git a/cvat-canvas3d/package-lock.json b/cvat-canvas3d/package-lock.json
diff --git a/cvat-canvas3d/package.json b/cvat-canvas3d/package.json
@@ -38,6 +38,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "three": "^0.125.0"
+    "three": "^0.125.0",
+    "camera-controls": "^1.25.3"
   }
 }
diff --git a/cvat-canvas3d/src/typescript/canvas3d.ts b/cvat-canvas3d/src/typescript/canvas3d.ts
@@ -5,18 +5,18 @@
 import pjson from '../../package.json';
 import { Canvas3dController, Canvas3dControllerImpl } from './canvas3dController';
 import { Canvas3dModel, Canvas3dModelImpl, Mode } from './canvas3dModel';
-import { Canvas3dView, Canvas3dViewImpl } from './canvas3dView';
+import { Canvas3dView, Canvas3dViewImpl, ViewsDOM } from './canvas3dView';
 import { Master } from './master';
 
 const Canvas3dVersion = pjson.version;
 
 interface Canvas3d {
-    html(): any;
+    html(): ViewsDOM;
     setup(frameData: any): void;
     isAbleToChangeFrame(): boolean;
-    fitCanvas(): void;
     mode(): Mode;
     render(): void;
+    keyControls(keys: KeyboardEvent): void;
 }
 
 class Canvas3dImpl implements Canvas3d {
@@ -30,10 +30,14 @@ class Canvas3dImpl implements Canvas3d {
         this.view = new Canvas3dViewImpl(this.model, this.controller);
     }
 
-    public html(): any {
+    public html(): ViewsDOM {
         return this.view.html();
     }
 
+    public keyControls(keys: KeyboardEvent): void {
+        this.view.keyControls(keys);
+    }
+
     public render(): void {
         this.view.render();
     }
@@ -49,10 +53,6 @@ class Canvas3dImpl implements Canvas3d {
     public isAbleToChangeFrame(): boolean {
         return this.model.isAbleToChangeFrame();
     }
-
-    public fitCanvas(): void {
-        this.model.fitCanvas(this.view.html().clientWidth, this.view.html().clientHeight);
-    }
 }
 
 export { Canvas3dImpl as Canvas3d, Canvas3dVersion };
diff --git a/cvat-canvas3d/src/typescript/canvas3dModel.ts b/cvat-canvas3d/src/typescript/canvas3dModel.ts
@@ -45,27 +45,26 @@ export enum Mode {
     INTERACT = 'interact',
 }
 
-export interface Canvas3dModel {
+export interface Canvas3dDataModel {
+    canvasSize: Size;
+    image: Image | null;
+    imageID: number | null;
+    imageOffset: number;
+    imageSize: Size;
+    drawData: DrawData;
     mode: Mode;
+    exception: Error | null;
+}
 
+export interface Canvas3dModel {
+    mode: Mode;
+    data: Canvas3dDataModel;
     setup(frameData: any): void;
-
     isAbleToChangeFrame(): boolean;
-
-    fitCanvas(width: number, height: number): void;
 }
 
 export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
-    private data: {
-        canvasSize: Size;
-        image: Image | null;
-        imageID: number | null;
-        imageOffset: number;
-        imageSize: Size;
-        drawData: DrawData;
-        mode: Mode;
-        exception: Error | null;
-    };
+    public data: Canvas3dDataModel;
 
     public constructor() {
         super();
@@ -92,36 +91,32 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
 
     public setup(frameData: any): void {
         if (this.data.imageID !== frameData.number) {
-            if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
-                throw Error(`Canvas is busy. Action: ${this.data.mode}`);
-            }
+            this.data.imageID = frameData.number;
+            frameData
+                .data((): void => {
+                    this.data.image = null;
+                    this.notify(UpdateReasons.IMAGE_CHANGED);
+                })
+                .then((data: Image): void => {
+                    if (frameData.number !== this.data.imageID) {
+                        // already another image
+                        return;
+                    }
+
+                    this.data.imageSize = {
+                        height: frameData.height as number,
+                        width: frameData.width as number,
+                    };
+
+                    this.data.image = data;
+                    this.notify(UpdateReasons.IMAGE_CHANGED);
+                })
+                .catch((exception: any): void => {
+                    this.data.exception = exception;
+                    this.notify(UpdateReasons.DATA_FAILED);
+                    throw exception;
+                });
         }
-
-        this.data.imageID = frameData.number;
-        frameData
-            .data((): void => {
-                this.data.image = null;
-                this.notify(UpdateReasons.IMAGE_CHANGED);
-            })
-            .then((data: Image): void => {
-                if (frameData.number !== this.data.imageID) {
-                    // already another image
-                    return;
-                }
-
-                this.data.imageSize = {
-                    height: frameData.height as number,
-                    width: frameData.width as number,
-                };
-
-                this.data.image = data;
-                this.notify(UpdateReasons.IMAGE_CHANGED);
-            })
-            .catch((exception: any): void => {
-                this.data.exception = exception;
-                this.notify(UpdateReasons.DATA_FAILED);
-                throw exception;
-            });
     }
 
     public set mode(value: Mode) {
@@ -138,16 +133,4 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
 
         return !isUnable;
     }
-
-    public fitCanvas(width: number, height: number): void {
-        this.data.canvasSize.height = height;
-        this.data.canvasSize.width = width;
-
-        this.data.imageOffset = Math.floor(
-            Math.max(this.data.canvasSize.height / FrameZoom.MIN, this.data.canvasSize.width / FrameZoom.MIN),
-        );
-
-        this.notify(UpdateReasons.FITTED_CANVAS);
-        this.notify(UpdateReasons.OBJECTS_UPDATED);
-    }
 }