Newbie question about web cursor

[trappola]

hi,
I'm using leapjs and I have seen the parameters: "direction" in class Pointable. ask you, these are the parameters to be used to create a script that creates a cursor on the webpage, as an emulation of a mouse. what logic you would use? sorry for my bad english

[pehrlich]

Hey - I use something a little like this (coffeescript)

scale = 8
vertical_offset = -150
hand.screenPosition = {
    x: (document.body.offsetWidth / 2) + (hand.stabilizedPalmPosition[0] * scale)
    y: (document.body.offsetHeight / 2) +
          ((hand.stabilizedPalmPosition[1] + vertical_offset) * scale * -1)
  }

[Dave_Edelhart_LM]

Keep in mind -- the leap position is a measurement in space -- it is the millimeters left, right, up, down, and in and out.

your web page has a size in pixels that depends on the window size.

You can use the interaction boxes' normalizePoint() method to make a position simple. It takes a leap position and returns a position with all numbers in the 0.. 1 range.

i.e., frame.pointables[0].stabilizedTipPosition = [-221..221,0...400, -221..221]
frame.interactionBox.normalazePoint(frame.pointables[0].stabilizedTipPosition) = [0..1, 0..1, 0..1]

See
http://js.leapmotion.com/api_guide#Leap_InteractionBox
for details.

var point = frame.pointables[0].stabilizedTipPosition; // will be [102.4444, 123.2, 456.11] or something similar
// or var hand = frame.hands[0]; point = hand.pointables[0].stabilizedTipPosition
var normalPoint = frame.interactionBox. normalizePoint(point); // will be [0.566, 0.015, 0.874] all values in the 0..1 range
var screen_x = normalPoint[0] * document.body.offsetWidth + doc.scrollLeft;
var screen_y = normalPoint[1] * document.body.offsetHeight + doc.scrollTop;

the LeapStrap progject http://wilkesalex.github.io/leapstrap/ is a good example of mapping leap data to a web page.

[LM_TimeDoctor]

Check out LeapCursor: https://github.com/roboleary/LeapCursor.js

[trappola]

Hi guys , thanks for the replies , I'll have another question .
I need to simulate a click of a button to a particular movement . The movement corresponds to the passage of the finger from right to left of the plane x

At the time this control I try to do so :

if(frame.pointables[0].direction[0] > -0.25 && direction == 19 && (frame.pointables[0].direction[1] > 0.01 && frame.pointables[0].direction[1] < 0.35)){
Llevel.style.width= "100%";
document.querySelector('#play').click();
direction = 20;
}

...
...

        if(frame.pointables[0].direction[0] < 0.60 && direction == 2 && (frame.pointables[0].direction[1] > 0.01  && frame.pointables[0].direction[1] < 0.35)){            
            Llevel.style.width= "15%";
            direction = 3;
        }

        if(frame.pointables[0].direction[0] < 0.65 && direction == 1 && (frame.pointables[0].direction[1] > 0.01  && frame.pointables[0].direction[1] < 0.35)){            
            Llevel.style.width= "10%";
            direction = 2;
        }

        if(frame.pointables[0].direction[0] >= 0.65 && direction != 1 && (frame.pointables[0].direction[1] > 0.01  && frame.pointables[0].direction[1] < 0.40)){
            direction = 1;
            console.log("Aggianciato movimento");
            Llevel.style.width="5%"
        }

I realized that it works really bad, definitely wrong logic.
You advise me to take that logic ?

the direction of the first use to try to trigger the movement when the finger is at a certain height .. but it does not solve much. I realized that I can reach the level of 100% even scrolling with a portion of the plane really small .. I'm confused

[trappola]

I answer only. I do not have to use direction but frame.pointables [0]. StabilizedTipPosition [0]. Using stabilizedTipPosition finger movement is detected correctly.