<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Proof of concept - Objets tangibles</title>
<style>
body {
background: #000;
margin: 0;
}
.tuioCursor {
background: #fff;
height: 8px;
left: 0;
position: absolute;
top: 0;
width: 8px;
}
.tuioObj {
background: #f00;
height: 15px;
left: 0;
position: absolute;
top: 0;
width: 8px;
rotate: 0deg;
}
</style>
</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>
<script>
$(function() {
const urlParams = new URLSearchParams(window.location.search);
const debugParams = urlParams.get('debug');
const debug = debugParams ? true : false;
if (debug) {
console.log('--- Debug activated ---');
}
var dotGroups = [];
var client = new Tuio.Client({
host: 'http://localhost:5000'
}),
screenW = $(document).width(),
screenH = $(document).height()
cursors = {},
objects = {},
onConnect = function() {
if (debug) {
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)
});
},
onRemoveTuioCursor = function(removeCursor) {
var $removeCursor = cursors[removeCursor.getCursorId()];
$removeCursor.remove();
delete[removeCursor.getCursorId()];
},
onAddTuioObject = function(addObject) {
var $addObject = $('<div class="tuioObj"></div>');
$('body').append($addObject);
objects[addObject.symbolID] = $addObject;
onUpdateTuioObject(addObject);
if (debug) {
console.log('addTuioObject', addObject);
}
},
onUpdateTuioObject = function(updateObject) {
var $updateObject = objects[updateObject.symbolID];
$updateObject.css({
left: updateObject.getScreenX(screenW),
top: updateObject.getScreenY(screenH),
rotate : updateObject.getAngleDegrees()
});
if (debug) {
console.log('updateTuioObject', updateObject);
}
},
onRemoveTuioObject = function(removeObject) {
var $removeObject = objects[removeObject.symbolID];
$removeObject.remove();
delete[removeObject.symbolID];
if (debug) {
console.log('removeTuioObject', removeObject);
}
},
onRefresh = function(time) {
if (debug) {
console.log('refresh', 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>