20,741
edits
Howto:Creating a Canvas GUI dialog file: Difference between revisions
Jump to navigation
Jump to search
m
Howto:Creating a Canvas GUI dialog file (view source)
Revision as of 12:55, 11 October 2015
, 11 October 2015→Creating MFD dialogs: add example: space shuttle DPS dialog (procedurally created using Canvas)
m (confirmed, the Note template is interacting with the sidebar ...) |
m (→Creating MFD dialogs: add example: space shuttle DPS dialog (procedurally created using Canvas)) |
||
| Line 78: | Line 78: | ||
We're also trying to make sure that Canvas Widgets can be easily used not just by GUI dialogs but also by Canvas-based instruments/MFDs - without any code duplication or Copy&Paste being required. | We're also trying to make sure that Canvas Widgets can be easily used not just by GUI dialogs but also by Canvas-based instruments/MFDs - without any code duplication or Copy&Paste being required. | ||
== Creating MFD Dialogs == | |||
[[File:Dps-keypad-dialog-using-canvas.png|thumb|DPS keypad for the space shuttle using a procedurally-generated Canvas dialog]] | |||
<syntaxhighlight lang="nasal"> | |||
## | |||
# helper function for registering events (callbacks) with buttons (wrapped in a closure) | |||
var createButton = func(root, label, clickAction) { | |||
var button = canvas.gui.widgets.Button.new(root, canvas.style, {} ) | |||
.setText(label); | |||
#.setFixedSize(150, 32); | |||
button.listen("clicked", clickAction ); | |||
return button; | |||
} | |||
var (width,height) = (240,480); | |||
var title = 'DPS Keypad'; | |||
# 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); | |||
# adding a canvas to the new window and setting up background colors/transparency | |||
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color")); | |||
# creating the top-level/root group which will contain all other elements/group | |||
var root = myCanvas.createGroup(); | |||
# create a new layout | |||
var myHBox = canvas.HBoxLayout.new(); | |||
# assign the layout to the Canvas | |||
myCanvas.setLayout(myHBox); | |||
# list of all buttons we want to set up | |||
var Buttons=[ | |||
[ | |||
'FAULT', | |||
'GPC', | |||
'I/O RST', | |||
'ITEM', | |||
'EXEC', | |||
'OPS', | |||
'SPEC', | |||
'RSM', | |||
], | |||
[ | |||
'SYS', | |||
'A', | |||
'D', | |||
'1', | |||
'4', | |||
'7', | |||
'-', | |||
'CLEAR', | |||
], | |||
]; | |||
## button setup | |||
foreach(var col; Buttons) { | |||
# set up a new vertical box | |||
var vbox = canvas.VBoxLayout.new(); | |||
# add it to the top-level hbox | |||
myHBox.addItem(vbox); | |||
foreach(var btn; col) { | |||
print("Setting up button:", btn); | |||
var button=createButton(root:root, label: btn, clickAction:func {print("button clicked:");}); | |||
# add the button to the vbox | |||
vbox.addItem(button); | |||
} | |||
} | |||
</syntaxhiglight> | |||
== Using Layouts == | == Using Layouts == | ||
{{Note|This section still needs to be written (volunteers invivted to help!)-In the meantime, please refer to $FG_ROOT/Nasal/canvas/gui/dialogs/AircraftCenter.nas}} | {{Note|This section still needs to be written (volunteers invivted to help!)-In the meantime, please refer to $FG_ROOT/Nasal/canvas/gui/dialogs/AircraftCenter.nas}} | ||