Board index FlightGear Development Canvas

Aircraft-specific dialogs

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.

Aircraft-specific dialogs

Postby Thorsten » Wed Jan 24, 2018 5:19 pm

Some of you may already know that the current tool to generate the dialogs (PUI) is going to disappear in the mid-future. After some (partially controversial) discussion, there seems now to be some support for the idea that canvas is a good tool to generate aircraft-specific dialogs in the future (as it allows to tailor the dialog closely to the plane and also, canvas being canvas, the UI can smoothly mesh with the 3d models, so you can project a canvas checklist onto a 3d model in sim for instance rather than a popup window).

I'd very much like to claim to be pioneering this approach, but in fact I believe the Extra-500 team is - look at the failure dialog of that plane where you can click the components you want to fail and you see what I mean!

Anyway, I've started to roll out a few designs of my own and try to keep the tools fairly general so that they can be re-used by others- so here's the revised version of the Shuttle propellant dialog.

Image

The general idea is to use semi-transparent 'content gauges' on a background raster image to show where the tank is located and how full it currently is - double-clicking any tank will bring up a detail window which allows to set the content (here propellant and oxidizer separately, this is rocket fuel...) and also shows the current tank pressures and temperatures.

The whole thing can readily be applied on top of a different raster image with a different number of tanks - you just instance and position the labels and 'gauges' you need - in fact placement is probably what's going to take longest (at least for me).

The whole thing is currently in flux (I wish I'd always know before what the best design would be, but alas - I only know afterwards...).

If anyone wants to follow the development or use the code, it's here:

https://sourceforge.net/p/fgspaceshuttl ... ialogs.nas
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Re: Aircraft-specific dialogs

Postby Hooray » Wed Jan 24, 2018 6:30 pm

I don't know if you've been following Stuart's fg1000 work or rleibner's recent "oscilloscope" addon - but you can basically add a helper function to handle drag/drop events, so that you can use fgfs itself to come up with the coordinates for the hot spots.

Apart from that, you may want to change the cursor when you're hovering over a hot-spot, and maybe add support for tooltips: viewtopic.php?f=71&t=32764&hilit=tooltip&start=45#p326413
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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby Thorsten » Wed Jan 24, 2018 6:32 pm

Sounds good - I'll look into it (I gather it's just another type of mouse event - the code snippet on canvas events on the wiki seems rather comprehensive).
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Re: Aircraft-specific dialogs

Postby Hooray » Wed Jan 24, 2018 6:34 pm

Yes, that's correct - the link I posted above just provides additional pointers (e.g. referring to the tooltip API and the way the cursor can be changed dynamically).
Another thing, that would be possible is changing the transparency of the hotspot dynamically - to make it more obvious what is going on.
We were discussing that in the fg1000 topic, i.e. to illustrate that a button is being clicked.

Like you mentioned elsewhere, another option would be using an SVG overlay and use that to retrieve the hotspot coordinates - that way, inkscape could be used directly.
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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby Thorsten » Fri Jan 26, 2018 8:28 am

Okay, I've figured out how to present a changing cursor and context help when one is over an active element/clickspot with the mouse.

Image

Here's an example of the detail dialog which allows to set levels of fuel and oxidizer separately (and the overview dialog shows the usable propellant then, i.e. the minimum of the two) - for aircraft, this would be somewhat simpler.
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Re: Aircraft-specific dialogs

Postby Hooray » Fri Jan 26, 2018 10:56 am

My suggestion would be to use your canvas_draw.nas file for drawing the "widgets" - that way, it will be easier to also support other types widgets in the future.

To become generic (over time), it would make sense to use one file that contains the general helpers, and another one that contains the shuttle specific stuff

For the same reason, I believe it would make sense to simply add your canvas_draw.nas file to $FG_ROOT/Nasal/canvas - so that it is generally available, and add a dedicated AircraftDialog.nas file there, which would be the placeholder for any generic stuff that can be moved out of the shuttle repo into $FG_ROOT

