WIP: draw triangles

backend/server.js

@@ -163,7 +163,6 @@ function getOrientation(dotTrio, topIndex) {
 
 let currentOscBundle = null;
 let hasPending = false;
-let waiting = false;
 
 const sendBundle = () => {
 	if (hasPending) {
@@ -179,10 +178,10 @@ sendBundle();
 
 app.post('/emitter/json', function (req, res) {
 	if (config.app.debug && config.app.debugLog.backend.emitter.httpRequest) {
-		console.log('## Emitter POST request ##');
+		console.log('### Emitter POST request ###');
 	}
 	let oscBundle;
-	if (req.body.event === 'touchend') {
+	if (req.body.type === 'touchend') {
 		fseq = fseq ? fseq + 1 : 1;
 
 		const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
@@ -193,11 +192,11 @@ app.post('/emitter/json', function (req, res) {
 			[
 				'/tuio/2Dcur',
 				'del',
-				req.body.changedTouches[0].identifier
+				req.body.touches[0].identifier
 			]
 		);
 		emitterOscClient.send(currentOscBundle, () => {
-			const index = alive.indexOf(req.body.changedTouches[0].identifier);
+			const index = alive.indexOf(req.body.touches[0].identifier);
 			alive.splice(index, 1);
 			if (alive.length === 0) {
 				currentOscBundle = new Bundle(
@@ -215,12 +214,12 @@ app.post('/emitter/json', function (req, res) {
 			}
 		});
 	} else {
-		if (req.body.changedTouches && req.body.changedTouches.length && req.body.changedTouches.length > 0) {
+		if (req.body.touches && req.body.touches.length && req.body.touches.length > 0) {
 			fseq = fseq ? fseq + 1 : 1;
-			const touches = Object.keys(req.body.changedTouches);
+			const touches = Object.keys(req.body.touches);
 			const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
 			touches.forEach(touch => {
-				const id = req.body.changedTouches[touch].identifier;
+				const id = req.body.touches[touch].identifier;
 				if (!alive.includes(id)) {
 					alive.push(id);
 					aliveMessage.push(id);
@@ -231,9 +230,9 @@ app.post('/emitter/json', function (req, res) {
 			const dots = [];
 			touches.forEach(function(touch) {
 				dots.push({
-					id: req.body.changedTouches[touch].identifier,
-					x: req.body.changedTouches[touch].clientX,
-					y: req.body.changedTouches[touch].clientY
+					id: req.body.touches[touch].identifier,
+					x: req.body.touches[touch].clientX,
+					y: req.body.touches[touch].clientY
 				});
 			});
 			if (config.app.debug && config.app.debugLog.backend.emitter.dots) {
@@ -389,9 +388,9 @@ app.post('/emitter/json', function (req, res) {
 			// 		[
 			// 			'/tuio/2Dcur',
 			// 			'set',
-			// 			req.body.changedTouches[touch].identifier,
-			// 			req.body.changedTouches[touch].clientX / req.body.screenW,
-			// 			req.body.changedTouches[touch].clientY / req.body.screenH,
+			// 			req.body.touches[touch].identifier,
+			// 			req.body.touches[touch].clientX / req.body.screenW,
+			// 			req.body.touches[touch].clientY / req.body.screenH,
 			// 			0.0,
 			// 			0.0
 			// 		]
@@ -405,10 +404,10 @@ app.post('/emitter/json', function (req, res) {
 					'set',
 					1,
 					1,
-					//objTriangle.center[0],
-					//objTriangle.center[1],
-					objTriangle.center[0] / req.body.screenW,
-					objTriangle.center[1] / req.body.screenH,
+					objTriangle.center[0],
+					objTriangle.center[1],
+					// objTriangle.center[0] / req.body.screenW,
+					// objTriangle.center[1] / req.body.screenH,
 					objTriangle.orientation,
 					0.0,
 					0.0,

frontend/assets/config.json

@@ -8,30 +8,32 @@
 		"debugLog": {
 			"backend": {
 				"emitter": {
-					"httpRequest": true,
-					"dots": true,
+					"httpRequest": false,
+					"dots": false,
 					"segments": true,
-					"triangles": true
+					"triangles": false
 				},
 				"receiver": {
-					"oscDatagram": true
+					"oscDatagram": false
 				}
 			},
 			"frontend": {
 				"emitter": {
-
+					"screen": true,
+					"events": false
 				},
 				"receiver": {
-					"onAddTuioCursor": true,
-					"onUpdateTuioCursor": true,
-					"onRemoveTuioCursor": true,
-					"onAddTuioObject": true,
+					"onAddTuioCursor": false,
+					"onUpdateTuioCursor": false,
+					"onRemoveTuioCursor": false,
+					"onAddTuioObject": false,
 					"onUpdateTuioObject": true,
-					"onRemoveTuioObject": true,
-					"onRefresh": true
+					"onRemoveTuioObject": false,
+					"onRefresh": false
 				}
 			}
-		}
+		},
+		"debugDisplay": true
 	},
 	"triangles": []
 }

frontend/index.html

@@ -7,7 +7,15 @@
 
 		<style>
 			body {
+				width: 100%;
+				height: 100%;
 				margin: 0;
+				background-color: #EEEEEE;
+			}
+			#box {
+				width: 100%;
+				height: 100%;
+				border: 1px solid red;
 			}
 			.tuioCursor {
 				background: #111;
@@ -29,9 +37,12 @@
 		</style>
 	</head>
 
-	<body style="height: 100%;">
-		<div id="box" style="width: 100%; height: 100%; background-color: #EEEEEE;"></div>
-		<script src="/jquery-1.7.2.js"></script>
+	<body>
+
+		<!--<div id="box"></div>-->
+		<canvas id="box"></canvas>
+
+		<!--<script src="/jquery-1.7.2.js"></script>-->
 		<script src="/lodash.js"></script>
 		<script src="/socket.io/socket.io.js"></script>
 		<script src="/tuio.js"></script>
@@ -51,7 +62,15 @@
 				const section = sectionParam ? parseInt(sectionParam, 10) : 100;
 
 				if (config.app.debug) {
-					console.log('--- Frontend debug activated ---');
+					console.log('### Frontend debug activated ###');
+				}
+
+				const screenW = window.innerWidth;
+				const screenH = window.innerHeight;
+
+				if (config.app.debug && config.app.debugLog.frontend.emitter.screen) {
+					console.log(`-- Screen width: ${screenW} --`);
+					console.log(`-- Screen height: ${screenH} --`);
 				}
 
 				/* -------
@@ -61,10 +80,6 @@
 				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] = {
@@ -82,7 +97,11 @@
 						};
 					};
 
-					if (config.app.debug) {
+					if (config.app.debug && config.app.debugLog.frontend.emitter.events) {
+						console.log(`-- Event: ${type} --`, touches);
+					}
+
+					if (config.app.debug && config.app.debugDisplay) {
 						box.innerHTML = evt.touches.length;
 					}
 
@@ -97,11 +116,11 @@
 						redirect: 'follow',
 						referrerPolicy: 'no-referrer',
 						body: JSON.stringify({
-							event: type,
+							type,
 							section,
-							screenW: $(document).width(),
-							screenH: $(document).height(),
-							changedTouches: touches
+							screenW,
+							screenH,
+							touches
 						})
 					});
 					evt.preventDefault();
@@ -124,15 +143,24 @@
 				 * --------
 				 */
 
-				var dotGroups = [];
-				var client = new Tuio.Client({
+				const canvas = document.getElementById('box');
+				context = canvas.getContext('2d');
+
+				const drawTriangle = (a, b, c) => {
+					console.log(context, Math.round(a.x), Math.round(a.y), Math.round(b.x), Math.round(b.y), Math.round(c.x), Math.round(c.y));
+
+					const path = new Path2D();
+					path.moveTo(Math.round(a.x), Math.round(a.y));
+					path.lineTo(Math.round(b.x), Math.round(b.y));
+					path.lineTo(Math.round(c.x), Math.round(c.y));
+					context.fill(path);
+				};
+				const client = new Tuio.Client({
 					host: `http://localhost:${config.app.httpPort}`
-				}),
-				screenW = $(document).width(),
-				screenH = $(document).height()
+				});
 
-				cursors = {},
-				objects = {},
+				const cursors = {};
+				const objects = {};
 
 				onConnect = function() {
 					if (config.app.debug) {
@@ -141,9 +169,11 @@
 				},
 
 				onAddTuioCursor = function(addCursor) {
+					/*
 					var $addCursor = $('<div class="tuioCursor"></div>');
 					$('body').append($addCursor);
 					cursors[addCursor.getCursorId()] = $addCursor;
+					*/
 					onUpdateTuioCursor(addCursor);
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioCursor) {
 						console.log('addTuioCursor', addCursor);
@@ -151,29 +181,36 @@
 				},
 
 				onUpdateTuioCursor = function(updateCursor) {
+					/*
 					var $updateCursor = cursors[updateCursor.getCursorId()];
 					$updateCursor.css({
 						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) {
+					/*
 					var $addObject = $('<div class="tuioObj"></div>');
 					$('body').append($addObject);
 					objects[addObject.symbolID] = $addObject;
+					*/
+
 					onUpdateTuioObject(addObject);
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioObject) {
 						console.log('addTuioObject', addObject);
@@ -181,21 +218,48 @@
 				},
 
 				onUpdateTuioObject = function(updateObject) {
+					/*
 					var $updateObject = objects[updateObject.symbolID];
 					$updateObject.css({
 						left: updateObject.getScreenX(screenW),
 						top: updateObject.getScreenY(screenH),
 						rotate : updateObject.getAngleDegrees()
 					});
+					*/
+
+					const apexAngle = 35;
+					const mediatrice = 300;
+
+					if (config.app.debugDisplay) {
+						const x = updateObject.xPos;
+						const y = updateObject.yPos;
+
+						const apex = {
+							x: Math.cos(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + x,
+							y: Math.sin(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + y
+						};
+						const b = {
+							x: Math.cos((apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
+							y: Math.sin((apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.y
+						};
+						const c = {
+							x: Math.cos((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
+							y: Math.sin((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.y
+						};
+						drawTriangle(apex, b, c);
+					}
+
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
 						console.log('updateTuioObject', updateObject);
 					}
 				},
 
 				onRemoveTuioObject = function(removeObject) {
+					/*
 					var $removeObject = objects[removeObject.symbolID];
 					$removeObject.remove();
 					delete[removeObject.symbolID];
+					*/
 					if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioObject) {
 						console.log('removeTuioObject', removeObject);
 					}