Thanks Katem,
I have seen the guides and example. And they are great. But i am in the view of normal websites. For example, bbc, cnn, etc. I want websites to be leap enabled.
My idea in details.
You open up a website (eg bbcnews.com) and you should be able to use the Leap Motion to move around, click the links.
I managed to use Leap Motion to get the clicks done. What i did was... based on the screen dimensions, i determined where the links are. X and Y.
In the JS, i wrote the code to find the location of the finger and determine what gesture it is doing. If the gesture is Tap, then it means used it tryin to click it. I disabled 2 hands. Just one hand is used to represent a mouse.
And i did get it to work. But i want a better method.
Issues:
1) how to determine that a Tap gesture on a link and trying to click it, regardless of the screen size.
MY code below (It is working, but on my screen.) Sorry it also has come commented items.
<script src="//js.leapmotion.com/leap-0.6.0.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.6.js"></script>
<script>
var webpointer = {};
var showgesture;
var positiongesture;
var pfream=new Array;
pfream[0]=false;
pfream[1]=0;
pfream[2]=false;
pfream[3]=0;
Leap.loop({enableGestures:true}, function(frame) {
frame.hands.forEach(function(hand, index) {
var WebPointers = ( webpointer[index] || (webpointer[index] = new WebPointer(hand, index)) );
WebPointers.setTransform(hand.screenPosition(), hand.roll());
if(pfream[2]==true&&frame.id-pfream[3]>30)
{
pfream[2]=false;
pfream[1]=frame.id;
}
if(frame.id-pfream[1]<=30)
{
return;
}
if(frame.valid && frame.gestures.length > 0){
frame.gestures.forEach(function(gesture){
// LINK ONE
if (gesture.type == "keyTap")
{
//488 x 520 is the location of the link on the screen
if ((gesture.position[1] > 488 && gesture.position[1] < 520))
{
//alert("Link one");
//window.open('http://www.google.com', '_blank');
location.href="one.php";
}
}
/*
// LINK TWO
if (gesture.type == "keyTap")
{
if ((gesture.position[1] > 447 && gesture.position[1] < 487))
{
//alert("Link two");
//window.open('http://www.google.co.jp', '_blank');
location.href="two.php";
}
}
*/
// LINK THREE
if (gesture.type == "keyTap")
{
if ((gesture.position[1] > 400 && gesture.position[1] < 446))
{
//alert("Link two");
//window.open('http://www.google.co.jp', '_blank');
location.href="three.php";
}
}
/*
switch (gesture.type){
case "circle":
console.log("Circle Gesture");
showgesture = "Circle Gesture";
positiongesture = gesture.position;
break;
case "keyTap":
console.log("Key Tap Gesture");
showgesture = "Key Tap Gesture";
positiongesture = gesture.position;
break;
case "screenTap":
console.log("Screen Tap Gesture");
showgesture = "Screen Tap Gesture";
positiongesture = gesture.position;
break;
case "swipe":
console.log("Swipe Gesture");
showgesture = "Swipe Gesture";
positiongesture = gesture.position;
break;
}
*/
});
//console.log(gesture.position[0]);
/*
var myspan = document.getElementById("output");
var mydiv = document.getElementById("mydiv");
var newcontent = document.createElement('div');
newcontent.innerHTML = '\n<br>gestures: ' + showgesture + ' positiongesture: '+ positiongesture ;
while (newcontent.firstChild)
{
mydiv.appendChild(newcontent.firstChild);
}
//output.innerHTML = 'index: ' + index + ' hand: '+hand;
*/
}
});
}).use('screenPosition', {scale: 0.25});
/*
controller.on('gesture', onGesture);
function onGesture(gesture,frame)
{
//console.log(gesture.type + " with ID " + gesture.id + " in frame " + frame.id);
var myspan = document.getElementById("output");
var mydiv = document.getElementById("mydiv");
var newcontent = document.createElement('div');
newcontent.innerHTML = '\n<br>' + gesture.type + " with ID " + gesture.id + " in frame " + frame.id + " Position: " + gesture.position;
while (newcontent.firstChild)
{
mydiv.appendChild(newcontent.firstChild);
}
}
*/
var WebPointer = function(hand, index) {
//output.innerHTML = 'index: ' + index + ' hand: '+hand;
var WebPointers = this;
var img = document.createElement('img');
//if (index == "1")
//{
// img.src = '20140715_174537.gif';
//}else if (index == "2"){
// img.src = 'WebPointers_2.png';
//}else{
// img.src = 'safe_image.jpg';
//}
img.src = 'cursor-icon.png';
img.style.position = 'absolute';
img.onload = function () {
WebPointers.setTransform([window.innerWidth/2,window.innerHeight/2], 0);
document.body.appendChild(img);
}
WebPointers.setTransform = function(position, rotation) {
img.style.left = position[0] - img.width / 2 + 'px';
img.style.top = position[1] - img.height / 2 + 'px';
//img.style.transform = 'rotate(' + -rotation + 'rad)';
img.style.webkitTransform = img.style.MozTransform = img.style.msTransform =
img.style.OTransform = img.style.transform;
};
};
webpointer[0] = new WebPointer();
// This allows us to move the WebPointers even whilst in an iFrame.
Leap.loopController.setBackground(true)
</script>
