change only for 3 zones

README.md

@@ -7,6 +7,8 @@ puis `npm install`
 ## lancer
 
 node backend/server.js
+
+ou `npx nodemon .\backend\server.js` pour reload si un fichier est modifié
 Une page de test est accessible sur localhost:5000
 Penser à modifier maxDistanceBetweenPoints en fonction de l'écran
 

backend/server.js

@@ -165,12 +165,16 @@ function getOrientation(dotTrio, topIndex) {
 function objectGarbageCollector(){
 	//si un point dans last dots est detecté dans un des triangle alors on ne réduit pas sa duration
 	for(const triangle of objectsAlive){
-		if(triangle.dots.some(dot => lastDots.some(lastDot => lastDot.x == dot.x))){	
+		if(triangle.dots.some(dot => lastDots.some(lastDot => lastDot.target == dot.target))){	
 		} else {
 			triangle.remainingDuration -= 1;
 		}
 	};
 	objectsAlive = objectsAlive.filter(triangle => triangle.remainingDuration > 0);
+	if (config.app.debug && config.app.debugLog.backend.emitter.dots) {
+		console.log("--garbageCollection--", lastDots);
+		objectsAlive.forEach(tr => console.log(tr));
+	}
 	createBundle();
 }
 
@@ -186,9 +190,9 @@ function createBundle(){
 		currentOscBundle.append([
 					'/tuio/2Dobj',
 					'set',
+					triangle.matchingObject.apexAngle, 
 					triangle.matchingObject.apexAngle,
-					triangle.matchingObject.apexAngle,
-					triangle.center[0],
+					triangle.target, //we use x as target identifier
 					triangle.center[1],
 					triangle.orientation,
 					0.0,
@@ -208,7 +212,8 @@ function listDots(touches){
 		dots.push({
 			id: touch.identifier,
 			x: touch.clientX,
-			y: touch.clientY
+			y: touch.clientY,
+			target: touch.target
 		});
 	};
 	if (config.app.debug && config.app.debugLog.backend.emitter.dots) {
@@ -238,6 +243,7 @@ function listSegments(dots){
 							x2: dots[j].x,
 							y1: dots[i].y,
 							y2: dots[j].y,
+							target: dots[i].target,
 							hyp
 						});
 					}
@@ -296,6 +302,7 @@ function filterTriangles(dots, triangles){
 		objTriangle.dots[0] = dots[triangle[0]];
 		objTriangle.dots[1] = dots[triangle[1]];
 		objTriangle.dots[2] = dots[triangle[2]];
+		objTriangle.target = objTriangle.dots[0].target
 
 		objTriangle.apex = getTop(objTriangle.dots);
 		objTriangle.center = [
@@ -336,7 +343,11 @@ function updateAliveTriangles(filteredTriangles) {
 		});
 		if (idx == -1) {
 			triangle.remainingDuration = config.app.remainingDuration;
-			objectsAlive.push(triangle);
+			if(objectsAlive.some(obj => obj.target == triangle.target)){
+				console.log("already a triangle in this box");
+			} else {
+				objectsAlive.push(triangle);
+			}
 		} else {
 			triangle.remainingDuration = config.app.remainingDuration;
 			objectsAlive[idx] = triangle;
@@ -401,14 +412,14 @@ app.post('/emitter/json', function (req, res) {
 	if (req.body.touches && req.body.touches.length && req.body.touches.length > 0) {
 		fseq = fseq ? fseq + 1 : 1;
 		const touches = Object.keys(req.body.touches);
-		const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
-		touches.forEach(touch => {
-			const id = req.body.touches[touch].identifier;
-			if (!alive.includes(id)) {
-				alive.push(id);
-				aliveMessage.push(id);
-			}
-		});
+		// const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
+		// touches.forEach(touch => {
+		// 	const id = req.body.touches[touch].identifier;
+		// 	if (!alive.includes(id)) {
+		// 		alive.push(id);
+		// 		aliveMessage.push(id);
+		// 	}
+		// });
 
 		/* Listage de tous les points */
 		const dots = listDots(req.body.touches);

frontend/assets/config.json

@@ -3,8 +3,8 @@
 		"oscUdpPort": 3333,
 		"httpPort": 5000,
 		"timerRefresh": 50,
-		"maxDistanceBetweenPoints": 60,
-		"matchingTolerance": 1,
+		"maxDistanceBetweenPoints": 130,
+		"matchingTolerance": 1.5,
 		"remainingDuration": 3,
 		"garbageCollectorInterval": 1000,
 		"debug": true,
@@ -12,12 +12,13 @@
 			"backend": {
 				"emitter": {
 					"httpRequest": false,
-					"dots": false,
+					"dots": true,
 					"segments": false,
 					"triangles": false,
 					"apex": false,
 					"matchingObject": false,
-					"aliveTriangles": false
+					"aliveTriangles": false,
+					"garbageCollection": true
 				},
 				"receiver": {
 					"oscDatagram": false
@@ -33,7 +34,7 @@
 					"onUpdateTuioCursor": false,
 					"onRemoveTuioCursor": false,
 					"onAddTuioObject": true,
-					"onUpdateTuioObject": true,
+					"onUpdateTuioObject": false,
 					"onRemoveTuioObject": true,
 					"onRefresh": false
 				}

frontend/index.html

@@ -13,8 +13,16 @@
 				background-color: #EEEEEE;
 			}
 			#box {
-				width: 100%;
-				height: 100%;
+				width: 50%;
+				height: 50%;
+				background-color: #0b5397;
+				margin:0px;
+			}
+			#box2 {
+				width: 50%;
+				height: 50%;
+				background-color: #0b9756;
+				margin:0px;
 			}
 			.tuioCursor {
 				background: #111;
@@ -39,7 +47,8 @@
 	<body>
 
 		<!--<div id="box"></div>-->
-		<canvas id="box"></canvas>
+		<div id="box"></div>
+		<div id="box2"></div>
 
 		<!--<script src="/jquery-1.7.2.js"></script>-->
 		<script src="/lodash.js"></script>
@@ -56,10 +65,6 @@
 			}).then(data => {
 				config = data;
 
-				const urlParams = new URLSearchParams(window.location.search);
-				const sectionParam = urlParams.get('section');
-				const section = sectionParam ? parseInt(sectionParam, 10) : 100;
-
 				if (config.app.debug) {
 					console.log('### Frontend debug activated ###');
 				}
@@ -77,23 +82,31 @@
 				 * -------
 				 */
 				const box = document.getElementById('box');
+				const box2 = document.getElementById('box2');
+
+
+				const boxes = [box, box2]
 
 				const eventHandler = (evt, type) => {
 					const touches = [];
 					for (var i = 0; i < evt.touches.length; i++) {
-						touches[i] = {
-							clientX: evt.touches[i].clientX,
-							clientY: evt.touches[i].clientY,
-							force: evt.touches[i].force,
-							identifier: ((evt.touches[i].identifier + 1) % 100) + section,
-							pageX: evt.touches[i].pageX,
-							pageY: evt.touches[i].pageY,
-							radiusX: evt.touches[i].radiusX,
-							radiusY: evt.touches[i].radiusY,
-							rotationAngle: evt.touches[i].rotationAngle,
-							screenX: evt.touches[i].screenX,
-							screenY: evt.touches[i].screenY
-						};
+						const boxId = boxes.findIndex(box => box.id == evt.touches[i].target.id);
+						console.log(boxId);
+						if(boxId >= 0){ // we only keep touches in the initial div
+							touches.push({
+								clientX: evt.touches[i].clientX,
+								clientY: evt.touches[i].clientY,
+								force: evt.touches[i].force,
+								identifier: evt.touches[i].identifier,
+								pageX: evt.touches[i].pageX,
+								pageY: evt.touches[i].pageY,
+								radiusX: evt.touches[i].radiusX,
+								radiusY: evt.touches[i].radiusY,
+								rotationAngle: evt.touches[i].rotationAngle,
+								screenX: evt.touches[i].screenX,
+								screenY: evt.touches[i].screenY,
+								target: boxId});
+						}
 					};
 
 					if (config.app.debug && config.app.debugLog.frontend.emitter.events) {
@@ -101,7 +114,7 @@
 					}
 
 					if (config.app.debug && config.app.debugDisplay) {
-						box.innerHTML = evt.touches.length;
+						//box.innerHTML = evt.touches.length;
 					}
 
 					fetch(`http://localhost:${config.app.httpPort}/emitter/json`, {
@@ -116,7 +129,6 @@
 						referrerPolicy: 'no-referrer',
 						body: JSON.stringify({
 							type,
-							section,
 							screenW,
 							screenH,
 							touches
@@ -137,45 +149,22 @@
 					return eventHandler(evt, 'touchend');
 				});
 
+				box2.addEventListener('touchstart', (evt) => {
+					return eventHandler(evt, 'touchstart');
+				});
+
+				box2.addEventListener('touchmove', (evt) => {
+					return eventHandler(evt, 'touchmove');
+				});
+
+				box2.addEventListener('touchend', (evt) => {
+					return eventHandler(evt, 'touchend');
+				});
+
 				/* --------
 				 * RECEIVER
 				 * --------
 				 */
-
-				const canvas = document.getElementById('box');
-				canvas.width = screenW;
-				canvas.height = screenH;
-				context = canvas.getContext('2d');
-				context.font = '10px serif';
-
-				setInterval(draw, 10);
-
-				const cursors = {};
-				const tuioObjects = {};
-
-				function draw(){
-					context.clearRect(0, 0, canvas.width, canvas.height);
-					for(obj of Object.values(tuioObjects)){
-						if (config.app.debugDisplay) {
-							const apex = {
-								x: Math.cos(obj.angle * Math.PI /180) * 150 + obj.xPos,
-								y: Math.sin(obj.angle * Math.PI /180) * 150 + obj.yPos
-							};
-							drawIndicationLine(apex, {
-								x: obj.xPos,
-								y: obj.yPos
-							}, obj.symbolId);
-						}
-					}
-				}
-
-				const drawIndicationLine = (apex, center, id) => {
-					const path = new Path2D();
-					path.moveTo(Math.round(center.x), Math.round(center.y));
-					path.lineTo(Math.round(apex.x), Math.round(apex.y));
-					context.stroke(path);
-					context.fillText(id, Math.round(apex.x), Math.round(apex.y));
-				};
 				
 				const client = new Tuio.Client({
 					host: `http://localhost:${config.app.httpPort}`
@@ -207,14 +196,16 @@
 				},
 
 				onAddTuioObject = function(addObject) {
-					tuioObjects[addObject.symbolId] = addObject;
+					boxes[addObject.xPos].innerText = addObject.angle + " added " + addObject.symbolId;
+					boxes[addObject.xPos].style.transform = "rotate(" + addObject.angle + "deg)";
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioObject) {
 						console.log('addTuioObject', addObject);
 					}
 				},
 
 				onUpdateTuioObject = function(updateObject) {
-					tuioObjects[updateObject.symbolId] = updateObject;
+					boxes[updateObject.xPos].innerText = updateObject.angle + " " + updateObject.symbolId;
+					boxes[updateObject.xPos].style.transform = "rotate(" + updateObject.angle + "deg)";
 
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
 						console.log('updateTuioObject', updateObject);
@@ -223,7 +214,8 @@
 
 				onRemoveTuioObject = function(removeObject) {
 
-					delete tuioObjects[removeObject.symbolId];
+					boxes[removeObject.xPos].innerText = "removed";
+					boxes[removeObject.xPos].style.transform = "rotate(0deg)"
 
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioObject) {
 						console.log('removeTuioObject', removeObject);

package.json

@@ -15,5 +15,8 @@
     "jspack": "0.0.4",
     "node-osc": "^6.1.11",
     "socket.io": "^4.3.2"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.16"
   }
 }