Board index FlightGear Development Canvas

Canvas dialog GUI with MFD

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 dialog GUI with MFD

Postby Octal450 » Sat Dec 02, 2017 10:04 pm

Hi
I am trying to add some buttons to my Airbus Lower ECAM, which control the page. Right now, I popup the canvas with this:

Code: Select all
var showLowerECAM = func {
   var dlg = canvas.Window.new([512, 512], "dialog").set("resize", 1);
   dlg.setCanvas(lowerECAM_display);
}


Is it possible to add some buttons below it, similar to what this is in FSX:
http://prntscr.com/hi9gd0
(I do not need it to look fancy or anything, just be functional)

Kind 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: Canvas dialog GUI with MFD

Postby Hooray » Sun Dec 03, 2017 10:17 am

Yeah, that is very easy to do and will take only 15-20 lines of Nasal code.
Actually, you can ignore your current MFD instrument and the code you have, because it's totally irrelevant what you add to a Canvas.

Even adding another canvas to a Canvas can be done via the Canvas.Image API. That way, an embedded Canvas can be easily shown, because it's just treated as a conventional raster image:



Thus, you can simply refer to the Canvas Snippets article and look up the two snippets that you need, namely:

  • one for adding buttons to a Canvas GUI dialog
  • one for adding raster images


Depending on what you have in mind, it would probably suffice to simply use the Canvas snippets for buttons, and then just change the background image of the button or label according to your requirements. That way, you can have the exact same fancy "widgets" that the FSX screenshot is using.

Alternatively, you could also take screenshots of your MCP and create a simple texture map for the various states that you'd like to see supported - that way, you can simply change the texture lookup coordinates to change the state of the MCP shown below the actual MFD.

Anyway, you will probably want to structure your code so that it can work for different displays.


http://wiki.flightgear.org/Canvas_Snipp ... Layouts.29
Image

For the embedded Canvas, refer to this:
http://wiki.flightgear.org/Canvas_Snipp ... ter_Images
http://wiki.flightgear.org/Canvas_Image
http://wiki.flightgear.org/Howto:Using_ ... d_canvases
Image

Feel free to get in touch if anything is missing - but actually this stuff is there for a reason, so if you do think something is missing, please also add the corresponding findings (and code snippets/screenshots) to the wiki - because that is why we created these articles originally.
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: Canvas dialog GUI with MFD

Postby Octal450 » Sun Dec 03, 2017 4:54 pm

Hi Hooray,
Thanks for the detailed explanation. I will give it a go later today.

Thank you and Kind 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: Canvas dialog GUI with MFD

Postby Hooray » Sun Dec 03, 2017 5:24 pm

I don't know if you are using Richard's MFD framework or not, but we've recently been discussing adding a vector of "control properties" so that such simple control elements (widgets actually) can be added procedurally, i.e. at the mere cost of specififying a vector of hashes containing the necessary meta information so that the MFD framework can procedurally come up with the bindings and widgets for the corresponding MFD - that would also make sense for people using the Emesary framework (again, also Richard's work).

For instance, the following screenshot shows a Canvas GUI dialog where the buttons are created procedurally using a single loop that searches a vector for the corresponding button specific labels/callbacks:

http://wiki.flightgear.org/Howto:Creati ... FD_Dialogs
Image


Obviously, using this makes only sense if you are really familiar with using vector and hashes in Nasal - but apart from that, it's a really straightforward method to create a full UI procedurally, without having to violate the DRY-principle - which also means that the same code can be easily reused for re-creating a UI for a different instance of the same instrument.

That is one of the reasons why I suggested that complex avionics don't conventional PUI/XML bindings, but rather go through the fgcommand layer and use a vector of widget specs, so that the UI can be easily created in an instance-agnostic fashion.

For instance, given your own background, imagine for a second how much work it would be to update the button bindings in the following screenshot to account for different instances of the same instrument:

http://wiki.flightgear.org/FG1000
Image

Also, do note that such a raster image based UI could even be created using GIMP and Inkscape, e.g. by patching svg.nas to support loading raster images:

http://wiki.flightgear.org/Howto:Serial ... vas_to_SVG
Image

It would be really easy to register event handlers, so that Nasal callbacks can be triggered when an image is clicked: http://wiki.flightgear.org/Canvas_Event_Handling
Likewise, that would also work for other raster images (e.g. screenshots of your MCP)
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: Canvas dialog GUI with MFD

Postby Octal450 » Sun Dec 03, 2017 5:45 pm

I am using the IDG MFD Framework made by Necolatis for me.

I will take a look, but I think PUI looks better than Canvas, I may choose that route, similar to the FG1000, with my MFD in the middle.

Kind 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: Canvas dialog GUI with MFD

Postby Hooray » Sun Dec 03, 2017 5:54 pm

If you're adding the widgets procedurally, it doesn't matter whether you are using PUI widgets or Canvas widgets - it's just a few lines of code to deal with the differences if done properly. For instance, the screenshot below is showing procedurally added PUI widgets for each instance of the MFD:

http://wiki.flightgear.org/Howto:Protot ... play_Style
Image

(Do note, that there are no code changes required to make the same dialog show more instances of the MFD, which includes the PUI widgets to control each instance, I do believe the code is all there, so feel free to take a look)

That being said, I still believe that it might be less work to just take a screenshot of your existing cockpit MCP and then tell the canvas to load that image and show it below the MFD, at that point you can trivially add listeners to respond to UI events (mouse clicks, even tooltips).

That is assuming obviously that you haven't done any UI coding before - the raster image in conjunction with even listeners is pretty straightforward and will look like the thing you linked to earlier, and I believe it may look more familiar to you than the vector/hash based method I used for the ND dialog shown above.
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


Return to Canvas

Who is online

Users browsing this forum: No registered users and 2 guests

cron