13,208
edits
Evandenberg (talk | contribs) m (some additions and clarifications) |
m (cat: Canvas GUI) |
||
(4 intermediate revisions by one other user not shown) | |||
Line 2: | Line 2: | ||
At the moment it has 1: | At the moment it has 1: | ||
* [[Extra EA-500/failure dialog|Extra500 Failure Dialog]] | * [[Extra EA-500/failure dialog|Extra500 Failure Dialog]] | ||
[[File:Extra500-Failuredialog-fuel.png|500px|right|Extra 500 - failure dialog - Fuel]] | |||
== Extra500 failure dialog == | == Extra500 failure dialog == | ||
Line 19: | Line 21: | ||
# Initiate the listeners to make certain elements interactive | # Initiate the listeners to make certain elements interactive | ||
* Making the listeners and linking them to canvas/.svg elements (howto make clicking on it make it do something) | * Making the listeners and linking them to canvas/.svg elements (howto make clicking on it make it do something) | ||
=== Namespace and Menu entry === | === Namespace and Menu entry === | ||
The dialog is set-up like a normal nasal namespace in the -set file: | The dialog is set-up like a normal nasal namespace in the -set file: | ||
<syntaxhighlight lang="xml"> | |||
<nasal> | |||
<Dialogs> | <Dialogs> | ||
<file>Aircraft/extra500/Dialogs/failuredialog.nas</file> | <file>Aircraft/extra500/Dialogs/failuredialog.nas</file> | ||
</Dialogs> | </Dialogs> | ||
</nasal> | |||
</syntaxhighlight> | |||
And called (opened) though a menu entry in /Dialogs/extra500-menu.xml just like any other classical menu entry. | And called (opened) though a menu entry in /Dialogs/extra500-menu.xml just like any other classical menu entry. | ||
<syntaxhighlight lang="xml"> | |||
<item> | |||
<name>Failure-dialog</name> | <name>Failure-dialog</name> | ||
<label>Failure Dialog</label> | <label>Failure Dialog</label> | ||
Line 39: | Line 43: | ||
]]></script> | ]]></script> | ||
</binding> | </binding> | ||
</item> | |||
</syntaxhighlight> | |||
This means there needs to be a loaded Class called "Failuredialog" in the namespace "Dialogs" with an internal function called "openDialog". | This means there needs to be a loaded Class called "Failuredialog" in the namespace "Dialogs" with an internal function called "openDialog". | ||
Line 62: | Line 67: | ||
With the last line of code above, we invoke the following: | With the last line of code above, we invoke the following: | ||
<syntaxhighlight lang="javascript"> | |||
new : func(){ | |||
var m = {parents:[FailureClass]}; | var m = {parents:[FailureClass]}; | ||
m._title = 'Extra500 Failure Dialog'; | m._title = 'Extra500 Failure Dialog'; | ||
Line 70: | Line 76: | ||
return m; | return m; | ||
}, | }, | ||
</syntaxhighlight> | |||
So we make the Class, set a title, make a canvas and even set a timer. | So we make the Class, set a title, make a canvas and even set a timer. | ||
Line 157: | Line 164: | ||
The structure of the dialog is pretty complicated, but is all just logical nasal stuff and has nothing to do with the canvas - nasal interaction. | The structure of the dialog is pretty complicated, but is all just logical nasal stuff and has nothing to do with the canvas - nasal interaction. | ||
In principle, all pages are parsed separately so they can be turned on and off easily. In general, when a tab is pressed, all pages are hidden (except for the menu) and the proper page shown. | In principle, all pages are parsed separately so they can be turned on and off easily. In general, when a tab is pressed, all pages are hidden (except for the menu) and the proper page shown. | ||
<syntaxhighlight lang="javascript"> | |||
_onGearClick : func() { | |||
me._menuReset(); | me._menuReset(); | ||
me._gear.setColorFill(COLORfd["menuse"]); | me._gear.setColorFill(COLORfd["menuse"]); | ||
Line 167: | Line 175: | ||
me._gearButtons_update(); | me._gearButtons_update(); | ||
}, | }, | ||
</syntaxhighlight> | |||
This happens when the GEAR tab in the menu is pressed. The menu is re-setted and then the gear tab is changed color to indicate it is selected. | This happens when the GEAR tab in the menu is pressed. The menu is re-setted and then the gear tab is changed color to indicate it is selected. | ||
All the other pages are hidden, the gear page is show and finally all gear-buttons are updated. The status of the buttons depends on fg-properties. They have no listeners, but are only updated when the page is show. This is a bit easier and saves a lot of listeners. The disadvantage is that the buttons (they change color when a pressed and a failure is initiated) are not updated automatically. Maybe not ideal for a 'front end'... | All the other pages are hidden, the gear page is show and finally all gear-buttons are updated. The status of the buttons depends on fg-properties. They have no listeners, but are only updated when the page is show. This is a bit easier and saves a lot of listeners. The disadvantage is that the buttons (they change color when a pressed and a failure is initiated) are not updated automatically. Maybe not ideal for a 'front end'... | ||
[[Category:Canvas GUI]] |