joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The leap-stream.js script provides a leap method which takes a single
callback for rendering data frames coming from the Leap's websocket stream:
<script src="leap-stream.js"></script>
<script>
  render = function(frame) { ... };
  leap(render);
</script>

See index.html and its rendering script (render.coffee, render.js) for
sample usage: in this case, a simple viewer for observing hand movement.
Note: index.coffee.html is identical to index.html albeit for the fact that we've embedded the rendering method as a coffeescript script.
Here's the supplied method:
leap = (render) ->
  stream = new WebSocket 'ws://localhost:6437'
  stream.onmessage = (event) -> 
    render(JSON.parse(event.data)) if event.data
  ''
This is intended as a ultra-minimalist alternative to the leap.js framework, and a simple starting point for personal leap hacking.

  
## index.coffee.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
<style>
  .hand {
    position: absolute;
    border-radius: 20px;
    width: 75px;
    height: 75px;
    left: 50%;
    bottom: 10%;
  }
  #first {
    background-color: steelblue;
    opacity: .75;
  }
  #second {
    background-color: #777;
    opacity: 0;
  }
</style>
<body>
  <div class="hand" id="first"></div>
  <div class="hand" id="second"></div>
<script type="text/coffeescript">
  leap = (render) ->
    stream = new WebSocket 'ws://localhost:6437'
    stream.onmessage = (event) ->
      render(JSON.parse(event.data)) if event.data
    ''

  # Rendering utils ...

  R2D = 180 / Math.PI

  pitch = (hand) ->
    Math.round(R2D * Math.atan2(hand.direction[1], -hand.direction[2]) - 90)

  yaw = (hand) ->
    Math.round(R2D * Math.atan2(hand.direction[0], -hand.direction[2]))

  roll = (hand) ->
    Math.round(-R2D * Math.atan2(hand.palmNormal[0], -hand.palmNormal[1]))

  parse = (pos) ->
    [x, y, z] = (Math.round(x) for x in pos)
    [x, -y, 350/(350 + z)]

  render = (frame) ->
    if frame?.hands?.length
      second.style.opacity = 1 if frame.hands.length > 1
      for i, hand of frame.hands
        [x, y, z] = parse hand.palmPosition
        transform = """
          translate(#{x}px, #{y}px)
          rotateX(#{pitch(hand)}deg)
          rotateZ(#{roll(hand)}deg)
          scale(#{z})
        """
        e = if i is '0' then first else second
        e.style.webkitTransform = transform
    ''

  leap render   # render each data frame
</script>

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="leap-stream.js"></script>
<script src="render.js"></script>
<style>
  .hand {
    position: absolute;
    border-radius: 20px;
    width: 75px;
    height: 75px;
    left: 50%;
    bottom: 10%;
  }
  #first {
    background-color: steelblue;
    opacity: .75;
  }
  #second {
    background-color: #777;
    opacity: 0;
  }
</style>
<body>
  <div class="hand" id="first"></div>
  <div class="hand" id="second"></div>
  <script>leap(render);</script>

## leap-stream.coffee
root = exports ? @

root.leap = (render) ->
  stream = new WebSocket 'ws://localhost:6437'
  stream.onmessage = (event) ->
    render(JSON.parse(event.data)) if event.data
  ''

## leap-stream.js
(function() {
  var root;

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  root.leap = function(render) {
    var stream;
    stream = new WebSocket('ws://localhost:6437');
    stream.onmessage = function(event) {
      if (event.data) {
        return render(JSON.parse(event.data));
      }
    };
  };

}).call(this);

## render.coffee
root = exports ? @

R2D = 180 / Math.PI

pitch = (hand) ->
  Math.round(R2D * Math.atan2(hand.direction[1], -hand.direction[2]) - 90)

yaw = (hand) ->
  Math.round(R2D * Math.atan2(hand.direction[0], -hand.direction[2]))

roll = (hand) ->
  Math.round(-R2D * Math.atan2(hand.palmNormal[0], -hand.palmNormal[1]))

parse = (pos) ->
  [x, y, z] = (Math.round(x) for x in pos)
  [x, -y, 350/(350 + z)]

root.render = (frame) ->
  if frame?.hands?.length
    second.style.opacity = 1 if frame.hands.length > 1
    for i, hand of frame.hands
      [x, y, z] = parse hand.palmPosition
      transform = """
        translate(#{x}px, #{y}px)
        rotateX(#{pitch(hand)}deg)
        rotateZ(#{roll(hand)}deg)
        scale(#{z})
      """
      e = if i is '0' then first else second
      e.style.webkitTransform = transform
  ''

