{"id":27194733,"url":"https://github.com/arnavballincode/drone_web_interface_909","last_synced_at":"2026-04-12T10:46:18.671Z","repository":{"id":286163788,"uuid":"960511051","full_name":"ArnavBallinCode/Drone_Web_Interface_909","owner":"ArnavBallinCode","description":"Telemetry Dashboard for MAVLink Drones 🚁📊  A real-time web interface built with React to visualize MAVLink telemetry data. It fetches JSON logs generated by pymavlink and displays critical drone parameters like attitude, battery status, and sensor readings. Includes a Python backend for handling telemetry data streams","archived":false,"fork":false,"pushed_at":"2025-04-07T16:33:59.000Z","size":2243,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T17:39:02.154Z","etag":null,"topics":["css","flask","flask-api","flask-application","html","mavlink","pymavlink","python","react","typescript"],"latest_commit_sha":null,"homepage":"","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}},"created_at":"2025-04-04T15:01:24.000Z","updated_at":"2025-04-07T16:34:03.000Z","dependencies_parsed_at":"2025-04-07T17:49:39.159Z","dependency_job_id":null,"html_url":"https://github.com/ArnavBallinCode/Drone_Web_Interface_909","commit_stats":null,"previous_names":["arnavballincode/web_interface_909","arnavballincode/drone_web_interface_909"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Web_Interface_909","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Web_Interface_909/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Web_Interface_909/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArnavBallinCode%2FDrone_Web_Interface_909/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArnavBallinCode","download_url":"https://codeload.github.com/ArnavBallinCode/Drone_Web_Interface_909/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248095190,"owners_count":21046809,"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","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":["css","flask","flask-api","flask-application","html","mavlink","pymavlink","python","react","typescript"],"created_at":"2025-04-09T19:21:23.698Z","updated_at":"2025-12-30T23:05:08.765Z","avatar_url":"https://github.com/ArnavBallinCode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Drone_Web_Interface_909  \n**An advanced telemetry and monitoring system for real-time MAVLink data visualization.**  \n\n## 🔥 Overview  \nDrone_Web_Interface_909 is a cutting-edge web-based **UAV telemetry dashboard**, designed for real-time data visualization from drones using **MAVLink**. The system integrates with **Jetson and Pixhawk** and now features:  \n- **3D Data Visualization** 📊  \n- **Full TypeScript \u0026 React-based UI** 🎨  \n- **Real-time MAVLink telemetry processing** ⏳  \n- **Optimized for both mobile and desktop** 💻📱  \n\n---\n\n## 🔄 **Project Evolution: From Basic Web UI to TypeScript \u0026 3D**  \n\n### 🌟 **Previous Versions which were also built for ISRO IROC-U  (HTML, CSS, JavaScript)**  \nBefore transitioning to TypeScript and 3D visualization, the project was a **basic web interface** built using:  \n✅ HTML, CSS, JavaScript  \n✅ Simple data polling from JSON files  \n✅ 2D telemetry displays (tables, simple graphs)  \n\n📂 **Repository Link:** [IROC_WEB_INTERFACE](https://github.com/ArnavBallinCode/IROC_WEB_INTERFACE)  \n\n---\n\n### 🚀 **Current Version (Web_Interface_909 - TypeScript \u0026 3D)**  \nThe new version is a **modern, interactive telemetry system**, with:  \n✅ TypeScript + React for a modular UI  \n✅ **Three.js for 3D telemetry visualization**  \n✅ WebSockets for live data updates  \n✅ Improved file-based JSON data fetching  \n\n📂 **Repository Link:** [Web_Interface_909](https://github.com/ArnavBallinCode/Drone_Web_Interface_909)  \n\n---\n\n## ⚙️ **How It Works**  \n\n### 🎯 **System Architecture**  \n1️⃣ **Telemetry Data Flow**  \n   - A **Python script (`listen.py`)** reads MAVLink telemetry and writes `.json` files in `public/params/`.  \n   - The React-based frontend reads these JSON files and updates the UI dynamically.  \n\n2️⃣ **Frontend (React + TypeScript)**  \n   - Fetches and processes telemetry from `/public/params/`.  \n   - Uses **Three.js** for **3D drone movement \u0026 attitude representation**.  \n   - Displays real-time battery, altitude, and position data.  \n\n3️⃣ **Backend (Python + MAVLink)**  \n   - Uses `pymavlink` to listen to drone telemetry.  \n   - Converts MAVLink messages into structured `.json` files.  \n\n---\n\n## 🚀 **Installation \u0026 Setup**  \n\n### 📌 **1. Clone the Repository**  \ngit clone https://github.com/ArnavBallinCode/Drone_Web_Interface_909.git\ncd Drone_Web_Interface_909\n\n---\n\n## 🛠 **2. Setting Up the TypeScript Project**  \n\n### ✅ **For Windows (PowerShell/Command Prompt)**  \n1️⃣ Install **Node.js** (latest LTS) from [nodejs.org](https://nodejs.org/)  \n2️⃣ Install dependencies:  \n```sh\nnpm install\n```\n3️⃣ Start the React development server:  \n```sh\nnpm run dev\n```\n4️⃣ Open `http://localhost:5173/` in your browser.  \n\n---\n\n### ✅ **For macOS (Terminal)**  \n1️⃣ Install **Homebrew** (if not installed):  \n```sh\n/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n```\n\n2️⃣ Install Node.js \u0026 dependencies:  \n```sh\nbrew install node\nnpm install\n```\n3️⃣ Start the development server:  \n```sh\nnpm run dev\n```\n\n---\n\n### ✅ **For Linux (Debian/Ubuntu)**  \n1️⃣ Install **Node.js**:  \n```sh\nsudo apt update \u0026\u0026 sudo apt install -y nodejs npm\n```\n2️⃣ Install dependencies:  \n```sh\nnpm install\n```\n3️⃣ Start the development server:  \n```sh\nnpm run dev\n```\n\n---\n\n## 🛰 **3. Running MAVLink Telemetry Data Collection**  \n1️⃣ Connect Pixhawk/Jetson via USB (`/dev/tty.usbserial-0001`)  \n2️⃣ Run the Python script:  \n```sh\npython3 listen.py\n```\n3️⃣ Data will be written to `public/params/`.  \n\n---\n\n## 📡 **4. Viewing the Telemetry Dashboard**  \nOnce the frontend server is running:  \n- Open **`http://localhost:5173/`** in your browser.  \n- You will see **real-time drone telemetry, battery status, GPS, IMU data, and a 3D model** representing the drone’s movement.  \n\n\n\n---\n\n## 📌 **Previous Versions \u0026 Related Repositories which were also used in ISRO_IROC_U challenge **  \n\n| Repository | Description | Link |\n|------------|-------------|------|\n| `IROC_WEB_INTERFACE` | Original UI (HTML, CSS, JS) | [View Here](https://github.com/ArnavBallinCode/IROC_WEB_INTERFACE) |\n| `ISRO_IROC_Web` | Backend scripts (Python + MAVLink) | [View Here](https://github.com/ArnavBallinCode/ISRO_IROC_Web) |\n| `ISRO_IROC_Webinterface` | Older telemetry interface (Python-based) | [View Here](https://github.com/ArnavBallinCode/ISRO_IROC_Webinterface) |\n\n---\n\n## 🎯 **Upcoming Features**  \n✅ WebSocket-based real-time updates (instead of polling JSON files)  \n✅ AI-powered anomaly detection for UAV telemetry  \n✅ Enhanced **3D mapping using LiDAR \u0026 SLAM data**  \n\n---\n\n## 👨‍💻 **Contributing**  \n1️⃣ Fork the repository  \n2️⃣ Create a new branch (`feature-xyz`)  \n3️⃣ Commit your changes (`git commit -m \"Added XYZ feature\"`)  \n4️⃣ Push and submit a PR 🚀  \n\n---\n## License\nThis project is **not open-source**. All rights are reserved by the author. No part of this repository may be used or reproduced without explicit permission from **Arnav Angarkar**.\n\n\n---\n\n## 📞 **Contact \u0026 Support**  \nIf you need help, open an issue in the repo or reach out via:  \n📧 **Email:** 24bcs015@iiitdwd.ac.in  \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavballincode%2Fdrone_web_interface_909","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnavballincode%2Fdrone_web_interface_909","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnavballincode%2Fdrone_web_interface_909/lists"}