fix: various

* fix: use modulo to define dot identifiers
* fix: improve dot removal on touchend (still a WIP)
* fix: dot group definition in receiver (still a WIP)

emitter/backend/server.js

@@ -6,7 +6,7 @@ const bodyParser = require('body-parser');
 const app = express();
 
 const oscClient = new Client('127.0.0.1', 3333);
-const alive = [];
+let alive = [];
 let fseq;
 
 const server = require('http').Server(app);
@@ -16,37 +16,49 @@ app.use(bodyParser.urlencoded({extended:true}));
 app.use(express.static('./frontend/assets'));
 
 app.get('/', function (req, res) {
-   res.sendFile('./frontend/index.html', { root: path.resolve(__dirname + '/..') })
+	res.sendFile('./frontend/index.html', { root: path.resolve(__dirname + '/..') })
 });
 
 app.post('/json', function (req, res) {
-	console.log(req.body);
-	fseq = fseq ? fseq + 1 : 1;
+	if (req.body.debug) {
+		console.log(req.body);
+	}
 	let oscBundle;
 	if (req.body.event === 'touchend') {
+		fseq = fseq ? fseq + 1 : 1;
+
+		const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
 		oscBundle = new Bundle(
 			[ '/tuio/2Dcur', 'source', 'tangibles@127.0.0.1' ],
-			[ '/tuio/2Dcur', 'alive' ],
-			[ '/tuio/2Dcur', 'fseq', fseq ]
+			aliveMessage,
+			[ '/tuio/2Dcur', 'fseq', fseq ],
+			[
+				'/tuio/2Dcur',
+				'del',
+				req.body.changedTouches[0].identifier
+			]
 		);
-		delete alive[req.body.changedTouches[0].identifier];
-		if (alive.length === 0) {
-			fseq = 0;
-		}
 		oscClient.send(oscBundle, () => {
-			res.status(200).json(JSON.stringify(req.body));
+			const index = alive.indexOf(req.body.changedTouches[0].identifier);
+			alive.splice(index, 1);
+			if (alive.length === 0) {
+				oscBundle = new Bundle(
+					[ '/tuio/2Dcur', 'source', 'tangibles@127.0.0.1' ],
+					[ '/tuio/2Dcur', 'alive' ],
+					[ '/tuio/2Dcur', 'fseq', fseq ]
+				);
+				oscClient.send(oscBundle, () => {
+					res.status(200).json(JSON.stringify(req.body));
+					fseq = 0;
+				});
+			} else {
+				res.status(200).send();
+			}
 		});
 	} else {
 		if (req.body.changedTouches && req.body.changedTouches.length && req.body.changedTouches.length > 0) {
+			fseq = fseq ? fseq + 1 : 1;
 			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 => {
 				const id = req.body.changedTouches[touch].identifier;

emitter/frontend/index.html

@@ -45,19 +45,25 @@
 
 		const urlParams = new URLSearchParams(window.location.search);
 		const sectionParam = urlParams.get('section');
-		const section = sectionParam ? parseInt(sectionParam, 10) : 0;
-		console.log(section);
-
+		const section = sectionParam ? parseInt(sectionParam, 10) : 100;
+		const debugParams = urlParams.get('debug');
+		const debug = debugParams ? true : false;
+		if (debug) {
+			console.log('--- Debug activated ---');
+			console.log(`Section: ${section.toString()}`);
+		}
 
 		box.addEventListener('touchstart', function(evt) {
-				console.log(evt);
+				if (debug) {
+					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,
+						identifier: evt.changedTouches[i].identifier % section,
 						pageX: evt.changedTouches[i].pageX,
 						pageY: evt.changedTouches[i].pageY,
 						radiusX: evt.changedTouches[i].radiusX,
@@ -80,6 +86,7 @@
 					referrerPolicy: 'no-referrer',
 					body: JSON.stringify({
 						event: 'touchstart',
+						debug,
 						screenW: $(document).width(),
 						screenH: $(document).height(),
 						changedTouches: touches
@@ -88,14 +95,16 @@
 				evt.preventDefault();
 		});
 		box.addEventListener('touchmove', function(evt) {
-				console.log(evt);
+				if (debug) {
+					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,
+						identifier: evt.changedTouches[i].identifier % section,
 						pageX: evt.changedTouches[i].pageX,
 						pageY: evt.changedTouches[i].pageY,
 						radiusX: evt.changedTouches[i].radiusX,
@@ -118,6 +127,7 @@
 					referrerPolicy: 'no-referrer',
 					body: JSON.stringify({
 						event: 'touchmove',
+						debug,
 						screenW: $(document).width(),
 						screenH: $(document).height(),
 						changedTouches: touches
@@ -127,14 +137,16 @@
 		});
 
 		box.addEventListener('touchend', function(evt) {
-				console.log(evt);
+				if (debug) {
+					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,
+						identifier: evt.changedTouches[i].identifier % section,
 						pageX: evt.changedTouches[i].pageX,
 						pageY: evt.changedTouches[i].pageY,
 						radiusX: evt.changedTouches[i].radiusX,
@@ -157,6 +169,7 @@
 					referrerPolicy: 'no-referrer',
 					body: JSON.stringify({
 						event: 'touchend',
+						debug,
 						screenW: $(document).width(),
 						screenH: $(document).height(),
 						changedTouches: touches

emitter/readme.md

@@ -40,6 +40,14 @@ node ./backend/server.js
 
 ## Gestion de la "section" d'identifiants de points
 
-Utiliser le paramètre d'URL `section` pour déterminer la "tranche" dans laquelle les identifiants de points seront compris, par exemple: http://localhost:5001?section=10000
+Utiliser le paramètre d'URL `section` pour déterminer le modulo qui sera appliqué aux identifiants de points, par exemple: http://localhost:5001?section=100
+
+Valeurs possibles: 100, 200, 300
+
+
+## Gestion du mode "debug" sur le frontend
+
+Ajouter le paramètre "debug" avec comme valeur 1 à l'URL: http://localhost:5001?debug=1 ou http://localhost:5001?section=100&debug=1
+
+Le mode debug affiche les messages de debuggage dans la console du navigateur.
 
-Idéalement, ne pas utiliser des centaines, après quelques minutes de tests, des identifiants supérieurs à 200 pouvaient déjà être notés, d'où l'exemple avec 10000.

receiver/backend/server.js

@@ -30,31 +30,31 @@ app.use(bodyParser.urlencoded({extended:true}));
 app.use(express.static('./frontend/assets'));
 
 app.get('/', function (req, res) {
-   res.sendFile('./frontend/index.html', { root: path.resolve(__dirname + '/..') })
+	res.sendFile('./frontend/index.html', { root: path.resolve(__dirname + '/..') });
 });
 
 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(`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);
+	// forward UDP packets via socket.io
+	udpSocket.on('message', dgramCallback);
 
-  // prevent memory leak on disconnect
-  socket.on('disconnect', function (socket) {
-    udpSocket.removeListener('message', dgramCallback);
-  });
+	// prevent memory leak on disconnect
+	socket.on('disconnect', function (socket) {
+		udpSocket.removeListener('message', dgramCallback);
+	});
 });
 
 // on change app par server
 server.listen(5000, function () {
- console.log('App frontend disponible sur localhost:5000 !')
+console.log('App frontend disponible sur localhost:5000 !')
 });
 

receiver/frontend/index.html

@@ -33,9 +33,15 @@
 					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'
+							host: 'http://localhost:5000'
 						}),
 						screenW = $(document).width(),
 						screenH = $(document).height()
@@ -43,7 +49,9 @@
 						cursors = {},
 
 						onConnect = function() {
-							console.log('connected');
+							if (debug) {
+								console.log('connected');
+							}
 						},
 
 						onAddTuioCursor = function(addCursor) {
@@ -80,28 +88,32 @@
 												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]);
-															}
-														}
+													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]);
+											}
 										}
 									}
 								}
@@ -117,15 +129,21 @@
 						},
 
 						onAddTuioObject = function(addObject) {
-							console.log(addObject);
+							if (debug) {
+								console.log('addTuioObject', addObject);
+							}
 						},
 
 						onUpdateTuioObject = function(updateObject) {
-							console.log(updateObject);
+							if (debug) {
+								console.log('updateTuioObject', updateObject);
+							}
 						},
 
 						onRemoveTuioObject = function(removeObject) {
-							console.log(removeObject);
+							if (debug) {
+								console.log('removeTuioObject', removeObject);
+							}
 						},
 
 						onRefresh = function(time) {

receiver/readme.md

@@ -37,6 +37,7 @@ node ./backend/server.js
 * La page du frontend sera accessible à l'adresse http://localhost:5000
 * Le serveur écoute les messages TUIO sur le port UDP 3333.
 
+
 ## Tester la réception de messages TUIO
 
 On utilise le simulateur TUIO pour envoyer des messages. Par défaut, celui-ci émet également sur le port UDP 3333.
@@ -51,11 +52,8 @@ java -Djavax.accessibility.assistive_technologies=" " -jar TuioSimulator.jar
 Note: le laguage Java doit être installé sur la machine.
 
 
+## Gestion du mode "debug" sur le frontend
 
-## État des lieux
-
-Lors de la réception des messages TUIO, la page web calcule la distance entre chaque point enregistré (via théorème de Pythagore), et l'affiche en console (!! la console du navigateur, accessible via F12 sur la page web).
-
-C'est à partir de ces distances entre points qu'on pourra déterminer si ils font partie d'un même groupe. Cette partie là n'est finalement pas fournie ce soir...
-
+Ajouter le paramètre "debug" avec comme valeur 1 à l'URL: http://localhost:5000?debug=1
+Le mode debug affiche les messages de debuggage dans la console du navigateur.