rleibner has been using this approach for the plot2D/oscilloscope work, and it's obviously served him rather well:

Image

PS: I have updated the "Canvas News" article on the wiki and added your work to it: http://wiki.flightgear.org/Canvas_News#Aircraft_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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby Thorsten » Sat Jan 27, 2018 7:06 pm

After some re-factoring and putting more functions into the widgets, I'm now at a stage where the effort required to create a fuel dialog is relatively minor.

Basically all that needs to be done is

* one line to declare the widget
* one line to place it
* one line to attach context help to it

* and have a support structure to update the values and define the context help strings

Code: Select all
      var outer_color = [0.2, 0.2, 0.2, 0.7];
      var fill_color = [0.7, 0.7, 0.7,0.7];
      var text_color = [0,0,0];

      # OMS tanks

      me.left_oms = cdlg_widget_tank.new(me.root, 40, outer_color, fill_color);
      me.left_oms.setTranslation(130,450);

      me.left_oms_text = cdlg_widget_property_label.new(me.root, "Right OMS", text_color, outer_color, fill_color);
      me.left_oms_text.setTranslation(300, 402);

      me.left_oms_label = cdlg_widget_property_label.new(me.root, "100%", text_color, outer_color, fill_color);
      me.left_oms_label.setTranslation(60, 458.5);


      me.right_oms = cdlg_widget_tank.new(me.root, 40, outer_color, fill_color);
      me.right_oms.setTranslation(300,450);

      me.right_oms_text = cdlg_widget_property_label.new(me.root, "Left OMS", text_color, outer_color, fill_color);
      me.right_oms_text.setTranslation(130, 398);

      me.right_oms_label = cdlg_widget_property_label.new(me.root, "100%", text_color, outer_color, fill_color);
      me.right_oms_label.setTranslation(370.0, 458.5);

      # RCS tanks
   
      me.left_rcs = cdlg_widget_tank.new(me.root, 20, outer_color, fill_color);
      me.left_rcs.setTranslation(170,560);

      me.left_rcs_text = cdlg_widget_property_label.new(me.root, "Left RCS", text_color, outer_color, fill_color);
      me.left_rcs_text.setTranslation(150, 523);

      me.left_rcs_label = cdlg_widget_property_label.new(me.root, "100%", text_color, outer_color, fill_color);
      me.left_rcs_label.setTranslation(115.0, 568.5);

      me.right_rcs = cdlg_widget_tank.new(me.root, 20, outer_color, fill_color);
      me.right_rcs.setTranslation(260,560);

      me.right_rcs_text = cdlg_widget_property_label.new(me.root, "Right RCS", text_color, outer_color, fill_color);
      me.right_rcs_text.setTranslation(270, 527);

      me.right_rcs_label = cdlg_widget_property_label.new(me.root, "100%", text_color, outer_color, fill_color);
      me.right_rcs_label.setTranslation(315.0, 568.5);

      me.fwd_rcs = cdlg_widget_tank.new(me.root, 20, outer_color, fill_color);
      me.fwd_rcs.setTranslation(280,100);

      me.fwd_rcs_label = cdlg_widget_property_label.new(me.root, "100%", text_color, outer_color, fill_color);
      me.fwd_rcs_label.setTranslation(335.0,105.0);

      me.fwd_rcs_text = cdlg_widget_property_label.new(me.root, "Fordward RCS", text_color, outer_color, fill_color);
      me.fwd_rcs_text.setTranslation(290, 65.0);


      

      me.context_help_text = me.root.createChild("text")
            .setText("")
      .setColor(0,0,0)
      .setFontSize(15)
      .setFont("LiberationFonts/LiberationMono-Italic.ttf")
      .setAlignment("center-bottom")
      .setRotation(0.0)
      .setTranslation(215, 610.0);



      # clickspots

      me.cs_left_oms = cdlg_clickspot.new(130.0, 450.0, 40.0, 40.0, 1, "circle");
      append(me.clickspots, me.cs_left_oms);

      me.cs_right_oms = cdlg_clickspot.new(300.0, 450.0, 40.0, 40.0, 1, "circle");
      append(me.clickspots, me.cs_right_oms);

      me.update_flag = 1;
      me.update_orbit_dlg();


      # context help

      me.left_oms.setContextHelp(me.process_context_help);
      me.right_oms.setContextHelp(me.process_context_help);
      me.left_rcs.setContextHelp(me.process_context_help);
      me.right_rcs.setContextHelp(me.process_context_help);
      me.fwd_rcs.setContextHelp(me.process_context_help);


