Board index FlightGear Development Canvas

Replace default gui dialog with aircraft specific canvas one

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.

Replace default gui dialog with aircraft specific canvas one

Postby Alant » Wed Oct 11, 2017 8:09 pm

It is simple to overwrite default gui dialogs with a modified xml version. e.g. to use an aircraft specific version of the route manager dialog I have this in my file tsr2/Nasal/dialogs.nas :-

Code: Select all
var routeman_settings = gui.Dialog.new("/sim/gui/dialogs/TSR2-route-manager/dialog","Aircraft/TSR2/Dialogs/TSR2-route-manager-dlg.xml");
gui.menuBind("route-manager", "dialogs.routeman_settings.open()");


But how can I replace the dialog with a canvas/nasal version?

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Wed Oct 11, 2017 8:18 pm

how can I replace the dialog with a canvas/nasal version?


Normally, you would have to manually port the dialog from PUI/XML to use Nasal/Canvas - the details are covered here:

http://wiki.flightgear.org/Howto:Creati ... ialog_file
http://wiki.flightgear.org/Howto:Creati ... GUI_Widget

Apart from that, there is an experimal (proof-of-concept) parser that parses a subset of PUI/XML and tries to automatically come up with an approximate/plausible version of the dialog by mapping PUI/XML layout/widget directives to the corresponding Canvas equivalents. A few days ago I posted a screenshot in another thread showing what the parser is creating when you ask it to render an unmodified version of map-canvas.xml:

http://wiki.flightgear.org/Howto:Proces ... ing_Canvas
Image

For testing purposes I was using dialogs with lots of dynamic behavior, i.e. embedded Nasal stuff and update semantics implemented on top of properties and listeners, because that's the kind of stuff that Phi/Qt5 cannot easily support (as per Torsten's and James' comments) - but that's unfortunately how many of the most important dialogs tend to work, especially stuff like tutorials, checklists and the joystick UI tend to use tons of Nasal hacks.

I haven't really touched the parser since I originally prototyped it (roughly two years ago meanwhile) - that was all in response to the ongoing Qt5 debate on the devel list back then. Originally, it was about 300 lines of code - with comments and after restructing things a little, it's more like 500 LOC - but that's still fairly lightweight given that most dialogs are much more complex than that, and that even the embedded Nasal code is usually much more than that.

As can be seen, the parser is really just a minimal module, so it ignores many layouting/widget directives - however, anybody familiar with basic Nasal/Canvas concepts should be able to extend the parser easily to support their own dialogs/use-case. The idea here being that it should/would be less work to incrementally update/augment such a parser accordingly than manually creating new dialogs from scratch or porting the whole GUI from one toolkit to another.

The kind of skillset required to do either this would be roughly the same admittedly, but it should be much less work in comparison - especially if done step-by-step.
For instance, I am fairly familiar with Nasal and Canvas concepts myself, but I would not volunteer to port each and every dialog to use the Canvas system.
I found it more interesting to come up with a piece of code to do this semi-automatically

Maybe you could post a link to the actual dialog file so that we can take a look what is missing to make the parser convert the dialog to use a native Canvas ?
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Wed Oct 11, 2017 8:37 pm

Thanks for the quick reply, but perhaps I was not clear in my question.

Your first link http://wiki.flightgear.org/Howto:Creating_a_Canvas_GUI_dialog_file describes how to reference a Canvas gui dialog in fgdata/gui/menubar.xml.

However, what I want to do is replace an existing dialog with an aircraft specific Canvas based one - in a similar manner to the code example that I gave, which is only relevant for PUI/XML.

In my case the fuctionality will be very different so porting code is not a solution.

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Wed Oct 11, 2017 8:41 pm

to do that, you'd replace the fgcommand (binding) using the dialog-show/dialog-new APIs and instead use the Canvas API mentioned in the article I linked, too.
For instance, let's say you'd like to override the autopilot dialog with your own Canvas based dialog - to do that, look up the menubar entry of the autopilot and replace its binding to create/show your own dialog (which does not necessarily have to reside in the base package - you could just as well add your Nasal code to the binding as is)

(which is the binding part shown in the code you posted in your question)
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Wed Oct 11, 2017 9:23 pm

Thanks again.

I am trying to understand how to do that, using the DemoDialog example in your first link as a test, but so far my brain is not co-operating. Is there an example to use as a cookbook?

Alan

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Wed Oct 11, 2017 9:38 pm

If you use a conventional binding with "nasal" set as the command, you can specify a script child - which is where you can add arbitrary Nasal code, so you don't need to put the dialog code into a separate file, you can simply put it into the binding. Alternatively, use io.load_nasal() or io.include() to invoke your code from a separate file.
I am suggesting to try this, because I don't know for sure whether the canvas.loadDialog() stuff also works for aircraft dialogs or if it only looks in $FG_ROOT/Nasal/canvas/gui/dialogs
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Wed Oct 11, 2017 10:10 pm

I will write this new dialog in my usual manner using the old PUI/XML.

Thanks for trying to help.

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Wed Oct 11, 2017 10:37 pm

The 2nd line in the snippet you posted previously is all you need - it will replace the binding with one of your choosing, and it will just work as long you specify the correct namespace and a function to call.

