Using mouse event for "pick" animation

[jam007]

Made a small test of using an canvas to registrer mouse events and drive animation of slider, wheel and knob.

The plane has the canvas and the mouse drags are recalculated to properties that ordinary animation-xml uses to rotate and translate objects.
The nasal code:

Code: Select all

    # create a new canvas...
    var c = canvas.new({
      "name": "BTEST",
      "size": [128, 128],
      "view": [128, 128],
      "mipmapping": 1
      });
   
    # ... and place it on the object called Plane_Btest
    c.addPlacement({"node": "Plane_Btest", "capture-events": 1});
    c.addEventListener("drag", func(e) { mouseDrag(e.clientX, e.clientY, e.deltaX, e.deltaY); });
    setprop("tmp/wheel", 0);
    setprop("tmp/slider", 0);
    setprop("tmp/knob", 0);
   
  var mouseDrag= func(x, y, dx, dy) {
    if (x>23 and x<80 and y>80 and y<87) {
      setprop("tmp/wheel", getprop("tmp/wheel")+dx*1.62);
    } else if (x>46+getprop("tmp/slider")*64 and x<54+getprop("tmp/slider")*64 and y>105 and y<116) {
      setprop("tmp/slider", (x-50)/64);
    } else if ((x-50)*(x-50) + (y-40)*(y-40) <600) {
        dv=math.atan2((x-50),(y-40))-math.atan2((x-dx-50),(y-dy-40));
        setprop("tmp/knob", getprop("tmp/knob")+dv*57.3);
    }
    print(x ~" , " ~y);

  }

[Hooray]

that looks great, but watch out, or omega95 is probably going to use your code to implement tetris for his 787 (where he already added some hidden games to the EFB in the pre-canvas days).

PS: You should add the video to the canvas gallery: http://wiki.flightgear.org/Canvas

[jam007]

Added it to the wiki.

I think this method could be useful for control panels that has a multiple controls. Especially if they have those that are dragged. The panel can have more or less any shape as it is the texture coordinates that is used.
To have a textured panel do you have to add the texture as a Canvas image. (As I did in my Dice test) Or can you make the Canvas virtual texture transparent so that the objects ordinary texture is seen?

[Philosopher]

Well evidently AC3D doesn't support multiple textures per object, so your best bet might be to display a texture (.png) on the Canvas itself and just add your elements on top of that texture...

[TheTom]

The plane has the canvas and the mouse drags are recalculated to properties that ordinary animation-xml uses to rotate and translate objects.

You can also transform elements inside the canvas. There is no need for using animation xml. Also you can directly attach event listeners to every canvas element so you dont need to manually check for a hit using the mouse coordinates but instead place the elements directly on the canvas and let it handle the collision detection.

For control panels I would rather build 3d models of the knobs and use picking animations or better thhe knew knob and slider animations. They also allow using dragging to change knobs and switches and also provide cursor feedback on hover. They are made exactly for the use case of knobs and sliders.

[Hooray]

it would probably be a good idea to put up the code for peer-review, so that it can be cleaned up and improved, and turned into a tutorial for our canvas section.

[jam007]

@TheTom
Maybe the video was unclear as it is almost straight down. The slider, wheel and knob are 3D objects. These are placed on a rectangular plane.The Canvas is on that plane. The mouse clicks is registred by the Canvas even if you click "on" the 3D object.
Yes you could make "pick" animations using slider and knobs. I was just testing an alternative that I think can be useful if you have a lot of buttons, knobs, sliders, displays etc. on a control panel. Combining Canvas and 3D animation.

[omega95]

This is exactly what I need for what I'm working on!

omega95 is probably going to use your code to implement tetris for his 787

Lol, and that's not exactly it.

Currently, I'm testing this with a php tracker with merlion but soon, I might be able to get something similar to work with the mpservers so everyone can use it.