Timestamps frontend

[pavlyhalim]

This pull request introduces significant enhancements to the animation system, with both backend and frontend improvements designed to streamline animation control and editing.

Backend Changes:

• Joint Control Interface: A new web interface, built using FastAPI, provides controls for manipulating all joints within the animation system. This interface is built with the new Drake UI.

• Keyframe Editor Enhancements:

  • Added "Next/Previous Keyframe" buttons for easier navigation.
  • Added an "Edit Keyframe" button to trigger keyframe modification.
  • Implemented a Time Slider and Time Edit field for precise time control.
  • Implemented Segment Management: Allows defining and naming segments within the keyframe sequence.
  • Added backend support for "Play" and "Stop" animation controls.

• FastAPI Connector: Created a new FastAPI connector to facilitate communication between the React frontend and the backend.

Frontend Changes (React):

A new user interface (UI) has been developed using React, organized into distinct tabs for different functionalities:

• Tab 1: Main Animation Control:

  • 3D mesh visualization display.
  • Sliders for each joint, allowing real-time manipulation of the animation.
  • "Edit Keyframe" functionality.
  • "Edit Time" functionality.
  • "Add New Keyframe" functionality.
  • "Next/Previous Keyframe" navigation buttons.

• Tab 2: Segments:

  • Allows the user to specify the start and end indices (within the keyframes array) for creating animation segments.
  • Provides the ability to name these segments for easy identification and organization.

• Tab 3: Keyframe Table:

  • Displays a table showing all keyframes.
  • Shows each keyframe's time, with "Up/Down" buttons to adjust the timestamp and automatically update the animation.
  • Displays the segment name associated with each keyframe.

[MarwanWalid2]

@gaddison-bdai Code updated!