ROS2 Bag Recorder Frontend

A modern web-based interface for recording ROS2 bag files. This tool provides an intuitive UI for managing ROS2 bag recordings, selecting topics, and downloading recorded data.

Note: This project was developed with the assistance of AI tools to accelerate development and implement best practices.

Features

• Real-time Topic Discovery: Automatically discovers and displays available ROS2 topics
• Status Polling: Automatic status updates via HTTP polling (WebSocket support prepared but currently disabled)
• Topic Selection: Multi-select interface for choosing which topics to record
• Recording Management:
  • Start/stop recordings with custom names and configurations
  • View all recorded bag files with size and path information
  • Download individual recordings or batch download multiple files
  • Delete recordings with confirmation
• Batch Operations: Select multiple recordings for bulk download or deletion
• Connection Status: Visual indicators for backend connectivity
• Responsive Design: Clean, modern UI built with Tailwind CSS

Prerequisites

• Node.js 18+ (managed via NVM recommended)
• A running ROS2 Bag Recorder backend service (default: http://localhost:8080)
• ROS2 environment with active topics (for recording functionality)

Installation

# Install dependencies
source ~/.nvm/nvm.sh && npm install

# Start development server
source ~/.nvm/nvm.sh && npm run dev

The application will be available at http://localhost:3000

Development

Available Scripts

# Development server with hot reload
npm run dev

# Type checking
npm run type-check

# Linting
npm run lint

# Production build
npm run build

# Preview production build
npm run preview

Project Structure

src/
├── api/
│   ├── client.ts       # API client for backend communication
│   └── types.ts        # TypeScript type definitions
├── components/
│   ├── BatchActions.tsx       # Bulk operations UI
│   ├── RecordingControls.tsx  # Start/stop recording controls
│   ├── StatusDisplay.tsx      # Connection and recording status
│   └── TopicSelector.tsx      # Multi-select topic interface
├── hooks/
│   ├── useRecording.ts        # Recording state management (HTTP polling)
│   └── useWebSocket.ts        # WebSocket connection logic (prepared, not active)
├── App.tsx             # Main application component
└── main.tsx           # Application entry point

Backend Integration

The frontend connects to a backend service that handles actual ROS2 bag recording operations.

API Endpoints

• GET /api/topics - Retrieve available ROS2 topics
• GET /api/status - Get current recording status
• POST /api/start - Start a new recording
• POST /api/stop - Stop current recording
• GET /api/recordings - List all recorded bag files
• GET /api/download/:filename - Download a specific recording
• POST /api/batch/download - Batch download multiple recordings (returns ZIP)
• DELETE /api/recordings/:filename - Delete a recording
• POST /api/batch/delete - Batch delete multiple recordings

WebSocket (Currently Disabled)

• WS /ws - Real-time status updates (prepared but not currently used)

Note: The frontend currently uses HTTP polling (every 3 seconds) for status updates. WebSocket support is implemented in the code but disabled, as the backend may not yet support it. To enable WebSocket, uncomment the WebSocket code in src/hooks/useRecording.ts (lines 61-118).

The frontend expects the backend at http://localhost:8080 by default. This can be configured in vite.config.ts under the proxy settings.

Docker Deployment

A Dockerfile is provided for containerized deployment:

# Build the image
docker build -t bag-recorder-frontend .

# Run the container
docker run -p 80:80 bag-recorder-frontend

The Docker setup includes:

• Multi-stage build for optimized image size
• Nginx server for production serving (HTTP only, no SSL)
• Proxy configuration for backend API and WebSocket endpoint (via nginx.conf)
• SPA routing support
• Health check endpoint

Note: WebSocket proxy is configured but the frontend currently uses HTTP polling.

Configuration

Backend URL

Edit vite.config.ts to change the backend server location:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',  // Change this
      changeOrigin: true,
      secure: false
    },
    '/ws': {
      target: 'ws://localhost:8080',    // Change this
      ws: true,
      changeOrigin: true
    }
  }
}

Port Configuration

Change the development server port in vite.config.ts:

server: {
  port: 3000,  // Change this
  host: true
}

Technology Stack

• React 18 - UI framework
• TypeScript - Type safety and developer experience
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Icon library
• clsx - Utility for constructing className strings

Development Notes

This is a development tool designed for robotics engineers working with ROS2. It prioritizes functionality and ease of use over complex deployment scenarios. The application is intended to run locally alongside ROS2 development environments.

Design Decisions

• No authentication: Designed for local development use
• Simple deployment: Single container, minimal configuration
• Direct API calls: No complex state management library needed
• Batch operations: Essential for managing multiple test recordings
• Polling-based updates: HTTP polling (3s interval) keeps UI synchronized with recording state
• WebSocket ready: Code includes WebSocket implementation for when backend supports it

Troubleshooting

Cannot connect to backend

• Ensure the backend service is running on http://localhost:8080
• Check that CORS is properly configured on the backend
• Verify the proxy settings in vite.config.ts

No topics appearing

• Confirm ROS2 nodes are running and publishing topics
• Verify the backend can access the ROS2 environment
• Check the backend logs for ROS2 discovery errors

Status not updating

• The frontend polls status every 3 seconds via HTTP
• Ensure the backend /api/status endpoint is working
• Check browser console for API errors
• Note: WebSocket support is prepared but currently disabled in the code

Contributing

This is a development tool for personal/team use. Contributions are welcome for bug fixes and feature enhancements that maintain the project's focus on simplicity and usability.

License

MIT

Acknowledgments

This project was developed with AI assistance to implement modern web development best practices and accelerate the development process.