Skip to content

Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay #7

@daohu527

Description

@daohu527

Task: Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay.

1. Window Management (React):

  • Requirement: Use react-grid-layout to create a draggable and resizable grid container.
  • Component: Create a CameraCard component that encapsulates the video stream, topic name, and a "Close" button.
  • State: Use a local LayoutConfig to save the positions of windows during the session.

2. Data Stream Multiplexing:

  • Logic: When this workspace is active, initialize a MultiTopicSubscriber.
  • Action: It should send a batch "Subscribe" message to the Dreamview backend for all selected camera topics.
  • Format: Render each stream using canvas or img tags optimized for base64/binary JPEG strings.

3. Transition Logic:

  • Requirement: Provide a toggleWorkspace function.
  • Behavior: * onEnter: Save current Dreamview state -> Disable 3D cloud rendering -> Open Workspace.
  • onExit: Unsubscribe from extra cameras -> Enable 3D cloud rendering -> Close Workspace.

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions