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.

Re: Best way to learn Canvas?

Postby Thorsten » Mon Apr 25, 2016 6:04 am

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.


While we're at that - once we've parsed an SVG, is there a way to re-use the structure? This would have to be copy by value rather than passing a pointer, because we'd want these structures to be independently controllable for each MFD, so we need multiple instances of the corresponding canvas elements.

Right now the Shuttle parses the SVG again for each MFD, and that's the dominant factor for the time it takes for FG to start up - it'd be nice to save some.

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.


Given that we really can't see a performance hit runtime when using 9 MFDs displaying each a hundred+ properties, I'd argue that the MFD framework is well-designed and optimization is more of a theoretical concern.

Keep it simple - people actually need to be able to adapt this to their needs.
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Best way to learn Canvas?

Postby Hooray » Mon Apr 25, 2016 11:21 am

this is what props.nas is currently used for, e.g. props.copy() - in fact, when you look at the svg module (svg.nas) you find it also being used there for pretty much the same purpose.

remember, all a Canvas, or any of its elements, really is, is just a property tree hierarchy in the main property tree - so you can use the standard property APIs for these purposes, which also means that you can inspect a Canvas using the property tree browser, but also save it to disk:

http://wiki.flightgear.org/Canvas_Troub ... ole_Canvas

You should not have to reparse the SVG file for each MFD instance, you could introduce a simple helper function/object that caches such calls and which memoizes cache accesses - which is how the SymbolCache basically works internally, but it goes beyond that by also encoding the variying parameters and using those for lookups, too - apart from that, it allows you to fetch a texture-map based sub-image of a cache texture (canvas), which is not what you need here - but it also caches SVG elements and can cache draw callbacks that deal with a Canvas element.

In other words "keeping it simple" is obviously desirable - but what you are asking for is not necessarily simple to implement (or use) if you don't use this kind of approach.

Note that the extra500 folks ended up adopting this pre-caching approach very aggressively to reduce the parsing overhead, but they used this for all sorts of things, too

But it does make sense to introduce a helper module that handles MFD/SVG processing and that merely returns a deep copy of a tree - especially given that all this is going through Nasal and the property tree.
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 Thorsten » Mon Apr 25, 2016 1:29 pm

but what you are asking for is not necessarily simple to implement (or use) if you don't use this kind of approach.


My understanding is that it's a one liner to change

Code: Select all
var pres = canvas.parsesvg(obj.PFDsvg, "Nasal/PFD/PFD.svg");


into

Code: Select all
props.copy(generic_group._node, obj.PFDsvg._node);


