titi
/
ASR_tangibles


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!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() {
					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 = {},

						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) {
							if (debug) {
								console.log('addTuioObject', addObject);
							}
						},

						onUpdateTuioObject = function(updateObject) {
							if (debug) {
								console.log('updateTuioObject', updateObject);
							}
						},

						onRemoveTuioObject = function(removeObject) {
							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>