## render.js
// Generated by CoffeeScript 1.6.3
(function() {
  var R2D, parse, pitch, roll, root, yaw;

  root = typeof exports !== "undefined" && exports !== null ? exports : this;

  R2D = 180 / Math.PI;

  pitch = function(hand) {
    return Math.round(R2D * Math.atan2(hand.direction[1], -hand.direction[2]) - 90);
  };

  yaw = function(hand) {
    return Math.round(R2D * Math.atan2(hand.direction[0], -hand.direction[2]));
  };

  roll = function(hand) {
    return Math.round(-R2D * Math.atan2(hand.palmNormal[0], -hand.palmNormal[1]));
  };

  parse = function(pos) {
    var x, y, z, _ref;
    _ref = (function() {
      var _i, _len, _results;
      _results = [];
      for (_i = 0, _len = pos.length; _i < _len; _i++) {
        x = pos[_i];
        _results.push(Math.round(x));
      }
      return _results;
    })(), x = _ref[0], y = _ref[1], z = _ref[2];
    return [x, -y, 350 / (350 + z)];
  };

  root.render = function(frame) {
    var e, hand, i, transform, x, y, z, _ref, _ref1, _ref2;
    if (frame != null ? (_ref = frame.hands) != null ? _ref.length : void 0 : void 0) {
      if (frame.hands.length > 1) {
        second.style.opacity = 1;
      }
      _ref1 = frame.hands;
      for (i in _ref1) {
        hand = _ref1[i];
        _ref2 = parse(hand.palmPosition), x = _ref2[0], y = _ref2[1], z = _ref2[2];
        transform = "translate(" + x + "px, " + y + "px) \nrotateX(" + (pitch(hand)) + "deg)\nrotateZ(" + (roll(hand)) + "deg)\nscale(" + z + ")";
        e = i === '0' ? first : second;
        e.style.webkitTransform = transform;
      }
    }
  };

}).call(this);
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
	<style>
	.hand {
	position: absolute;
	border-radius: 20px;
	width: 75px;
	height: 75px;
	left: 50%;
	bottom: 10%;
	}
	#first {
	background-color: steelblue;
	opacity: .75;
	}
	#second {
	background-color: #777;
	opacity: 0;
	}
	</style>
	<body>
	<div class="hand" id="first"></div>
	<div class="hand" id="second"></div>
	<script type="text/coffeescript">
	leap = (render) ->
	stream = new WebSocket 'ws://localhost:6437'
	stream.onmessage = (event) ->
	render(JSON.parse(event.data)) if event.data
	''

	# Rendering utils ...

	R2D = 180 / Math.PI

	pitch = (hand) ->
	Math.round(R2D * Math.atan2(hand.direction[1], -hand.direction[2]) - 90)

	yaw = (hand) ->
	Math.round(R2D * Math.atan2(hand.direction[0], -hand.direction[2]))

	roll = (hand) ->
	Math.round(-R2D * Math.atan2(hand.palmNormal[0], -hand.palmNormal[1]))

	parse = (pos) ->
	[x, y, z] = (Math.round(x) for x in pos)
	[x, -y, 350/(350 + z)]

	render = (frame) ->
	if frame?.hands?.length
	second.style.opacity = 1 if frame.hands.length > 1
	for i, hand of frame.hands
	[x, y, z] = parse hand.palmPosition
	transform = """
	translate(#{x}px, #{y}px)
	rotateX(#{pitch(hand)}deg)
	rotateZ(#{roll(hand)}deg)
	scale(#{z})
	"""
	e = if i is '0' then first else second
	e.style.webkitTransform = transform
	''

	leap render # render each data frame
	</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="leap-stream.js"></script>
	<script src="render.js"></script>
	<style>
	.hand {
	position: absolute;
	border-radius: 20px;
	width: 75px;
	height: 75px;
	left: 50%;
	bottom: 10%;
	}
	#first {
	background-color: steelblue;
	opacity: .75;
	}
	#second {
	background-color: #777;
	opacity: 0;
	}
	</style>
	<body>
	<div class="hand" id="first"></div>
	<div class="hand" id="second"></div>
	<script>leap(render);</script>
	root = exports ? @

	root.leap = (render) ->
	stream = new WebSocket 'ws://localhost:6437'
	stream.onmessage = (event) ->
	render(JSON.parse(event.data)) if event.data
	''
	(function() {
	var root;

	root = typeof exports !== "undefined" && exports !== null ? exports : this;

	root.leap = function(render) {
	var stream;
	stream = new WebSocket('ws://localhost:6437');
	stream.onmessage = function(event) {
	if (event.data) {
	return render(JSON.parse(event.data));
	}
	};
	};

	}).call(this);
	// Generated by CoffeeScript 1.6.3
	(function() {
	var R2D, parse, pitch, roll, root, yaw;

	root = typeof exports !== "undefined" && exports !== null ? exports : this;

	R2D = 180 / Math.PI;

	pitch = function(hand) {
	return Math.round(R2D * Math.atan2(hand.direction[1], -hand.direction[2]) - 90);
	};

	yaw = function(hand) {
	return Math.round(R2D * Math.atan2(hand.direction[0], -hand.direction[2]));
	};

	roll = function(hand) {
	return Math.round(-R2D * Math.atan2(hand.palmNormal[0], -hand.palmNormal[1]));
	};

	parse = function(pos) {
	var x, y, z, _ref;
	_ref = (function() {
	var _i, _len, _results;
	_results = [];
	for (_i = 0, _len = pos.length; _i < _len; _i++) {
	x = pos[_i];
	_results.push(Math.round(x));
	}
	return _results;
	})(), x = _ref[0], y = _ref[1], z = _ref[2];
	return [x, -y, 350 / (350 + z)];
	};

	root.render = function(frame) {
	var e, hand, i, transform, x, y, z, _ref, _ref1, _ref2;
	if (frame != null ? (_ref = frame.hands) != null ? _ref.length : void 0 : void 0) {
	if (frame.hands.length > 1) {
	second.style.opacity = 1;
	}
	_ref1 = frame.hands;
	for (i in _ref1) {
	hand = _ref1[i];
	_ref2 = parse(hand.palmPosition), x = _ref2[0], y = _ref2[1], z = _ref2[2];
	transform = "translate(" + x + "px, " + y + "px) \nrotateX(" + (pitch(hand)) + "deg)\nrotateZ(" + (roll(hand)) + "deg)\nscale(" + z + ")";
	e = i === '0' ? first : second;
	e.style.webkitTransform = transform;
	}
	}
	};

	}).call(this);