Jump to: navigation, search

Howto:Canvas dialog examples

1,811 bytes added, 15:20, 23 October 2017
no edit summary
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 2 3 elements:
* A colored field (of which we will change the color): me._gear
* A text field (which just sits there and does nothing, so we won't declare it)
Which shows the menu page.
So we can show or hide whole pages (individual parsed .svg-s) with .show() and .hide() respectively.
We also initiate all listeners here:
me.setListeners(instance = me);
Which happens in the setListeners function.
=== Listeners: things are happening ===
This one looks a bit more complicated, but the principle is the same. The function me._onGeneralClick just gets some arguments passed to it.
You can replace "click" with "wheel" or "drag" in your listener for mouse-wheel or mouse-dragging operation.
For "wheel" and "drag" you will need to pass on the amount you want to change like so:
and the function that is called:
_onRandomDelayChange : func(e){
var delay = getprop("/extra500/failurescenarios/randommaxdelay") + e.deltaY;
delay = math.clamp(delay,0,60);
=== Operations ===
Which makes the gear page visible. The opposite is .hide()
=== Dialog design ===
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.
_onGearClick : func() {
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'...

Navigation menu