Board index FlightGear Development Canvas

Adding a canvas to an old XML dialog?

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.

Re: Adding a canvas to an old XML dialog?

Postby Gijs » Sat Jul 20, 2013 3:39 pm

Gijs wrote in Mon Feb 25, 2013 1:43 pm:I've managed to add a SVG canvas to a XML dialog.

I have to correct myself. Altough the canvas shows up in the model and the dialog, only the dialog is updated after opening it. As long as I don't open the dialog, the model canvas updates fine, but as soon as the dialog is opened, the model stops updating. After closing the dialog, the model still refuses to update. Re-opening the dialog shows a perfectly updating canvas...

My code (removed tons of logic to color/hide lines etc., which is irrelevant for the issue):

Code: Select all
var canvas_fuel = {
   new: func(canvas_group)
   {
      var m = { parents: [canvas_fuel] };
      
      var eicas = canvas_group;
      canvas.parsesvg(eicas, "Aircraft/747-400/Models/Cockpit/Instruments/EICAS/fuel.svg");
      text3956 = eicas.getElementById("text3956");
      
      return m;
   },
   update: func()
   {
      text3956.setText(sprintf("%3.01f",getprop("/consumables/fuel/tank[7]/level-lbs")/1000));

      settimer(func me.update(), 0);
   },
};

setlistener("/nasal/canvas/loaded", func {
   var my_canvas = canvas.new({
        "name": "EICASFuel",
        "size": [1024, 1024],
        "view": [1024, 1024],
        "mipmapping": 1
      });
   my_canvas.addPlacement({"node": "Lower-EICAS-Screen"});
   var group = my_canvas.createGroup();
   var canvas_fuel_eicas = canvas_fuel.new(group);
   canvas_fuel_eicas.update();
}, 1);


The dialog:
Code: Select all
<?xml version="1.0"?>
<PropertyList>
    <name>eicas_dialog</name>
   <layout>vbox</layout>
   <draggable>true</draggable>
   <resizable>true</resizable>
   
   <group>
      <layout>hbox</layout>
      <text>
         <label>Boeing 747-400 EICAS</label>
      </text>

      <empty>
         <stretch>true</stretch>
      </empty>

      <button>
         <legend/>
         <key>Esc</key>
         <pref-width>16</pref-width>
         <pref-height>16</pref-height>
         <border>2</border>
         <binding>
            <command>dialog-close</command>
         </binding>
      </button>
   </group>

   <hrule/>
   
   <canvas>
      <nasal>     
         <load>
            <![CDATA[
             var my_canvas = canvas.get(cmdarg());
             var gui_fmc = Boeing747.canvas_fuel.new(my_canvas.createGroup());
             ]]>
         </load>
      </nasal>
      <valign>fill</valign>
      <halign>fill</halign>
      <stretch>true</stretch>
      <pref-width>400</pref-width>
      <pref-height>400</pref-height>
      <view n="0">1024</view>
      <view n="1">1024</view>
   </canvas>
   
</PropertyList>


----------------

I also looked at another approach, which involved this code (and no XML dialog):
Code: Select all
var canvas_fuel = {
   new: func(canvas_group)
   {
      var m = { parents: [canvas_fuel] };
      
      var eicas = canvas_group;
      canvas.parsesvg(eicas, "Aircraft/747-400/Models/Cockpit/Instruments/EICAS/fuel.svg");
      text3956 = eicas.getElementById("text3956");
      
      return m;
   },
   update: func()
   {
      text3956.setText(sprintf("%3.01f",getprop("/consumables/fuel/tank[7]/level-lbs")/1000));

      settimer(func me.update(), 0);
   },
};

setlistener("/nasal/canvas/loaded", func {
   var my_canvas = canvas.new({
        "name": "EICASFuel",
        "size": [1024, 1024],
        "view": [1024, 1024],
        "mipmapping": 1
      });
   my_canvas.addPlacement({"node": "Lower-EICAS-Screen"});
   var group = my_canvas.createGroup();
   var canvas_fuel_eicas = canvas_fuel.new(group);
   canvas_fuel_eicas.update();

   eicas_dialog = canvas.Window.new ([640,640]);
   eicas_dialog.setPosition(20,20);
   eicas_dialog.setCanvas (my_canvas);
}, 1);

