wiseman / mavelous

multi-platform ground station for drones that speak the MAVLink protocol

Mavelous

Mavelous is an open source browser-based ground control station (GCS) for drones/UAVs/micro air vehicles.

Try the online demo.

Mavelous can be used with any vehicle that speaks the MAVLink 1.0 protocol. It has been tested with Arducopter and ArduPlane.

Here's a screenshot of Mavelous running in a desktop web browser:

Mavelous running on an iPhone:

Here's a video of Mavelous being used in the field with an iPad to fly an ArduCopter:

http://www.youtube.com/watch?v=QNql3n4C8iA

Features

• Situational awareness. Mavelous will show you a vehicle's current position on a map. It also has a primary flight display that displays attitude, speed and altitude.

• Tap-the-map navigation. You can double tap on the map, and the vehicle will switch to GUIDED mode and fly to that position.

• Flight mode. You can arm and disarm the vehicle, and you can put it into LOITER, RTL, or LAND mode.

Installation

Mavelous is written in Python, and it depends on mavlink, CherryPy and Flask.

First clone the mavelous and mavlink repositories:

$ cd src
$ git clone https://github.com/wiseman/mavlink  # Fork required to fix bugs
$ git clone [email protected]:wiseman/mavelous.git

Then install CherryPy, Flask and pyserial. The easiest way is with pip:

$ pip install cherrypy flask pyserial

How to run it

Online Demo

The online demo of Mavelous runs completely within the browser. The simulated drone is very low fidelity and simply follows a fixed path. It will not respond to navigation commands such as guided mode.

You can also run the demo on your own machine by cloning the repository and opening the html page in your browser via the filesystem. The index.html file can be found at:

mavelous/modules/lib/mavelous_web/index.html

With a real drone

1. Connect your ArduCopter or ArduPlane to your computer with an Xbee or 3DR Radio. Power on the vehicle.

2. Start mavproxy, specifying the serial port and data rate. On Linux, the serial port is probably named something like /dev/ttyUSB0 or /dev/ttyUSB1. For 3DR Radios, the data rate is usually 57600. For example:

   $ cd src/mavelous
   $ python mavproxy.py --module mavelous --master=/dev/ttyUSB0 --baud=57600
   

You can then point at browser at http://localhost:9999.

You'll be able to use the Mavelous interface to control Guided mode once in flight. Find out more about guided mode on ArduCopter.

Software in the loop simulation ArduCopter

1. Compile the ArduCopter firmware for Software in the loop similation (SITL). You'll need to use the ardupilot-mega project's Makefile build system: see details on the ardupilot-mega wiki.

   $ make sitl
   

2. Run the ArduCopter executable in desktop mode. For example:

   $ ~/ardupilot-mega/tmp/ArduCopter.build/ArduCopter.elf -H 20
   

   On some systems, this directory will be found at /tmp/ArduCopter.build/

3. Start the simulated multicopter. For example:

   $ python ~/ardupilot-mega/Tools/autotest/pysim/sim_multicopter.py \
     --frame=+ --rate=400 --home=34.092047,-118.267136,20,0 --wind=6,45,.3
   

4. Start mavproxy:

   $ python mavproxy.py --master=tcp:127.0.0.1:5760 --out=127.0.0.1:14550 \
     --aircraft=test.ArduCopter --sitl=127.0.0.1:5501 --out=127.0.0.1:19550 \
     --quadcopter --streamrate=5 --module mavelous
   

   A web browser will open showing you the Mavelous interface, or you can point a browser to http://localhost:9999.

5. Take off. Soon, arducopter may support automated take-off. Until then:

   GUIDED> switch 6   # Stabilize mode
   GUIDED> rc 3 1510  # Take-off throttle
   

Architecture

    *  Drone
    |
*---+---*
    |
    *

    ^
    |
    | Radio link
    |
    V

.............................................
.  Mavelous                                 .
.                                           .
.  +--------+          +-----------------+  .
.  |        |   HTTP   | Front end, runs |  .
.  | Server |<-------->| in browser      |  .
.  |        |          |                 |  .
.  +--------+          +-----------------+  .
.............................................

Mavelous has two main parts:

1. Front end. This is the HTML application that runs in a browser. It uses many HTML5 features, so you'll need a reasonably modern browser.

2. Server. The server manages communication between the front end and the drone. It has a web server that talks to the front end, and it sends and receives drone commands using a wireless modem (like an XBee radio or a 3D Robotics radio).

The front end and the server can run on the same computer, or on two different computers.

The server is written in Python, and probably requires a laptop or netbook. The front end is written in HTML/CSS/Javascript, and can run on anything with a web browser, including phones and tablets.

Why

Portability. Controlling a drone with an iPad is kind of awesome, and there are currently no open-source ground control stations that can run on an iPhone or iPad--Mavelous can (at least the front end can).

The most popular ArduCopter GCS, APM Mission Planner, is primarily a Windows application. It can run under OS X and Linux with Mono, but the experience is not always smooth.

The goal of Mavelous is to have a highly portable GCS that can talk to anything that speaks the MAVLink protocol (and hopefully ROS devices, too, some day).

Feature status

Currently Mavelous is capable of monitoring and guiding a drone in flight.

• You can see basic flight data (speed, altitude, attitude) on the primary flight display.
• You can double click/tap on the map to send the drone to that location.
• Multiple users can control the same drone.
• Arm/Disarm, loiter, and land an ArduCopter (or other drones that obey Mavlink Navigation Commands).

We're working to add the following features soon:

• Control auto takeoff
• Mission creation and editing
• Offline support (map caching)

I'd like to add these features:

• Multi-vehicle control

Mailing list

There is a public mailing list for Mavelous users and developers.

Development

To generate HTML files from templates, generate javascript dependencies (mavelous-deps.js) and minify/compile javascript:

$ make

To lint the code:

$ make lint

To fix some lint issues automatically:

$ make lintfix

To regenerate mavelous-deps.js:

$ make deps

Acknowledgments

The Mavelous backend is based on Mavproxy,a command line ground station by Andrew Tridgell.

Mavelous uses open source code from the following projects: Leaflet.js, Backbone.js, Bootstrap, jQuery, Underscore.js, Kinetic.js, Google Closure tools and others.

License

Mavelous is covered by the MIT license, see the accompanying file LICENSE.md for details.

This repository contains additional code that may be covered by other licenses, including MAVProxy, which uses the GPL license.

mavelous's Issues

Look into speeding up the closure compiler

It's claimed these settings can make a big difference to compiler runtime: angular/angular.js@3bd95db

Cache maps for offline

Feature Request

Cache maps for offline use.

MavlinkAPI should handle POSTs

I think all the POSTing we do to the server for waypoints, arm/disarm, flight mode selection etc. should be handled by Mavelous.MavlinkAPI.

Better GPS Info optionally available

We should make verbose GPS info available in a panel (possibly to be above/below PDF):

• Satellites

• HDOP
• Coordinates in lat/long
• MRGS
• Time since fix (if lost)

Improve reliability of double tap on iOS

It seems like sometimes double taps get missed.

Display ADS-B locations in forthcoming mavlink message

Hi guys,

Happy new year and thanks again for creating mavelous.

I have a feature request...

How difficult would it be to add a feature to allow nearby 'targe't aircraft position and heading data to be input to mavelous? It would be great to have the ability to display target aircraft on the aerial map along with the flight vehicle. I'm not sure if the mavlink protocol has an api call to send this data??

Also, it would be useful to have vehicle altitudes displayed on the map next to each vehicle icon. And perhaps color icons could be used to indicate those aircraft above (blue), below (green), or near (red) the altitude of the flight vehicle.

BTW, these features are being requested because they would nicely fill a GCS need for an upcoming nasa uav challenge that includes collision avoidance.

Thanks and best regards,
Phil

Support HUD-only display & map-only display

It would be nice to be able to run a HUD/PFD in one browser while using a map/mission editor in another.

Map pans independently of drone movement

It would be helpful if the map panning and drone movement were separated - it isn't always best to have the drone right in the middle of the screen, as the pfd & screen size can occlude useful areas of the map while giving too much space to useless area.

UI header not working on iPad portrait mode

It works fine in landscape mode.

See http://imgur.com/a/vY1D4

Actually I just checked and you can see the same thing in a desktop browser window that's been made narrow.

Battery indicator seems broken on Arducopter 2.8.1

I'm not sure which parameter the battery status indication is being read from, but for me it always says "-102%" in mavelous.

In QGroundControl and MissionPlanner, I see the correct voltage reading being displayed.

I'm running Arducopter 2.8.1 on APM 2.5.

