Canvas event handling: Difference between revisions

Jump to navigation Jump to search

Canvas event handling (view source)

Revision as of 11:44, 8 June 2013

1,305 bytes removed ,  8 June 2013
→‎Example Code: No need to manually create window decoration any more
mNo edit summary
(→‎Example Code: No need to manually create window decoration any more)
Line 96: Line 96:
= 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):
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):
<syntaxhighlight lang="php"># Canvas GUI demo
<syntaxhighlight lang="php">
# Canvas GUI demo
#
#
#  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
Line 104: Line 105:
   removelistener(init_gui);
   removelistener(init_gui);
   var dlg = canvas.Window.new([32,32]);
   var dlg = canvas.Window.new([32,32]);
   dlg.setInt("y", 4)
   dlg.setInt("tf/t[1]", 4)
     .setInt("right", 4);
     .setInt("right", 4);
var my_canvas = dlg.createCanvas()
  var my_canvas = dlg.createCanvas()
                     .setColorBackground(0,0,0,0);
                     .setColorBackground(0,0,0,0);
var root = my_canvas.createGroup();
  var root = my_canvas.createGroup();
   canvas.parsesvg(root, "gui/dialogs/images/icon-aircraft.svg");
   canvas.parsesvg(root, "gui/dialogs/images/icon-aircraft.svg");


  my_canvas.addEventListener("mouseover", func(event)
{
  debug.dump( props.wrapNode(event.target._node_ghost) );
});
   my_canvas.addEventListener("click", func
   my_canvas.addEventListener("click", func
   {
   {
var dlg = canvas.Window.new([400,300]);
    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();
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); });
    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); });
root.addEventListener("dblclick", func(e) { printf("dblclick: screen(%.1f|%.1f) client(%.1f|%.1f)", e.screenX, e.screenY, e.clientX, e.clientY); });
    root.addEventListener("dblclick", func(e) { printf("dblclick: screen(%.1f|%.1f) client(%.1f|%.1f)", e.screenX, e.screenY, 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); });
    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 title_bar = root.createChild("group");
    var text =
title_bar.addEventListener("drag", func(e) { dlg.move(e.deltaX, e.deltaY); });
      root.createChild("text")
var x = 0;
          .setText("This could be used for building an 'Aircraft Help' dialog.\nYou can also #use it to play around with the new Canvas system :). β")
var y = 0;
          .setTranslation(10, 30)
var rx = 8;
          .setAlignment("left-top")
var ry = 8;
          .setFontSize(14)
var w = 400;
          .setFont("LiberationFonts/LiberationSans-Regular.ttf")
var h = 20;
          .set("max-width", 380)
title_bar.createChild("path")
          .setColor(0,0,0);
    .moveTo(x + w - rx, y)
    var text_move =
    .arcSmallCWTo(rx, ry, 0, x + w, y + ry)
      root.createChild("text")
    .vertTo(y + h)
          .setText("Mouse moved over text...")
    .horizTo(x)
          .set("character-size", 15)
    .vertTo(y + ry)
          .set("font", "LiberationFonts/LiberationSans-Bold.ttf")
    .arcSmallCWTo(rx, ry, 0, x + rx, y)
          .set("alignment", "left-center")
    .close()
          .setTranslation(20, 200)
    .setColorFill(0.25,0.24,0.22)
          .set("fill", "#ff0000")
    .setStrokeLineWidth(0);
          .hide();
y = 20;
    var visible_count = 0;
h = 280;
    text.addEventListener("mouseover", func text_move.show());
root.createChild("path")
    text.addEventListener("mouseout", func text_move.hide());
    .moveTo(x + w, y)
    .vertTo(y + h)
    .horizTo(x)
    .vertTo(y)
    .setColorFill(1,1,1)
    .setColor(0,0,0);
x = 8;
y = 5;
w = 10;
h = 10;
title_bar.createChild("path", "icon-close")
    .moveTo(x, y)
    .lineTo(x + w, y + h)
    .moveTo(x + w, y)
    .lineTo(x, y + h)
    .setColor(1,0,0)
    .setStrokeLineWidth(3)
    .addEventListener("click", func dlg.del());
title_bar.createChild("text", "dialog-caption")
    .setText("Aircraft Help")
    .setTranslation(x + w + 8, 4)
    .setAlignment("left-top")
    .setFontSize(14)
    .setFont("LiberationFonts/LiberationSans-Bold.ttf")
    .setColor(1,1,1);
var text = root.createChild("text")
    .setText("This could be used for building an 'Aircraft Help' dialog.\nYou can also use it to play around with the new Canvas system :). β")
    .setTranslation(10, 30)
    .setAlignment("left-top")
    .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());
text.addEventListener("click", func canvas.Dialog.new([240,135]).draw());
   });
   });
});
});
})();
})();
</syntaxhighlight>
</syntaxhighlight>
TheTom
166

edits

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

Navigation menu