Introduction to CVAT-CANVAS-3D

The CVAT-CANVAS-3D module is a powerful tool designed for viewing, drawing, and editing 3D annotations. Built using TypeScript, this module provides a robust canvas interface that enhances the annotation experience for developers and data scientists alike.

Main Features of CVAT-CANVAS-3D

• 3D Annotation Support: Create and manage 3D annotations seamlessly.
• Interactive Canvas: A user-friendly interface for drawing and editing.
• API Methods: Extensive API for integration and customization.
• Performance Optimization: Built for efficiency with a focus on speed.

Technical Architecture and Implementation

The CVAT-CANVAS-3D module is structured to provide a clean separation of concerns, allowing developers to easily extend and modify its functionality. The core of the module is built around a TypeScript interface that defines various methods for interacting with the canvas.

interface Canvas3d {
  html(): ViewsDOM;
  setup(frameData: any, objectStates: any[]): void;
  isAbleToChangeFrame(): boolean;
  mode(): Mode;
  render(): void;
  keyControls(keys: KeyboardEvent): void;
  draw(drawData: DrawData): void;
  cancel(): void;
  dragCanvas(enable: boolean): void;
  activate(clientID: number | null, attributeID?: number): void;
  configureShapes(shapeProperties: ShapeProperties): void;
  fitCanvas(): void;
  fit(): void;
  group(groupData: GroupData): void;
}

Setup and Installation Process

To get started with the CVAT-CANVAS-3D module, follow these simple steps:

1. Clone the repository from GitHub.
2. Navigate to the project directory.
3. Run the following commands to build the module:

yarn run build
yarn run build --mode=development     # without a minification

4. Integrate the module into your application.

Usage Examples and API Overview

Once the module is set up, you can create an instance of the canvas and start using it:

// Create an instance of a canvas
const canvas = new window.canvas.Canvas3d();

console.log('Version ', window.canvas.CanvasVersion);
console.log('Current mode is ', window.canvas.mode());

// Put canvas to a html container
const views = canvas.html();
htmlContainer.appendChild(views.perspective);
htmlContainer.appendChild(views.top);
htmlContainer.appendChild(views.side);
htmlContainer.appendChild(views.front);

This code snippet demonstrates how to initialize the canvas and append it to an HTML container, providing a visual interface for 3D annotations.

Community and Contribution Aspects

The CVAT project encourages contributions from the community. You can report bugs, request features, or submit pull requests using the issue tracker. Please adhere to the guidelines to maintain a constructive environment.

For more information on contributing, refer to the official documentation.

License and Legal Considerations

The CVAT-CANVAS-3D module is licensed under the MIT License, allowing for free use, modification, and distribution. Ensure to include the copyright notice in all copies or substantial portions of the software.

Project Roadmap and Future Plans

The CVAT team is continuously working on enhancing the module with new features and improvements. Future updates may include:

• Enhanced performance optimizations.
• Additional API methods for better integration.
• Improved user interface for a more intuitive experience.

Conclusion

The CVAT-CANVAS-3D module is a vital tool for anyone working with 3D annotations. Its robust features and user-friendly interface make it an excellent choice for developers looking to enhance their annotation workflows.

For more information, visit the CVAT GitHub Repository.

FAQ

Have questions? Check out our FAQ section below!