Drone icon rotates during zoom animation

When zooming, the drone icon seems to rotate to heading 0 degrees, then animate back to where it should be.

Selectable GPS info

It's a small thing, but I'd like the user to be able to select the lat & long coordinate text in the GPS popover for copy & paste, and right now you can't.

I think the issue is that the entire DOM structure in the popover changes several times per second, and every time it changes the text selection is cleared. I can think of two possible solutions:

1. Add a "copy" button that will automatically copy the GPS coordinates into the clipboard. This is kind of a hack since browsers already have mechanisms for selection and copying. It's also complicated by the fact that browsers don't seem to have good support for the HTML5 clipboard API yet so people end up using Flash or Silverlight (like Closure's goog.silverlight.ClipboardButton).
2. Change the GPS popover rendering code so that it leaves some DOM structure intact, and only changes the numeric coordinates in the DOM. If a text selection is anchored on the left and right by static DOM elements, it seems that the middle part of the selection can change without causing deselection. To see an example of this, try selecting different ranges of text in this jsfiddle: http://jsfiddle.net/johnwiseman/Lwqdf/

So let's try the latter?

Question about flight.log file

Hi guys,

I'm wondering how to read the mavelous flight.log file. After a flight today, I was wondering what the log would show as far as lost links, etc. But when I open the log file in a text editor is contained gibberish.

Thanks,
Phil

Missing Modules in distribution?

Traceback (most recent call last):
File "mavproxy.py", line 1602, in
import mavutil, mavwp
ImportError: No module named mavutil

broken in late releases of chrome

In Chrome 30.0.1556.2 dev:
Uncaught TypeError: Type error kinetic-v4.1.2.min.js:28

Prevents mavelous from working at all (gray screen)

Our kinetic is a few versions behind, 4.5.4 is out currently.

Improve offline model

We should add support for GUIDE mode waypoints, RTL and LAND to the offline vehicle model.

UDP connection to drones

I have an Parrot AR-Drone 2.0, with the flight recorder attachment. It is Mavlink compatible, but i'm not sure how to connect this via WiFi. I'm on Mac OS X.

Server problems with concurrent connections

I notice that the more clients I connect to the mavelous server, it can be very slow to load HTML/JS resources for new clients.

I suspect this is because the SimpleHTTPServer we're using doesn't deal with concurrent connections well (or at all?). I'm not too hot with python, but maybe you could look into this, John?

GLOBAL_POSITION_INT vs GPS_RAW_INT

Hi guys,

Question. It appears that mavelous is using mavlink message type GPS_RAW_INT rather than GLOBAL_POSITION_INT for data updates. If so, is there a particular reason for this choice?

The mavlink web site has this to saw about GPS_RAW_INT...

"The global position, as returned by the Global Positioning System (GPS). This is NOT the global position estimate of the sytem, but rather a RAW sensor value. See message GLOBAL_POSITION for the global position estimate..."

Thanks,
Phil

Add variometer to PFD

Probably should be implemented as a tape, right next to the altitude tape.

Use GLOBAL_POSITION_INT message type for data updates

Mavelous is using mavlink message type GPS_RAW_INT rather than GLOBAL_POSITION_INT for data updates.

The mavlink web site has this to saw about GPS_RAW_INT...

"The global position, as returned by the Global Positioning System (GPS).
This is NOT the global position estimate of the sytem, but rather a RAW
sensor value. See message GLOBAL_POSITION for the global position
estimate..."

Zoom in further than the tiles permit to view smaller areas

It would be nice to be able to zoom in further than the max resolution of the map tiles so you can focus on a smaller area. As it is now, on my iPad, at max zoom I can see about two blocks worth of area. A bit more zoom would allow finer placement of waypoints.

ADI roll is opposite of what it should be

Running mavelous and the Ardupilot Mission Planner in parallel today I noticed that the mavelous ADI shows the aircraft rolling in the opposite direction that the Mission Planner shows.

(Am I crazy, can anyone else confirm that it's wrong?)

Guide Altitude slider broken in offline mode

If I drag the slider, the number on the right will change from 20 to 23 or something close, but won't change afterwards, even though the slider is actually setting a new altitude.

Split screen between PFD & other control panels, and map

The map should only be a portion of the screen, rather than the whole screen. That way the center of the map won't be so close to the edge of the visible map.

This will make it easier to add more controls below the pfd.

Change screenshots

It's been pointed out that the screenshots we have show vehicle operation that may not be consistent with best safety practices. As the AMA safety code says, "All pilots shall avoid flying directly over unprotected people, vessels, vehicles or structures and shall avoid endangerment of life and property of others."

So I'd like to create screenshots showing drones over the most interesting terrain & landmarks that are consistent with best safety practices.

Lose the navbar in standard phone browser

I see that mavelous includes the "apple-mobile-web-app-capable" meta header to remove the browser chrome when running from the iPhone home page.

But in some circumstances it's better to run in the standard browser with a navbar during initial loading, to make it easier to see whether your server is actually contactable and sending data. Have we considered using the technique at http://davidwalsh.name/hide-address-bar to hide the navbar once the page has loaded?

I think this may also be helpful on Android too - but the Android devices I have available are all far too low-powered for me to be able to meaningfully test mavelous on them.

How to start mavelous

Hi Guys,
I just grabbed the latest version of mavelous but the browser isn't launching. I'm starting mavelous on a Mac with the following command.

python mavproxy.py --master=/dev/tty.usbserial-A4008qH4 --baud=57600 --module mavelous --aircraft=UDB

This command works fine with an older version of mavelous but not with the latest version. Is there a different command I should be using?

The console output looks like this when it works with the older version. Firefox then opens and displays the aircraft, map, etc.

bash-3.2$ cd ../../mavelous2/mavelous/
bash-3.2$ python mavproxy.py --master=/dev/cu.usbserial-A4008qH4 --baud=57600 --module mavelous --aircraft=UDB
UDB/logs/2013-01-17/flight2
Logging to UDB/logs/2013-01-17/flight2/flight.log
Loaded module mavelous
GPS lock at 41 meters
height 40
online system 251 component 1
Mode(0x000000d8)> Mode Mode(0x000000d8)
Mode(0x000000d8)> fetching parameters

Here's the console output I see with the latest version. The problem is that Firefox never opens and I see gibberish printed out on the console.

bash-3.2$ python mavproxy.py --master=/dev/tty.usbserial-A4008qH4 --baud=57600 --module mavelous --aircraft=UDB
UDB/logs/2013-01-17/flight3
Logging to UDB/logs/2013-01-17/flight3/flight.log
Loaded module mavelous
GPS lock at 37 meters
height 40
online system 251 component 1
Mode(0x000000d8)> Mode Mode(0x000000d8)
Mode(0x000000d8)> fetching parameters
Received 63 parameters
Saved 62 parameters to UDB/logs/2013-01-17/flight3/mav.parm
3@=<pO&C^&&K oK &^d=4uX]>;b3=UT<K

Thank you in advance for your help with this!

Phil

Follow-me mode

On devices that support it (i.e. most modern phones and tablets that have geolocation), it'd be cool to be able to use the HTML5 location APIs to enable automatic follow-me mode.

At it's simplest, this would mean simply automatically setting the guided-mode waypoint based on current device coordinates, but it's probably more useful to maintain some small distance between current location and target waypoint.

Perhaps that could simply be a timer-based queue of coordinate updates, linked to a configuration on the UAV that tells it to accept a fairly lax radius for the waypoint.

Navbar buttons not working consistently

The navbar buttons act a little funny--sometimes I have to click on one (in Chrome on a desktop) several times before the existing popover closes and the new one opens.

Target altitude is meaningless in ArduCopter

This isn't a bug on Mavelous as much as a reminder to work on fixes with the ArduCopter maintainers.

Map not clickable when using Kindle Fire HD in any browser tested (Opera, SIlk)

Ordered a kindle fire hd to use with mavelous.. it seems to be plenty fast but when you try and double click on the map it does nothing (no blue marker).

I have tried this in opera and the default "silk" browser.

I went to bing maps to try a double click and it seems to zoom in with no issue.

Any help is appreciated.

Thanks!

Question about TCP or UDP protocol

Hi,
In addition to serial data input, does mavelous support telemetry input over TCP or UDP?
Thanks,
Phil

Enhancement request for ADS-B data

Hi guys,

Would it be possible to enhance mavelous to display multiple aircraft on the map? The need is to show the subject aircraft as well as the other aircraft in the surrounding airspace for situational awareness and collision avoidance.

Does it seem logical that a new mavlink message type -- comprised of a list of GPS_RAW_INT or GLOBAL_POSITION_INT messages -- would be required? Also, since the subject aircraft needs to be uniquely identified, it would likely need to be the first or last record in the list, correct?

I'm sure you are busy, but I'm wondering if you see this as doable and how to possibly move forward.

Thanks,
Phil

Should support parameter editing

It'd be great to be able to tweak parameters in the field via mavelous. This is especially useful for Arducopter's Ch6 tuning feature, so a simplified UI to support that might be a useful first step (after a generalised API to parameter settings within the server, of course).

Retina on OS X and iOS

Canvas rendering on Retina iOS screens is wonky. The PFD looks pixel-doubled while regular HTML text looks ok.

Aircraft heading not updating with MatrixPilot 3.3

The heading of the black aircraft silhouette in mavelous is not updating correctly on a MacBook Pro running OS X 10.8.2.

The nose of the plane is always pointed towards the top of the screen. This was checked on 3 browsers (Firefox, Chrome, and Safari) with the same result.

Checking the following URL show the yaw values correctly updating, going from 0 to +3.14 and then from -3.14 to 0 as the plane yaws around through a full circle. However, the view does not update the plane's heading.

http://127.0.0.1:9999/mavlink/ATTITUDE

Drone icon misbehaves on clicks or taps

The drone icon is a transparent png on a separate layer from the map. Clicking on it does not create a click at the map point below - this is a problem for creating guide points close to the current position of the drone.

On Mobile Safari, double tapping on the drone icon can lead to zooming the whole web viewport to the icon.

I will try the following css:

pointer-events: none;

Use local storage instead of cookies

pfdsettings.js currently stores the PFD settings in a cookie, but that means that the cookie contents get sent to the server on every ajax request, which is a lot of overhead. We should store all settings in HTML5 local storage instead, and we should use Backbone's storage sync mechanism.

Show more info as optional PFD overlays

More info which could be useful on the PFD:

• Mission Time
• Throttle level
• GPS #Satellites, HDOP

Change to default altitude

Hi!

I would like to change default altitude from 20m to 100m. I think only I need to make this change in modules/lib/mmap_app/index.html:

input id="guidealt-input" type="range" value="20" min="0" max="200"

to

input id="guidealt-input" type="range" value="100" min="0" max="200"

But I would like to be sure. Is that ok?

Thank you!

Don't display old STATUSTEXT

When you load mavelous in a browser it will display the last STATUSTEXT message, however old that message is. We should only display it if it's been sent in the past 30 seconds or something.

Vehicle-following map panning at high zoom levels is jumpy

Especially on a mobile device, when the vehicle is in motion and pan-lock is on, the map & icon motion is very jumpy. There are a few issues:

1. Even while the drone is moving with a constant velocity, the map pans in a "bursty" manner. Since we get discrete vehicle updates, this isn't a huge deal, but we could do better--we actually do know the drone velocity.
2. The drone icon jumps to the new location and then the map & icon pan to center on that location. Ideally the map would pan under the icon so that the icon would always stay in the center.
3. Sometimes the map seems to jump backwards to a previous position. I don't know if this happens because while the map is animating to location A we tell it to start panning to location B, or if /mavlink POST responses are coming back out of order.

Unable to run mavproxy in the background

I'm trying to run mavelous completely headless at boot time on a Raspberry Pi (Debian Linux).

I find that it runs fine when run within an ssh session in the foreground, but when run in the background, it bombs out pretty early on - just after presenting the "MAV>" prompt. I don't see any interesting logs being produced, sadly, even with --logging-level=DEBUG.

To repro, simply:
python mavproxy.py --module mavelous --master=/dev/ttyUSB1 --baud=57600 &

Screen is useless on iPhone

I posted a screenshot to the mailing list of mavelous running on Safari on iOS 6, the map is mostly not viewable, and some controls are out of reach. The settings popup works great though.

Does not work in IE10

I tried http://mavelousdemo.appspot.com/ on a Microsoft Surface running IE10 and noticed it didn't work. Here's what it looks like in IE10 from http://netrenderer.com:

In pan-locked mode, zoom should be centered on vehicle icon

If I zoom while the app is in map-follows-vehicle mode, the zooming happens with the touch/mouse location as the center, then when zooming is complete the map pans to center the vehicle icon. It should instead zoom with the vehicle icon as the center.

Add heading to PFD

Need a vertical tape for this