So, let's assume you put a function into the c172p namespace - and you call that function "showRouteDialog" - you can then invoke it by using something like the following:

c172p.showRouteDialog();
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Wed Oct 11, 2017 11:33 pm

I did something along those lines, but it was a stab in the dark for me.
I will try some more experiments tomorrow evening. Thanks
Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Thu Oct 12, 2017 4:17 pm

To see what it is really doing, just replace the code with a simple line printing "Hello World to the screen:

gui.menuBind("route-manager", "print('hello World'); ");
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Thu Oct 12, 2017 8:14 pm

I have found an example in the extra500 which answers my question, and gives a few ideas.

In short the extra500 aircraft has the following code

2. in fgaddon\Aircraft\extra500\extra500-set.xml
Code: Select all
   <Dialogs>
            <file>Aircraft/extra500/Dialogs/fuelpayload.nas</file>
            <file>Aircraft/extra500/Dialogs/failuredialog.nas</file>
            <file>Aircraft/extra500/Nasal/dialogs.nas</file>
        </Dialogs>


2. in fgaddon\Aircraft\extra500\extra500-menu.xml
Code: Select all
         <item>
            <name>Failure-dialog</name>
            <label>Failure Dialog</label>
            <binding>
               <command>nasal</command>
               <script><![CDATA[
                  Dialogs.Failuredialog.openDialog();
               ]]></script>
            </binding>
         </item>


3. The main failure dialog code is the file fgaddon\Aircraft\extra500\failuredialog.nas

This example has a canvas with interactive svg which makes it more interesting.

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby stuart » Thu Oct 12, 2017 9:11 pm

Hi Alan,

Glad you've found what you're looking for.

I wrote the gui.menuBind() code. If you find that it doesn't do what you'd like (or it's more difficult than it should be), ping me and let me know. The theory behind it is that you can replace any menu item with an aircraft-specific one. If that's not working for you, the I got something wrong and I'd consider it a bug in my code :).

Best regards,

-Stuart
G-MWLX
User avatar
stuart
Moderator
 
Posts: 1469
Joined: Wed Nov 29, 2006 9:56 am
Location: Edinburgh
Callsign: G-MWLX

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Sat Oct 14, 2017 4:44 pm

I just looked at the extra500-set.xml flie because based on what you posted, I didn't quite get what they're doing there to make that work, and it's a pretty cool idea - I didn't even take into consideration that we could just instantiate dialogs via the <nasal> tag into the tree via the helpers in gui.nas

Overall, looking at the number of files containing sophisticated Nasal, PUI/XML and Canvas code in the extra500, it's rather unfortunate that these ideas and approaches are nowhere being documented - I don't know if they reverse engineered all that stuff, but I wasn't even aware of some of these approaches, and I have basically touched each and every piece of Nasal/Canvas docs we have in the last couple of years, and have even written a simple parser to turn PUI/XML into Canvas widgets - which I guess goes to show just how complex many dialog resources outside fgaddon may really be, without many of us being aware of it ...

Looking at the code they have written, the whole FlightGear project could massively benefit from reviewing many of the Nasal/Canvas snippets in the extra500 repository and generalizing those to become available as dedicated Nasal modules in fgdata.

https://gitlab.com/extra500/extra500/

Honestly, though: I doubt however that their code is going to be a suitable example for what you are trying to do, because it's fairly sophisticated actually - as a matter of fact, if the menuBind() helper that Stuart created is too fancy, the extra500 stuff goes far beyond that. The people who wrote the extra500 Nasal code must have a pretty strong background in computer science (not to mention FG internals), probably holding at least a B.Sc in CS or SE - otherwise, it's unlikely that someone is able to pull off such a feat, given the lack of documentation in that department. Indeed, I would nominate the people/person involved in writing that code to become the next fgdata/Nasal maintainer/s ;-)
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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Re: Replace default gui dialog with aircraft specific canvas

Postby Alant » Sat Oct 14, 2017 7:41 pm

Stuart, Hooray.

Thanks for your help and support. The new dialogue design is back on track. It is unlikely to be as impressive as the extra500 :) However it certainly gives a target to aim for. My ultimate aim for my dialogues would be for them to visually relate to the aircraft or the environment, and this design certainly offers such a possibility.

Perhaps a newsletter article could be written by the authors.

Alan
Alant
 
Posts: 877
Joined: Wed Jun 23, 2010 5:58 am
Location: Portugal
Callsign: Tarnish99
Version: from Git
OS: Windows 10

Re: Replace default gui dialog with aircraft specific canvas

Postby Hooray » Sat Oct 14, 2017 7:45 pm

The extra500 work is fairly impressive, especially given that this is "just" about a handful of dialogs - most people would not spend so much time coding up such a fancy dialog ... I am not sure a single article would do - like I said, it took me more than one look to really understand what they were doing there and how it even works, it's not something that I would have come up with without looking at the underlying C++ code.

That being said, it will be interesting to see how well the upcoming QtQuick UI will support such sophisticated PUI/XML dialogs.

It is however pretty straightforward to add arbitrary artwork/background images to such a dialog to add some theming/styling support - which is what I once did here: http://wiki.flightgear.org/Aircraft_Generation_Wizard

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: 11317
Joined: Tue Mar 25, 2008 8:40 am

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest