leap HUD

_.md

[ Launch: leap HUD ] 4737158 by enjalot
[ Launch: leap setup ] 4736524 by enjalot

config.json

{"description":"leap HUD","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"leap.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"hud.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/aRXoK3r.png"}

inlet.js

var onoffColors = ["#A5250C", "#06AA68"];

var svg = d3.select("svg");

var hub = svg.append("g")
  .classed("hub", true);

hub.append("rect")
  .classed("indicator", true)
  .attr({
    width: 58,
    height: 60,
    x: 21,
    y: 19,
    stroke: "#000",
    "stroke-width": 2,
    rx: 3,
    ry: 3
  })
  .on("click", tributary.leap.toggle);


var hand1 = makeHand("one")
.attr("transform", "translate(" + [100, 20] + ")");
var hand2 = makeHand("two")
.attr("transform", "translate(" + [311, 20] + ")");

var stats = hub.append("g").classed("stats", true)
.attr("transform", "translate(" + [500, 20] +")");
var maxg = stats.append("text").classed("max", true)
.attr({x: 14, y: 17 }).text("max");
var ming = stats.append("text").classed("min", true)
.attr({x: 15, y: 37}).text("min");

function makeHand(className) {
  var hand = hub.append("g")
   .classed("hand", true)
   .classed(className, true);
  hand.append("rect")
    .classed("bg", true)
  .attr({
    width: 200,
    height: 200
  })
  
  hand.append("text").classed("handid", true)
  .attr({x: 5, y: 12 }).text("hand");
 
  hand.append("text").classed("position", true)
    .attr({x: 5, y: 24 }).text("position");
  hand.append("text").classed("velocity", true)
    .attr({x: 5, y: 36 }).text("velocity");
  
  hand.append("text").classed("normal", true)
    .attr({x: 5, y: 48 }).text("normal");
  
  hand.append("g").classed("pointables", true)
  .attr("transform", "translate(" + [5, 67] + ")");
  
  return hand;
}



function updateHand(hand, pointables) {
  var handId = hand.datum().id;
  hand.select("text.handid").text(function(d) { return "hand: " + d.id });
  
  
  hand.select("text.position").text(function(d) {
    var n = d.palmPosition;
    return "position - " + arr2str(n);
  })
  hand.select("text.velocity").text(function(d) {
    var n = d.palmVelocity;
    return "velocity - " + arr2str(n);
  })
  hand.select("text.normal").text(function(d) {
    var n = d.palmNormal;
    return "normal - " + arr2str(n);
  })
  
  if(!pointables) pointables = [];
  var filtered = pointables.filter(function(d) { return d.handId === handId })
  var pSel = hand.select("g.pointables")
    .selectAll("text.pointable")
    .data(filtered)
    
  
  pSel.enter().append("text")
    .classed("pointable", true);
  
  pSel.exit().remove();
  
  pSel.text(function(d) {
    return d.id + ": " + arr2str(d.tipPosition)
  }).attr({
    dy: function(d,i) { return 14 * i }
  })
  
  
}

update();

function update(d) {
  //show if leap is connected or not
  hub.select("rect.indicator")
  .style("fill", tributary.leap.connected ? onoffColors[1] : onoffColors[0]);
  
  if(!d) return;
  
  //TODO: reuseable chart pattern
  //show numbers for each hand
  if(d.hands && d.hands[0]) {
  hand1.datum(d.hands[0]);
  updateHand(hand1, d.pointables);
  }
   
  if(d.hands && d.hands[1]) {
  hand2.datum(d.hands[1]);
  updateHand(hand2, d.pointables);
  }
  
  var maxy = d3.max(d.hands, function(c) { return c.palmPosition[1] });
  maxy = d3.max([maxy, d3.max(d.pointables, function (c) { return c.tipPosition[1] })]); 
  var miny = d3.min(d.hands, function(d) { return d.palmPosition[1] });
  miny = d3.min([miny, d3.min(d.pointables, function (c) { return c.tipPosition[1] })]); 
  if(maxy)
    maxg.text("max y: " + maxy);
  if(miny)
    ming.text("min y: " + miny);
  
}
              
tributary.leap.events.off("frame");
tributary.leap.events.on("frame", function(d) {
  console.log(d);
  update(d);
})

tributary.leap.events.off("open");
tributary.leap.events.on("open", function(d) {
  console.log("open");
  update();
})

tributary.leap.events.off("close");
tributary.leap.events.on("close", function(d) {
  console.log("close");
  update();
})

var format = d3.format(".3g");
function arr2str(array3) {
  return "x: " + format(array3[0])
      + " y: " + format(array3[1])
      + " z: " + format(array3[2]);
}

leap.js

tributary.leap = {
  events: _.clone(Backbone.Events)
};

// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
    (typeof(MozWebSocket) != 'undefined')) {
  WebSocket = MozWebSocket;
}

// Create the socket with event handlers
tributary.leap.init = function() {

  if(tributary.ws) {
    tributary.ws.close();
  }
  console.log("Starting");
  //Create and open the socket
  tributary.ws = new WebSocket("ws://localhost:6437/");
  var ws = tributary.ws;

  // On successful connection
  ws.onopen = function(event) {
    console.log("Open");
    tributary.leap.connected = true;
    tributary.leap.events.trigger("open");
  };

  // On message received
  ws.onmessage = function(event) {
    tributary.leap.events.trigger("frame", JSON.parse(event.data));
  };

  // On socket close
  ws.onclose = function(event) {
    ws = null;
    tributary.leap.connected = false;
    tributary.leap.events.trigger("close");
  }

  //On socket error
  ws.onerror = function(event) {
    console.error("Received error");
  };
}

var socketState;
if(!tributary.ws || tributary.ws.readyState != 1) {
  tributary.leap.connected = false;
} else {
  tributary.leap.connected = true;
}

tributary.leap.toggle = function() {
  if(tributary.ws.readyState === 1) {
    tributary.ws.close();
  } else {
    tributary.leap.init();
  }
}

tributary.leap.init();

tributary.events.on("restart", function() {
  tributary.leap.init();
})

style.css

.hand .bg {
  fill: #000000;
  fill-opacity: 0.1;
  stroke: #000000;
  stroke-opacity: 0.7
}

.hand text {
  font-size: 10px;
}