Brave new world – first manual flight!

As promised in my previous post (Hard Reset“), these articles will be coming in much more regularly now that I have a place to properly fly and test the drone in. Progress has already started to build 🙂

Over the last 24 hours the project has gone from sending the drone off on a pre-programmed flight, to enabling manual control through a laptop. Thanks to some helpful signposting of a fellow student at Brunel (Ben Evans – thanks for the advice!), I was able to implement Webflight (all credit to Laurent Eschenauer (eschnou) for building and providing this application). Below is a screenshot of me and two of my coursemates getting this working today, taken from the front camera of my drone.


This program uses NodeJS to connect with the drone, display a live video stream straight to a web browser (“localhost:3000”) while also enabling the user to manually navigate the drone around using the keyboard. If you’d like to use Webflight yourself, below are some tips that helped me get up and running with it that should hopefully help you get set up and flying in no time at all:

  1. Make sure you’ve done the tutorial over on the Instructables site as described in my earlier post, takeOff();This guide provides a great foundation to help you understand NodeJS and the npm library usages in a practical manner and will greatly help you in getting to grips with further drone/NodeJS/npm related work.
    • Completing the Instructables tutorial will ensure that you have a separate “Drone” folder, as well as NodeJS and Ffmpeg installed so is a good head start!
  2. Visit the Webflight Github page and spend some time reading the file, the author has spent considerable time and thought to provide a comprehensive guide to the application.This guide is immensely useful if you follow it word-for-word
    • If (like me) you are too keen to get the drone airborne and think you know best, you might end up spending quite a bit of time rectifying your mistakes later on!
  3. To be 100% clear, install git, NodeJS and ffmpeg before starting to work on the Webflight installation.
    • Also, make sure that your PATH (environment variable) includes a reference to “c:\…\Ffmpeg\bin\”, “c:\…\nodejs\”, “c:\…npm\ and “c:\…\Git\bin” once all of these have been installed on your machine through the hyperlinks in “3.”.
  4. Using Git Bash, clone the Webflight project into your Drone folder (see Instructables tutorial) on your laptop as shown in the first step of the Install instructions on the Github page.
  5. Open up windows command prompt to complete the second and third lines of the Install guide on the Github page, ensuring you have used “cd ” to navigate into the Webflight folder
  6. The fourth/final line about installing Bower caused me some issues as it couldn’t find Git on the laptop I was using so here’s what happened:
    • Firstly, make sure you run “npm install –global bower” instead and make sure you’re running the command in the Webflight folder that you cloned (see step two in the Install guide)
    • Checked environment variables, Git was in there
    • Ran “npm install –global bower”  through Command Prompt as administrator, no change on the output
    • Ran the same command in Git Bash (while inside the Webflight folder) and success! I have no idea why this worked, it just did!
  7. The initial control layout is not in QWERTY format, to change this edit the config.js file and save it

If you follow the guide on the Github page and use the above for reference, you should be fine. The Bower install issue was by far the biggest pain as this resulted in only seeing a blank webpage with the Webflight banner at the top when the app was running. Once all the above it set up, it’s as simple as connecting to the drone’s WiFi, executing the program in Command Prompt (cd to Webflight folder and type “node app.js”) and entering “localhost:3000” in a new web browser window or tab.

The above has been more of a how-to style post as this caused me a little trouble while setting it up so below I’ll talk about why I chose this existing application as part of my project.

When determining the best means of approaching drone programming there were several options out there in various different languages (see “Hard Reset”). Considering all of the available options, it became obvious to me that NodeJS is the most established and well documented means of creating drone applications for beginners. As I am a beginner and this project isn’t about me reinventing the wheel in terms of drone control, this offered the best platform for me to get on with programming a meaningful solution towards the objectives of my dissertation.

Webflight in itself was recommended to me as the best starting point to understand drone programming and to work with, this also gives a great insight into client-server interactions and JavaScript. For the sake of my work towards this, I’m aiming to work on a plugin for the existing application that will enable the drone to perform the specific navigational and surveying tasks that I require of it. In doing this, I’m looking to attempt the following:

  • Semi-autonomous navigation – upon request of user (JS)
  • Autonomous detection of objects (JS)
  • Image capture (JS)
  • Image comparison (Java)

Bundling all of this together in a Java project will enable a single point of usage, alleviating text-based input requirements of the user and allowing an image comparison function to be implemented in the same project (comparing a past and present version of a structure for differences). All in good time though…

So there you go, I’ll keep posting as this project progresses and hopefully provide some content to help other beginners get into drone programming 🙂

Thanks for reading,





Published by


I joined WordPress during my final year studies in Computer Science at Brunel University, back in 2015. When I realised it took me 100 Google searches to just about figure out something technical, I figured that it'd probably be best that I write it down! The hope is that by doing this someone else can benefit from instead of potentially doing another 100 searches! Nowadays my general motto is, if it took me more than 2 hours to figure out, I'll see if I can write something that can be understood in 30 minutes or less (by anyone with an interest in programming) to solve the same issue. Please feel free to comment or message me if you have any questions, queries or general feedback to help me provide the clearest and most accessible information possible. Thanks, Mark

One thought on “Brave new world – first manual flight!”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s