Guide to adding Parameters to Mavelous

[Pat Hickey]

By request in another thread - here's a guide to the Mavelous code, and how you may start adding a parameter editor. It assumes a rudimentary command of python and javascript.

Please let me know if this was helpful or not, and send questons! We're eager to get more committers and start growing the functionality, and we'll help you get through the initial learning curve wherever we can.

-----

Mavelous's backend is currently found at

/modules/mavelous.py 

mavleous.py contains the ModuleState class, which is the interface between mavproxy functionality and the mavelous web server.

You'll want to expose mavproxy's parameter state through ModuleState- this probably means making a getter which grabs the mpstate.mav_param contents as a dictionary, and a setter which will call mpstate.master().param_set_send.

modules/lib/mavelous_server.py implements the web server. You can follow the example of the `@app.route('/mavlink/<msgtypes>')` handler to see what a parameter getter can be patterened after, and the `@app.route('/guide', methods=['POST'])` handler below to see what a parameter setter can be patterned after.

All frontend code is found in modules/lib/mavelous_web/ . You'll probably want to start hacking by adding a div somewhere in index.html where you'll render your frontend, and worry about integrating it nicely with the rest of the system later.

The core of the frontend application is found in scripts/app.js . This is where all of the app submodules are imported, using the google closure compiler. You'll want your own app submodule for each of the parameter model and parameter view. (We'll talk about the model/view system in a bit.)

Add an app submodule by:

1. create the file script/parameterview.js. Annotate it with a `goog.provide('Mavelous.ParameterView');` statement at the top, and define a skeleton Mavelous.ParameterView class in the prototype style accepted by the closure compiler. (You may want to follow another simple view class, like gpsstatus.js, as an example.). 

2. add `good.require('Mavelous.ParameterView');` to app.js. Add a line

creating your new Mavelous.ParameterView class to Mavelous.App.prototype.start, patterned after another view class

such as Mavelous.GpsButtonView.

3. Out at the top level of the mavelous repository, add the newly created parameterview.js filename to the list of `JS_FILES` in the Makefile. Run `make` from the command line. The closure compiler should update the script/mavelous-deps.js file to know about your new file.

4. Load index.html in your browser and watch the error console to make sure everything worked correctly.

For our model/view system, we use Backbone.js (http://backbonejs.org). Backbone is pretty easy to learn and there are lots of examples out on the web.

Backbone's canonical syntax builds models/view classes via calls to `Backbone.View.extend({ ... implement class methods here ...  })`. In Mavelous we use the google closure compiler to inherit the Backbone.View class and then define methods using the prototype.

Take a look at guidemodel.js for a model that interacts with the server via its own $.ajax POST, and subscribes to new mavlink messages. guideview.js is a simple view on this model which manages the slider, alt display, and submit button dom elements in the PFD. This model is also used by the map to show a waypoint.

Best

Pat

[David Court]

Thanks Pat, that looks very useful.  It may be a few days before I'm able to get stuck in in earnest, but I'm looking forward to it. It's about time I learnt some Backbone.js.

[John Wiseman]

I'm tempted to turn on the wiki and put this on it as an example of adding a new front-end and back-end feature...

--
You received this message because you are subscribed to the Google Groups "mavelous" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mavelous+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.