Canvas snippets
Jump to navigation
Jump to search
This article is a stub. You can help the wiki by expanding it. |
Work in progress This article or section will be worked on in the upcoming hours or days. See history for the latest developments. |
The FlightGear forum has a subforum related to: Canvas |
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 | |
---|---|---|
# 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 | |
---|---|---|
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 | ||
---|---|---|---|
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 | ||
---|---|---|---|
# 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 | |
---|---|---|
# 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 | |
---|---|---|
# 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 | |
---|---|---|
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,); |