I think this might be a good time to gather ideas for features - what do you think e.g. the box to display a text/property value should be able to do automatically?

I plan to add a function to define limits so that the value will be automatically shown in red when it is outside the limits. Also, the box will be able to stretch to accomodate a larger text dynamically if needed.

Any other useful feature that someone can dream up?

Also, any takers who want to give it a try implementing a canvas-style fuel dialog for their aircraft? I kind of suspect it's no more than 10 minutes at this stage (mostly to place the various elements...)
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Re: Aircraft-specific dialogs

Postby Hooray » Sat Jan 27, 2018 7:24 pm

without having looked at your recent changes, if there is a way to query JSBSim/YASim for the number of "fuel tanks", my general suggestion would be to encapsulate FDM specifics (YAsim/JSBSim) so that we can provide a function that simply returns the number of tanks in an FDM agnostic way - so that the tanks can be added/updated procedurally via some kind of foreach loop.

(but I don't know enough about the underlying FDM engines to tell whether that makes any sense or not)

PS: Like I mentioned elsewhere, looking at your screenshots/code, this is something that I believe would definitely benefit from having support for "units" (fahrenheit, degrees, pounds, liters) - as that may further simplify the code, while also providing an option to easily localize such dialogs in the future.
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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby wlbragg » Sat Jan 27, 2018 7:29 pm

I'll try it, but I want to adapt it to a water holding tank on the AirCrane. My question is can we easily define and use "any" properties to drive the data output?
Kansas(2-27-15)/Ohio/Midwest scenery development.
KEQA (2-27-15), 3AU, KRCP Airport Layout
Intel i5 3570K AMDRX480
User avatar
wlbragg
 
Posts: 4989
Joined: Sat Aug 25, 2012 11:31 pm
Location: Kansas (Tornado Alley), USA
Callsign: WC2020
Version: next
OS: Win10/Linux/AMDRX480

Re: Aircraft-specific dialogs

Postby wlbragg » Sat Jan 27, 2018 7:31 pm

My use case will involve real time filling and emptying, also I might want to include other items such as sensor indicators.
Last edited by wlbragg on Sat Jan 27, 2018 9:48 pm, edited 1 time in total.
Kansas(2-27-15)/Ohio/Midwest scenery development.
KEQA (2-27-15), 3AU, KRCP Airport Layout
Intel i5 3570K AMDRX480
User avatar
wlbragg
 
Posts: 4989
Joined: Sat Aug 25, 2012 11:31 pm
Location: Kansas (Tornado Alley), USA
Callsign: WC2020
Version: next
OS: Win10/Linux/AMDRX480

Re: Aircraft-specific dialogs

Postby Hooray » Sat Jan 27, 2018 7:33 pm

Yes, Thorsten is using that, too - even though there are a few different ideas on how to go about hooking up everything between Nasal and SVG/XML space, without making too many fgfs specific assumptions - i.e. so that existing tooling (mainly Inkscape obviously) can be used to create aircraft specific widgets/dialogs.

It would actually be good to see this added to a few different aircraft, and types of aircraft (fixed-wing / helicopters), to ensure that this becomes sufficiently generic and flexible.
For testing purposes, it's probably not such a bad idea to use the shuttle as the testbed, since it's got tons of custom features, so that most other aircraft will be less complex, which will be a good thing for the design of the underlying framework.
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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby Alant » Sat Jan 27, 2018 9:00 pm

Thorsten wrote in Sat Jan 27, 2018 7:06 pm:Any other useful feature that someone can dream up?

Also, any takers who want to give it a try implementing a canvas-style fuel dialog for their aircraft? I kind of suspect it's no more than 10 minutes at this stage (mostly to place the various elements...)


Take a look at the extra500 fuel and payload dialog. As well as setting the tanks and loads it has sub-pages which give range and cg data.

The extra 500 also has a graphic failure dialog.

My current work is making a route planner dialog which has the look and feel of the aircraft (TSR2) route management panel, which is in the rear cockpit.

Have you any ideas on how to make these canvas dialog close with the escape key in the same way that the PUI dialogs do?

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

Re: Aircraft-specific dialogs

Postby Thorsten » Sun Jan 28, 2018 7:16 am

I'll try it, but I want to adapt it to a water holding tank on the AirCrane. My question is can we easily define and use "any" properties to drive the data output?


The whole concept works more like a canvas display than an xml dialog - the visual stuff gets fed text strings and numbers inside an update loop, and the update loop can fetch any properties or Nasal variables it likes and post-process them.

So there's no assumption in there that a tank needs to hold fuel (or in fact is a tank in the first place).

Why don't you sit down for a few minutes and describe how the dialog you'd like to have would look like and I see what we need to make this work?

(I suppose for Shuttle payloads there'll be a drag'n'drop feature where you select the satellite you want to fly and drag it into the payload bay... for water that's less suited, but... just go wild - how would it look like when you imagine it?)

Take a look at the extra500 fuel and payload dialog. As well as setting the tanks and loads it has sub-pages which give range and cg data.


This is an example of a different (and rather excellent) layout - which probably needs heavy customization aircraft-side to get the range and CoG displayed.

I plan to add GoG/Payload for the Shuttle as well (not range obviously) - but the tough thing here is the underlying logic rather than the dialog.

Obviously once you are after what the extra500 folks did and are willing to customize a full dialog from scratch using a dedicated SVG design, the sky is the limit - what I'm interested here is a bit how far we can reach with raster images, clickspots and a few generic widgets to get this re-usable quickly for many different aircraft (I suppose most people can easily take a screenshot of their plane to create a gif and use that as background - the number of people who can draw a plane in inkscape is likely more limited...)

I'm tossing around ideas with Hooray how to support SVG designs as well, but this is a chicken and egg problem - since I don't have an SVG workflow myself, I'd need some SVG-capable artist to make a concept and hand it to me for bringing to life.

Edit: Here's the extra 500 fuel dialog for those who don't want to fire up this plane - it's excellent, but a but harder to de-compose into generic elements.

Image
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Re: Aircraft-specific dialogs

Postby Hooray » Sun Jan 28, 2018 7:59 am

holy shit, the sky is really the limit - again, it's very unfortunate that none of the code here got committed to fgdata upstream, the Canvas system could have become much more powerful if the extra500 folks had contributed such code back. Looking at these dialogs, it's obviously that they solved certain problems already years ago, that some other people are are only just discovering (tinkering with).

And they should have really participated in the UI debate to share their experience creating these things from scratch, without using any of the existing widget set :D

Anyway, I do think a tabbed framework might not be such a bad idea actually - we could assign one SVG per tab (not sure what they're doing ...)
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: 11375
Joined: Tue Mar 25, 2008 8:40 am

Re: Aircraft-specific dialogs

Postby Thorsten » Sun Jan 28, 2018 8:04 am

I think tabs can be done rather easily on the raster image (imagine a few buttons, the canvas framework just outlines the active option and switches the relevant layer on).

I might have a stab at their more complex boxes, I rather like the design.
Thorsten
 
Posts: 11191
Joined: Mon Nov 02, 2009 8:33 am

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest