Board index FlightGear Development Canvas

Using mouse event for "pick" animation

Canvas is FlightGear's new fully scriptable 2D drawing system that will allow you to easily create new instruments, HUDs and even GUI dialogs and custom GUI widgets, without having to write C++ code and without having to rebuild FlightGear.

Using mouse event for "pick" animation

Postby jam007 » Fri May 17, 2013 4:18 pm

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);

  }
Last edited by jam007 on Fri May 17, 2013 9:03 pm, edited 1 time in total.
jam007
 
Posts: 477
Joined: Sun Dec 16, 2012 10:04 am
Location: Uppsala, Sweden
Version: 2017.3.1
OS: Ubuntu 16.04

Re: Using mouse event for "pick" animation

Postby Hooray » Fri May 17, 2013 4:48 pm

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). :lol: :lol:

PS: You should add the video to the canvas gallery: http://wiki.flightgear.org/Canvas
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 11336
Joined: Tue Mar 25, 2008 8:40 am

Re: Using mouse event for "pick" animation

Postby jam007 » Fri May 17, 2013 9:26 pm

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?
jam007
 
Posts: 477
Joined: Sun Dec 16, 2012 10:04 am
Location: Uppsala, Sweden
Version: 2017.3.1
OS: Ubuntu 16.04

Re: Using mouse event for "pick" animation

Postby Philosopher » Fri May 17, 2013 9:38 pm

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...
Thanks,
Philosopher
(inactive but lurking occasionally...)
Philosopher
 
Posts: 1590
Joined: Sun Aug 12, 2012 6:29 pm
Location: Stuck in my head...
Callsign: AFTI
Version: Git
OS: Mac OS X 10.7.5

Re: Using mouse event for "pick" animation

Postby TheTom » Fri May 17, 2013 9:58 pm

jam007 wrote in Fri May 17, 2013 4:18 pm: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.
TheTom
 
Posts: 321
Joined: Sun Oct 09, 2011 10:20 am

Re: Using mouse event for "pick" animation

Postby Hooray » Fri May 17, 2013 10:07 pm

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.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 11336
Joined: Tue Mar 25, 2008 8:40 am

Re: Using mouse event for "pick" animation

Postby jam007 » Sat May 18, 2013 7:06 am

@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.
jam007
 
Posts: 477
Joined: Sun Dec 16, 2012 10:04 am
Location: Uppsala, Sweden
Version: 2017.3.1
OS: Ubuntu 16.04

Re: Using mouse event for "pick" animation

Postby omega95 » Sat Aug 10, 2013 1:53 pm

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

Hooray wrote in Fri May 17, 2013 4:48 pm:omega95 is probably going to use your code to implement tetris for his 787


Lol, and that's not exactly it. :P

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. :)
Merlion Virtual Airlines - the experience of a flight time...
Get high quality aircraft, airports, video tutorials or development tools from my hangar.
omega95
 
Posts: 1223
Joined: Sat Jul 30, 2011 12:59 am
Location: -unknown-
Callsign: MIA0001, OM-EGA
IRC name: omega95
Version: 2.12 git
OS: Ubuntu 13.04


Return to Canvas

Who is online

Users browsing this forum: No registered users and 1 guest