DroneEngage & Andruav WebClient

WebClient is a Ground Control Station (GCS) for DroneEngage and Andruav systems. It provides a browser-based interface for monitoring and controlling drones.

WebClient is part of the Ardupilot Cloud Eco System.

Features

• Real-time drone monitoring and control
• Map-based visualization with Leaflet
• Support for Ardupilot and PX4 flight controllers
• Multi-language support (i18n)
• Video streaming and recording
• Mobile GCS view (/mobile) with a phone-width responsive layout:
  • Status bar with unit selector, signal info, and a speech enable/disable toggle
  • FPV image viewer with Fit / Contain modes, rotation, and one-tap image save (rotation-aware PNG download)
  • Camera dialog with GCS image size toggle and timed capture controls

Documentation

Official Documentation: https://cloud.ardupilot.org/webclient-whatis.html

Video Tutorials: YouTube Channel

Prerequisites

• Node.js (v16 or higher recommended)
• npm

Installation

npm install

Running (Development)

Start the development server with HTTPS:

npm run start

The application will be available at https://localhost:3000.

Note: The development server uses HTTPS with SSL certificates. Ensure the SSL certificate files exist in the ./ssl/ directory or update the paths in package.json.

Building (Production)

Build the application for production deployment:

npm run build

The production-ready files will be generated in the build/ directory.

Other Commands

Command	Description
npm run test	Run tests
npm run lint	Run ESLint to check code quality
npm run eject	Eject from Create React App (irreversible)

Configuration

Detailed configuration documentation is maintained in wiki/:

• Site / startup config (public/config.json overrides src/js/js_siteConfig.js): wiki/Andruav_SiteConfig.md
• Runtime preferences (src/js/js_globals.js + src/js/js_localStorage.js): wiki/Andruav_Configuration.md
• Communication layer (src/js/server_comm/*): wiki/Andruav_ServerComm.md

Tech Stack

• React - UI framework
• Bootstrap 5 - CSS framework
• Leaflet - Interactive maps
• jQuery - DOM manipulation
• i18next - Internationalization

WIKI Link

./wiki/

Author

Mohammad Said Hefny
Email: mohammad.hefny@gmail.com
GitHub: HefnySco

Repository

https://github.com/DroneEngage/droneengage_webclient