shimada-k/leap_motion20140620.html

## leap_motion20140620.html
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>leap test</title>
<style>
#left_hand{
    overflow: scroll;
    padding-left:5px;
    padding-top:5px;

    color:#fffaf0;
    background-color:#4169e1;
    margin-bottom:10px;
    margin-top:10px;
    border:1px solid black;
    width:600px;
    height:900px;
    float:left;
}

#right_hand{
    overflow: scroll;
    padding-left:5px;
    padding-top:5px;

    color:#fffaf0;
    background-color:#b22222;
    margin-bottom:10px;
    margin-top:10px;
    margin-left:10px;
    border:1px solid black;
    width:600px;
    height:900px;
    float:left;
}

</style>
<script src="leap-0.6.0.js"></script>
<script>

function mainLoop()
{
    var left_area = document.getElementById('left_hand');
    var right_area = document.getElementById('right_hand');

    var controller = new Leap.Controller();

    controller.loop(function(frame) {

        for(var i = 0; i < frame.hands.length; i++){
            var now  = new Date();
            var date_text = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
            var text = date_text + ' confidence:' + frame.hands[i].confidence;
            var name_map = ['thumb', 'index', 'middle', 'ring', 'pinky'];
            var hand = frame.hands[i];

            if(i >= 1){
                if(hand.type == frame.hands[i - 1].type){
                    text += ' same hand detected!';
                }
            }

            if(frame.hands.length == 2){
                right_area.style.color = '#fffaf0';
                left_area.style.color = '#fffaf0';
            }

            if(hand.type == 'right'){
                if(frame.hands.length == 1){
                    right_area.style.color = '#fffaf0';
                    left_area.style.color = '#808080';
                }
                text += '<br />';
                right_area.innerHTML += text;
                right_area.scrollTop = right_area.scrollHeight;
            }
            else if (hand.type == 'left'){
                if(frame.hands.length == 1){
                    left_area.style.color = '#fffaf0';
                    right_area.style.color = '#808080';
                }
                text += '<br />';
                left_area.innerHTML += text;
                left_area.scrollTop = left_area.scrollHeight;
            }
        }
    });
}

</script>
</head>

<body onload='mainLoop()'>
<div id='left_hand'></div>
<div id='right_hand'></div>

</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>leap test</title>
	<style>
	#left_hand{
	overflow: scroll;
	padding-left:5px;
	padding-top:5px;

	color:#fffaf0;
	background-color:#4169e1;
	margin-bottom:10px;
	margin-top:10px;
	border:1px solid black;
	width:600px;
	height:900px;
	float:left;
	}

	#right_hand{
	overflow: scroll;
	padding-left:5px;
	padding-top:5px;

	color:#fffaf0;
	background-color:#b22222;
	margin-bottom:10px;
	margin-top:10px;
	margin-left:10px;
	border:1px solid black;
	width:600px;
	height:900px;
	float:left;
	}

	</style>
	<script src="leap-0.6.0.js"></script>
	<script>

	function mainLoop()
	{
	var left_area = document.getElementById('left_hand');
	var right_area = document.getElementById('right_hand');

	var controller = new Leap.Controller();

	controller.loop(function(frame) {

	for(var i = 0; i < frame.hands.length; i++){
	var now = new Date();
	var date_text = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	var text = date_text + ' confidence:' + frame.hands[i].confidence;
	var name_map = ['thumb', 'index', 'middle', 'ring', 'pinky'];
	var hand = frame.hands[i];

	if(i >= 1){
	if(hand.type == frame.hands[i - 1].type){
	text += ' same hand detected!';
	}
	}

	if(frame.hands.length == 2){
	right_area.style.color = '#fffaf0';
	left_area.style.color = '#fffaf0';
	}

	if(hand.type == 'right'){
	if(frame.hands.length == 1){
	right_area.style.color = '#fffaf0';
	left_area.style.color = '#808080';
	}
	text += '<br />';
	right_area.innerHTML += text;
	right_area.scrollTop = right_area.scrollHeight;
	}
	else if (hand.type == 'left'){
	if(frame.hands.length == 1){
	left_area.style.color = '#fffaf0';
	right_area.style.color = '#808080';
	}
	text += '<br />';
	left_area.innerHTML += text;
	left_area.scrollTop = left_area.scrollHeight;
	}
	}
	});
	}

	</script>
	</head>

	<body onload='mainLoop()'>
	<div id='left_hand'></div>
	<div id='right_hand'></div>

	</body>
	</html>