titi
/
ASR_tangibles


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!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;

		}

		.tuioObj {

			background: #f00;

			height: 15px;

			left: 0;

			position: absolute;

			top: 0;

			width: 8px;

			rotate: 0deg;

		}

	</style>

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

								console.log(objects);

							}

						},


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


						};


						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>