Board index FlightGear Development Canvas

Best way to learn Canvas?

Canvas is FlightGear's new fully scriptable 2D drawing system that will allow you to easily create new instruments, HUDs and even GUI dialogs and custom GUI widgets, without having to write C++ code and without having to rebuild FlightGear.

Best way to learn Canvas?

Postby Octal450 » Mon Apr 04, 2016 3:29 pm

Hey guys
I have been looking at the Canvas 2D API and would like to learn how to use it to create instruments etc.

Can someone provide some resources (wiki pages, etc) that would be the best to learn Canvas?

I am decent in Nasal if it helps.
Skillset: JSBsim Flight Dynamics, Systems, Canvas, Autoflight/Control, Instrumentation, Animations
Aircraft: A320-family, MD-11, MD-80, Contribs in a few others

Octal450's GitHub|Launcher Catalog
|Airbus Dev Discord|Octal450 Hangar Dev Discord
User avatar
Octal450
 
Posts: 5583
Joined: Tue Oct 06, 2015 1:51 pm
Location: Huntsville, AL
Callsign: WTF411
Version: next
OS: Windows 11

Re: Best way to learn Canvas?

Postby Hooray » Mon Apr 04, 2016 5:27 pm

My suggestion would be to learn more about OOP (object oriented programming) and how to use that in Nasal.
Next, you will probably want to look at some of the existing Canvas sources - i.e. $FG_ROOT/Nasal/canvas/* (especially api.nas)
And then, you need to understand that Canvas works in form of primitives that form the primitives/ "building blocks" for all instruments.
Namely: text handling, raster images, OpenVG Paths
Everything else is built on top of these primitives (well, except for Maps, but that's a different topic).

For learning purposes, you could play with the examples that can be found in the Canvas snippets article on the wiki: http://wiki.flightgear.org/Canvas_Snippets

Note that you need to understand OOP, and especially method chaining, to understand how those examples work behind the scenes.

For instruments/avionics in particular, you will want to learn more about Scalable Vector Graphics (SVG) and probably Richard's MFD framework.
SVGs are not directly supported but a subset of SVG/XML is parsed by a Nasal module that turns a SVG image into a Canvas Path node.

Event handling is a different topic and separately covered on the wiki.

That said, if you'd be willing to tinker with the Canvas Snippets, and maybe help improve the article, I may find some time to walk you through some of the basics, especially if that means that your findings materialize in the form of better/new documentation in the wiki - even if that only means helping clean up the existing docs (e.g. by de-quoting things).

Obviously, there's also a SimGear/FlightGear side of the Canvas system, but you don't really need to understand those things to make progress.

If all you are interested in are modern avionics, your best bet is probably Richard's MFD framework, in conjunction with the API docs, and maybe by looking at some of the more object-oriented Canvas modules (e.g. the Avidyne R9 on the extra500).

MapStructure is a completely different beast and designed specifically for mapping/charting purposes, and you would need to have a rather strong background on design patterns (especially MVC) and functional/meta-programming.

Nasal-wise, basic knowledge of JavaScript should be sufficient actually - the meat of it all are the FG specific APIs (extension commands).
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby Octal450 » Tue Apr 19, 2016 6:47 am

@Hooray
Thanks,

I have been learning OOP Nasal based off of your help. Alot I actually knew already!

How do I create SVGs, and work with them? I have a decent understanding of the system now.

Regards,
Skillset: JSBsim Flight Dynamics, Systems, Canvas, Autoflight/Control, Instrumentation, Animations
Aircraft: A320-family, MD-11, MD-80, Contribs in a few others

Octal450's GitHub|Launcher Catalog
|Airbus Dev Discord|Octal450 Hangar Dev Discord
User avatar
Octal450
 
Posts: 5583
Joined: Tue Oct 06, 2015 1:51 pm
Location: Huntsville, AL
Callsign: WTF411
Version: next
OS: Windows 11

Re: Best way to learn Canvas?

Postby Hooray » Tue Apr 19, 2016 8:11 am

See the wiki, SVG files are typically created/edited using a vector graphics editor like Inkscape.
You will probably want to look at Richard's MFD framework which is a wrapper for creating SVG-based MFDs more easily using Nasal and Canvas, it is already being used on the f15 and the space shuttle.

If in doubt, I'd suggest to search the forum/wiki for several combinations of "Canvas" and "SVG".
Obviously, it would also be appreciate if you could help us review and improve the corresponding articles on the wiki.

In particular, the "Canvas Snippets" article should be easy to use, but also easy to add to.

Besides, one of the more common pitfalls for people is not understanding what so called "closures" are and why/when they have to use them in conjunction with Nasal code making use of timers and listeners.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby jaxsin » Tue Apr 19, 2016 11:38 am

i think this website gave a good understanding of SVG's and how, why they work so well. The idea here is to connect the dots...

http://tutorials.jenkov.com/svg/index.html
jaxsin
 
Posts: 395
Joined: Mon Dec 28, 2015 4:54 pm

Re: Best way to learn Canvas?

Postby Hooray » Tue Apr 19, 2016 11:48 am

Note that most tutorials will typically use JavaScript, but JavaScript's syntax is close enough to Nasal, so that it does help to have some experience with JavaScript.
Apart from that, FlightGear's SVG support is rather limited - i.e. it's just a tiny subset of SVG that is actually supported by the SVG parser currently, which is then mapped to OpenVG primitives (Canvas.Path).
Depending on what you have in mind, it may actually be helpful to also learn more about Canvas.Path (see api.nas) and OpenVG in general, because that is how the svg.nas module works behind the scenes when it translates SVG markup to OpenVG paths.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby Octal450 » Wed Apr 20, 2016 5:47 am

@all

Thanks, ill take a look.

Regards,
Skillset: JSBsim Flight Dynamics, Systems, Canvas, Autoflight/Control, Instrumentation, Animations
Aircraft: A320-family, MD-11, MD-80, Contribs in a few others

Octal450's GitHub|Launcher Catalog
|Airbus Dev Discord|Octal450 Hangar Dev Discord
User avatar
Octal450
 
Posts: 5583
Joined: Tue Oct 06, 2015 1:51 pm
Location: Huntsville, AL
Callsign: WTF411
Version: next
OS: Windows 11

Re: Best way to learn Canvas?

Postby Hooray » Thu Apr 21, 2016 4:12 pm

I have added an example/tutorial to the wiki that demonstrates how the svg.nas module can be extended to support other SVG features - note that the same mechanism could be used to support <line>, <rect>, <circle> tags etc

What would be more useful though is adding support for animation handling, so that people can animate their MFDs using an SVG editor instead of having to use tons of code in the form of listeners and timers.

The main benefit here is that adding support for animation handling at the SVG level would help encapsulate related code, so that if/when native code is added (i.e. Canvas/OSG code), there would only ever be a single module that would need to be touched/updated, instead of having to touch dozens of Nasal files or aircraft.

For now, the example is rather simple, it will look for <image> tags and map those to the corresponding Nasal/Canvas code that creates a Canvas.Image.

http://wiki.flightgear.org/Howto:Extend ... SVG_module
Image
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby legoboyvdlp » Sun Apr 24, 2016 2:41 am

Have been looking at Canvas myself. I know absolutely nothing about Canvas, but maybe my grandchildren will enjoy flying my plane....

Is there anywhere I can learn about Richard's framework? My idea is to make a MFD device for a popular regional jet made in South America. I was wondering if Richard's framework would do the trick.

A search of the wiki didn't come up with much.

Thanks
User avatar
legoboyvdlp
 
Posts: 7981
Joined: Sat Jul 26, 2014 2:28 am
Location: Northern Ireland
Callsign: G-LEGO
Version: next
OS: Windows 10 HP

Re: Best way to learn Canvas?

Postby Thorsten » Sun Apr 24, 2016 6:09 am

Is there anywhere I can learn about Richard's framework? My idea is to make a MFD device for a popular regional jet made in South America. I was wondering if Richard's framework would do the trick.


It's probably the best starting point you can get. Perhaps the version on the F-15 is a bit easier to parse than the Shuttle avionics I'm more familiar with.

It's based on having the layout of each page ready as an SVG that's read in on load time. What the code for each page then does is reference the parsed SVG elements like

Code: Select all
 p_dps_fault.string1 = device.svg.getElementById("p_dps_fault_string1");


Then each page has an .ondispay() method that is executed when the page is brought to display, an .offdisplay() method that's used when you de-select it and an .update() method into which you write all you want to display.

Here you'd then link the SVG elements you parsed above to properties/internal variables, for instance like

Code: Select all
        p_dps_fault.string1.setText( SpaceShuttle.cws_message_array_long[0]);


The framework also comes with the ability to define the menu structure, how pages change when you press edgekey buttons - you define this in blocks like

Code: Select all
      me.PFD.p_meds_spi.addMenuItem(0, "UP", me.PFD.p_main);
        me.PFD.p_meds_spi.addMenuItem(1, "OMS", me.PFD.p_meds_oms_mps);
        me.PFD.p_meds_spi.addMenuItem(2, "APU", me.PFD.p_meds_apu);
        me.PFD.p_meds_spi.addMenuItem(3, "SPI", me.PFD.p_meds_spi);
        me.PFD.p_meds_spi.addMenuItem(4, "PORT SEL", me.PFD.p_meds_spi);
        me.PFD.p_meds_spi.addMenuItem(5, "MSG ACK", me.PFD.p_meds_spi);


I've found it a very neat framework, supporting even the (somewhat exotic) needs of the Shuttle well.
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Best way to learn Canvas?

Postby Hooray » Sun Apr 24, 2016 11:24 am

you definitely need to know a little bit about Nasal, data types (hashes, vectors) to use such code, or it will look like gibberish to you - so if you are more interested in the artwork side of this, it's better to focus on just the SVG part, and let others handle the integration with the Nasal/MFD code.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby legoboyvdlp » Sun Apr 24, 2016 9:11 pm

Thorsten and Hooray:

It does indeed look rather like gibberish; nevertheless, I'm doing my best with Nasal, and after having a bit of thought about the examples which Thorsten gave, it isn't so hard as it looks :)

I'll take a look at the F15.

Many thanks, both of you
User avatar
legoboyvdlp
 
Posts: 7981
Joined: Sat Jul 26, 2014 2:28 am
Location: Northern Ireland
Callsign: G-LEGO
Version: next
OS: Windows 10 HP

Re: Best way to learn Canvas?

Postby Hooray » Sun Apr 24, 2016 9:32 pm

my suggestion for people less-experienced with coding would be to focus on learning more about Inkscape/SVG and then simply use the Nasal Console and a standalone Canvas GUI dialog to experiment with animating their SVGs using timers and listeners.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: Best way to learn Canvas?

Postby Richard » Sun Apr 24, 2016 9:53 pm

legoboyvdlp wrote in Sun Apr 24, 2016 9:11 pm:Thorsten and Hooray:

It does indeed look rather like gibberish; nevertheless, I'm doing my best with Nasal, and after having a bit of thought about the examples which Thorsten gave, it isn't so hard as it looks :)

I'll take a look at the F15.

Many thanks, both of you


There is now a version of the MFD_generic.nas in fgdata, which is better to use - I thought I'd documented it on the wiki but I can't find it, so I've just quickly written it up in http://wiki.flightgear.org/Canvas_MFD_Framework.
Richard
 
Posts: 810
Joined: Sun Nov 02, 2014 11:17 pm
Version: Git
OS: Win10

Re: Best way to learn Canvas?

Postby Hooray » Sun Apr 24, 2016 10:09 pm

Thanks for doing that - however, failing to support multiple independent instances of MFDs is one of the most common issues we've seen in the last couple of years, so we better establish doing so as some kind of "best practice" and document this accordingly.
Equally, the recent dual-pilot and multi-instance related discussions revolving around Canvas MFDs would suggest that it makes sense to also introduce the notion of "own-instance" state vs. state that may need to be synchronized/replicated (whatever the transport mechanism may be, i.e. HLA, MP Emesary or something completely different).

The other concern I have is performance, i.e. many pages will typically have similar/identical page elements, and we have different methods to deal with identical elements that only differ in terms of scaling, position, transformation or color etc - e.g. the SymbolCache approach.
In the future we may have access to osg level support for better instancing (see TheTom's comments in the Canvas forum), so that it would also make sense to annotate elements that only differ slightly, i.e. that could be instanced - that will pay off particularly in the case of complex MFDs and several running instances, where all MFD instances may share a certain cache texture so that Canvas Path based symbology can be treated as raster images, e.g. using the SymbolCache/window-decoration approach:

http://wiki.flightgear.org/Canvas_Snipp ... ymbolCache
Image
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 3 guests