The funny thing here is that it does seem to be updating both the dialog and the canvas on the model, but the canvas on the dialog is only visible when a popup dialog is open (eg. when changing views). It shows up at the location of the popup, and also seems to have that size, as can be seen at the screenshot below. I experience the same with the F-20's Stores dialog that used to work fine... This is with today's Git, but I remember seeing it since at least some days ago.
Image
Airports: EHAM, EHLE, KSFO
Aircraft: 747-400
User avatar
Gijs
Moderator
 
Posts: 9544
Joined: Tue Jul 03, 2007 3:55 pm
Location: Delft, the Netherlands
Callsign: PH-GYS
Version: Git
OS: Windows 10

Re: Adding a canvas to an old XML dialog?

Postby TheTom » Sat Jul 20, 2013 5:22 pm

Gijs wrote in Sat Jul 20, 2013 3:39 pm:The funny thing here is that it does seem to be updating both the dialog and the canvas on the model, but the canvas on the dialog is only visible when a popup dialog is open (eg. when changing views). It shows up at the location of the popup, and also seems to have that size, as can be seen at the screenshot below.

I have changed the way placing canvasses on windows work some time ago and forgot to also update it for placing existing canvasses onto windows. This should now be fixed in fgdata.

Gijs wrote in Sat Jul 20, 2013 3:39 pm:I experience the same with the F-20's Stores dialog that used to work fine...

For me it now shows up fine. The only problem is that changing the attached stores does not change the color of the according circle shapes. The problem is the SVG file where every circle has a parent group which has the id of the element assigned. In the Nasal file now the color of the element with the matching id is changed, which in this case is the group and not the circle path itself. Normally color values are inherited to child elements, but only if they have no color set (which is not the case for the F-20).
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Adding a canvas to an old XML dialog?

Postby Gijs » Sat Jul 20, 2013 5:45 pm

Excellent, works now! Also on the F-20. Thanks for the ongoing swift support ;-)
Does this mean that I should not use the XML dialog approach? I like the fact that those are resizable/draggable/closable, without any custom listeners etc...

On a side note, with the Canvas dialogs, I cannot click menu items that are overlapping the canvas.
Airports: EHAM, EHLE, KSFO
Aircraft: 747-400
User avatar
Gijs
Moderator
 
Posts: 9544
Joined: Tue Jul 03, 2007 3:55 pm
Location: Delft, the Netherlands
Callsign: PH-GYS
Version: Git
OS: Windows 10

Re: Adding a canvas to an old XML dialog?

Postby TheTom » Sat Jul 20, 2013 6:37 pm

Gijs wrote in Sat Jul 20, 2013 5:45 pm:Does this mean that I should not use the XML dialog approach? I like the fact that those are resizable/draggable/closable, without any custom listeners etc...

Canvas dialogs are definitely the way to go, as they are far more flexible and will replace PUI in the future. Since I think FG 2.11 you can create canvas dialogs with window decoration, including a title bar allowing to drag the window around and a close icon:

Code: Select all
var dlg = canvas.Window.new([400,300], "dialog")
                                    .set("title", "My Canvas Dialog...");


Resizing is not completely implemented yet, but you can use 'dlg.set("resize", 1)' to enable the cursor interaction. This will automatically change the cursor for resizing and change some properties (resize-top, resize-right, resize-bottom, resize-left, resize-status) on the according window to allow actually resizing the dialog. Just adding a listener to the resize-status property should be enough for handling resizing. (I will add an example and probably integrate it also into fgdata/master the next days).

The XML dialogs can still be used and will also be usable in the future (by a backwards compatibility layer or some migration path). I will have a look at the problem, as it seems to be like an issue with multiple placements.
I can not see it in your code, but am I right in assuming that you also placing the canvas in multiple locations (model and PUI dialog)?
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Adding a canvas to an old XML dialog?

Postby Hooray » Sat Jul 20, 2013 7:11 pm

