An advanced telemetry and monitoring system for real-time MAVLink data visualization.
Drone_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:
- 3D Data Visualization 📊
- Full TypeScript & React-based UI 🎨
- Real-time MAVLink telemetry processing ⏳
- Optimized for both mobile and desktop 💻📱
Before transitioning to TypeScript and 3D visualization, the project was a basic web interface built using:
✅ HTML, CSS, JavaScript
✅ Simple data polling from JSON files
✅ 2D telemetry displays (tables, simple graphs)
📂 Repository Link: IROC_WEB_INTERFACE
The new version is a modern, interactive telemetry system, with:
✅ TypeScript + React for a modular UI
✅ Three.js for 3D telemetry visualization
✅ WebSockets for live data updates
✅ Improved file-based JSON data fetching
📂 Repository Link: Web_Interface_909
1️⃣ Telemetry Data Flow
- A Python script (
listen.py) reads MAVLink telemetry and writes.jsonfiles inpublic/params/. - The React-based frontend reads these JSON files and updates the UI dynamically.
2️⃣ Frontend (React + TypeScript)
- Fetches and processes telemetry from
/public/params/. - Uses Three.js for 3D drone movement & attitude representation.
- Displays real-time battery, altitude, and position data.
3️⃣ Backend (Python + MAVLink)
- Uses
pymavlinkto listen to drone telemetry. - Converts MAVLink messages into structured
.jsonfiles.
git clone https://github.com/ArnavBallinCode/Drone_Web_Interface_909.git cd Drone_Web_Interface_909
1️⃣ Install Node.js (latest LTS) from nodejs.org
2️⃣ Install dependencies:
npm install3️⃣ Start the React development server:
npm run dev4️⃣ Open http://localhost:5173/ in your browser.
1️⃣ Install Homebrew (if not installed):
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2️⃣ Install Node.js & dependencies:
brew install node
npm install3️⃣ Start the development server:
npm run dev1️⃣ Install Node.js:
sudo apt update && sudo apt install -y nodejs npm2️⃣ Install dependencies:
npm install3️⃣ Start the development server:
npm run dev1️⃣ Connect Pixhawk/Jetson via USB (/dev/tty.usbserial-0001)
2️⃣ Run the Python script:
python3 listen.py3️⃣ Data will be written to public/params/.
Once the frontend server is running:
- Open
http://localhost:5173/in your browser. - You will see real-time drone telemetry, battery status, GPS, IMU data, and a 3D model representing the drone’s movement.
| Repository | Description | Link |
|---|---|---|
IROC_WEB_INTERFACE |
Original UI (HTML, CSS, JS) | View Here |
ISRO_IROC_Web |
Backend scripts (Python + MAVLink) | View Here |
ISRO_IROC_Webinterface |
Older telemetry interface (Python-based) | View Here |
✅ WebSocket-based real-time updates (instead of polling JSON files)
✅ AI-powered anomaly detection for UAV telemetry
✅ Enhanced 3D mapping using LiDAR & SLAM data
1️⃣ Fork the repository
2️⃣ Create a new branch (feature-xyz)
3️⃣ Commit your changes (git commit -m "Added XYZ feature")
4️⃣ Push and submit a PR 🚀
This 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.
If you need help, open an issue in the repo or reach out via:
📧 Email: 24bcs015@iiitdwd.ac.in