titi
/
ASR_tangibles


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!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) {
					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() {
					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)
							});

							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 = [];
							if (dots.length > 2) {
								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]);
											if (hyp <= 260) {
												if (groups.length === 0) {
													groups.push([i, j]);
												} else {
													const groupContainingBoth = groups.findIndex(group => {
														return (group.includes(i) && group.includes(j));
													});
													if (groupContainingBoth === -1) {
														const groupContainingI = groups.findIndex(group => {
															return (group.includes(i) && !group.includes(j));
														});
														if (groupContainingI !== -1) {
															groups[groupContainingI].push(j);
														}

														const groupContainingJ = groups.findIndex(group => {
															return (!group.includes(i) && group.includes(j));
														});
														if (groupContainingJ !== -1) {
															groups[groupContainingJ].push(i);
														}
													}
												}
											}
											const groupContainingI = groups.findIndex(group => {
												return (group.includes(i));
											});
											if (groupContainingI === -1) {
												groups.push([i]);
											}
										}
									}
								}
							}
							dotGroups = groups;
							console.log(dotGroups);
						},

						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>