Board index FlightGear Development Canvas

ATR72 FMC Development using Canvas

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.

ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 2:53 am

Hey, I've gone through the main README file but that was all about managing the canvas with properties. I'm more interested in working with the canvas subsystem using nasal. So here's the basic thing I DO know which I found in the wiki.

Nasal/FMC/fmc-screen.nas
Code: Select all
var fmcScreen = canvas.new({
  "name": "fmcScreen",  # The name is optional but allow for easier identification
  "size": [1024, 1024], # Size of the underlying texture (should be a power of 2, required)
  "view": [752, 1024],  # Virtual resolution (Defines the coordinate system of the canvas
                        # which will be stretched the size of the texture, required)
  "mipmapping": 1       # Enable mipmapping (optional)
});

fmcScreen.addPlacement({"node": "fmcScreen"});


Questions:
1. What exactly is Placement here? Or in other words, what does addPlacement do?
2. How do I define text positions and place them on the canvas?
3. How do I load this canvas onto an instrument? Is it like a 2D panel or something?

This may not be important but here's the FMC Display Text Hash...
Nasal/FMC/fmc-main.nas
Code: Select all
var fmc = "/instrumentation/fmc/";

# Define General FMC Display Variables Class (contains value and color)

var fmcDisp = {
   value: "",
   color: "white", # white, green, magenta, yellow, blue
   new: func(arg1, arg2) {
   
      var t = {parents:[fmcDisp]};
      
      t.value = arg1;
      t.color = arg2;
      
      return t;
   
   }
};

# Initialize ATR Specific FMC Display

