Drone Log Book Dashboard

A comprehensive Vue.js dashboard for analyzing drone flight logs using the Dronelogbook API, inspired by the UAV Log Viewer.

Features

• Flight List Management: View, filter, and search through flight logs
• Interactive 3D Visualization: Cesium-powered 3D flight path visualization
• Parameter Plotting: Plotly.js based plotting similar to UAV Log Viewer
• Flight Comparison: Compare multiple flights side by side
• Real-time Analysis: Analyze flight parameters, events, and modes
• Dronelogbook API Integration: Seamless integration with Dronelogbook API

Technology Stack

• Frontend: Vue 3 with Composition API
• Visualization: Plotly.js for 2D plots, Cesium for 3D maps
• UI Framework: Bootstrap 5 with Bootstrap Vue Next
• State Management: Pinia
• Build Tool: Vite
• API Client: Axios

Project Structure

src/
├── components/          # Reusable Vue components
│   ├── FlightList.vue
│   ├── FlightPlots.vue
│   ├── FlightMap.vue
│   └── ...
├── views/              # Page components
│   ├── Dashboard.vue
│   ├── FlightAnalysis.vue
│   └── FlightComparison.vue
├── layouts/            # Layout components
│   └── DashboardLayout.vue
├── stores/             # Pinia stores
│   └── flight.js
├── services/           # API services
│   └── dronelogbook-api.js
└── assets/             # Static assets
    └── styles/

Setup Instructions

Prerequisites

• Node.js 16+
• npm or yarn
• Dronelogbook API access

Installation

1. Clone the repository:

   git clone <repository-url>
   cd drone-log-book-dashboard

2. Install dependencies:

   npm install

3. Environment Configuration: Create a .env file in the root directory:

   VITE_DRONELOGBOOK_API_URL=https://api.dronelogbook.com
   VITE_CESIUM_ION_TOKEN=your_cesium_ion_token_here
   

4. Development Server:

   npm run dev

5. Build for Production:

   npm run build

Features Overview

Dashboard

• Flight statistics overview
• Recent flights list with filtering
• Quick actions for flight management
• Aircraft status monitoring

Flight Analysis

• 3D flight path visualization
• Interactive parameter plotting
• Flight events timeline
• Flight mode analysis
• Real-time telemetry data

Flight Comparison

• Side-by-side flight comparison
• Parameter overlay charts
• Statistics comparison table
• Synchronized time navigation

API Integration

The dashboard integrates with the Dronelogbook API for:

• Authentication and user management
• Flight data retrieval
• Telemetry data access
• Parameter and event logging
• File downloads and exports

Authentication

import dronelogbookAPI from '@/services/dronelogbook-api'

// Login
await dronelogbookAPI.login(email, password)

// Fetch flights
const flights = await dronelogbookAPI.getFlights()

// Get flight telemetry
const telemetry = await dronelogbookAPI.getFlightTelemetry(flightId)

Development

Adding New Components

1. Create component in src/components/
2. Export from src/components/index.js
3. Import and use in views

Adding New Views

1. Create view in src/views/
2. Add route in src/router/index.js
3. Update navigation in DashboardLayout.vue

Customizing Plots

Modify src/components/FlightPlots.vue to add new parameter types:

const parameterConfig = {
  your_param: { 
    label: 'Your Parameter', 
    unit: 'unit', 
    color: '#color', 
    yaxis: 'y1' 
  }
}

Deployment

Docker

# Build image
docker build -t drone-dashboard .

# Run container
docker run -p 8080:8080 drone-dashboard

Static Hosting

npm run build
# Deploy dist/ folder to your hosting provider

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Acknowledgments

• Inspired by UAV Log Viewer
• Built for Dronelogbook integration
• Uses Cesium for 3D visualization
• Plotting powered by Plotly.js

Support

For support and questions:

• Create an issue in the GitHub repository
• Check the Dronelogbook API documentation
• Review the UAV Log Viewer for inspiration