Howto:Canvas dialog examples

945 bytes added, 09:11, 31 October 2017
some additions and clarifications
We will look at the code and try to explain what is does.
* Setting up the namespace "Dialogs"* Making a menu entry for the dialog* Setting up a class and making one instance of it* Setting up the Canvas* What to do when opening the dialog like:# Making the window (frame)# Creating a canvas group related to that window frame# Parsing (and displaying) .svg files# Linking elements of the .svg file to the canvas group (giving them a name so we can change them)# 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)   === Namespace and Menu entry ===The dialog is set-up like a normal nasal namespacein the -set file:
And called (opened) though a menu entry in /Dialogs/extra500-menu.xml just like any other classical menu entry.
This means there needs to be a loaded Class called failuredialog "Failuredialog" in the namespace "Dialogs" with an internal function called "openDialog".
=== File structure ===
var Failuredialog =;
Thus now we created Dialogs.Failuredialog and the internal functions as defined in the FailureClass Class. We are calling the internal function "new" at initialization.
All the internal functions can be called using Dialog.Failuredialog.<InternalFunctionName>
Other files used are the .svg files, which are located in the same folder. We will be looking at the MenuFaildialog.svg and GearFaildialog.svg files in this example.
=== openDialog ===
The next function hold all the things we want to do if we open the window.
We are making the (empty) window:
me._gfd =[750,512],"dialog");
In this example we will only look at the "menu" and the "gear" tab. Their names are: me._svg_menu and me._svg_gear respectively.
In the next section all the elements from the individual .svg files are linked, declared and named. ''This is only necessary for elements which actually do something. '' Like you want to make it interactive (click on it) or change its color or hide it etc. etc.
So for the menu we have the gear tab which has 3 elements: