{"id":29747470,"url":"https://github.com/arnavballincode/drone_sync","last_synced_at":"2025-07-26T08:40:20.342Z","repository":{"id":305314141,"uuid":"1022187572","full_name":"ArnavBallinCode/Drone_Sync","owner":"ArnavBallinCode","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-19T10:15:16.000Z","size":6234,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-19T15:25:28.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArnavBallinCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-18T15:49:20.000Z","updated_at":"2025-07-19T10:15:20.000Z","dependencies_parsed_at":"2025-07-19T15:38:36.152Z","dependency_job_id":null,"html_url":"https://github.com/ArnavBallinCode/Drone_Sync","commit_stats":null,"previous_names":["arnavballincode/drone_sync"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ArnavBallinCode/Drone_Sync","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnavBallinCode","download_url":"https://codeload.github.com/ArnavBallinCode/Drone_Sync/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Sync/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267141186,"owners_count":24041983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-26T08:39:33.925Z","updated_at":"2025-07-26T08:40:20.318Z","avatar_url":"https://github.com/ArnavBallinCode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## DroneSync GCS Minimal Setup\r\n\r\n1. Update `/app/api/jetson-data/route.ts` with your Jetson SCP fetch logic and port configuration.\r\n\r\n2. Set the correct port for your telemetry connection in your scripts and configs.\r\n\r\n3. To find the USB serial device for telemetry, use:\r\n\r\n```sh\r\nls /dev/tty.*\r\n```\r\n\r\nUpdate your scripts to use the correct device (e.g., `/dev/tty.usbserial-XXXX`).\r\n  - **Auto-refresh every 30 seconds** from Jetson device\r\n  - **GPS-to-field coordinate conversion** system\r\n  - **Real-time drone position tracking** with trail effects\r\n  - **Safe spot proximity alerts** with distance calculations\r\n\r\n---\r\n\r\n### 🎯 **System Architecture**\r\n\r\n#### 1️⃣ **Telemetry Data Pipeline**\r\n- The DroneSync backend utilizes Python-based MAVLink integration to capture real-time telemetry data\r\n- Advanced data processing transforms raw MAVLink messages into structured JSON formats\r\n- The frontend consumes this processed data through efficient pull/push mechanisms for real-time display\r\n- Configurable data rates and filtering options optimize performance across different network conditions\r\n\r\n#### 2️⃣ **Calibration Subsystem**\r\n- WebSocket-based communication provides low-latency calibration command handling\r\n- Bi-directional data flow enables real-time feedback during calibration procedures\r\n- Step-by-step guided calibration workflow with visual indicators and progress tracking\r\n- Support for all standard drone calibration procedures with advanced error detection\r\n\r\n#### 3️⃣ **Frontend Architecture**\r\n- Built with Next.js and React for optimal performance and SEO capabilities\r\n- Three.js-powered 3D visualizations for immersive drone attitude representation\r\n- Tailwind CSS implementation for responsive design across all device sizes\r\n- Component-based architecture enabling easy customization and extension\r\n\r\n#### 4️⃣ **Backend Infrastructure**\r\n- Python-based microservices handling different aspects of drone communication\r\n- Robust error handling and recovery mechanisms for connection disruptions\r\n- Data persistence layer for telemetry logging and analysis\r\n- Configurable communication parameters to support various drone hardware\r\n\r\n## 🚀 **Getting Started**\r\n\r\n### 📋 **Prerequisites**\r\n\r\n- **Hardware Requirements**\r\n  - Pixhawk-compatible flight controller\r\n  - USB or telemetry connection to drone\r\n  - Computer with internet connection\r\n  \r\n- **Software Requirements**\r\n  - Node.js 16+ and npm/pnpm\r\n  - Python 3.8+\r\n  - MAVProxy (optional but recommended)\r\n\r\n### 📌 **1. Installation**\r\n\r\n```bash\r\n# Clone the DroneSync repository\r\nnpm run dev\r\n\r\n    style H fill:#a29bfe\r\n\r\n# DroneSync GCS Minimal Setup\r\n\r\n## 1. Setup Instructions\r\n\r\n- Update `/app/api/jetson-data/route.ts` with your Jetson SCP fetch logic and port configuration.\r\n- Set the correct port for your telemetry connection in your scripts and configs.\r\n- To find the USB serial device for telemetry, use:\r\n\r\n```sh\r\nls /dev/tty.*\r\n```\r\n\r\nUpdate your scripts to use the correct device (e.g., `/dev/tty.usbserial-XXXX`).\r\n\r\n\r\n## 2. How Data is Fetched\r\n\r\n- The backend API `/app/api/jetson-data/route.ts` uses SCP to fetch `/home/nvidia/safe_zone_data.txt` from your Jetson device every 5 seconds (for arena/safe spots).\r\n- The backend API `/app/api/status-text/route.ts` uses SCP to fetch `/home/jetson/status.txt` from your Jetson device every 5 seconds (for events).\r\n- The frontend dashboard at `http://localhost:3000/` displays live arena, safe spots, telemetry, and Jetson events data.\r\n- All configuration for Jetson IP, username, and file path is in `/app/api/jetson-data/route.ts` (for arena/safe spots) and `/app/api/status-text/route.ts` (for events).\r\n## 2a. Jetson Events Integration\r\n\r\n- To display Jetson events (system status, logs, etc.), ensure your Jetson device writes event text to `/home/jetson/status.txt`.\r\n- The backend API `/app/api/status-text/route.ts` will fetch this file via SCP and serve its contents to the dashboard.\r\n- The dashboard's \"Events from Jetson\" box (in `/app/page.tsx`) will show the latest contents of `status.txt`, auto-updating every 5 seconds.\r\n\r\n### What to Edit for Actual Jetson Usage\r\n\r\n1. **/app/api/status-text/route.ts**\r\n   - Update `JETSON_USER`, `JETSON_HOST`, and `REMOTE_PATH` to match your Jetson's SSH username, IP address, and the path to `status.txt`.\r\n   - Example:\r\n     ```typescript\r\n     const JETSON_USER = 'jetson';\r\n     const JETSON_HOST = '192.168.1.100'; // Your Jetson IP\r\n     const REMOTE_PATH = '/home/jetson/status.txt';\r\n     ```\r\n\r\n2. **Jetson Device**\r\n   - Make sure your Jetson writes event/status info to `/home/jetson/status.txt` regularly.\r\n   - Example (Jetson Python):\r\n     ```python\r\n     with open('/home/jetson/status.txt', 'w') as f:\r\n         f.write('Flying\\nBattery: 92%\\nGPS Lock: True')\r\n     ```\r\n\r\n3. **/app/page.tsx**\r\n   - The dashboard is already set up to fetch and display events from `/api/status-text` in the \"Events from Jetson\" box.\r\n   - No changes needed unless you want to customize the display or polling interval.\r\n\r\n4. **/app/api/jetson-data/route.ts**\r\n   - For arena/safe spots, update Jetson connection details and file path as above.\r\n\r\n5. **Firewall/SSH**\r\n   - Ensure SSH keys and network access are set up for SCP between the dashboard server and Jetson.\r\n\r\n---\r\n\r\n**Summary:**\r\n- Edit `/app/api/status-text/route.ts` for Jetson connection and file path.\r\n- Ensure Jetson writes to `/home/jetson/status.txt`.\r\n- Dashboard will auto-fetch and display events in real time.\r\n\r\n## 3. Service Startup Sequence\r\n\r\n```bash\r\n# Terminal 1: MAVProxy (Hardware Bridge)\r\n        ARENA[3D Arena\u003cbr/\u003eVisualization]\r\n\r\n# Terminal 2: Telemetry Listener (via UDP)\r\n        TELEMETRY[Real-time\u003cbr/\u003eDashboard]\r\n\r\n# Terminal 3: Calibration Server\r\n    end\r\n\r\n# Terminal 4: Next.js Web Interface\r\n    \r\n```\r\n\r\n## 4. Jetson SCP Fetch Example\r\n\r\n```bash\r\n# Test Jetson SCP connection\r\n    subgraph DATA[\"📊 Data Layer\"]\r\n```\r\n\r\n## 5. Accessing the Dashboard\r\n\r\n- Main dashboard: http://localhost:3000/\r\n- History page: http://localhost:3000/history\r\n\r\n---\r\n\r\n# Diagrams \u0026 Advanced Details (Reference)\r\n\r\n\u003c!-- All diagrams, architecture, and advanced info moved below for reference --\u003e\r\n...existing diagrams and technical details from previous README...\r\n        JSON[Telemetry JSON\u003cbr/\u003eFiles]\r\n        TEMP[Temporary\u003cbr/\u003eSCP Cache]\r\n    end\r\n    \r\n    DRONE --\u003e MAVPROXY\r\n    JETSON --\u003e SCP\r\n    MAVPROXY --\u003e LISTEN\r\n    SCP --\u003e API\r\n    LISTEN --\u003e JSON\r\n    API --\u003e TEMP\r\n    JSON --\u003e REACT\r\n    TEMP --\u003e REACT\r\n    REACT --\u003e SAFESPOTS\r\n    REACT --\u003e ARENA\r\n    REACT --\u003e TELEMETRY\r\n    CALIB --\u003e REACT\r\n    \r\n    style HW fill:#ff7675\r\n    style BRIDGE fill:#74b9ff\r\n    style BACKEND fill:#00b894\r\n    style FRONTEND fill:#fdcb6e\r\n    style DATA fill:#e17055\r\n```\r\n\r\n### 📂 **File Structure \u0026 Data Flow**\r\n\r\n#### **1. Jetson Device (Source of Truth)**\r\n```\r\n📁 Jetson Device (jetson123@10.0.2.219)\r\n└── /home/nvidia/safe_zone_data.txt  ← UPDATE THIS FILE FOR LIVE DATA\r\n```\r\n\r\n**File Format:**\r\n```txt\r\nArena:\r\nCorner1: [12.0345, 77.1234]\r\nCorner2: [12.0345, 77.1265]\r\nCorner3: [12.0315, 77.1265]\r\nCorner4: [12.0315, 77.1234]\r\n\r\nDetected Safe Spots\r\nSafeSpots:\r\nSpot1: [12.0331, 77.1245]\r\nSpot2: [12.0320, 77.1255]\r\nSpot3: [12.0330, 77.1239]\r\n```\r\n\r\n#### **2. Backend API (SCP Fetcher)**\r\n```\r\n📁 app/api/jetson-data/route.ts\r\n- Automatically connects to Jetson via SCP\r\n- Downloads /home/nvidia/safe_zone_data.txt\r\n- Parses GPS coordinates\r\n- Returns structured JSON data\r\n```\r\n\r\n#### **3. Frontend Visualization**\r\n```\r\n📁 app/safe-spots/page.tsx     ← Safe Spots Detection UI\r\n📁 app/arena/page.tsx          ← 3D Arena Visualization\r\n```\r\n\r\n### 🔄 **Data Flow Process**\r\n\r\n1. **Jetson Device** updates `/home/nvidia/safe_zone_data.txt` with live GPS coordinates\r\n2. **Backend API** fetches data via SCP every 30 seconds\r\n3. **Frontend** receives JSON data and converts GPS to field coordinates\r\n4. **Visualization** renders dynamic arena polygon and safe spots\r\n5. **Real-time Updates** show drone position and safe spot detection\r\n\r\n### 🚀 **How to Update Live Arena Data**\r\n\r\n#### **Method 1: Direct SSH Update**\r\n```bash\r\n# SSH to Jetson device\r\nssh jetson123@10.0.2.219\r\n\r\n# Edit the safe zone file\r\nnano /home/nvidia/safe_zone_data.txt\r\n\r\n# Update coordinates and save\r\n# System automatically fetches updates every 30 seconds\r\n```\r\n\r\n#### **Method 2: Python Script on Jetson (Recommended)**\r\nCreate this script on the Jetson device for continuous updates:\r\n\r\n```python\r\n# /home/nvidia/update_safe_zones.py\r\nimport time\r\nimport random\r\nimport json\r\nfrom datetime import datetime\r\n\r\ndef update_safe_zone_data():\r\n    # Base coordinates (adjust for your location)\r\n    base_lat = 12.0330\r\n    base_lng = 77.1250\r\n    \r\n    # Define arena corners (fixed rectangle)\r\n    arena_data = f\"\"\"Arena:\r\nCorner1: [{base_lat + 0.0015:.6f}, {base_lng - 0.0016:.6f}]\r\nCorner2: [{base_lat + 0.0015:.6f}, {base_lng + 0.0015:.6f}]\r\nCorner3: [{base_lat - 0.0015:.6f}, {base_lng + 0.0015:.6f}]\r\nCorner4: [{base_lat - 0.0015:.6f}, {base_lng - 0.0016:.6f}]\r\n\r\nDetected Safe Spots\r\nSafeSpots:\"\"\"\r\n    \r\n    # Generate dynamic safe spots (example: 3 random spots within arena)\r\n    safe_spots = []\r\n    for i in range(1, 4):\r\n        lat = base_lat + random.uniform(-0.001, 0.001)\r\n        lng = base_lng + random.uniform(-0.001, 0.001)\r\n        safe_spots.append(f\"Spot{i}: [{lat:.6f}, {lng:.6f}]\")\r\n    \r\n    content = arena_data + \"\\n\" + \"\\n\".join(safe_spots)\r\n    \r\n    # Write to file\r\n    with open('/home/nvidia/safe_zone_data.txt', 'w') as f:\r\n        f.write(content)\r\n    \r\n    print(f\"✅ Updated safe zone data at {time.ctime()}\")\r\n\r\n# Run continuously\r\nif __name__ == \"__main__\":\r\n    while True:\r\n        update_safe_zone_data()\r\n        time.sleep(10)  # Update every 10 seconds\r\n```\r\n\r\n**Advanced Jetson Integration Flow:**\r\n```mermaid\r\nstateDiagram-v2\r\n    [*] --\u003e Detecting\r\n    Detecting --\u003e ProcessingGPS: GPS Lock Acquired\r\n    ProcessingGPS --\u003e CalculatingSpots: Arena Boundaries Set\r\n    CalculatingSpots --\u003e WritingFile: Safe Spots Identified\r\n    WritingFile --\u003e WaitingUpdate: File Written\r\n    WaitingUpdate --\u003e Detecting: Timer Expires (10s)\r\n    \r\n    ProcessingGPS --\u003e ErrorState: GPS Signal Lost\r\n    CalculatingSpots --\u003e ErrorState: Invalid Coordinates\r\n    WritingFile --\u003e ErrorState: File Write Failed\r\n    ErrorState --\u003e Detecting: Retry After Delay\r\n```\r\n\r\n**Jetson Data Processing Pipeline:**\r\n```mermaid\r\nflowchart LR\r\n    subgraph JETSON[\"🤖 Jetson Device\"]\r\n        GPS[GPS Module\u003cbr/\u003eCoordinate Input]\r\n        PROCESS[Data Processing\u003cbr/\u003eSafe Spot Detection]\r\n        FILE[File Writer\u003cbr/\u003esafe_zone_data.txt]\r\n    end\r\n    \r\n    subgraph NETWORK[\"🌐 Network Transfer\"]\r\n        SCP[SCP Protocol\u003cbr/\u003eSSH File Transfer]\r\n        CACHE[Temp Cache\u003cbr/\u003eLocal Storage]\r\n    end\r\n    \r\n    subgraph WEBAPP[\"🖥️ Web Application\"]\r\n        API[API Endpoint\u003cbr/\u003e/api/jetson-data]\r\n        PARSE[Data Parser\u003cbr/\u003eGPS → Local Coords]\r\n        UI[React UI\u003cbr/\u003eLive Visualization]\r\n    end\r\n    \r\n    GPS --\u003e PROCESS\r\n    PROCESS --\u003e FILE\r\n    FILE --\u003e SCP\r\n    SCP --\u003e CACHE\r\n    CACHE --\u003e API\r\n    API --\u003e PARSE\r\n    PARSE --\u003e UI\r\n    \r\n    style JETSON fill:#e74c3c\r\n    style NETWORK fill:#3498db\r\n    style WEBAPP fill:#2ecc71\r\n```\r\n\r\n**Run on Jetson:**\r\n```bash\r\npython3 /home/nvidia/update_safe_zones.py\r\n```\r\n\r\n### 🧪 **Testing the Dynamic System**\r\n\r\n**Complete System Testing Flow:**\r\n```mermaid\r\ngraph TB\r\n    subgraph TEST[\"🧪 Testing Workflow\"]\r\n        START[Start Testing] --\u003e MOCK[Test Mock Data]\r\n        MOCK --\u003e JETSON[Test Jetson SCP]\r\n        JETSON --\u003e INTEGRATION[Test Full Integration]\r\n        INTEGRATION --\u003e VALIDATION[Validate Real-time Updates]\r\n    end\r\n    \r\n    subgraph COMMANDS[\"💻 Test Commands\"]\r\n        CMD1[curl -X POST\u003cbr/\u003eMock Data Test]\r\n        CMD2[curl -X GET\u003cbr/\u003eReal SCP Test]\r\n        CMD3[Browser Test\u003cbr/\u003eLive Visualization]\r\n        CMD4[SSH Test\u003cbr/\u003eJetson Connection]\r\n    end\r\n    \r\n    MOCK --\u003e CMD1\r\n    JETSON --\u003e CMD2\r\n    INTEGRATION --\u003e CMD3\r\n    VALIDATION --\u003e CMD4\r\n    \r\n    style TEST fill:#f39c12\r\n    style COMMANDS fill:#9b59b6\r\n```\r\n\r\n#### **Test API Endpoint:**\r\n```bash\r\n# Test with mock data (no Jetson required)\r\ncurl -X POST http://localhost:3000/api/jetson-data\r\n\r\n# Test with real Jetson SCP connection\r\ncurl http://localhost:3000/api/jetson-data\r\n\r\n# Test Jetson SSH connectivity\r\nssh jetson123@10.0.2.219 \"echo 'Connection successful'\"\r\n\r\n# Test file exists on Jetson\r\nssh jetson123@10.0.2.219 \"cat /home/nvidia/safe_zone_data.txt\"\r\n```\r\n\r\n#### **Access Live Visualization:**\r\n```bash\r\n# Start the development server\r\nnpm run dev\r\n\r\n# Open in browser:\r\n# http://localhost:3000/safe-spots  ← Safe Spots Detection\r\n# http://localhost:3000/arena       ← 3D Arena Visualization\r\n```\r\n\r\n**Real-time Data Monitoring:**\r\n```mermaid\r\nsequenceDiagram\r\n    participant U as User Browser\r\n    participant F as Frontend\r\n    participant A as API Route\r\n    participant J as Jetson Device\r\n    participant D as Drone\r\n    \r\n    loop Every 30 seconds\r\n        F-\u003e\u003eA: Fetch Jetson Data\r\n        A-\u003e\u003eJ: SCP Request\r\n        J--\u003e\u003eA: safe_zone_data.txt\r\n        A--\u003e\u003eF: Parsed JSON\r\n        F--\u003e\u003eU: Update Arena UI\r\n    end\r\n    \r\n    loop Every 250ms\r\n        F-\u003e\u003eF: Fetch Telemetry JSON\r\n        D-\u003e\u003eF: Position Data\r\n        F--\u003e\u003eU: Update Drone Position\r\n    end\r\n    \r\n    Note over F,U: Real-time Safe Spot Detection\r\n    F-\u003e\u003eF: Calculate Distance\r\n    F--\u003e\u003eU: Proximity Alert\r\n```\r\n\r\n### 📊 **Key Features**\r\n\r\n- **🔄 Auto-Refresh**: Fetches new data every 30 seconds\r\n- **📍 GPS Conversion**: Converts GPS coordinates to field coordinates\r\n- **🎯 Safe Spot Detection**: Real-time proximity detection with 0.5m threshold\r\n- **✨ Visual Effects**: Pulsing animations for detected safe spots\r\n- **📊 Live Status**: Connection status and data freshness indicators\r\n- **🗺️ Dynamic Arena**: Arena boundaries render from fetched GPS corners\r\n- **📈 Position Trail**: Shows drone movement history\r\n- **⚠️ Alerts**: Pop-up notifications when entering safe spots\r\n\r\n### 🛠️ **Configuration**\r\n\r\n#### **Jetson Connection Settings** (in `app/api/jetson-data/route.ts`):\r\n```typescript\r\nconst JETSON_CONFIG = {\r\n  ip: '10.0.2.219',                    // Jetson IP address\r\n  username: 'jetson123',               // SSH username\r\n  remotePath: '/home/nvidia/safe_zone_data.txt',  // File path on Jetson\r\n  localPath: path.join(process.cwd(), 'temp', 'safe_zone_data.txt')  // Local temp file\r\n}\r\n```\r\n\r\n#### **Detection Settings** (in `app/safe-spots/page.tsx`):\r\n```typescript\r\nconst DETECTION_THRESHOLD = 0.5  // Detection radius in meters\r\nconst UPDATE_INTERVAL = 30000     // SCP fetch interval (30 seconds)\r\nconst POSITION_UPDATE = 250       // Drone position update (250ms)\r\n```\r\n\r\n### ⚡ **Performance**\r\n\r\n- **SCP Fetch**: 30-second intervals to avoid overloading Jetson\r\n- **Position Updates**: 250ms (4Hz) for smooth drone tracking\r\n- **GPS Conversion**: Real-time coordinate transformation\r\n- **Visual Rendering**: 60fps smooth animations with Three.js\r\n- **Memory Efficient**: Automatic cleanup of temporary SCP files\r\n\r\n### 🔧 **Troubleshooting**\r\n\r\n**System Diagnostics Flow:**\r\n```mermaid\r\nflowchart TD\r\n    START[System Issue] --\u003e IDENTIFY{Identify Component}\r\n    \r\n    IDENTIFY --\u003e|Telemetry| TEL[Telemetry Issues]\r\n    IDENTIFY --\u003e|Jetson| JET[Jetson Connection]\r\n    IDENTIFY --\u003e|Frontend| FE[Frontend Problems]\r\n    IDENTIFY --\u003e|MAVProxy| MAV[MAVProxy Issues]\r\n    \r\n    TEL --\u003e TEL1[Check MAVProxy Status]\r\n    TEL --\u003e TEL2[Verify listen.py Running]\r\n    TEL --\u003e TEL3[Check JSON Files]\r\n    \r\n    JET --\u003e JET1[Test SSH Connection]\r\n    JET --\u003e JET2[Verify File Exists]\r\n    JET --\u003e JET3[Check SCP Permissions]\r\n    \r\n    FE --\u003e FE1[Clear Browser Cache]\r\n    FE --\u003e FE2[Check Console Errors]\r\n    FE --\u003e FE3[Verify API Responses]\r\n    \r\n    MAV --\u003e MAV1[Check Port Conflicts]\r\n    MAV --\u003e MAV2[Verify Hardware Connection]\r\n    MAV --\u003e MAV3[Test Different Baud Rates]\r\n    \r\n    style START fill:#e74c3c\r\n    style TEL fill:#3498db\r\n    style JET fill:#f39c12\r\n    style FE fill:#2ecc71\r\n    style MAV fill:#9b59b6\r\n```\r\n\r\n#### **Connection Issues:**\r\n```bash\r\n# Test SSH connection to Jetson\r\nssh jetson123@10.0.2.219\r\n\r\n# Check if file exists\r\nls -la /home/nvidia/safe_zone_data.txt\r\n\r\n# Test SCP manually\r\nscp jetson123@10.0.2.219:/home/nvidia/safe_zone_data.txt ./test_file.txt\r\n\r\n# Check MAVProxy UDP ports\r\nnetstat -an | grep 14550\r\nnetstat -an | grep 14551\r\n\r\n# Test listen.py connection\r\npython3 listen.py --connection=udp:localhost:14550 --baud=115200\r\n```\r\n\r\n**Port Conflict Resolution:**\r\n```mermaid\r\ngraph LR\r\n    A[Port Conflict Detected] --\u003e B{Check Running Processes}\r\n    B --\u003e C[Kill MAVProxy: pkill -f mavproxy]\r\n    B --\u003e D[Kill listen.py: pkill -f listen.py]\r\n    B --\u003e E[Kill Other Apps: lsof -i :14550]\r\n    \r\n    C --\u003e F[Restart in Correct Order]\r\n    D --\u003e F\r\n    E --\u003e F\r\n    \r\n    F --\u003e G[1. MAVProxy First]\r\n    G --\u003e H[2. listen.py Second]\r\n    H --\u003e I[3. Web App Last]\r\n    \r\n    style A fill:#e74c3c\r\n    style F fill:#f39c12\r\n    style I fill:#27ae60\r\n```\r\n\r\n#### **Common Solutions:**\r\n- Ensure Jetson device is connected to network\r\n- Verify SSH key authentication is set up\r\n- Check firewall settings on both devices\r\n- Confirm file permissions on Jetson device\r\n- Restart MAVProxy if UDP ports are busy\r\n- Clear browser cache for frontend issues\r\n\r\n### 📱 **Responsive Design**\r\n\r\nDroneSync GCS works seamlessly across all devices:\r\n\r\n- **Desktop**: Full-featured interface with expanded data visualization\r\n- **Tablet**: Optimized touch controls and readable data displays\r\n- **Mobile**: Essential controls and telemetry for field operations\r\n\r\n---\r\n\r\n## 🔗 **API Documentation**\r\n\r\n### **Dynamic Arena Data API**\r\n\r\n#### **GET** `/api/jetson-data`\r\nFetches live arena and safe spot data from Jetson device via SCP.\r\n\r\n```typescript\r\n// Response Format\r\n{\r\n  \"arena\": [\r\n    { \"lat\": 12.0345, \"lng\": 77.1234 },\r\n    { \"lat\": 12.0345, \"lng\": 77.1265 },\r\n    { \"lat\": 12.0315, \"lng\": 77.1265 },\r\n    { \"lat\": 12.0315, \"lng\": 77.1234 }\r\n  ],\r\n  \"safeSpots\": [\r\n    { \"id\": \"Spot1\", \"lat\": 12.0331, \"lng\": 77.1245 },\r\n    { \"id\": \"Spot2\", \"lat\": 12.0320, \"lng\": 77.1255 },\r\n    { \"id\": \"Spot3\", \"lat\": 12.0330, \"lng\": 77.1239 }\r\n  ],\r\n  \"timestamp\": \"2025-06-07T10:30:45.123Z\",\r\n  \"status\": \"success\"\r\n}\r\n```\r\n\r\n**Error Response:**\r\n```typescript\r\n{\r\n  \"arena\": [],\r\n  \"safeSpots\": [],\r\n  \"timestamp\": \"2025-06-07T10:30:45.123Z\",\r\n  \"status\": \"error\",\r\n  \"error\": \"Failed to fetch data from Jetson\"\r\n}\r\n```\r\n\r\n#### **POST** `/api/jetson-data`\r\nReturns mock data for testing purposes (no Jetson connection required).\r\n\r\n```bash\r\n# Example Usage\r\ncurl -X GET http://localhost:3000/api/jetson-data\r\ncurl -X POST http://localhost:3000/api/jetson-data  # Mock data\r\n```\r\n\r\n### **Telemetry Data Endpoints**\r\n\r\n#### **Drone Position Data**\r\n```bash\r\n# Local Position (NED coordinates)\r\nGET /params/local_position_ned.json\r\n\r\n# Global Position (GPS coordinates)  \r\nGET /params/global_position_int.json\r\n\r\n# Attitude Data\r\nGET /params/attitude.json\r\n\r\n# Battery Status\r\nGET /params/battery_status.json\r\n```\r\n\r\n**Example Response:**\r\n```json\r\n// local_position_ned.json\r\n{\r\n  \"x\": 2.45,\r\n  \"y\": -1.23,\r\n  \"z\": -0.15,\r\n  \"vx\": 0.1,\r\n  \"vy\": -0.05,\r\n  \"vz\": 0.02,\r\n  \"time_boot_ms\": 45678\r\n}\r\n```\r\n\r\n### **WebSocket Endpoints**\r\n\r\n#### **Real-time Telemetry Stream**\r\n```javascript\r\n// Connect to live telemetry WebSocket\r\nconst ws = new WebSocket('ws://localhost:8765/telemetry')\r\n\r\nws.onmessage = (event) =\u003e {\r\n  const data = JSON.parse(event.data)\r\n  // Handle real-time telemetry data\r\n}\r\n```\r\n\r\n#### **Calibration Commands**\r\n```javascript\r\n// Calibration WebSocket\r\nconst calibWs = new WebSocket('ws://localhost:8765/calibration')\r\n\r\n// Send calibration command\r\ncalibWs.send(JSON.stringify({\r\n  command: 'start_gyro_calibration',\r\n  parameters: {}\r\n}))\r\n```\r\n\r\n---\r\n\r\n## 🚀 **Roadmap**\r\n\r\nWe're continuously improving DroneSync GCS with new features:\r\n\r\n- **Q3 2025**: Advanced mission planning with waypoint management\r\n- **Q4 2025**: AI-powered anomaly detection for preventive maintenance\r\n- **Q1 2026**: Enhanced 3D mapping with LiDAR and SLAM integration\r\n- **Q2 2026**: Multi-vehicle control and fleet management capabilities\r\n\r\n## 👨‍💻 **Contributing**\r\n\r\nWe welcome contributions to DroneSync GCS:\r\n\r\n1. Fork the repository\r\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 **License**\r\n\r\nThis project is licensed under the proprietary license. All rights reserved.\r\n\r\n## 🤝 **Support \u0026 Contact**\r\n\r\nFor support, feature requests, or inquiries:\r\n\r\n- **Website**: Upcoming       \r\n- **Email**: arnav.angarkar20@gmail.com\r\n- **Twitter**: Upcoming \r\n- **GitHub Issues**: For bug reports and feature requests\r\n\r\n## 💫 **Technical Specifications**\r\n\r\n### ⚡ **Performance**\r\n\r\nDroneSync GCS is optimized for real-time drone operations:\r\n\r\n- **Update Rate**: Up to 50Hz telemetry updates\r\n- **Latency**: \u003c100ms typical end-to-end latency\r\n- **Resource Usage**: \u003c200MB memory footprint\r\n- **Compatibility**: Works with MAVLink 1.0 and 2.0\r\n\r\n### 🛡️ **Dynamic Arena System Performance**\r\n\r\n- **SCP Data Fetch**: 30-second intervals from Jetson device\r\n- **Position Updates**: 250ms (4Hz) for smooth drone tracking\r\n- **GPS Conversion**: Real-time coordinate transformation (\u003c5ms)\r\n- **Visual Rendering**: 60fps smooth animations with Three.js\r\n- **Memory Efficiency**: Auto-cleanup of temporary SCP files\r\n- **Detection Accuracy**: 0.5m threshold for safe spot proximity\r\n- **Connection Timeout**: 10-second SCP timeout with fallback\r\n\r\n### 🔌 **Connection Options**\r\n\r\nConnect to your drone using multiple methods:\r\n\r\n- **Serial Connection**: Direct USB to Pixhawk (FTDI)\r\n- **Telemetry Radio**: Support for SiK radios (433/915MHz)\r\n- **Wi-Fi**: ESP8266/ESP32-based telemetry bridges\r\n- **Bluetooth**: Experimental support for HC-05/HC-06\r\n- **SCP/SSH**: Jetson device integration for arena data\r\n\r\n### 📊 **Telemetry Parameters**\r\n\r\nDroneSync GCS monitors comprehensive drone metrics:\r\n\r\n#### **Flight Data**\r\n- **Attitude**: Roll, pitch, yaw (degrees and quaternions)\r\n- **Position**: Latitude, longitude, altitude (GPS and barometric)\r\n- **Velocity**: Ground speed and 3D velocity vector (m/s)\r\n- **RC Input**: All channel values and control positions\r\n\r\n#### **Dynamic Arena Data**\r\n- **Arena Boundaries**: GPS coordinates converted to field coordinates\r\n- **Safe Spots**: Real-time GPS positions with detection zones\r\n- **Proximity Detection**: Distance calculation and alert system\r\n- **Data Freshness**: Timestamp tracking for Jetson data updates\r\n- **Connection Status**: Live monitoring of Jetson device connectivity\r\n\r\n#### **System Health**\r\n- **Battery**: Voltage, current, remaining capacity, cells\r\n- **Connection**: Signal strength, packet loss, round-trip time\r\n- **System**: CPU usage, storage, temperature, uptime\r\n- **Sensors**: Gyroscope, accelerometer, magnetometer, barometer health\r\n- **Jetson Status**: SCP connection health and data validation\r\n\r\n\r\n\u003c!-- ## 📸 **Screenshots**\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cp\u003e\u003ci\u003eMain Dashboard - Real-time telemetry overview with 3D visualization\u003c/i\u003e\u003c/p\u003e\r\n  \u003cimg src=\"https://via.placeholder.com/1200x600?text=DroneSync+Dashboard\" alt=\"DroneSync Dashboard\" width=\"800\"/\u003e\r\n  \r\n  \u003cp\u003e\u003ci\u003eCalibration Interface - Professional sensor calibration workflow\u003c/i\u003e\u003c/p\u003e\r\n  \u003cimg src=\"https://via.placeholder.com/1200x600?text=Calibration+Interface\" alt=\"Calibration Interface\" width=\"800\"/\u003e\r\n  \r\n  \u003cp\u003e\u003ci\u003ePosition Tracking - GPS-based position monitoring with map overlay\u003c/i\u003e\u003c/p\u003e\r\n  \u003cimg src=\"https://via.placeholder.com/1200x600?text=Position+Tracking\" alt=\"Position Tracking\" width=\"800\"/\u003e\r\n\u003c/div\u003e --\u003e\r\n\r\n## 🔧 **Quick Reference**\r\n\r\n### Common Commands\r\n\r\n```bash\r\n# Start MAVProxy with UDP forwarding (FIRST - Master connection)\r\nmavproxy.py --master=/dev/tty.usbserial-XXXX --baud=115200 --out=udp:localhost:14550 --out=udp:localhost:14551 --console\r\n\r\n# Start telemetry listener (SECOND - Connects via UDP to MAVProxy)\r\npython3 listen.py --connection=udp:localhost:14550\r\n\r\n# Start calibration server (THIRD - Independent WebSocket server)\r\npython3 calibrating/calibration_server.py\r\n\r\n# Start web interface (FOURTH - Frontend application)\r\nnpm run dev\r\n\r\n# Test dynamic arena system\r\ncurl -X GET http://localhost:3000/api/jetson-data    # Real SCP fetch\r\ncurl -X POST http://localhost:3000/api/jetson-data   # Mock data test\r\n\r\n# Jetson connection tests\r\nssh jetson123@10.0.2.219 \"echo 'Jetson connected'\"\r\nscp jetson123@10.0.2.219:/home/nvidia/safe_zone_data.txt ./test.txt\r\n```\r\n\r\n**Service Startup Sequence:**\r\n```mermaid\r\ngantt\r\n    title DroneSync GCS Startup Sequence\r\n    dateFormat X\r\n    axisFormat %M:%S\r\n    \r\n    section Hardware\r\n    Connect Drone Hardware    :done, hardware, 0, 30s\r\n    \r\n    section Communication\r\n    Start MAVProxy Bridge     :active, mavproxy, after hardware, 45s\r\n    Establish UDP Streams     :udp, after mavproxy, 15s\r\n    \r\n    section Data Processing\r\n    Start listen.py           :listen, after udp, 30s\r\n    Start Calibration Server  :calib, after listen, 30s\r\n    \r\n    section Frontend\r\n    Start Next.js App         :frontend, after calib, 60s\r\n    Load Web Interface        :ui, after frontend, 30s\r\n    \r\n    section Integration\r\n    Test Jetson Connection    :jetson, after ui, 45s\r\n    Verify Full System        :verify, after jetson, 30s\r\n```\r\n\r\n### 📁 **Project Structure**\r\n\r\n```\r\nDroneSync GCS/\r\n├── app/\r\n│   ├── api/jetson-data/route.ts     # 🛡️ Dynamic arena SCP API\r\n│   ├── safe-spots/page.tsx          # 🛡️ Safe spots detection UI\r\n│   ├── arena/page.tsx               # 🛡️ 3D arena visualization\r\n│   ├── telemetry/page.tsx           # 📡 Real-time telemetry\r\n│   ├── calibration/page.tsx         # 🛠️ Sensor calibration\r\n│   └── layout.tsx                   # 🎨 Main layout\r\n├── components/\r\n│   ├── ui/                          # 🎨 Reusable UI components\r\n│   ├── telemetry-chart.tsx          # 📊 Data visualization\r\n│   └── navigation.tsx               # 🧭 Navigation components\r\n├── public/params/                   # 📄 Live telemetry JSON files\r\n├── temp/safe_zone_data.txt          # 🛡️ Jetson data cache\r\n├── calibrating/                     # 🛠️ Python calibration scripts\r\n├── listen.py                        # 📡 MAVLink → JSON converter\r\n└── public/                          # 🖼️ Static assets\r\n```\r\n\r\n**Data Flow Through Project Structure:**\r\n```mermaid\r\nflowchart LR\r\n    subgraph INPUT[\"📥 Input Sources\"]\r\n        DRONE[Drone\u003cbr/\u003eMAVLink Data]\r\n        JETSON[Jetson Device\u003cbr/\u003eGPS Coordinates]\r\n    end\r\n    \r\n    subgraph PROCESSING[\"⚙️ Processing Layer\"]\r\n        MAVPROXY[MAVProxy\u003cbr/\u003eUDP Bridge]\r\n        LISTEN[listen.py\u003cbr/\u003eJSON Writer]\r\n        SCPAPI[SCP API\u003cbr/\u003eroute.ts]\r\n    end\r\n    \r\n    subgraph STORAGE[\"💾 Data Storage\"]\r\n        PARAMS[public/params/\u003cbr/\u003eTelemetry Files]\r\n        TEMP[temp/\u003cbr/\u003eArena Cache]\r\n    end\r\n    \r\n    subgraph OUTPUT[\"🖥️ Output Interface\"]\r\n        SAFESPOTS[Safe Spots\u003cbr/\u003epage.tsx]\r\n        ARENA[3D Arena\u003cbr/\u003epage.tsx]\r\n        TELEMETRY[Telemetry\u003cbr/\u003epage.tsx]\r\n    end\r\n    \r\n    DRONE --\u003e MAVPROXY\r\n    MAVPROXY --\u003e LISTEN\r\n    LISTEN --\u003e PARAMS\r\n    \r\n    JETSON --\u003e SCPAPI\r\n    SCPAPI --\u003e TEMP\r\n    \r\n    PARAMS --\u003e SAFESPOTS\r\n    PARAMS --\u003e TELEMETRY\r\n    TEMP --\u003e SAFESPOTS\r\n    TEMP --\u003e ARENA\r\n    \r\n    style INPUT fill:#ff7675\r\n    style PROCESSING fill:#74b9ff\r\n    style STORAGE fill:#00b894\r\n    style OUTPUT fill:#fdcb6e\r\n```\r\n\r\n**File Dependencies Map:**\r\n```mermaid\r\ngraph TD\r\n    subgraph CORE[\"🎯 Core Files\"]\r\n        LISTEN[listen.py\u003cbr/\u003eTelemetry Processor]\r\n        ROUTE[route.ts\u003cbr/\u003eJetson API]\r\n        LAYOUT[layout.tsx\u003cbr/\u003eApp Structure]\r\n    end\r\n    \r\n    subgraph PAGES[\"📄 Page Components\"]\r\n        SAFE[safe-spots/page.tsx]\r\n        ARENA[arena/page.tsx] \r\n        TELEM[telemetry/page.tsx]\r\n        CALIB[calibration/page.tsx]\r\n    end\r\n    \r\n    subgraph DATA[\"📊 Data Files\"]\r\n        JSON[params/*.json]\r\n        CACHE[temp/safe_zone_data.txt]\r\n        STATIC[public/assets]\r\n    end\r\n    \r\n    subgraph UTILS[\"🔧 Utilities\"]\r\n        COMPONENTS[components/ui/*]\r\n        HOOKS[hooks/*]\r\n        LIB[lib/utils.ts]\r\n    end\r\n    \r\n    LISTEN --\u003e JSON\r\n    ROUTE --\u003e CACHE\r\n    \r\n    JSON --\u003e SAFE\r\n    JSON --\u003e TELEM\r\n    CACHE --\u003e SAFE\r\n    CACHE --\u003e ARENA\r\n    \r\n    COMPONENTS --\u003e SAFE\r\n    COMPONENTS --\u003e ARENA\r\n    COMPONENTS --\u003e TELEM\r\n    COMPONENTS --\u003e CALIB\r\n    \r\n    HOOKS --\u003e SAFE\r\n    HOOKS --\u003e ARENA\r\n    LIB --\u003e SAFE\r\n    \r\n    LAYOUT --\u003e SAFE\r\n    LAYOUT --\u003e ARENA\r\n    LAYOUT --\u003e TELEM\r\n    LAYOUT --\u003e CALIB\r\n    \r\n    style CORE fill:#e74c3c\r\n    style PAGES fill:#3498db\r\n    style DATA fill:#f39c12\r\n    style UTILS fill:#27ae60\r\n```\r\n\r\n### System Requirements\r\n\r\n**Hardware Requirements:**\r\n```mermaid\r\nmindmap\r\n  root((DroneSync GCS\u003cbr/\u003eRequirements))\r\n    Minimum Hardware\r\n      2 GHz dual-core processor\r\n      4 GB RAM\r\n      1 GB storage\r\n      USB 2.0 port\r\n    Recommended Hardware\r\n      2.5 GHz quad-core processor\r\n      8 GB RAM\r\n      2 GB storage\r\n      USB 3.0 port\r\n    Network Requirements\r\n      Ethernet/WiFi connection\r\n      SSH access to Jetson\r\n      Internet for dependencies\r\n    Drone Hardware\r\n      Pixhawk compatible FC\r\n      MAVLink 1.0/2.0 support\r\n      USB or telemetry radio\r\n      GPS module (recommended)\r\n```\r\n\r\n**Software Compatibility Matrix:**\r\n```mermaid\r\ngraph TB\r\n    subgraph OS[\"💻 Operating Systems\"]\r\n        MACOS[macOS 11+\u003cbr/\u003e✅ Fully Supported]\r\n        UBUNTU[Ubuntu 20.04+\u003cbr/\u003e✅ Fully Supported] \r\n        WINDOWS[Windows 10/11\u003cbr/\u003e✅ Fully Supported]\r\n        RASPI[Raspberry Pi OS\u003cbr/\u003e⚠️ Limited Support]\r\n    end\r\n    \r\n    subgraph RUNTIME[\"🔧 Runtime Requirements\"]\r\n        NODE[Node.js 16+\u003cbr/\u003eRequired]\r\n        PYTHON[Python 3.8+\u003cbr/\u003eRequired]\r\n        MAVPROXY[MAVProxy\u003cbr/\u003eRecommended]\r\n        GIT[Git\u003cbr/\u003eRequired for setup]\r\n    end\r\n    \r\n    subgraph OPTIONAL[\"📦 Optional Components\"]\r\n        DOCKER[Docker\u003cbr/\u003eFor containerization]\r\n        VSCODE[VS Code\u003cbr/\u003eDevelopment]\r\n        CHROME[Chrome/Firefox\u003cbr/\u003eWeb interface]\r\n    end\r\n    \r\n    OS --\u003e RUNTIME\r\n    RUNTIME --\u003e OPTIONAL\r\n    \r\n    style OS fill:#3498db\r\n    style RUNTIME fill:#e74c3c\r\n    style OPTIONAL fill:#f39c12\r\n```\r\n\r\n- **Minimum Hardware**\r\n  - 2 GHz dual-core processor\r\n  - 4 GB RAM\r\n  - 1 GB available storage\r\n  - USB port for drone connection\r\n\r\n- **Recommended Hardware**\r\n  - 2.5 GHz quad-core processor\r\n  - 8 GB RAM\r\n  - 2 GB available storage\r\n  - USB 3.0 port\r\n\r\n- **Supported Operating Systems**\r\n  - Windows 10/11\r\n  - macOS 11+\r\n  - Ubuntu 20.04+\r\n  - Raspberry Pi OS (64-bit)\r\n\r\n## 🙏 **Acknowledgments**\r\n\r\nSpecial thanks to:\r\n- ArduPilot Team for MAVLink protocol development\r\n- QGroundControl and Mission Planner for inspiration\r\n\r\n---\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cb\u003eDroneSync GCS\u003c/b\u003e - Professional Ground Control System\u003cbr\u003e\r\n  © 2025 Arnav Angarkar . All Rights Reserved.\r\n\u003c/p\u003e\r\n\r\n### Prerequisites\r\n1. Install Node.js (LTS version) from [nodejs.org](https://nodejs.org/)\r\n2. Install Python 3.8+ from [python.org](https://python.org)\r\n3. Install MAVProxy:\r\n```bash\r\n# On macOS\r\nbrew install mavproxy\r\n\r\n# On Ubuntu/Debian\r\nsudo apt-get install python3-pip python3-dev\r\npip3 install MAVProxy\r\n\r\n# On Windows\r\npip install MAVProxy\r\n```\r\n\r\n### Step 1: Install Dependencies\r\n```bash\r\n# 1. Clone the repository\r\ngit clone https://github.com/ArnavBallinCode/Drone_Web_9009.git\r\ncd Drone_Web_9009\r\n\r\n# 2. Install Python dependencies\r\npip install pymavlink websockets asyncio pyserial\r\n\r\n# 3. Install Node.js dependencies\r\nnpm install\r\n# or if using pnpm\r\npnpm install\r\n```\r\n\r\n### Step 2: Connect Your Drone\r\n1. Connect your Pixhawk/drone via USB\r\n2. Identify the correct port:\r\n```bash\r\n# On macOS/Linux\r\nls /dev/tty.*\r\n# Look for something like /dev/tty.usbserial-D30JKVZM\r\n\r\n# On Windows\r\n# Check Device Manager under \"Ports (COM \u0026 LPT)\"\r\n# Look for something like COM3\r\n```\r\n\r\n### Step 3: Start the System\r\n\r\n#### 1. Start MAVProxy (REQUIRED FIRST)\r\n```bash\r\n# On macOS/Linux\r\nmavproxy.py --master=/dev/tty.usbserial-D30JKVZM --baud=57600 --out=udp:localhost:14550 --out=udp:localhost:14551\r\n\r\n# On Windows\r\nmavproxy.py --master=COM3 --baud=57600 --out=udp:localhost:14550 --out=udp:localhost:14551\r\n\r\n# You should see:\r\n# \"Connecting to SITL on TCP port 5760\"\r\n# \"Received heartbeat from APM\"\r\n```\r\n\r\n#### 2. Start the Telemetry Listener\r\nOpen a new terminal and run:\r\n```bash\r\n# On macOS/Linux\r\npython3 listen.py --connection /dev/tty.usbserial-D30JKVZM --baud 57600\r\n\r\n# On Windows\r\npython listen.py --connection COM3 --baud 57600\r\n\r\n# You should see:\r\n# \"Connected to drone\"\r\n# \"Writing telemetry data...\"\r\n```\r\n\r\n#### 3. Start the Calibration Server\r\nOpen another new terminal and run:\r\n```bash\r\n# On macOS/Linux\r\npython3 caliberating/calibration_server.py\r\n\r\n# On Windows\r\npython caliberating/calibration_server.py\r\n\r\n# You should see:\r\n# \"Starting WebSocket server...\"\r\n# \"Calibration WebSocket server started on ws://localhost:8765\"\r\n```\r\n\r\n#### 4. Start the Web Interface\r\nOpen another new terminal and run:\r\n```bash\r\n# Using npm\r\nnpm run dev\r\n\r\n# Using pnpm\r\npnpm dev\r\n\r\n# You should see:\r\n# \"ready - started server on 0.0.0.0:3000\"\r\n```\r\n\r\n### Step 4: Access the Interface\r\n1. Open your browser and go to:\r\n   - Main interface: http://localhost:3000\r\n   - Calibration page: http://localhost:3000/calibration\r\n\r\n### Calibration Instructions\r\n\r\n1. **Gyroscope Calibration**\r\n   - Keep the drone completely still on a level surface\r\n   - Click \"Start Gyro Calibration\"\r\n   - Wait for completion (about 30 seconds)\r\n\r\n2. **Accelerometer Calibration**\r\n   - Click \"Start Accelerometer Calibration\"\r\n   - Follow the orientation instructions:\r\n     1. Place vehicle level\r\n     2. On right side\r\n     3. On left side\r\n     4. Nose down\r\n     5. Nose up\r\n     6. On its back\r\n   - Hold each position until you see \"Position detected\"\r\n   - Wait for \"Position calibrated successfully\" before moving to next position\r\n\r\n3. **Magnetometer Calibration**\r\n   - Click \"Start Magnetometer Calibration\"\r\n   - Rotate the drone around all axes\r\n   - Continue rotation for at least 30 seconds\r\n   - Keep away from metal objects\r\n   - Wait for completion message\r\n\r\n4. **Barometer Calibration**\r\n   - Keep the drone still\r\n   - Click \"Start Barometer Calibration\"\r\n   - Wait for completion (about 30 seconds)\r\n\r\n### Troubleshooting\r\n\r\n1. **No Serial Port Connection**\r\n   ```bash\r\n   # List all serial ports\r\n   python3 -m serial.tools.list_ports\r\n   ```\r\n\r\n2. **MAVProxy Connection Issues**\r\n   - Ensure no other program is using the serial port\r\n   - Try different baud rates: 57600, 115200, 921600\r\n   - Check USB connection\r\n\r\n3. **Calibration Server Issues**\r\n   - Ensure MAVProxy is running first\r\n   - Check if port 8765 is free:\r\n     ```bash\r\n     # On macOS/Linux\r\n     lsof -i :8765\r\n     # On Windows\r\n     netstat -ano | findstr :8765\r\n     ```\r\n\r\n4. **Web Interface Issues**\r\n   - Clear browser cache\r\n   - Check console for errors (F12)\r\n   - Ensure all servers are running\r\n\r\n### Port Reference\r\n- MAVProxy UDP outputs: 14550, 14551\r\n- Calibration WebSocket: 8765\r\n- Web Interface: 3000 (or 3001)\r\n\r\n### Command Summary\r\n```bash\r\n# All commands needed (in order):\r\nmavproxy.py --master=/dev/tty.usbserial-D30JKVZM --baud=57600 --out=udp:localhost:14550 --out=udp:localhost:14551\r\npython3 listen.py --connection /dev/tty.usbserial-D30JKVZM --baud 57600\r\npython3 caliberating/calibration_server.py\r\npnpm dev  # or npm run dev\r\n```\r\n\r\n### System Requirements\r\n- Python 3.8+\r\n- Node.js 16+\r\n- Modern web browser (Chrome, Firefox, Safari)\r\n- USB port for drone connection\r\n- 2GB RAM minimum\r\n- 1GB free disk space\r\n\r\n### File Structure\r\n```\r\nDrone_Web_9009/\r\n├── caliberating/\r\n│   └── calibration_server.py  # WebSocket calibration server\r\n├── public/\r\n│   └── params/               # Telemetry JSON files\r\n├── app/\r\n│   └── calibration/         # Calibration UI components\r\n├── lib/\r\n│   └── mavlink/            # MAVLink utilities\r\n├── listen.py               # Telemetry listener\r\n└── package.json           # Node.js dependencies\r\n```\r\n\r\n### PX4 vs ArduPilot Configuration\r\n\r\n#### PX4-Specific Setup\r\n1. **Connection Settings**\r\n   ```bash\r\n   # For PX4, use these MAVProxy settings:\r\n   mavproxy.py --master=/dev/tty.usbserial-D30JKVZM --baud=921600 --out=udp:localhost:14550 --out=udp:localhost:14551\r\n   ```\r\n   Note: PX4 typically uses 921600 baud rate by default\r\n\r\n2. **Calibration Commands**\r\n   - PX4 uses slightly different calibration parameters:\r\n     ```python\r\n     # Gyroscope\r\n     params = [1, 0, 0, 0, 0, 0, 0]  # Same as ArduPilot\r\n\r\n     # Accelerometer\r\n     params = [0, 0, 0, 0, 4, 0, 0]  # Note: Uses 4 instead of 1 for simple calibration\r\n\r\n     # Magnetometer\r\n     params = [0, 1, 0, 0, 0, 0, 0]  # Same as ArduPilot\r\n\r\n     # Level Horizon\r\n     params = [0, 0, 0, 0, 2, 0, 0]  # Note: Uses 2 for level calibration\r\n     ```\r\n\r\n3. **Status Messages**\r\n   - PX4 uses different status message formats:\r\n     - \"[cal] progress \u003cpercentage\u003e\"\r\n     - \"[cal] orientation detected\"\r\n     - \"[cal] calibration done: \u003csensor\u003e\"\r\n     - \"CAL FAILED\" for failures\r\n\r\n4. **Additional PX4 Parameters**\r\n   ```bash\r\n   # Set calibration auto-save (optional)\r\n   param set CAL_AUTO_SAVE 1\r\n\r\n   # Set QGC core as remote (recommended)\r\n   param set MAV_COMP_ID 190\r\n   param set MAV_SYS_ID 255\r\n   ```\r\n\r\n5. **Troubleshooting PX4**\r\n   - If calibration fails immediately:\r\n     ```bash\r\n     # Check if the drone is armed\r\n     # PX4 requires disarming for calibration\r\n     commander disarm\r\n     ```\r\n   - If no messages appear:\r\n     ```bash\r\n     # Enable verbose output\r\n     param set SYS_MC_EST_GROUP 2\r\n     param set SENS_BOARD_ROT 0\r\n     ```\r\n\r\n### System Compatibility\r\n\r\nFeature | ArduPilot | PX4\r\n--------|-----------|-----\r\nDefault Baud Rate | 57600 | 921600\r\nCalibration Messages | [cal] prefix | Various formats\r\nAuto-save Calibration | Always | Configurable\r\nLevel Calibration | Part of Accel | Separate command\r\nSimple Accel Cal | Value: 1 | Value: 4\r\nStatus Updates | Frequent | On state change\r\nUDP Forwarding | Optional | Recommended\r\n\r\n### Common PX4 Issues\r\n\r\n1. **No Calibration Response**\r\n   - Ensure drone is disarmed\r\n   - Check parameter `CAL_AUTO_SAVE`\r\n   - Verify `SYS_MC_EST_GROUP` setting\r\n\r\n2. **Connection Issues**\r\n   ```bash\r\n   # For PX4, try these settings:\r\n   mavproxy.py --master=/dev/tty.usbserial-D30JKVZM --baud=921600 --source-system=255 --source-component=190 --out=udp:localhost:14550 --out=udp:localhost:14551\r\n   ```\r\n\r\n3. **Calibration Timeouts**\r\n   - PX4 may need longer timeouts:\r\n     ```python\r\n     CALIBRATION_TIMEOUT = 180  # Increase from 120 to 180 seconds\r\n     ```\r\n\r\n## 🔄 **Project Evolution: From Basic Web UI to 9009**  \r\n\r\n### 🌟 **Previous Versions**  \r\n- **Drone_Web_Interface_909:** Modern TypeScript/React/3D telemetry dashboard ([View Here](https://github.com/ArnavBallinCode/Drone_Web_Interface_909))\r\n- **IROC_WEB_INTERFACE:** Original UI (HTML, CSS, JS) ([View Here](https://github.com/ArnavBallinCode/IROC_WEB_INTERFACE))\r\n- **ISRO_IROC_Web:** Backend scripts (Python + MAVLink) ([View Here](https://github.com/ArnavBallinCode/ISRO_IROC_Web))\r\n- **ISRO_IROC_Webinterface:** Older telemetry interface (Python-based) ([View Here](https://github.com/ArnavBallinCode/ISRO_IROC_Webinterface))","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavballincode%2Fdrone_sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnavballincode%2Fdrone_sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavballincode%2Fdrone_sync/lists"}