Design

App

• Main entry of the application
• Controls the layout
• Handle unsaved warning
• Handle parameters from URL
• Detect which version of VideoLoader should be used

Screenshot

Components

• Drawer contains left side panel
• VideoLoader global video loader, cache video frames

Annotation

• Annotation page container

Screenshot

Components

• AnnotationSkeleton skeleton page for no video state
• KeyframePanel controls keyframes
  • KeyframeTable edit keyframes
• ControlPanel copy, mode and options
• CanvasPanel main annotation panel
  • filmStrip decoration
  • ObjectTable table for object annotation
  • RegionTable table for region annotation
  • SkeletonTable table for skeleton annotation
• ActionTable table for action annotation

Configuration

• configuration page container

Screenshot

Components

• ObjectLabelTable table for object label
• ActionLabelTable table for object label
• SkeletonTypeTable table for skeleton type
  • SkeletonTypePreview preview for skeleton type

Preference

• Default FPS the default fps for video
• Objects show objects mode or not
• Regions show regions mode or not
• Skeletons show skeletons mode or not
• Actions / Video segments show actions panel or not

Screenshot

Help

• Help section
• Keyboard shortcut section
• Tutorial videos section

Screenshot

About

• About page container

Screenshot

Components

• ContributorCard card for each contributor's information

NotFound

• Fallback page

Screenshot