Board index FlightGear Development Canvas

Canvas custom GUI

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.

Canvas custom GUI

Postby Flying toaster » Wed Jan 16, 2013 10:12 pm

HI there
Alas the newbie is back (that would be me :oops: )

I am trying to make a custom GUI for the loadout (i.e. without the standard widgets) and I am using the GUI.nas Dialog class to set this up...

Image

The bad news is, I can (with some difficulty) get the background image up ... and .... oh that's all :( I cannot even find a Nasal method or an entry point in the property tree to get rid of it ...

Is there a good example code of how to do it. There are youtube demos on the wiki but I do not see the associated code ?

Thanks a lot for the help

Enrique
Flying toaster
 
Posts: 353
Joined: Wed Nov 29, 2006 6:25 am
Location: Toulouse France

Re: Canvas custom GUI

Postby Hooray » Wed Jan 16, 2013 10:23 pm

That looks really promising: http://flying.toaster.perso.sfr.fr/images/customGUI.png
The code examples you are looking for are currently just "proof of concept" and not merged into fgdata, instead you need to look at Tom's fgdata repository: https://gitorious.org/fg/toms-fgdata

See the canvas branch: https://gitorious.org/~tomprogs/fg/toms ... its/canvas

Also see: https://gitorious.org/~tomprogs/fg/toms ... 2d6a581fe7

The canvas/canvas-gui branches have several commits with different GUI demos (widgets, windows, stacking etc)

In order to understand Tom's examples, you'll need to understand how method chaining works in Nasal: http://wiki.flightgear.org/Object_Orien ... :_Chaining

Also, Tom's code tends to make use of some of the more advanced Nasal concepts, such as anonymous functions.

Your screen shot looks really awesome, I'd suggest to closely coordinate this with Tom, the basic ideas are detailed at: http://wiki.flightgear.org/Canvas_Widgets

That's basically the way things are supposed to be working (eventually) - obviously, nothing is set in stone, so real life use cases are extremely useful.
In the long run, the idea is to closely model the DOM event handling system.

In fact, you are now obviously the first adopter of the GUI system, so your feedback will be really valuable, and you'll get a real chance to help shape the API :D

Maybe you could post a list with open question, so that we can try to answer them one by one - and extend the APIs as required ?

Finally, keep in mind that the long-term idea is to base the GUI on SVG images loaded and animated via Nasal/Canvas helper methods - so that the GUI becomes stylable in a CSS-based fashion, and GUI widgets could then be created/edited/updated via SVG editors like Inkscape.
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: Canvas custom GUI

Postby TheTom » Wed Jan 16, 2013 11:17 pm


I've done some further work on the GUI demo. It now shows also an dialog with some buttons and an image. The correct commit is now: https://gitorious.org/~tomprogs/fg/toms ... 4f91f9bb5b

Hooray wrote in Wed Jan 16, 2013 10:23 pm:Finally, keep in mind that the long-term idea is to base the GUI on SVG images loaded and animated via Nasal/Canvas helper methods

Btw. I've also played with the idea of using something similar to QML a Javascript based GUI language used inside Qt Quick. This would enable us to use Qt Designer for creating dialogs which would be a lot easier to use than handcrafted SVG dialogs. Currently this is just an idea with some unresolved issues :) Eg. even though QML syntax is similar to Nasal it is not possible to create a valid Nasal file which is valid QML at the same time. To use QML we would need a preprocessor which modifies the QML files to become valid Nasal files.
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: Canvas custom GUI

Postby Flying toaster » Fri Jan 18, 2013 9:00 pm

Thank you for your replies... It did improve the situation quite a bit....

I have a fresh new issue and I do not know what to think about it. I intended to make the drop tank symbols catch the click event to either load or unload the drop tanks....

So I did this :
Code: Select all
canvas.parsesvg(widgets, "Aircraft/F-20/Nasal/GUI/widgets.svg");
DropL = widgets.getElementById("DropL");

and this
Code: Select all
DropL.addEventListener("click", func wingDropTankToggleCallback());

As you can guess, it did not work. Note that DropL is a SVG <g> element even though It did not fare any better when I tried with a simple <path>

The same addEventListener will of course work with a hand drawn group ...

Is this a known issue ? Is there any work around ?

Thanks once more for your support
Flying toaster
 
Posts: 353
Joined: Wed Nov 29, 2006 6:25 am
Location: Toulouse France

Re: Canvas custom GUI

Postby Hooray » Fri Jan 18, 2013 9:10 pm

I cannot test any of this currently, so just some general comments, to help you troubleshooting a little:

  • please always use the var keyword when declaring variables for the first time: http://wiki.flightgear.org/Nasal_Variables
  • next, you can use Nasal's typeof() function to check the type of the variable: print( typeof(widgets) ); (and DropL)
  • (should be props Node hash)
  • that should allow you to check if the element could be retrieved (getElementById)
  • You should also be able to inspect the property tree directly via the property tree browser to see if the file got loaded successfully
  • finally, the func is not necessary when specifying a named function - you just omit the parentheses (assuming that the call doesn't return an anonymous function), i.e. DropL.addEventListener("click", wingDropTankToggleCallback );
  • the func is only required when wrapping a method: func me.function(), when using an anonymous/inline function or when wrapping a function call with certain parameters, as in: func foo(1,2,3)

The same addEventListener will of course work with a hand drawn group ...

To me that sounds like your canvas group could not be populated successfully - so I'd first check that (using the steps mentioned above).

Finally, without looking at all of your source code, it's unclear whether you initialized the widgets group previously using the createGroup() method or not ?
See the wiki tutorial at: http://wiki.flightgear.org/Howto:Use_SV ... ic_example

Code: Select all
# Create a group for the parsed elements
var eicas = my_canvas.createGroup();
 
# Parse an SVG file and add the parsed elements to the given group
canvas.parsesvg(eicas, "Aircraft/C-130J/Instruments/EICAS.svg");
 
# Get a handle to the element called "ACAWS_10" inside the parsed
# SVG file...
var msg = eicas.getElementById("ACAWS_10");
 
# ... and change it's text and color
msg.setText("THE NEW API IS COOL!");
msg.setColor(1,0,0);
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: 11437
Joined: Tue Mar 25, 2008 8:40 am


Return to Canvas

Who is online

Users browsing this forum: No registered users and 2 guests