Board index FlightGear Development Canvas

Canvas Widgets

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 Widgets

Postby clm76 » Thu May 02, 2019 11:11 am

Hi,

With this code found here : http://wiki.flightgear.org/Canvas_Snippets (Adding GUI Buttons), how is it possible to change the button position ?
Code: Select all
var (width,height) = (300,500);
var tittle = "Test";
var window = canvas.Window.new([width,height], "dialog")
    .set("title", tittle);
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));
 var root = myCanvas.createGroup();

var myLayout = canvas.VBoxLayout.new();
myCanvas.setLayout(myLayout);

var button = canvas.gui.widgets.Button.new(root,canvas.style,{})
  .setText("click")
  .setFixedSize(75,25)
  .move(100,200);

  button.listen("clicked",func {
  print("button clicked");
});

myLayout.addItem(button);

The line ".move(100,200)" in the button function doesn't work.
clm76
 
Posts: 204
Joined: Tue Oct 30, 2012 9:18 pm
Location: France - LFOH
Callsign: F-GCLM
Version: 2020.4.0
OS: Linux Mint 20.2

Re: Canvas Widgets

Postby Thorsten » Thu May 02, 2019 12:35 pm

Actually, if you look into the Space Shuttle Nasa/canvas/ section, there's a far more powerful widget I've been using for buttons demonstrated - the image stack. You can give a 3d impression of buttons you press, you can give them any size and shape you like, you can change them,...

Basically you swap one image in the stack against another when you click and at the same time you can execute bindings dependent on the internal state.

(To take a stab at your original question, I'd try setTranslation() instead of move().
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Canvas Widgets

Postby Hooray » Sat May 04, 2019 12:54 pm

you are using canvas layouts in conjunction with absolute positioning - which won't work, because that's exactly what layouts are intended to help with: relative positioning, i.e. in a vbox/hbox or table layout - it basically works like the PUI layouting engine in FlightGear: once you begin using layouts, there is the equivalent of a "layout manager" handling absolute positioning on your behalf, by matching up all aligned widgets accordingly
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 Widgets

Postby clm76 » Sat May 04, 2019 6:01 pm

Thanks for your replay,

Thorsten wrote in Thu May 02, 2019 12:35 pm:To take a stab at your original question, I'd try setTranslation() instead of move().

It doesn't work either.

Hooray wrote in Sat May 04, 2019 12:54 pm:you are using canvas layouts in conjunction with absolute positioning - which won't work, because that's exactly what layouts are intended to help with: relative positioning, i.e. in a vbox/hbox or table layout - it basically works like the PUI layouting engine in FlightGear: once you begin using layouts, there is the equivalent of a "layout manager" handling absolute positioning on your behalf, by matching up all aligned widgets accordingly

Ok, I understand the context.

The problem is when I insert a border image over the canvas window. In my project, the buttons are used to choice a runway from all the runways of an airport and the first and the last buttons can be hidden by the border image when using layout and vbox.
Image

Now, I'm looking at the work done in the SpaceShuttle, keypad and image stack, to manage the buttons (thanks Thorsten). Maybe not buttons with image but perhaps buttons constructed with paths (createChild("path")), I'll see.
clm76
 
Posts: 204
Joined: Tue Oct 30, 2012 9:18 pm
Location: France - LFOH
Callsign: F-GCLM
Version: 2020.4.0
OS: Linux Mint 20.2

Re: Canvas Widgets

Postby Hooray » Sun May 05, 2019 9:47 am

as far as I know/remember, Thorsten came up with a very different approach that was prototyped as part of the shuttle project - so it was never using any of canvas-level tooling for widgets and layouts.


Regarding the screen shot, you could read up on clipping and views, or simply use a ScrollArea to deal with that.

There is no real problem here, you could just as well use an outer canvas for the "shell". If in doubt, look at the FG1000
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 Widgets

Postby Thorsten » Sun May 05, 2019 10:23 am

Another example of why it makes sense to not just ask 'How do I do that and that?' but describe the whole aim.

For that kind of problem (which isn't really a button but rather a dropdown list...) the image stack makes no sense whatsoever.

so it was never using any of canvas-level tooling for widgets and layouts.


Of course not - because the idea of the image stack is that you use a raster image for the layout in the first place.
Thorsten
 
Posts: 12490
Joined: Mon Nov 02, 2009 9:33 am

Re: Canvas Widgets

Postby clm76 » Mon May 06, 2019 7:26 am

Thanks for your comments. :)

It's done !
LFOH : Image ....... LFPG : Image ........ and the biggest airport KATL : Image

The buttons are created using "createChild("path")" and every button has an "addEventlistener" to display the maps related to the runway (approach, sid, star).
clm76
 
Posts: 204
Joined: Tue Oct 30, 2012 9:18 pm
Location: France - LFOH
Callsign: F-GCLM
Version: 2020.4.0
OS: Linux Mint 20.2


Return to Canvas

Who is online

Users browsing this forum: No registered users and 2 guests