20,741
edits
Howto:Creating a Canvas GUI dialog file: Difference between revisions
Jump to navigation
Jump to search
Howto:Creating a Canvas GUI dialog file (view source)
Revision as of 14:45, 11 October 2015
, 11 October 2015→Creating MFD Dialogs
| Line 84: | Line 84: | ||
Dps-keypad-dialog-using-canvas.png|DPS keypad for the space shuttle using a procedurally-generated Canvas dialog | Dps-keypad-dialog-using-canvas.png|DPS keypad for the space shuttle using a procedurally-generated Canvas dialog | ||
Full-dps-space-shuttle-keypad.png|Screen shot showing the DPS keypad on the space shuttle using Nasal/Canvas | Full-dps-space-shuttle-keypad.png|Screen shot showing the DPS keypad on the space shuttle using Nasal/Canvas | ||
Canvas-MFD-Dialog-with-embedded-Canvas.png|Screen shot with a Canvas MFD dialog including an embedded Canvas (showing a splash screen here, which could just as well reference another Canvas/MFD) | |||
</gallery> | </gallery> | ||
<syntaxhighlight lang="nasal">## | <syntaxhighlight lang="nasal">## | ||
# helper function for registering events (callbacks) with buttons (wrapped in a closure) | # helper function for registering events (callbacks) with buttons (wrapped in a closure) | ||
var createButton = func(root, label, clickAction) { | var createButton = func(root, label, clickAction) { | ||
var button = canvas.gui.widgets.Button.new(root, canvas.style, {} ) | var button = canvas.gui.widgets.Button.new(root, canvas.style, {} ) | ||
| Line 94: | Line 95: | ||
return button; | return button; | ||
} | } | ||
var (width,height) = ( | var (width,height) = (800,250); | ||
var title = 'DPS Keypad'; | var title = 'DPS Keypad'; | ||
# create a new window, dimensions are WIDTH x HEIGHT, using the dialog decoration (i.e. titlebar) | # create a new window, dimensions are WIDTH x HEIGHT, using the dialog decoration (i.e. titlebar) | ||
var window = canvas.Window.new([width,height],"dialog").set('title',title); | var window = canvas.Window.new([width,height],"dialog").set('title',title); | ||
# adding a canvas to the new window and setting up background colors/transparency | # adding a canvas to the new window and setting up background colors/transparency | ||
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color")); | var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color")); | ||
# creating the top-level/root group which will contain all other elements/group | # creating the top-level/root group which will contain all other elements/group | ||
var root = myCanvas.createGroup(); | var root = myCanvas.createGroup(); | ||
# create a new layout for the keypad: | # create a new layout for the keypad: | ||
var myHBox = canvas.HBoxLayout.new(); | var myHBox = canvas.HBoxLayout.new(); | ||
# assign the layout to the Canvas | # assign the layout to the Canvas | ||
myCanvas.setLayout(myHBox); | myCanvas.setLayout(myHBox); | ||
var keypad = canvas.HBoxLayout.new(); | |||
myHBox.addItem(keypad); | |||
var mfd = canvas.gui.widgets.Label.new(root, canvas.style, {} ) | |||
# this could also be another Canvas: http://wiki.flightgear.org/Howto:Using_raster_images_and_nested_canvases#Example:_Loading_a_Canvas_dynamically | |||
.setImage("Textures/Splash1.png"); | |||
myHBox.addItem(mfd); | |||
# list of all buttons we want to set up | # list of all buttons we want to set up | ||
var Buttons=[ | var Buttons=[ | ||
[ | [ | ||
| Line 125: | Line 134: | ||
'RSM', | 'RSM', | ||
], | ], | ||
[ | [ | ||
'SYS', | 'SYS', | ||
| Line 136: | Line 145: | ||
'CLEAR', | 'CLEAR', | ||
], | ], | ||
[ | [ | ||
'MSG', | 'MSG', | ||
| Line 147: | Line 156: | ||
'.', | '.', | ||
], | ], | ||
[ | [ | ||
'ACK', | 'ACK', | ||
| Line 159: | Line 168: | ||
], | ], | ||
]; | ]; | ||
## button setup using 4 vertical boxes added to a single hbox | ## button setup using 4 vertical boxes added to a single hbox | ||
foreach(var col; Buttons) { | foreach(var col; Buttons) { | ||
# set up a new vertical box | # set up a new vertical box | ||
var vbox = canvas.VBoxLayout.new(); | var vbox = canvas.VBoxLayout.new(); | ||
# add it to the top-level hbox | # add it to the top-level hbox | ||
keypad.addItem(vbox); | |||
foreach(var btn; col) { | foreach(var btn; col) { | ||
(func() { | (func() { | ||
var action=btn; | var action=btn; | ||
| Line 177: | Line 186: | ||
vbox.addItem(button); | vbox.addItem(button); | ||
})(); # invoke anonymous function (closure) | })(); # invoke anonymous function (closure) | ||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||