View source for Canvas - Getting started

{{Stub}}
{{DeQuote}}
{{Canvas Navigation}}

{{FGCquote
|1= 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]]
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=229468#p229468
  | title  = <nowiki>Re: any info about creating widgets for </nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jan 10th, 2015
  }}
}}

{{FGCquote
|1= 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]]
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=229468#p229468
  | title  = <nowiki>Re: any info about creating widgets for </nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jan 10th, 2015
  }}
}}

{{FGCquote
|1= 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]]

[[File:Canvas-Compass-Widget.png|250px]]
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=229468#p229468
  | title  = <nowiki>Re: any info about creating widgets for </nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jan 10th, 2015
  }}
}}

{{FGCquote
|1= 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]]

[[File:Gpsmap196-canvas-panel-page.png|250px]]
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=229468#p229468
  | title  = <nowiki>Re: any info about creating widgets for </nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jan 10th, 2015
  }}
}}

{{FGCquote
|1= 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: [http://forum.flightgear.org/viewtopic.php?p=220092#p220092 Subject: Mirage 2000-5]
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=229468#p229468
  | title  = <nowiki>Re: any info about creating widgets for </nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jan 10th, 2015
  }}
}}

{{FGCquote
|1= 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 ... 
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=220092#p220092
  | title  = <nowiki>Re: Mirage 2000-5</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Oct 7th, 2014
  }}
}}

{{FGCquote
|1= 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).
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=218627#p218627
  | title  = <nowiki>Re: Two Images to a Texture</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Sep 15th, 2014
  }}
}}

{{FGCquote
|1= 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.
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=215259#p215259
  | title  = <nowiki>Re: Garmin gns530</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 23rd, 2014
  }}
}}

{{FGCquote
|1= 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.
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}

{{FGCquote
|1= 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.
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}

{{FGCquote
|1= 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.
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}

{{FGCquote
|1= 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)


|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}

{{FGCquote
|1= For a few more relevant pointers/discussions, please see:

[http://forum.flightgear.org/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+svg]

[http://forum.flightgear.org/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=canvas+animated+inkscape]

[http://forum.flightgear.org/search.php?st=0&sk=t&sd=d&sr=posts&keywords=nasal+canvas+animated+timers+listeners 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)


|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}

{{FGCquote
|1= 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.
|2= {{cite web
  | url    = http://forum.flightgear.org/viewtopic.php?p=250202#p250202
  | title  = <nowiki>Re: Developing a Canvas Cockpit for the CRJ700</nowiki>
  | author = <nowiki>Hooray</nowiki>
  | date   = Jul 7th, 2015
  }}
}}