var fmcDispLayout = {

   title: fmcDisp.new("", "white"),
   
   label: [fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white")],
   
   value: [fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white"), fmcDisp.new("", "white")],
   
   # FMC Display Functions
   
   setTitle: func(value, color) {
   
      me.title.value = value;
      me.title.color = color;
   
   },
   
   setLabel: func(n, value, color) {
   
      me.label[n].value = value;
      me.label[n].color = color;
      
   },
   
   setValue: func(n, value, color) {
   
      me.value[n].value = value;
      me.value[n].color = color;
      
   },
   
   clearPage: func() {
   
      me.title.value = "";
      me.title.color = "white";
      
      for (var n=0; n<18; n+=1) {
      
         me.label[n].value = "";
         me.label[n].color = "white";
         me.value[n].value = "";
         me.value[n].color = "white";
      
      }
   
   }

};

# Function to Update Display from Nasal Hash into the property tree for the CDU

var updateDispProps = func() {

   setprop(fmc~ "disp/title/value", fmcDispLayout.title.value);
   setprop(fmc~ "disp/title/color", fmcDispLayout.title.color);
   
   for(var n = 0; n < 18; n+=1) {
   
      setprop(fmc~ "disp/label[" ~ n ~ "]/value", fmcDispLayout.label[n].value);
      setprop(fmc~ "disp/label[" ~ n ~ "]/color", fmcDispLayout.label[n].color);
      
      setprop(fmc~ "disp/value[" ~ n ~ "]/value", fmcDispLayout.value[n].value);
      setprop(fmc~ "disp/value[" ~ n ~ "]/color", fmcDispLayout.value[n].color);
   
   }
   
}

# ATR FMC Display Test

var runDispTest = func() {

   fmcDispLayout.setTitle("FMC Display Test", "white");
   
   for (var n = 0; n < 18; n+=1) {
   
      fmcDispLayout.setLabel(n, "Label No. " ~ n, "blue");
      fmcDispLayout.setValue(n, "Value No. " ~ n, "blue");
   
   }

}

# Clear Input Funciton

var clearInput = func() {

   setprop(fmc~ "input", "");

};

# Basic Layout for an FMC Page- you have the name (used to go there), function to initialize display and functions for each button press.

var fmcPage = {

   pageName: "",
   initDisplay: func() {
   
      fmcDispLayout.clearPage();
   
   },
   l1: func() { },
   l2: func() { },
   l3: func() { },
   l4: func() { },
   l5: func() { },
   l6: func() { },
   r1: func() { },
   r2: func() { },
   r3: func() { },
   r4: func() { },
   r5: func() { },
   r6: func() { },
   exec: func() { },
   new: func(name, init, l1, l2, l3, l4, l5, l6, r1, r2, r3, r4, r5, r6, exec) {
   
      var t = {parents:[supplier]};
      
      t.pageName = name;
      t.initDisplay = init;
      t.l1 = l1;
      t.l2 = l2;
      t.l3 = l3;
      t.l4 = l4;
      t.l5 = l5;
      t.l6 = l6;
      t.r1 = r1;
      t.r2 = r2;
      t.r3 = r3;
      t.r4 = r4;
      t.r5 = r5;
      t.r6 = r6;
      t.exec = exec;
      
      return t;
   
   }

};


Now the thing is, I wrote this before I decided to go with canvas, so it still has a function to update the nasal variables to properties, but I guess that's not going to be important anymore.

But now, the main thing is how I can put data of fmcDisp class into the screen? :)

Image
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby TheTom » Mon Jul 30, 2012 9:08 am

omega95 wrote in Mon Jul 30, 2012 2:53 am:1. What exactly is Placement here? Or in other words, what does addPlacement do?

A placement is something the canvas will be placed onto. In FlightGear 2.8 this can only be an object (AC3D object) in the aircraft model. It is important that the targeted object is texture mapped and has a valid texture assigned (event if its just a black 1x1 sized texture). With addPlacement you tell the Canvas system to replace the texture of your object with the Canvas texture. To identify the object you can pass multiple of the following values in a hash:
  • node: Match the name of the object
  • texture: Match the name of the assigned texture (only basename, no directory)
  • parent: Match every object which has a parent object with the given name (Normally combined with second matching criterion if one would not be unique)

In your case there should be an object called fmcScreen in the .ac file which would optimally just consist of the black quad representing the display.

omega95 wrote in Mon Jul 30, 2012 2:53 am:2. How do I define text positions and place them on the canvas?

At first you need a group as shown in the wiki. Inside this group you can create every type of supported elements by calling Group::createChild(type [, name]). Afterwards you can set various values to influence the appearance of the element (all methods should be chainable):

Code: Select all
var group = my_canvas.createGroup();
var text = group.createChild("text", "optional-id-for element")
                .setTranslation(10, 20)      # The origin is in the top left corner
                .setAlignment("left-center") # All values from osgText are supported
                .setFont("LiberationFonts/LiberationSans-Regular.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
                .setFontSize(14, 1.2)        # Set fontsize and optionally character aspect ratio
                .setColor(1,0,0)             # Text color
                .setText("This is a text element");
# ...
text.hide();
# ...
text.setText("Hello!").show();


omega95 wrote in Mon Jul 30, 2012 2:53 am:3. How do I load this canvas onto an instrument? Is it like a 2D panel or something?

I think the answer to 1. should also answer this question. No need for getting any coordinates any more, just specify eg. the object name and get a perfectly placed display :)

Using color names is currently not supported but you can also store them in vectors:
Code: Select all
var red = [1,0,0];
var gren = [0,1,0];

text1.setColor(red);
text2.setColor(green);


For more usage examples see also:
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 9:30 am

omega95 wrote in Mon Jul 30, 2012 2:53 am:3. How do I load this canvas onto an instrument? Is it like a 2D panel or something?

http://wiki.flightgear.org/Howto:Add_a_ ... r_aircraft

Now the thing is, I wrote this before I decided to go with canvas, so it still has a function to update the nasal variables to properties, but I guess that's not going to be important anymore.

But now, the main thing is how I can put data of fmcDisp class into the screen?

Please see the Howto in the wiki,it's all explained there, including source code - overall, your code will become much simpler and shorter once using the canvas.
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 11:29 am

Alright, I THINK I got the basic canvas screen nasal file, what do you think?
Code: Select all
var fmcScreen = canvas.new({
  "name": "fmcScreen",  # The name is optional but allow for easier identification
  "size": [1024, 1024], # Size of the underlying texture (should be a power of 2, required)
  "view": [752, 1024],  # Virtual resolution (Defines the coordinate system of the canvas
                        # which will be stretched the size of the texture, required)
  "mipmapping": 1       # Enable mipmapping (optional)
});

fmcScreen.addPlacement({"node": "fmcScreen"});

var group = fmcScreen.createGroup();

var title = group.createChild("text")
                .setTranslation(512, 90)      # The origin is in the top left corner
                .setAlignment("center-center") # All values from osgText are supported
                .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
                .setFontSize(90, 1.2)        # Set fontsize and optionally character aspect ratio
                .setColor(1,1,1)             # Text color
                .setText("Title Test");

var labels = [group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text")];

var values = [group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text")];

# Left Labels and Values

for (var n=0; n<6; n+=1) {

   labels[n].setTranslation(30, 150 + (135 * n))      # The origin is in the top left corner
         .setAlignment("left-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(40, 1)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Label L"~n);
         
   values[n].setTranslation(50, 207 + (135 * n))      # The origin is in the top left corner
         .setAlignment("left-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(80, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Value L"~n);

}

# Center Labels and Values

for (var n=6; n<12; n+=1) {

   labels[n].setTranslation(512, 150 + (135 * (n-6)))     # The origin is in the top left corner
         .setAlignment("left-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(40, 1)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Label C"~n);
         
   values[n].setTranslation(512, 207 + (135 * (n-6)))      # The origin is in the top left corner
         .setAlignment("center-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(80, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Value C"~n);

}

# Right Labels and Values

for (var n=12; n<18; n+=1) {

   labels[n].setTranslation(994, 150 + (135 * (n-12)))     # The origin is in the top left corner
         .setAlignment("right-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(40, 1)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Label R"~n);
         
   values[n].setTranslation(974, 207 + (135 * (n-12)))      # The origin is in the top left corner
         .setAlignment("right-center") # All values from osgText are supported
         .setFont("LiberationFonts/LiberationMono-Bold.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(80, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("Value R"~n);

}
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 11:55 am

To be honest, that's more advanced/complex than I expected ... I am still trying to wrap my head around your code, it may help to tell us exactly what you are trying to do, so that I can check if the code's doing what you want. Did you run it already, is it working for you?

Also, you don't need to do this:
Code: Select all
var labels = [group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text")];

var values = [group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text"), group.createChild("text")];


You can just as well do something like:
Code: Select all
var labels =[]; var values = [];
var createTextNode = func(g) g.createChild("text");

And then use a foreach loop for your vector of labels/values and just append the new nodes:
Code: Select all
var max_nodes=18;
for(var i=0;i<=max_nodes;i+=1) {
  append(labels, createTextNode(group) );
  append(values, createTextNode(group) );
}
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 12:07 pm

Hooray wrote in Mon Jul 30, 2012 11:55 am:To be honest, that's more advanced/complex than I expected ... I am still trying to wrap my head around your code, it may help to tell us exactly what you are trying to do, so that I can check if the code's doing what you want. Did you run it already, is it working for you?


Alright, so here's what I'm trying to do...

In my FMC Display page, I have a title, 18 labels (L1->L6, C1->C6 and R1->R6) and 18 values (the same way), so I was thinking it'd be easier to manage if all the labels were in a vector and all the values in another. That way, I can create a page template using a hash (say, with page title, display init function and button press functions) and constructing multiple pages with Display inits (putting in all label/value data as vectors) would be possible.

Hooray wrote in Mon Jul 30, 2012 11:55 am:You can just as well do something like:

Code: Select all
var labels =[]; var values = [];
var createTextNode = func(g) g.createChild("text");


And then use a foreach loop for your vector of labels/values and just append the new nodes:

Code: Select all
var max_nodes=18;
for(var i=0;i<=max_nodes;i+=1) {
  append(labels, createTextNode(group) );
  append(values, createTextNode(group) );
}



Wow, that's awesome! I'll try that...

Btw, I just tested it, and it works.. I need to change the font though. :D

Thanks a lot Tom and Hooray, this system is AMAZING! I'll get further into this while modeling new MFDs for the ATRs and my A3XXs. :mrgreen:

As for the Airbus mCDU's, I don't think it's necessary to port it to canvas props as it works fine with all the functionality needed for now (as it is, it's only text, easily achieved with OSGText), but then using this for the ATR72 is a great way to be introduced with this system! :)

Btw, I scraped the above fmc-main.nas file, as a lot of that functionality is already there in canvas!
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 12:21 pm

lol, the really funny part is that you actually explained to me exactly the part that I fully understood and for which I in fact provided a shorter Nasal replacement ;-)

BTW: You are now officially the first adopter of the system (besides Tom obviously), so let the feedback comin' ! We need it for improving the Nasal interface. Also, please make sure to take a look at the MCDU article in the wiki, it should cover a lot of things that you'll find useful: http://wiki.flightgear.org/Canvas_MCDU_Framework

And we could clearly adapt it and make it more generic, to be less "CDU focused".
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 12:37 pm

Hooray wrote in Mon Jul 30, 2012 12:21 pm:lol, the really funny part is that you actually explained to me exactly the part that I fully understood and for which I in fact provided a shorter Nasal replacement ;-)

BTW: You are now officially the first adopter of the system (besides Tom obviously), so let the feedback comin' ! We need it for improving the Nasal interface. Also, please make sure to take a look at the MCDU article in the wiki, it should cover a lot of things that you'll find useful: http://wiki.flightgear.org/Canvas_MCDU_Framework

And we could clearly adapt it and make it more generic, to be less "CDU focused".


Yea, I used a couple of ideas from that framework but not that itself. Anyway, I didn't see a nasal function to set the Alpha value, is that possible? I'll just be using Alpha to change the lightness of a color, but other than messign with the prop directly, a nasal function'd be cool. Probably have 4 arguments for setColor, the fourth being alpha. :)

And I'll be working on a new MFD+ND for the ATR and A3xx as I said, so that way, we could look further into the actual drawing capabilities of this new subsystem :mrgreen:

Anyway, here's what I'm exactly trying to do... After the basic Canvas screen is set up, (as it already is) I'll be creating a page template (basically a nasal Hash) and then using a constructor to create multiple pages in a vector. I'll be defining these pages in different files to keep it clean though. The page definitions should have a display initialize(r) telling what goes where and also functions for each LSK press. Then, ActivePage will be another Hash which will be referred to by the xml files for button presses, for example Pressing LSK L4 will call the function fmc.ActivePage.l4(); and to make this work, when you switch pages, the constructed page hash (from the template) will be copied into ActivePage. So basically, the constructed page hashes will be like a database and activepage will read from them when required. Any ideas to make this more efficient? :mrgreen:
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 12:45 pm

You have already described how this can be implemented :-)
Basically, see api.nas: https://gitorious.org/~tomprogs/fg/toms ... nas#line29

There's a helper called: _setColorNodes

This checks the size of the vector and it already handles RGBA, too: https://gitorious.org/~tomprogs/fg/toms ... nas#line46

Which is also supported by the top-level setColor function: https://gitorious.org/~tomprogs/fg/toms ... as#line277

Did you check if it's working?
I can take a look at the C++ code, to check if it's implemented - but the Nasal layer is clearly prepared for RGBA already.

PS: Your proposed design sounds just fine, but you may want to read up on "state machines" (wikipedia) so that you know how these things can be efficiently implemented, without tons of code.
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 1:03 pm

fmc-screen.nas
Code: Select all
var fmcScreen = canvas.new({
  "name": "fmcScreen",  # The name is optional but allow for easier identification
  "size": [1024, 1024], # Size of the underlying texture (should be a power of 2, required)
  "view": [1024, 1024],  # Virtual resolution (Defines the coordinate system of the canvas
                        # which will be stretched the size of the texture, required)
  "mipmapping": 0       # Enable mipmapping (optional)
});

fmcScreen.addPlacement({"node": "fmcScreen"});

var group = fmcScreen.createGroup();

var title = group.createChild("text")
                .setTranslation(512, 90)      # The origin is in the top left corner
                .setAlignment("center-center") # All values from osgText are supported
                .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
                .setFontSize(60, 1.2)        # Set fontsize and optionally character aspect ratio
                .setColor(0,0.4,0.86,0.6)             # Text color
                .setText("TITLE TEST");

var labels = [];

var values = [];

var createTextNode = func(g) g.createChild("text");

for(var i=0; i<80; i+=1) {
  append(labels, createTextNode(group));
  append(values, createTextNode(group));
}

# Left Labels and Values

for (var n=0; n<6; n+=1) {

   labels[n].setTranslation(30, 150 + (135 * n))      # The origin is in the top left corner
         .setAlignment("left-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(36, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(0,0.4,0.86,0.6)             # Text color
         .setText("LABEL L"~(n+1));
         
   values[n].setTranslation(50, 207 + (135 * n))      # The origin is in the top left corner
         .setAlignment("left-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(60, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("VALUE L"~(n+1));

}

# Center Labels and Values

for (var n=6; n<12; n+=1) {

   labels[n].setTranslation(512, 150 + (135 * (n-6)))     # The origin is in the top left corner
         .setAlignment("center-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(36, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(0,0.4,0.86,0.6)             # Text color
         .setText("LABEL C"~(n-5));
         
   values[n].setTranslation(512, 207 + (135 * (n-6)))      # The origin is in the top left corner
         .setAlignment("center-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(60, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("VALUE C"~(n-5));

}

# Right Labels and Values

for (var n=12; n<18; n+=1) {

   labels[n].setTranslation(994, 150 + (135 * (n-12)))     # The origin is in the top left corner
         .setAlignment("right-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(36, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(0,0.4,0.86,0.6)             # Text color
         .setText("LABEL R"~(n-11));
         
   values[n].setTranslation(974, 207 + (135 * (n-12)))      # The origin is in the top left corner
         .setAlignment("right-center") # All values from osgText are supported
         .setFont("helvetica_medium.txf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
         .setFontSize(60, 1.2)        # Set fontsize and optionally character aspect ratio
         .setColor(1,1,1)             # Text color
         .setText("VALUE R"~(n-11));

}



Aaand, I used Alpha too! Actually, looking into how the canvas subsystem works, it's exactly what I had in mind when we were discussing a 2D drawing API, drawing using C++ code into a texture and then load it on a model, but then I had no idea how to implement it. Looking at how Tom did an awesome job at that AND made it possible to load SVGs and the whole canvas onto a gui... well, WOW. :mrgreen:

Anyway, here's the FMC screen using the canvas system, note that the FMC Input is basic OSGText cuz the input is mainly XML based, I mean the buttons and stuff run xml functions to set the input, so I just left it at that for now. The rest uses canvas though. :D

Image

Btw, a lot of A320neo/A330 pilots complained that using the 3D mCDU model wasn't very comfortable, especially with the typing and stuff, and making a whole new 2D panel seemed tedious but now, using canvas, I was thinking we could just load the FMC screen (exactly as it is on the 3d model) onto a GUI with LSK buttons, page and those extra buttons and an input field where they can simply type the input. Would that be possible with canvas? :)

Ahh, just found a place where the bounding box would come in handy... In the DEP/ARR page where you select your SID and STAR, they have a runway filter and the selected runway has a filled bounding box. 8)
Last edited by omega95 on Mon Jul 30, 2012 1:10 pm, edited 1 time in total.
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby TheTom » Mon Jul 30, 2012 1:08 pm

/*edit: As you have already found out */ Using the alpha channel already works. As for most other functions it is possible to use either a variable number of arguments or different sized vectors:
Code: Select all
text.setColor(r,g,b);
text.setColor(r,g,b,a);
text.setColor([r,g,b]);
text.setColor([r,g,b,a]);

But I think we should add a separate function for setting alpha alone. Maybe could be useful. If you (or anyone else) miss something or find something not easily usable just ask :)
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: ATR72 FMC Development using Canvas

Postby omega95 » Mon Jul 30, 2012 1:14 pm

TheTom wrote in Mon Jul 30, 2012 1:08 pm:If you (or anyone else) miss something or find something not easily usable just ask :)


Wow, currently it has almost everything I need, I will still try programming the FMC and then the MFD and let you know if another feature'd be cool. Anyway, we can place a canvas on how many ever things we want, can't we? I mean, the same canvas on a 3d model and a gui (like I mentioned above) :)
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 1:27 pm

yes, that's definitely possible, aircraft textures, instruments, HUDs and GUIs are currently supported.
Currently, it's specific to GUI *widgets* - but future support will include pure canvas-driven GUI *windows*, so that even menubars and other non-dialog based widgets can be created.

In addition, we talked about also allowing the canvas textures to be placed in the scenery (runways, buildings etc).
Also, you could probably use the canvas system to implement an extremely powerful immatriculation system: http://wiki.flightgear.org/Immatriculation

In addition, the canvas system is being designed and developed such that a high degree of interoperability is kept in mind, so that it will definitely be possible to place instruments in dialogs, or even render dialgs in instruments.The latter will be important for very modern glass cockpits, like the A380 or the 787 have, as these use real widget-based GUIs. None of this was previously possible, and it would have been VERY complicated to implement such things in C++ space. Now, most of these things are possible in pure scripting space, which demonstrates the power of the core canvas system and the infrastructure it provides.


Overall, the canvas system is already extremely flexible and powerful, as is. And Tom has mentioned a number of very cool features.
Using the canvas system, it will even be possible to implement an instrument designer in Nasal, or even a whole cockpit panel editor.
You could just as well create a GUI widget editor in Nasal to create FlightGear GUI dialogs or even entirely new widgets.

All of this is made possible because the property tree is the sole interfacing mechanism, and because the canvas works such that it "everything is a canvas", it will even be possible to have nested cascades of canvases, so that you can use one canvas output as the input for another canvas, i.e. a true cascade with multiple "stages".

Once the canvas system has support for a new "image" element (non-vector based), it can also be used to reimplement the existing 2D panel system in scripting space.
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Re: ATR72 FMC Development using Canvas

Postby TheTom » Mon Jul 30, 2012 1:41 pm

omega95 wrote in Mon Jul 30, 2012 1:03 pm:Ahh, just found a place where the bounding box would come in handy... In the DEP/ARR page where you select your SID and STAR, they have a runway filter and the selected runway has a filled bounding box. 8)

Code: Select all
text.setDrawMode(canvas.Text.TEXT + canvas.Text.BOUNDINGBOX)
    .setPadding(2)
    .setColorFill(1,0,0);


omega95 wrote in Mon Jul 30, 2012 1:03 pm:I was thinking we could just load the FMC screen (exactly as it is on the 3d model) onto a GUI with LSK buttons, page and those extra buttons and an input field where they can simply type the input. Would that be possible with canvas? :)

Not in FlightGear 2.8 but probably with the next release. With the code from my branch it should already be possible. but the Nasal API is not yet prepared for it.
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: ATR72 FMC Development using Canvas

Postby Hooray » Mon Jul 30, 2012 2:06 pm

also, that would require that people actually stop using the all too common "free form" Nasal coding and actually implement certain interfaces, so that the backend code can be dynamically linked to certain frontends (GUI/instrument). Just think about a simple "range-nm" property to select the range of your VSD: When shown as an instrument, the property would need to be linked to a single cockpit hotspot/action, when shown as a GUI widget, we may want to link it to a GUI control (slider, button, textfield).

In addition, we would obviously want to be able to have multiple instances of an instrument (pilot/copilot screens), without having an effect on eachother - or multiple GUI windows with the same widgets shown, also without affecting eachother.

Thus, people will need to implement certain abstract interfaces, to ensure that the Nasal helpers know how to deal with such things.
Currently, Nasal coding in FG is often a huge mess, people just use timers and listeners without ever cleaning them up properly, these things must stop, so that the system can also be easily re-initialized, which means that it will be possible to develop canvas displays directly INSIDE FlightGear, without having to restart FG
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: 11437
Joined: Tue Mar 25, 2008 8:40 am

Next

Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest