leap motion screen touch

index.html

<div id="leap">Leap Motion was not connected</div>
<p>Touched: <span id="touched">…</span></p>
<p>Position: <span id="position">…</span></p>
<script src="//js.leapmotion.com/leap-0.6.3.min.js"></script>
<script>
var leapConnectedDom = document.getElementById("leap");
var touched = document.getElementById("touched");
var position = document.getElementById("position");
var div = document.createElement('div');
div.style["background-color"] = "#000";
div.style["position"] = "absolute";
div.style["top"] = 0;
div.style["left"] = 0;
div.style["width"] = "60px";
div.style["height"] = "60px";
document.documentElement.appendChild(div);

var controller = new Leap.Controller();
controller.on('frame', function(frame){
    if(frame.pointables.length > 0) {
        var pointable = frame.pointables[0];
        var touchDistance = frame.pointables[0].touchDistance;
        var interactionBox = frame.interactionBox;
        var normalizedPosition = interactionBox.normalizePoint(pointable.tipPosition, true);
        var tipPosition = pointable.tipPosition;
		var x = normalizedPosition[0]*screen.width;
		var y = screen.height-normalizedPosition[1]*screen.height;
		div.style["left"] = x;
		div.style["top"] = y;
		position.textContent = "("+x+","+y+")";
		if(touchDistance <= 0) {
			touched.textContent = "Clicked";
			div.style["background-color"] = "#28f";
		}else{
			touched.textContent = "";
			div.style["background-color"] = "#111";
		}
    }
});
controller.on('connect', function(){
	console.log('connected');
});
controller.on('deviceStreaming', function(){
	console.log('deviceStreaming');
	leapConnectedDom.textContent = "Leap Motion was connected";
});
controller.on('deviceStopped', function(){
	console.log('deviceStopped');
	leapConnectedDom.textContent = "Leap Motion was not connected";
});

controller.connect();
</script>