Hi,
Recently, I have gotten hold of an excellent piece of equipment called the Leap Motion, And believe me it is awesome.
The below tutorial gives an example on how to manipulate HTML using a Leap Motion Javascript Library. The expectation of the tutorial is that the reader has understanding of basic programming concepts like Loops, Conditions, Functions, Objects, Methods, Properties and HTML.
The purpose of the below code is to move an image across the webpage using the inputs from a Leap Motion.
<!DOCTYPE html>
<html>
<head>
<title>Leap Graph Explorer</title>
<script src="leap.js"></script>
</head>
<body>
<script>
var controllerOptions = {enableGestures: true};
Leap.loop(controllerOptions, function(frame){
var img = document.getElementById("pic");
var wid = img.width;
var ht = img.height;
if(frame.gestures.length>=1){
document.getElementById("test").innerHTML = frame.gestures[0].type;
if(frame.gestures[0].type=="keyTap"){
img.style.width=(wid*1.1)+"px";
img.style.height=(ht*1.1)+"px"
}
if(frame.gestures[0].type=="swipe"){
img.src="./screenshot1.png"
}
if(frame.gestures[0].type=="circle"){
img.style.width=892+"px";
img.style.height=580+"px"
}
}
if(frame.hands.length > 0){
var hand = frame.hands[0];
//vectorToString(hand.palmPosition);
//document.getElementById("test").innerHTML = hand.sphereRadius;
document.getElementById("pic").style.left = hand.palmPosition[0]-100+'px';
document.getElementById("pic").style.top = hand.palmPosition[1]-50+'px';
}
})
</script>
<div id="test">start</div>
<img id="pic" src="./screenshot12.png" style="position: absolute; top: 20px; left: 15px"/></div>
</body>
</html>
As you can see that the most important part of our code is the JavaScript. Let us have a closer look shall we;
var controllerOptions = {enableGestures: true};
Leap.loop(controllerOptions, function(frame){
var img = document.getElementById("pic");
var wid = img.width;
var ht = img.height;
if(frame.gestures.length>=1){
document.getElementById("test").innerHTML = frame.gestures[0].type;
if(frame.gestures[0].type=="keyTap"){
img.style.width=(wid*1.1)+"px";
img.style.height=(ht*1.1)+"px"
}
if(frame.gestures[0].type=="swipe"){
img.src="./screenshot1.png"
}
if(frame.gestures[0].type=="circle"){
img.style.width=892+"px";
img.style.height=580+"px"
}
}
if(frame.hands.length > 0){
var hand = frame.hands[0];
//vectorToString(hand.palmPosition);
//document.getElementById("test").innerHTML = hand.sphereRadius;
document.getElementById("pic").style.left = hand.palmPosition[0]-100+'px';
document.getElementById("pic").style.top = hand.palmPosition[1]-50+'px';
}
})
To keep the post concise, I will quickly go through what is being done in the code.
- Leap Motion as any other Controller Device runs an infinite loop polling for input updates from the user, Which can seen by Leap.Loop Method.
- We are enabling default gestures like swipe, circle, tap by setting the controllerOptions variable.
- We can get the image attributes using an object built on the document object.
- To display the gesture being done, we display in a html division called “test”
- We update the image’s height and width by increasing at a rate of 1.1px for each “tap” gesture. Similarly “circle” gesture just resets the size back to original.
- Next in the line, is the code to change the image’s x and y based on the palm position returned by Leap Motion hand Object.
This is how we can achieve simple html manipulation using Leap Motion and JavaScript.
BIdesi 