<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Proof of concept - Objets tangibles</title>
</head>
<body>
<script src="/jquery-1.7.2.js"></script>
<script src="/lodash.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/tuio.js"></script>
<style>
body {
background: #000;
margin: 0;
}
.tuioCursor {
background: #fff;
height: 8px;
left: 0;
position: absolute;
top: 0;
width: 8px;
}
</style>
<script>
function getHypotenuse(touch1, touch2, screenW, screenH) {
var w = Math.abs(touch1.w - touch2.w);
var h = Math.abs(touch1.h - touch2.h);
return Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
}
$(function() {
var client = new Tuio.Client({
host: 'http://localhost:5000'
}),
screenW = $(document).width(),
screenH = $(document).height()
cursors = {},
onConnect = function() {
console.log('connected');
},
onAddTuioCursor = function(addCursor) {
var $addCursor = $('<div class="tuioCursor"></div>');
$('body').append($addCursor);
cursors[addCursor.getCursorId()] = $addCursor;
onUpdateTuioCursor(addCursor);
},
onUpdateTuioCursor = function(updateCursor) {
var $updateCursor = cursors[updateCursor.getCursorId()];
$updateCursor.css({
left: updateCursor.getScreenX(screenW),
top: updateCursor.getScreenY(screenH)
});
var cursorIds = Object.keys(cursors);
var dots = [];
cursorIds.forEach(function(cursor) {
dots.push({
id: cursor,
w: cursors[cursor][0].offsetLeft,
h: cursors[cursor][0].offsetTop
});
});
var groups = {};
for (var i = 0; i < dots.length; i++) {
for (var j = 0; j < dots.length; j++) {
if (j !== i) {
var hyp = getHypotenuse(dots[i], dots[j]);
console.log(i, j, hyp);
}
}
}
},
onRemoveTuioCursor = function(removeCursor) {
//console.log('remove', removeCursor);
var $removeCursor = cursors[removeCursor.getCursorId()];
$removeCursor.remove();
delete[removeCursor.getCursorId()];
},
onAddTuioObject = function(addObject) {
console.log(addObject);
},
onUpdateTuioObject = function(updateObject) {
console.log(updateObject);
},
onRemoveTuioObject = function(removeObject) {
console.log(removeObject);
},
onRefresh = function(time) {
};
client.on("connect", onConnect);
client.on("addTuioCursor", onAddTuioCursor);
client.on("updateTuioCursor", onUpdateTuioCursor);
client.on("removeTuioCursor", onRemoveTuioCursor);
client.on("addTuioObject", onAddTuioObject);
client.on("updateTuioObject", onUpdateTuioObject);
client.on("removeTuioObject", onRemoveTuioObject);
client.on("refresh", onRefresh);
client.connect();
});
</script>
</body>
</html>