leap Y input

_.md

[ Launch: leap Y input ] 4737320 by enjalot
[ Launch: leap HUD ] 4737158 by enjalot
[ Launch: leap setup ] 4736524 by enjalot

config.json

{"description":"leap Y input","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/WyOe0x3.png"}

inlet.js

var onoffColors = ["#ff0000", "#00ff00"];

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
  })
  .on("click", tributary.leap.toggle);

var format = d3.format(".3g");

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 }
  })
  
  
}

var centerY = 293;
var offsetY = 0;

var nbars = 50;
var barh = 395;
var spacing = 2;
var barhh = (barh - spacing * nbars) / nbars;

//scale for getting continuous leap-like values (between 0 and 800)
//from the discrete bars (0 to nbars)
var yscale = d3.scale.linear()
.domain([0, nbars])
.range([526, 65])

var xscale = function(y) {
  var cy = y - centerY + offsetY;
  return cy*cy*cy * 0.000005 + 1
}

var barg = svg.append("g")
.classed("bars", true)
.attr("transform", "translate(" + [312, 256] + ")")


var barSel = barg.selectAll("rect.bar")
.data(d3.range(nbars))

function getWidth(d) {
  var y = yscale(d)
  var w = xscale(y)
  return w;
}

barSel.enter().append("rect").classed("bar", true);
barSel.attr({
  x: function(d,i ){
    var w = getWidth(d);
    if(w < 0) {
      return w;
     } else {
       return 0;
     }
  },
  y: function(d,i) { 
    return i * (barhh + spacing) 
  },
  width: function(d, i) { 
    var w = getWidth(d);
    return Math.abs(w) 
  },
  height: barhh
})

var ginout = svg.append("g");
ginout.append("text").classed("in",true)
.attr("transform", "translate(" +  [400, 400] + ")")
.text("in")
ginout.append("text").classed("out",true)
.attr("transform", "translate(" +  [400, 435] + ")")
.text("out")
ginout.append("text").classed("ind",true)
.attr("transform", "translate(" +  [400, 467] + ")")
.text("index")


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);
  
  
  if(d.hands && d.hands[0]) {
    //map the y value of the hand position to the bar graph;
    var y = d.hands[0].palmPosition[1];
    var out = xscale(y);
    var ind = parseInt(yscale.invert(y))
    ginout.select("text.in")
    .text("in: " + format(y))
    ginout.select("text.ind")
    .text("index: " + ind)
    ginout.select("text.out")
    .text("out: " + format(out))
    
    barSel.style({
      "fill": "",
      "stroke": ""
    });
    barSel.filter(function(d) {
      return d === ind;
    }).style({
      fill: "#FF0000",
      stroke: "#ff0000"
    })
    
    
  }
}
              
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();
})


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;
}

.bars {
  stroke: #01056F;
  stroke-width: 1;
  stroke-opacity: 0.5;
  fill: #A3E2F7;
  fill-opacity: 0.5;
}