Canvas event handling: Difference between revisions

Jump to navigation Jump to search

Canvas event handling (view source)

Revision as of 09:42, 5 August 2014

135 bytes removed ,  5 August 2014
Example cleanup/formatting.
mNo edit summary
(Example cleanup/formatting.)
Line 149: Line 149:


= Example Code =
= Example Code =
For the latest examples, please refer to [https://gitorious.org/~tomprogs/fg/toms-fgdata/commits/canvas-gui-demo Tom's canvas-gui-demo branch on gitorious]. This is also where you can find the following code in $FG_ROOT/Nasal/canvas/gui.nas (note that this example makes use of advanced Nasal concepts, such as anonymous functions, method chaining and lots of embedded/inline code):
(Note that this example makes use of advanced Nasal concepts, such as anonymous functions, method chaining and lots of embedded/inline code):
<syntaxhighlight lang="nasal">
<syntaxhighlight lang="nasal">
# Canvas GUI demo
# Canvas GUI demo
Line 155: Line 155:
#  Shows an icon in the top-right corner which upon click opens a simple window
#  Shows an icon in the top-right corner which upon click opens a simple window
#
#
  var dlg = canvas.Window.new([32,32]);
 
  dlg.setInt("tf/t[1]", 4)
var dlg = canvas.Window.new([32,32]);
    .setInt("right", 4);
dlg.setInt("tf/t[1]", 4)
  .setInt("right", 4);
var my_canvas = dlg.createCanvas()
                  .set("background", "rgba(0,0,0,0)");
var root = my_canvas.createGroup();
canvas.parsesvg(root, "gui/dialogs/images/icon-aircraft.svg");
 
my_canvas.addEventListener("click", func
{
  var dlg = canvas.Window.new([400,300], "dialog");
   var my_canvas = dlg.createCanvas()
   var my_canvas = dlg.createCanvas()
                     .setColorBackground(0,0,0,0);
                     .set("background", "#f2f1f0");
   var root = my_canvas.createGroup();
   var root = my_canvas.createGroup();
   canvas.parsesvg(root, "gui/dialogs/images/icon-aircraft.svg");
   root.addEventListener("click", func(e) {
 
     printf( "click: screen(%.1f|%.1f) client(%.1f|%.1f) click count = %d",
  my_canvas.addEventListener("click", func
            e.screenX, e.screenY,
  {
            e.clientX, e.clientY,
    var dlg = canvas.Window.new([400,300], "dialog");
            e.click_count );
    var my_canvas = dlg.createCanvas()
  });
                      .set("background", "#f2f1f0");
  root.addEventListener("dblclick", func(e) {
    var root = my_canvas.createGroup();
    printf( "dblclick: screen(%.1f|%.1f) client(%.1f|%.1f)",
     root.addEventListener("click", func(e) { printf("click: screen(%.1f|%.1f) client(%.1f|%.1f) click count = %d", e.screenX, e.screenY, e.clientX, e.clientY, e.click_count); });
            e.screenX, e.screenY,
    root.addEventListener("dblclick", func(e) { printf("dblclick: screen(%.1f|%.1f) client(%.1f|%.1f)", e.screenX, e.screenY, e.clientX, e.clientY); });
            e.clientX, e.clientY );
    root.addEventListener("wheel", func(e) { printf("wheel: screen(%.1f|%.1f) client(%.1f|%.1f) %.1f", e.screenX, e.screenY, e.clientX, e.clientY, e.deltaY); });
  });
    var text =
  root.addEventListener("wheel", func(e) {
      root.createChild("text")
    printf( "wheel: screen(%.1f|%.1f) client(%.1f|%.1f) delta = %.1f",
          .setText("This could be used for building an 'Aircraft Help' dialog.\nYou can also #use it to play around with the new Canvas system :). β")
            e.screenX, e.screenY,
          .setTranslation(10, 30)
            e.clientX, e.clientY,
          .setAlignment("left-top")
            e.deltaY );
          .setFontSize(14)
          .setFont("LiberationFonts/LiberationSans-Regular.ttf")
          .set("max-width", 380)
          .setColor(0,0,0);
    var text_move =
      root.createChild("text")
          .setText("Mouse moved over text...")
          .set("character-size", 15)
          .set("font", "LiberationFonts/LiberationSans-Bold.ttf")
          .set("alignment", "left-center")
          .setTranslation(20, 200)
          .set("fill", "#ff0000")
          .hide();
    var visible_count = 0;
    text.addEventListener("mouseover", func text_move.show());
    text.addEventListener("mouseout", func text_move.hide());
   });
   });
  var text =
    root.createChild("text")
        .setText( "This could be used for building an 'Aircraft Help' dialog.\n"
                ~ "You can also #use it to play around with the new Canvas system :). β" )
        .setTranslation(10, 30)
        .set("alignment", "left-top")
        .set("character-size", 14)
        .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
        .set("max-width", 380)
        .set("fill", "black");
  var text_move =
    root.createChild("text")
        .setText("Mouse moved over text...")
        .setTranslation(20, 200)
        .set("alignment", "left-center")
        .set("character-size", 15)
        .set("font", "LiberationFonts/LiberationSans-Bold.ttf")
        .set("fill", "#ff0000")
        .hide();
  var visible_count = 0;
  text.addEventListener("mouseover", func text_move.show());
  text.addEventListener("mouseout", func text_move.hide());
});
</syntaxhighlight>
</syntaxhighlight>


<references/>
<references/>
TheTom
166

edits

Retrieved from "https://wiki.flightgear.org/Special:MobileDiff/74758"

Navigation menu