feat: log handling

backend/server.js

@@ -52,7 +52,7 @@ receiverIo.sockets.on('connection', (socket) =>{
 	console.log(`Connecté au client ${socket.id}`);
 
 	const dgramCallback = function (buf) {
-		if (config.app.debug.receiver['osc-datagram']) {
+		if (config.app.debugLog.backend.receiver.oscDatagram) {
 			console.log(oscParser.decode(buf));
 		}
 		socket.emit('osc', oscParser.decode(buf));
@@ -93,9 +93,15 @@ function getTop(dotTrio) {
 	const diff01m12 = Math.abs(dist01 - dist12);
 	const diff02m12 = Math.abs(dist02 - dist12);
 
-	if (diff01m02 < diff02m12 && diff01m02 < diff01m12) {return 0;}
-	else if (diff01m12<diff01m02 && diff01m12<diff02m12) {return 1;}
-	else if (diff02m12<diff01m02 && diff02m12<diff01m12) {return 2;}
+	if (diff01m02 < diff02m12 && diff01m02 < diff01m12) {
+		return 0;
+	}
+	else if (diff01m12 < diff01m02 && diff01m12 < diff02m12) {
+		return 1;
+	}
+	else if (diff02m12 < diff01m02 && diff02m12 < diff01m12) {
+		return 2;
+	}
 }
 
 function getAngleApex(dotTrio, topIndex) {
@@ -172,7 +178,7 @@ const sendBundle = () => {
 sendBundle();
 
 app.post('/emitter/json', function (req, res) {
-	if (req.body.debug && config.app.debug.emitter['http-request']) {
+	if (config.app.debug && config.app.debugLog.backend.emitter.httpRequest) {
 		console.log('## Emitter POST request ##');
 	}
 	let oscBundle;
@@ -230,7 +236,7 @@ app.post('/emitter/json', function (req, res) {
 					y: req.body.changedTouches[touch].clientY
 				});
 			});
-			if (req.body.debug && config.app.debug.emitter.dots) {
+			if (config.app.debug && config.app.debugLog.backend.emitter.dots) {
 				console.log('-- dots --', dots);
 			}
 
@@ -262,7 +268,7 @@ app.post('/emitter/json', function (req, res) {
 					}
 				}
 			}
-			if (req.body.debug && config.app.debug.emitter.segments) {
+			if (config.app.debug && config.app.debugLog.backend.emitter.segments) {
 				console.log('-- segments --', segments);
 			}
 
@@ -295,7 +301,7 @@ app.post('/emitter/json', function (req, res) {
 					}
 				}
 			});
-			if (req.body.debug && config.app.debug.emitter.triangles) {
+			if (config.app.debug && config.app.debugLog.backend.emitter.triangles) {
 				console.log('-- triangles --', triangles);
 			}
 
@@ -400,8 +406,10 @@ app.post('/emitter/json', function (req, res) {
 					'set',
 					1,
 					1,
-					objTriangle.center[0],
-					objTriangle.center[1],
+					//objTriangle.center[0],
+					//objTriangle.center[1],
+					objTriangle.center[0] / req.body.screenW,
+					objTriangle.center[1] / req.body.screenH,
 					objTriangle.orientation,
 					0.0,
 					0.0,
@@ -421,5 +429,5 @@ app.post('/emitter/json', function (req, res) {
 });
 
 httpServer.listen(config.app.httpPort, function () {
- console.log(`Votre app est disponible sur localhost:${config.app.httpPort} !`)
+	console.log(`Votre app est disponible sur localhost:${config.app.httpPort} !`)
 });

frontend/assets/config.json

@@ -4,15 +4,32 @@
 		"httpPort": 5000,
 		"timerRefresh": 50,
 		"maxDistanceBetweenPoints": 750,
-		"debug": {
-			"emitter": {
-				"http-request": true,
-				"dots": true,
-				"segments": true,
-				"triangles": true
+		"debug": true,
+		"debugLog": {
+			"backend": {
+				"emitter": {
+					"httpRequest": true,
+					"dots": true,
+					"segments": true,
+					"triangles": true
+				},
+				"receiver": {
+					"oscDatagram": true
+				}
 			},
-			"receiver": {
-				"osc-datagram": true
+			"frontend": {
+				"emitter": {
+
+				},
+				"receiver": {
+					"onAddTuioCursor": true,
+					"onUpdateTuioCursor": true,
+					"onRemoveTuioCursor": true,
+					"onAddTuioObject": true,
+					"onUpdateTuioObject": true,
+					"onRemoveTuioObject": true,
+					"onRefresh": true
+				}
 			}
 		}
 	},

frontend/index.html

@@ -36,98 +36,97 @@
 		<script src="/socket.io/socket.io.js"></script>
 		<script src="/tuio.js"></script>
 		<script>
-			/* -------
-			 * EMITTER
-			 * -------
-			 */
-			const box = document.getElementById('box');
-
-			const urlParams = new URLSearchParams(window.location.search);
-			const sectionParam = urlParams.get('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()}`);
-			}
+			let config = {};
+			const getConfig = () => {
+				return fetch('/config.json');
+			};
 
-			const eventHandler = (evt, type) => {
-				if (debug) {
-					console.log(evt);
+			getConfig().then(response => {
+				return response.json();
+			}).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 ---');
 				}
 
-				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: ((evt.changedTouches[i].identifier + 1) % 100) + section,
-						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
+				/* -------
+				 * EMITTER
+				 * -------
+				 */
+				const box = document.getElementById('box');
+
+				const eventHandler = (evt, type) => {
+					if (config.app.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: ((evt.changedTouches[i].identifier + 1) % 100) + section,
+							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:5000/emitter/json', {
-					method: 'POST',
-					mode: 'cors',
-					cache: 'no-cache',
-					credentials: 'same-origin',
-					headers: {
-						'Content-Type': 'application/json'
-					},
-					redirect: 'follow',
-					referrerPolicy: 'no-referrer',
-					body: JSON.stringify({
-						event: type,
-						debug,
-						section,
-						screenW: $(document).width(),
-						screenH: $(document).height(),
-						changedTouches: touches
-					})
-				});
-				evt.preventDefault();
-			};
 
-			box.addEventListener('touchstart', (evt) => {
-				return eventHandler(evt, 'touchstart');
-			});
+					if (config.app.debug) {
+						box.innerHTML = evt.touches.length;
+					}
 
-			box.addEventListener('touchmove', (evt) => {
-				return eventHandler(evt, 'touchmove');
-			});
+					fetch(`http://localhost:${config.app.httpPort}/emitter/json`, {
+						method: 'POST',
+						mode: 'cors',
+						cache: 'no-cache',
+						credentials: 'same-origin',
+						headers: {
+							'Content-Type': 'application/json'
+						},
+						redirect: 'follow',
+						referrerPolicy: 'no-referrer',
+						body: JSON.stringify({
+							event: type,
+							section,
+							screenW: $(document).width(),
+							screenH: $(document).height(),
+							changedTouches: touches
+						})
+					});
+					evt.preventDefault();
+				};
 
-			box.addEventListener('touchend', (evt) => {
-				return eventHandler(evt, 'touchend');
-			});
+				box.addEventListener('touchstart', (evt) => {
+					return eventHandler(evt, 'touchstart');
+				});
 
-			if (!(typeof box.ontouchstart != 'undefined')) {
-				box.style.border = '1px solid red';
-			}
+				box.addEventListener('touchmove', (evt) => {
+					return eventHandler(evt, 'touchmove');
+				});
 
+				box.addEventListener('touchend', (evt) => {
+					return eventHandler(evt, 'touchend');
+				});
 
-			/* --------
-			 * RECEIVER
-			 * --------
-			 */
+				/* --------
+				 * RECEIVER
+				 * --------
+				 */
 
-			$(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:${config.app.httpPort}`
 				}),
 				screenW = $(document).width(),
 				screenH = $(document).height()
@@ -136,8 +135,8 @@
 				objects = {},
 
 				onConnect = function() {
-					if (debug) {
-						console.log('connected');
+					if (config.app.debug) {
+						console.log('connected to web-socket');
 					}
 				},
 
@@ -146,6 +145,9 @@
 					$('body').append($addCursor);
 					cursors[addCursor.getCursorId()] = $addCursor;
 					onUpdateTuioCursor(addCursor);
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioCursor) {
+						console.log('addTuioCursor', addCursor);
+					}
 				},
 
 				onUpdateTuioCursor = function(updateCursor) {
@@ -154,12 +156,18 @@
 						left: updateCursor.getScreenX(screenW),
 						top: updateCursor.getScreenY(screenH)
 					});
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioCursor) {
+						console.log('updateTuioCursor', updateCursor);
+					}
 				},
 
 				onRemoveTuioCursor = function(removeCursor) {
 					var $removeCursor = cursors[removeCursor.getCursorId()];
 					$removeCursor.remove();
 					delete[removeCursor.getCursorId()];
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioCursor) {
+						console.log('removeTuioCursor', removeCursor);
+					}
 				},
 
 				onAddTuioObject = function(addObject) {
@@ -167,7 +175,7 @@
 					$('body').append($addObject);
 					objects[addObject.symbolID] = $addObject;
 					onUpdateTuioObject(addObject);
-					if (debug) {
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioObject) {
 						console.log('addTuioObject', addObject);
 					}
 				},
@@ -179,7 +187,7 @@
 						top: updateObject.getScreenY(screenH),
 						rotate : updateObject.getAngleDegrees()
 					});
-					if (debug) {
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
 						console.log('updateTuioObject', updateObject);
 					}
 				},
@@ -188,13 +196,13 @@
 					var $removeObject = objects[removeObject.symbolID];
 					$removeObject.remove();
 					delete[removeObject.symbolID];
-					if (debug) {
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioObject) {
 						console.log('removeTuioObject', removeObject);
 					}
 				},
 
 				onRefresh = function(time) {
-					if (debug) {
+					if (config.app.debug && config.app.debugLog.frontend.receiver.onRefresh) {
 						console.log('refresh', time);
 					}
 				};