Canvas snippets

From FlightGear wiki
Revision as of 09:06, 22 September 2014 by TheTom (talk | contribs) ([canvas.]style is not a layout but the current global canvas gui style...)
Jump to navigation Jump to search
This article is a stub. You can help the wiki by expanding it.
WIP.png Work in progress
This article or section will be worked on in the upcoming hours or days.
See history for the latest developments.


Creating a standalone Canvas

Screenshot Code
please upload ...
# Create a standalone Canvas (not attached to any GUI dialog/aircraft etc) 
var myCanvas = canvas.new({
  "name": "Livery Test",   # The name is optional but allow for easier identification
  "size": [512, 512], # Size of the underlying texture (should be a power of 2, required) [Resolution]
  "view": [512, 512],  # Virtual resolution (Defines the coordinate system of the canvas [Dimensions]
                        # which will be stretched the size of the texture, required)
  "mipmapping": 1       # Enable mipmapping (optional)
});

# set background color
myCanvas.set("background", canvas.style.getColor("bg_color"));

# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();

# OPTIONAL: Create a Canvas dialog window to hold the canvas and show that it's working
# the Canvas is now standalone, i.e. continues to live once the dialog is closed!
var window = canvas.Window.new([512,512],"dialog");
window.setCanvas(myCanvas);

Creating Tooltips

Creating Popups

Creating a Canvas GUI Window

Screenshot Code
This is what the Nasal/Canvas snippet will look like once you pasted it into the Nasal Console and click "Execute".
Note  This example uses so called method chaining, if you're not familiar with the concept, please see: Method Chaining.
# create a new window, dimensions are 320 x 160, using the dialog decoration (i.e. titlebar)
var window = canvas.Window.new([320,160],"dialog");

# adding a canvas to the new window and setting up background colors/transparency
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color"));

# Using specific css colors would also be possible:
# myCanvas.set("background", "#ffaac0");

# creating the top-level/root group which will contain all other elements/group
var root = myCanvas.createGroup();

Adding Raster Images

Screenshot Code
Canvas snippet demonstrating how to load a raster image
var filename = "Textures/Splash1.png";
# create an image child for the texture
var child=root.createChild("image")
			           .setFile( filename )
				   .setTranslation(100,10)
                                   .setSize(130,130);

Adding OpenVG Paths

Adding Vector Images

Adding Text Elements

Screenshot Code
Screen shot showing the CanvasText example contributed by Necolatis
Note  This assumes that you already have a top-level root group set up, and named it root.
var myText = root.createChild("text")
      .setText("Hello world!")
      .setFontSize(20, 0.9)          # font size (in texels) and font aspect ratio
      .setColor(1,0,0,1)             # red, fully opaque
      .setAlignment("center-center") # how the text is aligned to where you place it
      .setTranslation(160, 80);     # where to place the text

Adding GUI Labels

Screenshot Code
Canvas demo: Layouts and Labels (by Necolatis)
Note  This assumes that you already have a top-level root group set up, and named it root, just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called myLayoutItem.
# create a new layout
var myLayout = canvas.HBoxLayout.new();
# assign it to the Canvas
myCanvas.setLayout(myLayout);

var label = canvas.gui.widgets.Label.new(root, canvas.style, {wordWrap: 0}); # wordwrap: 0 will disable wordwrapping, to enable it use 1 instead
label.setText("Hello World!");
myLayout.addItem(label);

var label2 = canvas.gui.widgets.Label.new(root, canvas.style, {wordWrap: 0}); # wordwrap: 0 will disable wordwrapping, to enable it use 1 instead
label2.setText("Hello FlightGear");
myLayout.addItem(label2);

Adding GUI Buttons (Layouts)

Screenshot Code
Canvas snippet: buttons and layouts (by Necolatis)
Canvas toggle button demo by Necolatis
Note  This assumes that you already have a top-level root group set up, and named it root, just change this variable if you want it to be rendered elsewhere. It also assumes you have a Layout item setup and called myLayoutItem.
# create a new layout
var myLayout = canvas.HBoxLayout.new();
# assign it to the Canvas
myCanvas.setLayout(myLayout);

# click button

var button = canvas.gui.widgets.Button.new(root, canvas.style, {})
	.setText("Click on me")
	.setFixedSize(75, 25);

button.listen("clicked", func {
        # add code here to react on click on button.
print("Button clicked !");
});

myLayout.addItem(button);
# create a new layout
var myLayout = canvas.HBoxLayout.new();
# assign it to the Canvas
myCanvas.setLayout(myLayout);

var button = canvas.gui.widgets.Button.new(root, canvas.style, {})
        .setText("Toggle me")
        .setCheckable(1) # this indicates that is should be a toggle button
        .setChecked(0) # depressed by default
        .setFixedSize(75, 25);

button.listen("toggled", func (e) {
        if( e.detail.checked ) {
            # add code here to react on button being depressed.
        } else {
            # add code here to react on button not being depressed.
        }
    });


myLayout.addItem(button);

Canvas Input Dialog

Screenshot Code
Canvas input dialog
# create a new InputDialog with a title, label, and a callback
canvas.InputDialog.getText("Input Dialog Title", "Please enter some text", func(btn,value) {
    if (value) gui.popupTip("You entered: "~value);
});


Using Layouts

Using Styling

Adding a HUD

Adding a 2D Instrument

Adding a 2D Panel

Adding a PFD

Using the SymbolCache

Adding a MapStructure map to a Canvas

Screenshot Code
MapStructure layers shown in a Canvas GUI dialog
Note  This assumes that you already have a top-level root group set up, and named it root, just change this variable if you want it to be rendered elsewhere. Equally, this snippet assumes that your canvas is named myCanvas.
var TestMap = root.createChild("map");
TestMap.setController("Aircraft position");
TestMap.setRange(25); 
 
TestMap.setTranslation(    myCanvas.get("view[0]")/2,
                           myCanvas.get("view[1]")/2
                        );
var r = func(name,vis=1,zindex=nil) return caller(0)[0];

foreach(var type; [r('APT'), r('VOR') ] )
 TestMap.addLayer(factory: canvas.SymbolLayer, type_arg: type.name, visible: type.vis, priority: type.zindex,);

Adding a NavDisplay

Adding a Multi-Function Display (MFD)