Canvas - Getting started
| This article is a stub. You can help the wiki by expanding it. |
| 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 Nasal Object 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) :
Canvas Snippets#Creating a Canvas GUI Window To learn more about adding raster images (e.g. as background), see: Canvas Snippets#Adding Raster Images Howto:Using raster images and nested canvases To see how Inkscape SVG files can be loaded, please refer to the examples/tutorial at: 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 |
|
|
|
Any Nasal/Canvas code that is highly specific to a single aircraft/instrument or use-case or that only supports a single instance of a display/instrument, will sooner or later turn out to be a huge maintenance challenge unfortunately, no matter how sophisticated the code involved might be. Unfortunately, our ND/MapStructure code isn't necessarily as structured as some of the more recent examples, especially the Avidyne Entegra R9 code is freaking awesome in comparison, but not yet sufficiently generic to be useful outside the scope of the extra500/Avidyne R9 - equally, Torsten's RBAR EFIS is basically the most elegant, and most correct, approach towards implementing a Canvas/Nasal based animation framework, but isn't yet sufficiently unified and generalied to be usable elsewhere.
The other thing is that the ND/MapStructure code gets away without using any conventional design patterns - which makes it fairly accessible to less-experienced contributors, especially those new to coding in general - in fact, all those layers and SVG elements are animated using a declarative hash syntax, so there's very little explicit coding involved - at the cost of making things pretty verbose, and not as elegant obviously ... |
|
|
|
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 Snippets The 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.— Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|
|
|
Features closely related to existing stuff (think PFD, ND, EICAS/EFIS) would ideally be based on adapting, generaliing and refactoring existing code (as per Gijs' ND effort) though - but you would inevitably benefit from knowing how Nasal/Canvas work under the hood, especially in order to learn how to use the corresponding frameworks (think MapStructure), because most people have a hard time understanding the reasons for contributing to a generic/aircraft-agnostic effort even though their primary motivation is a single project only. — Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|
|
|
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 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 file And 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.— Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|
|
|
Note that you don't need to be an experienced Nasal coder to use Nasal/Canvas, but understanding a few basic concepts will greatly simplify the whole process.
The other part of this is artwork, which is usually created/edited using the Inkscape SVG editor. And it also makes sense to look at people who have previously done related work (e.g. Gijs, Hyde, artix, Philosopher, TheTom etc) - if in doubt, check the commit logs of aircraft using Canvas to look up whose involved. (but please don't just send tons of PMs to those, but instead ask general questions on the forum, and offer to provide something in return, i.e. document your journey, help improve the wiki/docs or help improve/write tutorials etc)— Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|
|
|
For a few more relevant pointers/discussions, please see:
search.php?st=0&sk=t&sd=d&sr=posts&keywords=canvas+animated+svg search.php?st=0&sk=t&sd=d&sr=posts&keywords=canvas+animated+inkscape search.php?st=0&sk=t&sd=d&sr=posts&keywords=nasal+canvas+animated+timers+listeners (it would be great, if someone could copy relevant stuff over to the wiki so that these postings can be turned into a new wiki article)— Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|
|
|
Features closely related to existing stuff (think PFD, ND, EICAS/EFIS) would ideally be based on adapting, generaliing and refactoring existing code (as per Gijs' ND effort) though - but you would inevitably benefit from knowing how Nasal/Canvas work under the hood, especially in order to learn how to use the corresponding frameworks (think MapStructure), because most people have a hard time understanding the reasons for contributing to a generic/aircraft-agnostic effort even though their primary motivation is a single project only. — Hooray (Jul 7th, 2015). Re: Developing a Canvas Cockpit for the CRJ700.
(powered by Instant-Cquotes) |
|