Howto:Canvas dialog examples: Difference between revisions

Jump to navigation Jump to search
no edit summary
mNo edit summary
No edit summary
Line 80: Line 80:
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.
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 elements:
So for the menu we have the gear tab which has 3 elements:
* A colored field (of which we will change the color): me._gear
* 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)
* A text field (which just sits there and does nothing, so we won't declare it)
Line 102: Line 102:


Which shows the menu page.
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 ===
=== Listeners: things are happening ===
Line 112: Line 117:


This one looks a bit more complicated, but the principle is the same. The function me._onGeneralClick just gets some arguments passed to it.
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:
me._fielddelay.addEventListener("wheel",func(e){me._onRandomDelayChange(e);});
and the function that is called:
_onRandomDelayChange : func(e){
  var delay = getprop("/extra500/failurescenarios/randommaxdelay") + e.deltaY;
  delay = math.clamp(delay,0,60);
  setprop("/extra500/failurescenarios/randommaxdelay",delay);
  me._welcome_update();
},


=== Operations ===
=== Operations ===
Line 122: Line 137:
Which makes the gear page visible. The opposite is .hide()
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.
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() {
  me._menuReset();
  me._gear.setColorFill(COLORfd["menuse"]);
  me._frame.setColorFill(COLORfd["menuse"]);
  me._hideAll();
  me._svg_lmenu.show();
  me._gear_active.show();
  me._svg_gear.show();
  me._gearButtons_update();
},
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'...
182

edits

Navigation menu