mavsdk_drone_show

Flight Mode Implementation Fix - Technical Documentation

Overview

This document describes the comprehensive fix implemented for the flight mode handling system across all three components of the MAVSDK Drone Show project: drone-side, backend server, and frontend dashboard.

Problem Statement

The original implementation had several critical issues:

1. Incorrect MAVLink Field Usage: Using base_mode instead of custom_mode for flight modes
2. Redundant Constants: Multiple conflicting flight mode constant files
3. Wrong Arming Logic: Deriving arming status from flight mode instead of proper pre-arm checks
4. Missing QGroundControl Standards: Not following industry standards for flight mode display

Solution Architecture

1. Drone-Side Changes (src/)

src/drone_config.py

• Added proper MAVLink fields:
  • base_mode: MAVLink base mode flags (armed/disarmed, etc.)
  • custom_mode: PX4-specific flight mode values
  • is_armed: Derived armed status
  • is_ready_to_arm: Pre-arm checks result

src/local_mavlink_controller.py

• Fixed HEARTBEAT message processing:
  • Correctly parse msg.base_mode and msg.custom_mode
  • Extract arming status from MAV_MODE_FLAG_SAFETY_ARMED
  • Implement comprehensive pre-arm checks following PX4 standards

src/drone_communicator.py

• Updated telemetry data structure:
  • Send flight_mode (custom_mode) instead of flight_mode_raw
  • Added base_mode, is_armed, is_ready_to_arm fields

2. Backend Server Changes (gcs-server/)

gcs-server/telemetry.py

• Enhanced telemetry data handling:
  • Process new flight mode and arming status fields
  • Maintain backward compatibility
  • Proper field mapping for frontend consumption

3. Frontend Changes (app/dashboard/drone-dashboard/src/)

New Constants (constants/px4FlightModes.js)

• Complete PX4 flight mode mapping following official documentation
• Proper custom_mode to name conversion
• Utility functions for mode validation and status checking
• MAV_STATE enumeration for system status

Updated Components

• DroneDetail.js: Professional arming status display
• DroneWidget.js: QGroundControl-style status indicators
• flightModeUtils.js: Standardized utility functions

Enhanced Styles

• DroneWidget.css: Visual indicators (green/red borders, status badges)
• DroneDetail.css: Professional status badge styling

Visual Design Standards

Color Scheme (Following QGroundControl)

• Ready to Arm: Green border (#28a745)
• Not Ready: Red border (#dc3545)
• Armed: Blue top border (#007bff)
• Disarmed: Gray top border (#6c757d)

Status Indicators

• Status badges with appropriate colors
• Hover effects for better UX
• Responsive design for mobile compatibility

PX4 Flight Modes Supported

Custom Mode	Flight Mode	Description
65536	Manual	Direct pilot control
131072	Altitude	Altitude hold mode
196608	Position	GPS position hold
327680	Acro	Acrobatic mode
393216	Offboard	External control
458752	Stabilized	Attitude stabilization
262147	Hold	Loiter/Hold position
262149	Return	Return to Launch
262150	Land	Auto landing

Pre-Arm Check Implementation

The system now implements proper pre-arm checks based on PX4 standards:

1. System Status: Must be STANDBY (3) or ACTIVE (4)
2. Sensor Health: Gyro, Accelerometer, Magnetometer calibrated
3. GPS Accuracy: HDOP < 2.0 for GPS-dependent modes
4. No Critical Failures: System must be in healthy state

API Changes

Telemetry Data Structure (Backend → Frontend)

{
  // Old (deprecated)
  "flight_mode_raw": 458752,
  
  // New (proper implementation)
  "flight_mode": 458752,        // PX4 custom_mode
  "base_mode": 81,              // MAVLink base_mode flags
  "system_status": 3,           // MAV_STATE value
  "is_armed": false,            // Actual armed status
  "is_ready_to_arm": true       // Pre-arm checks result
}

Usage Examples

Frontend Component Usage

import { getFlightModeTitle, getSystemStatusTitle, isSafeMode } from '../utilities/flightModeUtils';

// Get human-readable flight mode name
const modeName = getFlightModeTitle(drone.Flight_Mode);

// Check if drone is ready to arm (from pre-arm checks)
const canArm = drone.Is_Ready_To_Arm;

// Check if drone is currently armed
const isArmed = drone.Is_Armed;

CSS Classes for Visual Indicators

.drone-widget.ready-to-arm {
  border-color: #28a745;  /* Green border */
}

.drone-widget.not-ready-to-arm {
  border-color: #dc3545;  /* Red border */
}

.status-indicator.ready {
  background-color: #28a745;  /* Green badge */
}

Testing Guidelines

1. Verify Flight Mode Display: Check that flight modes show proper names (Manual, Position, etc.)
2. Test Arming Status: Confirm armed/disarmed status is independent of flight mode
3. Validate Pre-Arm Checks: Ensure ready-to-arm reflects actual drone readiness
4. Check Visual Indicators: Verify green/red borders and status badges work correctly
5. Test Edge Cases: Handle unknown flight modes and communication failures gracefully

Migration Notes

Deprecated Files

The following files are now deprecated and should be replaced:

• constants/flightModes.js → constants/px4FlightModes.js
• constants/mavModeEnum.js → constants/px4FlightModes.js

Breaking Changes

• Flight_Mode now contains PX4 custom_mode values (not base_mode)
• Arming status is now separate from flight mode
• Pre-arm checks are properly implemented

Compliance Standards

This implementation follows:

• MAVLink Protocol Specification
• PX4 Flight Stack Documentation
• QGroundControl UI/UX Standards
• MAVSDK Best Practices

Future Improvements

1. Real-time Pre-arm Status: Enhanced sensor status monitoring
2. Flight Mode Validation: Check mode compatibility with mission requirements
3. Advanced Visual Indicators: Progress bars for pre-arm check status
4. Accessibility: Screen reader support for status indicators

---

Author: Claude Code Assistant
Date: 2025-09-04
Version: 1.0
Compliance: MAVLink/PX4/QGroundControl Standards

This site is open source. Improve this page.