Canvas - Getting started
|This article is a stub. You can help the wiki by|
|Note In its current form, this section/article is largely based on quotes collected from various related discussions/channels (devel list, forum etc) using the Instant-Cquotes script. Wiki users and other contributors are encouraged to help rewrite/edit contents accordingly to help get rid of unnecessary quoting (i.e. while the wiki is not intended to be a collection of quotes, quotes are sometimes the best/easiest way to bootstrap new articles, while also providing a good way to link back to related discussions in the archives).
While rewriting usually only entails changing first person speech to 3rd person. However, please try to retain references/links to the original discussion whenever possible.
| The FlightGear forum has a
subforum related to: Canvas
|The following is assuming that you're indeed looking for an integrated solution running within the FlightGear main loop using a combination of Nasal/Canvas:
For anything involving MFDs (glass cockpit/EFIS-type avionics), you'll usually want to use Inkscape SVG files that are animated using Nasal/Canvas.
For that, you should understand a few Nasal basics, especially object-oriented programming using Nasal (vectors, hashes, classes, objects, inheritance): Object Oriented Programming with NasalObject oriented programming in Nasal
|Next, you need to understand how to load an Inkscape SVG file onto a Canvas, for prototyping purposes it make sense to use a GUI dialog during development (which can later on be trivially turned into an actual instrument) :
Howto:Use SVG inside a Canvas
|Next, there's also the possibility to reuse FlightGear's existing gauges and render/animate those using Canvas: Howto:Parsing 2D Instruments using the Canvas
|The reference for Canvas/Image handling (raster images) can be found at: Canvas Image
Assuming that you're more interested in modern MFD avionics, the approach taken by the GPSMap196 would seem useful: Garmin GPSMap 196
|If you're just getting started, you may also want to check out the advice on creating a simple Nasal framework: Howto:Coding a simple Nasal Framework
For the time being, the most generic Canvas-based approach involving SVG instrument's is Torsten's RBAR EFIS: Subject: Mirage 2000-5
|Internally, canvas will turn all SVG commands into OpenVG primitives and then maintain a raster image which is rendered each frame, but usually only updated when absolutely necessary (modified/animated).
|Animations should probably be using the ND method, i.e. SVG elements animated via Nasal callbacks (timers/listeners): Canvas Animation Framework
Caching can be implemented using MapStructure's SymbolCache.
|Normally, you would start by prototyping instruments using a standalone GUI dialog, which greatly simplifies the whole prototyping process, because reloading/switching aircraft in FG still works only very unreliably - equally, lose coupling is much easier to accomplish by using a standalone GUI dialog.
For starters, you will probably want to use the Nasal console and play with the code snippets from: Canvas SnippetsThe whole idea of this article is to get people started doing basic stuff, and then let them integrate things as required - i.e. "Canvas Snippets" is all about providing building blocks that can be adapted as needed.
|In other words, feel free to ask questions or help improve the wiki docs if you think anything is missing - please do so via the main Canvas forum, we should usually be able to answer most questions pretty quickly, or at least provide snippets/pointers to snippets.
You will definitely benefit from understanding Nasal, and object-oriented programming in particular, a few fairly accessible introductory articles are these: Howto:Start using vectors and hashes in Nasal
Object Oriented Programming with Nasal Once you have worked through these and played with a few examples, I would suggest to look at the Canvas docs, the API reference, and the snippets on the wiki. For prototyping purposes, I would suggest to create a standard canvas GUI dialog: Howto:Creating a Canvas GUI dialog fileAnd you should also learn how to use io.include() and friends to split up your Nasal sources into separate files and make things more modular.
|For a few more relevant pointers/discussions, please see: