feat: add config file

backend/server.js

@@ -4,6 +4,7 @@ const oscParser = require('./osc-parser');
 const bodyParser = require('body-parser');
 const { Bundle, Client } = require('node-osc');
 const path = require('path');
+const config = require('../frontend/assets/config.json');
 
 const app = express();
 
@@ -41,7 +42,7 @@ const onSocketConnection = function(socket) {
 
 const receiverUdpSocket = dgram.createSocket('udp4');
 receiverUdpSocket.on('listening', onSocketListening);
-receiverUdpSocket.bind(3333, '127.0.0.1');
+receiverUdpSocket.bind(config.app.oscUdpPort, '127.0.0.1');
 
 app.get('/receiver/json', function (req, res) {
 	res.status(200).send();
@@ -68,7 +69,7 @@ receiverIo.sockets.on('connection', (socket) =>{
  * -------
  */
 
-const emitterOscClient = new Client('127.0.0.1', 3333);
+const emitterOscClient = new Client('127.0.0.1', config.app.oscUdpPort);
 let alive = [];
 let fseq;
 
@@ -116,7 +117,7 @@ function getAngleApex(dotTrio, topIndex) {
 	const CB = [dotB.x - dotC.x, dotB.y - dotC.y] ;
 
 	const dotProd = (AB[0] * CB[0] + AB[1] * CB[1]);
-	const crossProd = (AB[0]*CB[1] - AB[1] * CB[0]);
+	const crossProd = (AB[0] * CB[1] - AB[1] * CB[0]);
 
 	const alpha = Math.atan2(crossProd, dotProd);
 	//return alpha ;
@@ -141,13 +142,13 @@ function getOrientation(dotTrio, topIndex) {
 		dotC = dotTrio[1];
 	}
 
-	const middlePt = [(dotA.x+dotC.x)/2 ,(dotA.y+dotC.y)/2 ] ;
+	const middlePt = [(dotA.x + dotC.x) / 2, (dotA.y + dotC.y) / 2 ] ;
 	let diff = [dotB.x - middlePt[0], dotB.y - middlePt[1]] ;
-	const length = Math.sqrt(Math.pow(diff[0],2) + Math.pow(diff[1], 2) ) ;
+	const length = Math.sqrt(Math.pow(diff[0], 2) + Math.pow(diff[1], 2) ) ;
 	//normalize diff
-	diff = [diff[0]/length, diff[1]/length];
+	diff = [diff[0] / length, diff[1] / length];
 	const rad = Math.atan2(diff[0], diff[1]) ;
- 	return Math.floor( -1 * rad * 180 / Math.PI)  ;
+ 	return Math.floor(-1 * rad * 180 / Math.PI)  ;
 	 //return length ;
 }
 
@@ -227,9 +228,9 @@ app.post('/emitter/json', function (req, res) {
 							});
 							/* on calcule la taille du segment (l'hypoténuse) */
 							var hyp = getHypotenuse(dots[i], dots[j]);
-							/* on garde uniquement les segments inférieurs à 550px
-							 * cette valeur devra être une variable de configuration */
-							if (!alreadyExists && hyp <= 750) {
+							/* on garde uniquement les segments inférieurs à 750px (valeur par défaut)
+							 * cette valeur est la variable de configuration "maxDistanceBetweenPoints" */
+							if (!alreadyExists && hyp <= config.app.maxDistanceBetweenPoints) {
 								segments.push({
 									identifiers: [i, j],
 									x1: dots[i].x,
@@ -423,6 +424,6 @@ app.post('/emitter/json', function (req, res) {
 
 
 
-httpServer.listen(5000, function () {
- console.log('Votre app est disponible sur localhost:5000 !')
+httpServer.listen(config.app.httpPort, function () {
+ console.log(`Votre app est disponible sur localhost:${config.app.httpPort} !`)
 });

frontend/assets/config.json

@@ -0,0 +1,10 @@
+{
+	"app": {
+		"debug": 0,
+		"oscUdpPort": 3333,
+		"httpPort": 5000,
+		"timerRefresh": 50,
+		"maxDistanceBetweenPoints": 750
+	},
+	"triangles": []
+}

frontend/index.html

@@ -52,136 +52,64 @@
 				console.log(`Section: ${section.toString()}`);
 			}
 
-			box.addEventListener('touchstart', function(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: ((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
-						};
+			const eventHandler = (evt, type) => {
+				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: ((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: 'touchstart',
-							debug,
-							section,
-							screenW: $(document).width(),
-							screenH: $(document).height(),
-							changedTouches: touches
-						})
-					});
-					evt.preventDefault();
+				};
+				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');
 			});
-			box.addEventListener('touchmove', function(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: ((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: 'touchmove',
-							debug,
-							section,
-							screenW: $(document).width(),
-							screenH: $(document).height(),
-							changedTouches: touches
-						})
-					});
-					evt.preventDefault();
+
+			box.addEventListener('touchmove', (evt) => {
+				return eventHandler(evt, 'touchmove');
 			});
 
-			box.addEventListener('touchend', function(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: ((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: 'touchend',
-							debug,
-							section,
-							screenW: $(document).width(),
-							screenH: $(document).height(),
-							changedTouches: touches
-						})
-					});
-					evt.preventDefault();
+			box.addEventListener('touchend', (evt) => {
+				return eventHandler(evt, 'touchend');
 			});
 
 			if (!(typeof box.ontouchstart != 'undefined')) {
-					box.style.border = '1px solid red';
+				box.style.border = '1px solid red';
 			}