fix: various

* fix: emitter server doesnt freeze anymore
* fix: remove receiver dots on touchend
* fix: receiver dot groups

emitter/backend/server.js

@@ -6,8 +6,8 @@ const bodyParser = require('body-parser');
 const app = express();
 
 const oscClient = new Client('127.0.0.1', 3333);
-let fseq;
 const alive = [];
+let fseq;
 
 const server = require('http').Server(app);
 
@@ -20,30 +20,48 @@ app.get('/', function (req, res) {
 });
 
 app.post('/json', function (req, res) {
-	//console.log(req.body);
+	console.log(req.body);
 	fseq = fseq ? fseq + 1 : 1;
 	let oscBundle;
 	if (req.body.event === 'touchend') {
 		oscBundle = new Bundle(
-			//[ '/tuio/2Dcur', 'source', 'touch@127.0.0.1:5001' ],
+			[ '/tuio/2Dcur', 'source', 'tangibles@127.0.0.1' ],
 			[ '/tuio/2Dcur', 'alive' ],
 			[ '/tuio/2Dcur', 'fseq', fseq ]
 		);
+		delete alive[req.body.changedTouches[0].identifier];
+		if (alive.length === 0) {
+			fseq = 0;
+		}
+		oscClient.send(oscBundle, () => {
+			res.status(200).json(JSON.stringify(req.body));
+		});
 	} else {
-		//if (req.body.changedTouches && req.body.changedTouches.length && req.body.changedTouches.length > 0) {
+		if (req.body.changedTouches && req.body.changedTouches.length && req.body.changedTouches.length > 0) {
 			const touches = Object.keys(req.body.changedTouches);
+			touchList = [];
+			touches.forEach(touch => {
+				const id = req.body.changedTouches[touch].identifier;
+				touchList.push(id);
+			});
+			alive.filter(aliveElement => {
+				return touchList.includes(aliveElement);
+			});
+			const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
 			touches.forEach(touch => {
-				if (!alive.includes(req.body.changedTouches[touch].identifier)) {
-					alive.push(req.body.changedTouches[touch].identifier);
+				const id = req.body.changedTouches[touch].identifier;
+				if (!alive.includes(id)) {
+					alive.push(id);
+					aliveMessage.push(id);
 				}
 			});
+
 			oscBundle = new Bundle(
-				//[ '/tuio/2Dcur', 'source', 'touch@127.0.0.1:5001' ],
-				[ '/tuio/2Dcur', 'alive', alive.join(' ') ],
+				[ '/tuio/2Dcur', 'source', 'tangibles@127.0.0.1' ],
+				aliveMessage,
 				[ '/tuio/2Dcur', 'fseq', fseq ]
 			);
 			touches.forEach(touch => {
-				console.log(req.body.changedTouches[touch]);
 				oscBundle.append(
 					[
 						'/tuio/2Dcur',
@@ -59,7 +77,9 @@ app.post('/json', function (req, res) {
 			oscClient.send(oscBundle, () => {
 				res.status(200).json(JSON.stringify(req.body));
 			});
-		//}
+		} else {
+			res.status(400).send();
+		}
 	}
 });
 

emitter/frontend/index.html

@@ -35,6 +35,10 @@
 
 			element.dispatchEvent(touchEvent);
 		}
+
+		sendTouchEvent(150, 150, box, 'touchstart');
+		sendTouchEvent(220, 200, box, 'touchmove');
+		sendTouchEvent(220, 200, box, 'touchend');
 		*/
 
 		const box = document.getElementById('box');
@@ -47,6 +51,22 @@
 
 		box.addEventListener('touchstart', function(evt) {
 				console.log(evt);
+				const touches = [];
+				for (var i = 0; i < evt.changedTouches.length; i++) {
+					touches[i] = {
+						clientX: evt.changedTouches[i].clientX,
+						clientY: evt.changedTouches[i].clientY,
+						force: evt.changedTouches[i].force,
+						identifier: section + evt.changedTouches[i].identifier,
+						pageX: evt.changedTouches[i].pageX,
+						pageY: evt.changedTouches[i].pageY,
+						radiusX: evt.changedTouches[i].radiusX,
+						radiusY: evt.changedTouches[i].radiusY,
+						rotationAngle: evt.changedTouches[i].rotationAngle,
+						screenX: evt.changedTouches[i].screenX,
+						screenY: evt.changedTouches[i].screenY
+					};
+				};
 				box.innerHTML = evt.touches.length;
 				fetch('http://localhost:5001/json', {
 					method: 'POST',
@@ -60,17 +80,9 @@
 					referrerPolicy: 'no-referrer',
 					body: JSON.stringify({
 						event: 'touchstart',
-						clientX: evt.changedTouches[0].clientX,
-						clientY: evt.changedTouches[0].clientY,
-						force: evt.changedTouches[0].force,
-						identifier: section + evt.changedTouches[0].identifier,
-						pageX: evt.changedTouches[0].pageX,
-						pageY: evt.changedTouches[0].pageY,
-						radiusX: evt.changedTouches[0].radiusX,
-						radiusY: evt.changedTouches[0].radiusY,
-						rotationAngle: evt.changedTouches[0].rotationAngle,
-						screenX: evt.changedTouches[0].screenX,
-						screenY: evt.changedTouches[0].screenY
+						screenW: $(document).width(),
+						screenH: $(document).height(),
+						changedTouches: touches
 					})
 				});
 				evt.preventDefault();
@@ -116,6 +128,22 @@
 
 		box.addEventListener('touchend', function(evt) {
 				console.log(evt);
+				const touches = [];
+				for (var i = 0; i < evt.changedTouches.length; i++) {
+					touches[i] = {
+						clientX: evt.changedTouches[i].clientX,
+						clientY: evt.changedTouches[i].clientY,
+						force: evt.changedTouches[i].force,
+						identifier: section + evt.changedTouches[i].identifier,
+						pageX: evt.changedTouches[i].pageX,
+						pageY: evt.changedTouches[i].pageY,
+						radiusX: evt.changedTouches[i].radiusX,
+						radiusY: evt.changedTouches[i].radiusY,
+						rotationAngle: evt.changedTouches[i].rotationAngle,
+						screenX: evt.changedTouches[i].screenX,
+						screenY: evt.changedTouches[i].screenY
+					};
+				};
 				box.innerHTML = evt.touches.length;
 				fetch('http://localhost:5001/json', {
 					method: 'POST',
@@ -129,17 +157,9 @@
 					referrerPolicy: 'no-referrer',
 					body: JSON.stringify({
 						event: 'touchend',
-						clientX: evt.changedTouches[0].clientX,
-						clientY: evt.changedTouches[0].clientY,
-						force: evt.changedTouches[0].force,
-						identifier: section + evt.changedTouches[0].identifier,
-						pageX: evt.changedTouches[0].pageX,
-						pageY: evt.changedTouches[0].pageY,
-						radiusX: evt.changedTouches[0].radiusX,
-						radiusY: evt.changedTouches[0].radiusY,
-						rotationAngle: evt.changedTouches[0].rotationAngle,
-						screenX: evt.changedTouches[0].screenX,
-						screenY: evt.changedTouches[0].screenY
+						screenW: $(document).width(),
+						screenH: $(document).height(),
+						changedTouches: touches
 					})
 				});
 				evt.preventDefault();
@@ -148,13 +168,6 @@
 		if (!(typeof box.ontouchstart != 'undefined')) {
 				box.style.border = '1px solid red';
 		}
-
-		/*
-		sendTouchEvent(150, 150, box, 'touchstart');
-		sendTouchEvent(220, 200, box, 'touchmove');
-		sendTouchEvent(220, 200, box, 'touchend');
-		*/
-
 		</script>
 </body>
 </html>

receiver/backend/server.js

@@ -12,12 +12,12 @@ const io = require('socket.io')(server, {
 
 const onSocketListening = function() {
 	const address = udpSocket.address();
-	console.log("Serveur TUIO en écoute sur : " + address.address + ":" + address.port);
+	console.log('Serveur TUIO en écoute sur : ' + address.address + ':' + address.port);
 };
 
 const onSocketConnection = function(socket) {
-	udpSocket.on("message", function(msg) {
-		socket.emit("osc", oscParser.decode(msg));
+	udpSocket.on('message', function(msg) {
+		socket.emit('osc', oscParser.decode(msg));
 	});
 };
 
@@ -25,8 +25,6 @@ const udpSocket = dgram.createSocket('udp4');
 udpSocket.on('listening', onSocketListening);
 udpSocket.bind(3333, '127.0.0.1');
 
-//io.listen(server);
-
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended:true}));
 app.use(express.static('./frontend/assets'));
@@ -36,18 +34,18 @@ app.get('/', function (req, res) {
 });
 
 app.get('/json', function (req, res) {
-   res.status(200).json({"message":"ok"})
+   res.status(200).json({'message': 'ok'})
 });
 
 io.sockets.on('connection', (socket) =>{
    console.log(`Connecté au client ${socket.id}`);
 	 const dgramCallback = function (buf) {
 		console.log(oscParser.decode(buf));
-    socket.emit("osc", oscParser.decode(buf));
+    socket.emit('osc', oscParser.decode(buf));
   };
 
   // forward UDP packets via socket.io
-  udpSocket.on("message", dgramCallback);
+  udpSocket.on('message', dgramCallback);
 
   // prevent memory leak on disconnect
   socket.on('disconnect', function (socket) {
@@ -55,8 +53,6 @@ io.sockets.on('connection', (socket) =>{
   });
 });
 
-//io.sockets.on("connection", onSocketConnection);
-
 // on change app par server
 server.listen(5000, function () {
  console.log('App frontend disponible sur localhost:5000 !')

receiver/frontend/index.html

@@ -27,12 +27,13 @@
 	</style>
 
 	<script>
-				function getHypotenuse(touch1, touch2, screenW, screenH) {
+				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() {
+					var dotGroups = [];
 						var client = new Tuio.Client({
 								host: 'http://localhost:5000'
 						}),
@@ -69,19 +70,47 @@
 								});
 							});
 
-							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);
+							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 {
+													groups.forEach((group, groupIndex) => {
+														if (!group.includes(i) && !group.includes(j)) {
+															groups.push([i, j]);
+														} else {
+															if (group.includes(i)) {
+																if (!group.includes(j)) {
+																	groups[groupIndex].push(j);
+																}
+															} else {
+																groups.push([j]);
+															}
+															if (group.includes(j)) {
+																if (!group.includes(i)) {
+																	groups[groupIndex].push(i);
+																}
+															} else {
+																groups.push([i]);
+															}
+														}
+													});
+												}
+											}
+										}
 									}
 								}
 							}
+							dotGroups = groups;
+							console.log(dotGroups);
 						},
 
 						onRemoveTuioCursor = function(removeCursor) {
-							//console.log('remove', removeCursor);
 							var $removeCursor = cursors[removeCursor.getCursorId()];
 							$removeCursor.remove();
 							delete[removeCursor.getCursorId()];