right, implementing all our existing PUI/XML-based dialogs is almost certainly going to be more work than providing a Nasal-space migration path/wrapper that reads the old dialogs and turns them into "modern" canvas windows, possibly by just overwriting the dialog-show fgcommand via the new removecommand/addcommand APIs. And phasing out canvas widget should be fairly straightforward too, because those can be directly mapped to embedded/nested canvas textures, so I wouldn't worry too much ...
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: Adding a canvas to an old XML dialog?

Postby Gijs » Sat Jul 20, 2013 7:48 pm

Setting the title does give a nice dialog, but when it's closed, the canvas also disappears on the model. Next to that it has the same issue with the menu items as the plain canvas window. I'll just wait for your example and see how that works.

There's lots of work to be done on the SVG itself and its logic anyway, so that'll keep me bussy this summer :-)

Cheers,
Gijs
Airports: EHAM, EHLE, KSFO
Aircraft: 747-400
User avatar
Gijs
Moderator
 
Posts: 9544
Joined: Tue Jul 03, 2007 3:55 pm
Location: Delft, the Netherlands
Callsign: PH-GYS
Version: Git
OS: Windows 10

Re: Adding a canvas to an old XML dialog?

Postby Hooray » Sat Jul 20, 2013 8:43 pm

sounds like your destructor also deletes the original canvas, shouldn't happen if you're using an embedded canvas - otherwise, it would seem like a reference counting/smart pointer issue ?
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: Adding a canvas to an old XML dialog?

Postby TheTom » Sun Jul 21, 2013 11:11 am

Gijs wrote in Sat Jul 20, 2013 7:48 pm:Setting the title does give a nice dialog, but when it's closed, the canvas also disappears on the model.

Should be fixed now in fgdata.

Gijs wrote in Sat Jul 20, 2013 7:48 pm:Next to that it has the same issue with the menu items as the plain canvas window.

I know. I'm just not sure if I should try to solve it, or just work on replacing it with a canvas based implementation (which would won't suffer from this problem).

Gijs wrote in Sat Jul 20, 2013 7:48 pm:There's lots of work to be done on the SVG itself and its logic anyway, so that'll keep me bussy this summer :-)

Yeah, this displays can get quite complex. I've just started to work on a SVG based PFD. It's a lot easier now because with the Canvas, but still a lot of work :-)

----

Is the code above everything you are using for the PUI based dialog? You seem to use two independent canvasses, so I'm not sure how they could interact in any way...
TheTom
 
Posts: 322
Joined: Sun Oct 09, 2011 11:20 am

Re: Adding a canvas to an old XML dialog?

Postby Gijs » Sun Jul 21, 2013 2:14 pm

TheTom wrote in Sun Jul 21, 2013 11:11 am:Should be fixed now in fgdata.

Yes, works!
Airports: EHAM, EHLE, KSFO
Aircraft: 747-400
User avatar
Gijs
Moderator
 
Posts: 9544
Joined: Tue Jul 03, 2007 3:55 pm
Location: Delft, the Netherlands
Callsign: PH-GYS
Version: Git
OS: Windows 10

Re: Adding a canvas to an old XML dialog?

Postby Gijs » Mon Jul 29, 2013 4:13 pm

Resizing also works fine now! I'm almost done with the fuel EICAS, hope to commit it to git this week. Thanks!

Last feature request on this matter: a function to fix the aspect ratio of the dialog. Right now I can stretch the EICAS into very long rectangles :-)
Airports: EHAM, EHLE, KSFO
Aircraft: 747-400
User avatar
Gijs
Moderator
 
Posts: 9544
Joined: Tue Jul 03, 2007 3:55 pm
Location: Delft, the Netherlands
Callsign: PH-GYS
Version: Git
OS: Windows 10

Re: Adding a canvas to an old XML dialog?

Postby Hooray » Mon Jul 29, 2013 4:44 pm

maybe this could be also just an element/group flag "maintain-aspect-ratio" using another property to specify the aspect ratio?
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

Previous

Return to Canvas

Who is online

Users browsing this forum: No registered users and 0 guests