(where generic_group contains the result of parsesvg on the indicated file, and indeed I get the same outcome of the procedure. Unfortunately it takes just as long - so it seems the parsing itself wasn't what took the time.

Pity...
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Best way to learn Canvas?

Postby Hooray » Mon Apr 25, 2016 1:43 pm

keep in mind that this is going through Nasal space

there is a fair degree of property I/O taking place here behind the scenes - keep in mind that you are typically setting hundreds, if not even thousands, of properties before you end up with a Canvas/Element representation of the corresponding SVG/XML "object".

You can basically wrap the call in between two systime() calls or use debug.benchmark(func() {YOUR CODE HERE});
When you do that with the BUILT-IN PROFILER (wiki) enabled/running, you will undoubtedly see tons of property and Nasal overhead.
That is the reason why we ended up introducing the SymbolCache framework for elements that are "semi-static", i.e. that mainly differ in terms of transformation, color, label etc - i.e. style-able attributes.

The ND rendering hundreds of symbols would otherwise also have the same I/O overhead due to all the Nasal and property tree "context switches".
What worked fairly well was identifying the bottleneck (we used the profiler for that) and then we moved /some/ helpers to C++ space.

"true" instancing support for the Canvas system would be a different thing, but Gijs, James and TheTom once talked about that, too - it would just be more work obviously (I think it was the KNUQ taxiways that caused tons of property I/O back then)

http://wiki.flightgear.org/Canvas_Devel ... Instancing
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 Thorsten » Mon Apr 25, 2016 1:55 pm

I'm not really complaining - just being surprised. I had assumed that the parsing would be more costly than the property tree access to make a copy, but it seems to be the other way round.

Perhaps the fastest would be to dump the whole parsed canvas structures to an xml file and simply read that upon startup - the FG core seems to be good in reading xml to property...
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Best way to learn Canvas?

Postby Hooray » Mon Apr 25, 2016 2:03 pm

we can do that, I mean, we tested that a few years ago - there were some bugs/issues still, but it basically worked (I think the wiki article I linked to above is actually doing exactly that: saving/reloading a Canvas by serializing/unserializing it via PropertyList XML).

I am not sure it's a good idea though, for a number of reasons - i.e. there's a huge variety of dynamical state in a Canvas, that simply must match or be patched up (imagine listeners, timers, IDs etc) - things can get really ugly if you don't know what you are doing (imagine nested Canvas textures, referencing another/embedded Canvas).
And then there's state that isn't even in the tree, so which cannot be serialized easily.

One thing that might be possible is having a single property tree node (SGPropertyNode) per Canvas texture, so that a background thread could do the I/O, because it would never be in the main tree, but just look for events - this is one of the reasons why the AI system is comparatively straightforward to turn into a HLA federate - it could have its own property tree for each node.

But there are probably better ways, even without threading - see the link above, Tom and James discussed a number of ideas.

EDIT: Here's a the link explaining how to save the Canvas XML to a file, so that you can test your theory: http://wiki.flightgear.org/Canvas_Troub ... nvas_Group
(You can just include it via the include directive - but it will almost certainly not do/look like what you expect it to do...)


Another complication here is that the path drawing stuff is not native OSG code, i.e. it's actually using ShivaVG, and TheTom had to put osg machinery around it, because it's otherwise using raw OpenGL, so he came up with an osg::PathDrawable to wrap all the low-level GL calls in something that is compatible with OSG: http://api-docs.freeflightsim.org/simge ... 1Path.html

So, SVG paths are just Canvas paths; what would be needed is a way to "finalize" a group and mark certain elements as mutable, e.g. referring to a simple x/y axis arrangement:

Image

Which could then be instantiated for different dialogs by referencing an existing Canvas::Group instead of re-recreating it:
Image
Image

(and that we'd need a lookup method to get a handle to a cached group and reuse that, it is worth noting that we already have such a lookup mechanism via canvas:///, so having something like group:/// would also be possible)
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 » Fri Jul 15, 2016 4:22 pm

Spent quite alot of time here, but I still not sure how to do anything. :(

It's still confusing for me, since nothing says how SVGs work, or how nasal can work with them. While I *somewhat* understand the code, I don't understand how the code knows what is the SVGs!!!

Probably my English it the issue. It's rubbish.

Can you answer me this:

How do canvas instruments work? I cannot find enough things in the filesystem of planes. The nav display is easy, its in FGDATA, but how does, for example, the canvas PFDs work? I see not any files for them.

What you recommend for editing SVGs?

Regards,
Josh
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 wkitty42 » Fri Jul 15, 2016 6:07 pm

i think inkscape (on linux) is what many use for SVG graphics... it is vector stuffs instead of raster stuffs... the SVG file is like a language in similar fashion to .ac files...
"You get more air close to the ground," said Angalo. "I read that in a book. You get lots of air low down, and not much when you go up."
"Why not?" said Gurder.
"Dunno. It's frightened of heights, I guess."
User avatar
wkitty42
 
Posts: 9146
Joined: Fri Feb 20, 2015 4:46 pm
Location: central NC, USA
Callsign: wk42
Version: git next
OS: Kubuntu 20.04

Re: Best way to learn Canvas?

Postby Thorsten » Fri Jul 15, 2016 6:15 pm

How do canvas instruments work?


Canvas knows text elements, line segments (potentially combined into shapes filled with a color) and raster images. They may or may not form groups.

Each element/group can be translated, rotated, scaled, hidden or clipped.

For instance an airspeed tape is a filled rectangle shape with lines as the scale and text added, ideally combined into a group. The whole group is translated with an airspeed-dependent factor and placed into a clipping rectangle, so that only the portion just visible appears.

An alphanumerical gauge is a text element placed at a screen position for which the text is set to the value of a property in every update cycle.

A compass arrow is a filled closed path of lines which is translated from the compass center and then rotated with the heading.

That's the idea of canvas in a nutshell.

You can define all these elements in canvas directly, or you can create them on as SVG and read the SVG and then reference the elements by their name in the SVG file - after the parser stage, it's pretty much all the same, SVG elements end up being canvas elements.
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Best way to learn Canvas?

Postby Octal450 » Fri Jul 15, 2016 7:09 pm

This may take me a while to grasp. I think the wiki needs to be improved.
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 Richard » Fri Jul 15, 2016 7:28 pm

it0uchpods wrote in Fri Jul 15, 2016 4:22 pm:Spent quite alot of time here, but I still not sure how to do anything. :(

It's still confusing for me, since nothing says how SVGs work, or how nasal can work with them. While I *somewhat* understand the code, I don't understand how the code knows what is the SVGs!!!



A while back I wrote an article on how to do an instrument using canvas : http://chateau-logic.com/content/flight ... instrument
Richard
 
Posts: 810
Joined: Sun Nov 02, 2014 11:17 pm
Version: Git
OS: Win10

Re: Best way to learn Canvas?

Postby PINTO » Fri Jul 15, 2016 8:27 pm

it0uchpods wrote in Fri Jul 15, 2016 7:09 pm:This may take me a while to grasp. I think the wiki needs to be improved.


From my (limited) understanding, think of it like applying a texture to a model. That's all that canvas is doing. But you can move around bits of the texture.

You can create an SVG, and name parts of it (think blender and objects, sort of), and then point the canvas file to an SVG image, and say "I want to move this piece here, and have it look like this."

Outside of using an SVG file, you can also say in the canvas file "I want to draw a line here, and here and here, and a circle here, and they should move around like this," or "I want these numbers to be written here, and this is what those numbers say."
Actively developing the MiG-21bis (github repo) (forum thread) (dev discord) (fg wiki)

http://opredflag.com is an active flightgear dogfighting community (using a system that isn’t bombable)
User avatar
PINTO
 
Posts: 966
Joined: Wed Oct 21, 2015 7:28 pm
Callsign: pinto
Version: stable
OS: Win10

Re: Best way to learn Canvas?

Postby Hooray » Fri Jul 15, 2016 9:43 pm

The wiki can certainly be improved - however, it isn't intended to document existing standard technologies like XML or SVG - equally, there is excellent documentation available on texturing (GIMP), but also on OpenVG. In other words, while Canvas may be a home-grown thing, there are many concepts it shares with the HTML5 Canvas (wikipedia), e.g. the way styling works.
However, in FlightGear, everything is using an actual scene graph, which is hardware accelerated using OSG/OpenGL.
You are unlikely to make much progress with Canvas if you don't have some previous experience with object-oriented programming and graphics in particular. The only thing the wiki can do, and which is doing already, is introducing high level concepts and FlightGear specifics, while providing more specific pointers to other resources.

The fgdata/base package level interface you need to know to use the Canvas system is fairly lightweight actually, but you will definitely need to be experienced with object-oriented scripting and graphics concepts (transformations, translations, rotations, transparency, rgba, textures).

Like Thorsten said, the Canvas system itself really only provides a single top-level group (think FOLDER) per Canvas, which can contain other child elements, including raster images, text, OpenVG paths, maps or other groups - i.e. it's a fully recursive thing, groups can have groups can have groups. So you need to understand how the tree data structure works, and how it relates to the FlightGear property tree.

The power behind the Canvas system in FlightGear is certainly not due to its documentation, but because it's using industry standards and concepts that people can easily read up on - without things having to be specific to FlightGear/SimGear.

If you don't have a clue about these things, tinkering around with the Canvas Snippets article, the Nasal Console and a few tutorials may help you learn more.

Anyway, don't expect any of us here to actually spoonfeed all this info to you (or others) - there simply is not enough time to do that (no offense), so the only thing that seems to work is refining existing docs/tutorials based on feedback people provide - as far as I can tell, you have not actually responded with any such feedback yet. However, I am more than willing to review such feedback and help improve the docs accordingly, but I cannot introduce basic concepts like OOP, FlightGear scripting, closures, listeners or timers etc - you gotta do some of your own legwork first, and demonstrate that you have actually read up on the corresponding topics - even if that just means looking at stuff that is unrelated to FlightGear.

Otherwise, these topics really look astoundingly similar to wannabe aircraft developers struggling with the XML format, and PropertyList encoded XML in particular, as well as the notion of what a property is/becomes in FlightGear, and how its types relate to the property tree and the way XML data is serialized back and forth between the property tree.

You will agree that, as long as people don't understand these concepts, it makes zero sense to explain much more difficult concepts.

PS: I find your SVG related questions redundant, because "SVG" actually does have a corresponding entry which answers your question, and contains more pointers: http://wiki.flightgear.org/SVG

Anyway, Canvas Snippets is probably what you want to take a look at (wiki), and probably learn more about Inkscape along the way - there are snippets and a MFD framework that you can use without having to know much about coding, just by creating your artwork in Inkscape and using a snippet of Nasal code to load it.
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 » Sun Oct 09, 2016 3:12 pm

Thanks for info.

I started modifying Gijs PFD on the 737-800 to add my AP stuff, and fix some things.

I starting to learn Vector Graphics one inkscape.

But question:
How does code animate or control a part of the SVG? Do they have names like the AC3D/XML instruments? Or is there a part in the SVG XML like a number, or identifier? I cannot figure out how to only control a certain part.

Josh
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 » Sun Oct 09, 2016 3:28 pm

it0uchpods wrote in Sun Oct 09, 2016 3:12 pm:How does code animate or control a part of the SVG? Do they have names like the AC3D/XML instruments? Or is there a part in the SVG XML like a number, or identifier? I cannot figure out how to only control a certain part.



yeah, there is an "id" which you can use to look up a certain element, and then only animate/update that by applying transformations to it, changing its color etc.

http://wiki.flightgear.org/Canvas_Nasal ... lementById
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

PreviousNext

Return to Canvas

Who is online

Users browsing this forum: No registered users and 6 guests