FlytBase Blog
develop custom drone web apps

Custom-made User Interfaces to Interact with your Drone

As drones continue to move from basic flight to commercial applications, the ability for onboard and offboard customizations becomes more and more important. A given application would likely introduce new payloads and require custom onboard business logic. This also leads to customizations in remote applications allowing for custom data plumbing between ground app and drone as well as targeted user interfaces for bettering the overall user experience. FlytOS provides a scheme for web/mobile applications that not only allows such customizations but also simplifies them by using standard tools.

FlytOS provides an onboard web server and exposes RESTful and websocket APIs. With this, there are following approaches for building web and mobile apps:

  • WEB:
    • Onboard Web App: FlytOS framework provides blueprint to write onboard web apps with server side code in python. Such an app is directly served from the drone and can be accessed on any ground device in a browser.
    • Offboard Web App: This requires an offboard web server which hosts and serves the web app and can be coded in the language of choice. This app internally makes REST and websocket calls to talk to the drone.
  • MOBILE:
    • Cordova/Phonegap: Frameworks like Cordova or Phonegap provide a way to build cross platform mobile apps using web technologies (HTML/CSS/JS). The code can be written and tested in browser with mobile oriented UI design and then built for a specific mobile platform e.g. Android.
    • Native App: This is conventional native mobile app development. The idea is to use FlytOS supported SDK/libraries and develop native Android or IOS apps.

The video above shows a sample joystick app for controlling the drone. It is an android app built with HTML/CSS/JS using the Cordova engine. The idea behind this app was to provide a simple interface that can enable anyone to fly a drone without prior flying experience. This app is built by our mobile app developer who also successfully tested it on a real drone while our pilots just stood by.

The app mainly has a set of buttons (HTML/CSS) that are mapped to REST calls (JS) at the backend and thereby allow the control of drone’s position and heading. We can also get data streams from drone to the app by subscribing to desired topics using the websocket APIs of FlytOS. This is a relatively simple app with only an offboard component but advanced applications can have both onboard and offboard components. In such a case, new data could be generated on either side which needs to be shared with the other component. This is possible in FlytOS by publishing and subscribing to new topics or by using new params.

The step by step procedure for building an offboard web app and a cordova based mobile app is documented and available in flytdocs. Onboard web apps documentation is currently in progress and will soon be updated in flytdocs. FlytConsole and FlytVision are inbuilt onboard web apps. The setup for native Android apps is currently under development and a how-to guide with a sample app will be put up after internal testing.

The code for the sample apps is available in github. This currently includes the above joystick app, a simple demo app with an onboard script, a sample shape tracing app and a GPS based Follow Me app. Further apps to follow soon include a joystick app to control multiple drones and a photo shots app for capturing shots like Orbit and Cable Cam. Please visit links below to learn more and get started with imagining and building your own web/mobile interfaces.

Download FlytOS:   http://flytbase.com/flytos/

Web and Mobile apps docs:  http://docs.flytbase.com/docs/FlytApps/Web_MobileApps.html

Sample Apps github: https://github.com/flytbase/flytsamples

Add comment