Canvas GUI

From FlightGear wiki
Jump to navigation Jump to search


Background

In order to eventually phase out PUI completely, we need to stop adding PUI dependencies to the source tree. We now have the Canvas system, and there’s a formal decision to modernize the GUI using the Canvas, and completely replace PUI sooner rather than later.

The shortcomings of our GUI, and PUI in particular, have been repeatedly brought up on the devel list over the years.

It was a lot of work to get rid of hard-coded PUI dialogs, and we still have a bunch of hard-coded PUI widgets – as long as we have those, getting totally rid of PUI will be increasingly difficult, because each hard-coded widget will either need to be phased out or manually ported.

Which is exactly the reason why adding additional PUI widgets to the source tree is a really bad idea and counter-constructive to accomplish our long-term goal of phasing out PUI completely.

We should really work out a plan to get rid of hard-coded PUI widgets and re-implement them using canvas-driven widgets, and extend the canvas as we go. Once that is accomplished, completely replacing PUI will become much more straightforward, because it will basically boil down to writing a parser in Nasal to turn our existing dialogs into canvas widgets.

Adding more and more hard-coded PUI widgets to the mix will make our work increasingly difficult, especially if they implement important and useful features that we really want.

We really need to keep the total picture in mind, or we are growing our todo lists with stuff that wasn’t really necessary in the first place.

PUI Widgets

Here's a list of custom, hardcoded, PUI widgets which we will need to re-implement using the Canvas, based on $FG_SRC/GUI:

In order to re-implement these using the Canvas system, we need to identify Nasal APIs that are currently missing, and which need to be provided via the cppbind framework.

Replacing native PUI widgets with Canvas widgets

  • provide a PropertyList-XML file that specifies the canvas to be put into $FG_ROOT/gui/widgets
  • provide a Nasal implementation to be put into $FG_ROOT/Nasal/canvas/widgets
  • modify all existing uses of the hardcoded widget

For example, to replace the loglist widget:

Provide an PropertyList-XML that declares the canvas and its default settings, including a Nasal section that implements the logic:

<?xml version="1.0"?>
<PropertyList>
               <name></name>
               <valign>fill</valign>
               <halign>fill</halign>
               <stretch>true</stretch>
               <pref-width>400</pref-width>
               <pref-height>200</pref-height>
                <nasal><load><![CDATA[
                print("canvas loglist running!");
                ]]></load></nasal>
</PropertyList>

Instead of embedding all code inline, you can also include an external Nasal by using:

io.load_nasal( getprop("/sim/fg-root") ~ "/Nasal/canvas/widgets/loglist.nas" );

To implement the widget-specific logic, you can access the parent canvas using the cmdarg() API:

var my_canvas = canvas.get( cmdarg() ); # this will get a handle to the parent canvas 

var root = my_canvas.createGroup();
var text = root.createChild("text")
.setText("some custom canvas widget")
.setTranslation(10, 30)
.setAlignment("left-top")
.setFontSize(20)
.setFont("LiberationFonts/LiberationSans-Regular.ttf")
.set("max-width", 380)
.setColor(1,0,0);

For handling mouse/GUI events, see: Canvas - Event Handling.

Next, replace the original <loglist>

<loglist>
                <halign>fill</halign>
                <valign>fill</valign>
                <stretch>true</stretch>
                <pref-width>450</pref-width>
                <pref-height>200</pref-height>
                <padding>6</padding>
</loglist>

And include the corresponding canvas file:

<canvas include="gui/widgets/loglist.xml"> <!-- see $FG_ROOT/Docs/README.gui for details -->
                <halign>fill</halign>
                <valign>fill</valign>
                <stretch>true</stretch>
                <pref-width>450</pref-width>
                <pref-height>200</pref-height>
                <padding>6</padding>
</canvas>