A real-time command and control dashboard for monitoring offense and defense drone operations with interactive mapping, telemetry data, and movement tracking.

✅ Phase 1: Frontend Prototype (Complete)

• Two-pane layout with map and telemetry
• Mapbox integration with custom drone markers
• Team-based visualization (offense/defense)
• Movement trails and timeline controls
• Full UI implementation

✅ Phase 2: Mock Data Integration (Active)

• Using simulated drone data for development
• Real-time position updates every 3 seconds
• Full interactivity with mock drones

⏳ Phase 3: WebSocket Integration (Ready)

• WebSocket hook implemented (app/hooks/useWebSocket.ts)
• Ready to connect when server details provided
• Will replace polling with real-time push updates

• Left Pane (Telemetry): Displays detailed drone information when selected

  • Zoomed map view of selected drone
  • Real-time telemetry: Latitude, Longitude, Roll, Pitch, Yaw, Altitude, Speed
  • Visual attitude and compass indicators
  • Blank when no drone selected

• Right Pane (Main Map): Full operational view

  • Interactive Mapbox with dark theme
  • All active drones displayed with color-coded markers
  • Offense (Blue) vs Defense (Red) team differentiation
  • Multiple drone shape indicators (Circle, Triangle, Square, Pentagon)
  • Toggle-able movement trails
  • Click drones to select and view details

• Real-time Updates: Auto-refresh every 3 seconds (configurable)
• Timeline Slider: Navigate through historical data
• Team Filters: Show/hide offense and defense teams independently
• Movement Trails: Visualize drone paths over time
• Live Status Indicator: Shows connection status
• Responsive Design: Optimized for command center displays

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the dashboard.

Current Mode: Mock Data (simulated drones for testing)

• WEBSOCKET_INTEGRATION.md - Guide for switching to WebSocket
• ARCHITECTURE.md - System architecture and data flow
• QUICK_REFERENCE.md - Quick reference guide
• SETUP.md - Detailed setup instructions
• REFERENCE_POINTS_GUIDE.md - Coordinate system guide
• DATA_FLOW_GUIDE.md - Data transformation details

app/
├── components/
│   ├── Dashboard.tsx          # Main dashboard container
│   ├── MapView.tsx           # Mapbox integration
│   ├── TelemetryPane.tsx     # Drone detail view
│   └── TimelineControl.tsx   # Timeline & filters
├── types/
│   └── drone.ts              # TypeScript interfaces
├── utils/
│   └── mockData.ts           # Mock data generator
├── services/
│   └── api.ts                # API integration
└── page.tsx                  # Entry point

1. View All Drones: Main map shows all active drones
2. Select Drone: Click any marker to view details
3. Filter Teams: Toggle Offense/Defense buttons
4. Toggle Trails: Enable/disable movement paths
5. Timeline: Adjust time range slider (mock data for now)

Edit .env.local:

NEXT_PUBLIC_MAPBOX_TOKEN=your_token_here
NEXT_PUBLIC_CAMERA_ID=your_camera_id
NEXT_PUBLIC_CAMERA_TOKEN=your_camera_token

This project is part of TESA 2025 competition.

Built with ❤️ using Next.js, TypeScript, and Mapbox GL