Canvas GUI: Difference between revisions

Jump to navigation Jump to search

Canvas GUI (view source)

Revision as of 13:27, 24 June 2014

2,969 bytes removed ,  24 June 2014
m
→‎Replacing native PUI widgets with Canvas widgets: removing this: no longer need, widget support has considerably improved since then ...
m (→‎Replacing native PUI widgets with Canvas widgets: removing this: no longer need, widget support has considerably improved since then ...)
Line 90: Line 90:


This way, C++ developers can concentrate on providing the missing Nasal/C++ hooks, whereas Nasal developers can provide the required widgets.
This way, C++ developers can concentrate on providing the missing Nasal/C++ hooks, whereas Nasal developers can provide the required widgets.
== Replacing native PUI widgets with Canvas widgets ==
{{Note|This was just proof-of-concept, it's not the suggested approach that we want to use ultimately...}}
* 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 (prototype available at: https://gitorious.org/~hooray/fg/hoorays-fgdata/commits/topics/canvas-loglist ) :
[[File:Nasal-console-with-canvas-loglist-widget-prototype.png|thumb|canvas loglist prototype]]
Provide an PropertyList-XML that declares the canvas and its default settings, including a Nasal section that implements the logic, saved as gui/widgets/loglist.xml:
<syntaxhighlight lang="xml">
<?xml version="1.0"?>
<PropertyList>
              <name></name>
      <logclass></logclass>
              <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>
</syntaxhighlight>
Instead of embedding all code inline, you can also include an external Nasal by using:
<syntaxhighlight lang="nasal">
io.load_nasal( getprop("/sim/fg-root") ~ "/Nasal/canvas/widgets/loglist.nas" );
</syntaxhighlight>
To implement the widget-specific logic, you can access the parent canvas using the '''cmdarg()''' API:
<syntaxhighlight lang="nasal">
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);
</syntaxhighlight>
For handling mouse/GUI events, see: [[Canvas - Event Handling]].
Next, replace the original <loglist> in all dialogs in $FG_ROOT/gui/dialogs
<syntaxhighlight lang="xml">
<loglist>
                <halign>fill</halign>
                <valign>fill</valign>
                <stretch>true</stretch>
                <pref-width>450</pref-width>
                <pref-height>200</pref-height>
                <padding>6</padding>
</loglist>
</syntaxhighlight>
And include the corresponding canvas file instead:
<syntaxhighlight lang="xml">
<canvas include="gui/widgets/loglist.xml"> <!-- see $FG_ROOT/Docs/README.gui for details -->
        <logclass>nasal</logclass>
                <halign>fill</halign>
                <valign>fill</valign>
                <stretch>true</stretch>
                <pref-width>450</pref-width>
                <pref-height>200</pref-height>
                <padding>6</padding>
</canvas>
</syntaxhighlight>
Retrieved from "https://wiki.flightgear.org/Special:MobileDiff/73182"

Navigation menu