server.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. const express = require('express');
  2. const { Bundle, Client } = require('node-osc');
  3. const path = require('path');
  4. const bodyParser = require('body-parser');
  5. const app = express();
  6. const oscClient = new Client('127.0.0.1', 3333);
  7. let alive = [];
  8. let fseq;
  9. var objTriangle = [] ;
  10. function getHypotenuse(touch1, touch2) {
  11. var x = Math.abs(touch1.x - touch2.x);
  12. var y = Math.abs(touch1.y - touch2.y);
  13. return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  14. }
  15. function getTop(dotTrio) {
  16. var dist01 = getHypotenuse(dotTrio[0], dotTrio[1]);
  17. var dist02 = getHypotenuse(dotTrio[0], dotTrio[2]);
  18. var dist12 = getHypotenuse(dotTrio[1], dotTrio[2]);
  19. var diff01m02 = Math.abs(dist01 - dist02);
  20. var diff01m12 = Math.abs(dist01 - dist12);
  21. var diff02m12 = Math.abs(dist02 - dist12);
  22. if (diff01m02 < diff02m12 && diff01m02 < diff01m12) {return 0;}
  23. else if (diff01m12<diff01m02 && diff01m12<diff02m12) {return 1;}
  24. else if (diff02m12<diff01m02 && diff02m12<diff01m12) {return 2;}
  25. }
  26. function getAngleApex(dotTrio, topIndex) {
  27. var dotA, dotB, dotC;
  28. dotB = dotTrio[topIndex];
  29. if (topIndex == 0) {
  30. dotA = dotTrio[1];
  31. dotC = dotTrio[2];
  32. }
  33. else if (topIndex == 1) {
  34. dotA = dotTrio[0];
  35. dotC = dotTrio[2];
  36. }
  37. else if (topIndex == 2) {
  38. dotA = dotTrio[0];
  39. dotC = dotTrio[1];
  40. }
  41. var AB = [dotB.x - dotA.x, dotB.y - dotA.y] ;
  42. var CB = [dotB.x - dotC.x, dotB.y - dotC.y] ;
  43. var dotProd = (AB[0] * CB[0] + AB[1] * CB[1]);
  44. var crossProd = (AB[0]*CB[1] - AB[1] * CB[0]);
  45. var alpha = Math.atan2(crossProd, dotProd);
  46. //return alpha ;
  47. return Math.floor(alpha * 180. / Math.PI + 0.5) ;
  48. }
  49. function getOrientation(dotTrio, topIndex) {
  50. var dotA, dotB, dotC;
  51. dotB = dotTrio[topIndex];
  52. if (topIndex == 0) {
  53. dotA = dotTrio[1];
  54. dotC = dotTrio[2];
  55. }
  56. else if (topIndex == 1) {
  57. dotA = dotTrio[0];
  58. dotC = dotTrio[2];
  59. }
  60. else if (topIndex == 2) {
  61. dotA = dotTrio[0];
  62. dotC = dotTrio[1];
  63. }
  64. var middlePt = [(dotA.x+dotC.x)/2 ,(dotA.y+dotC.y)/2 ] ;
  65. var diff = [dotB.x - middlePt[0], dotB.y - middlePt[1]] ;
  66. var length = Math.sqrt(Math.pow(diff[0],2) + Math.pow(diff[1], 2) ) ;
  67. //normalize diff
  68. diff = [diff[0]/length, diff[1]/length];
  69. var rad = Math.atan2(diff[0], diff[1]) ;
  70. return Math.floor( -1 * rad * 180 / Math.PI) ;
  71. //return length ;
  72. }
  73. const server = require('http').Server(app);
  74. app.use(bodyParser.json());
  75. app.use(bodyParser.urlencoded({extended:true}));
  76. app.use(express.static('./frontend/assets'));
  77. app.get('/', function (req, res) {
  78. res.sendFile('./frontend/index.html', { root: path.resolve(__dirname + '/..') })
  79. });
  80. app.post('/json', function (req, res) {
  81. if (req.body.debug) {
  82. //console.log(req.body);
  83. }
  84. let oscBundle;
  85. if (req.body.event === 'touchend') {
  86. fseq = fseq ? fseq + 1 : 1;
  87. const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
  88. oscBundle = new Bundle(
  89. [ '/tuio/2Dcur', 'source', `tangibles${req.body.section.toString()}@127.0.0.1` ],
  90. aliveMessage,
  91. [ '/tuio/2Dcur', 'fseq', fseq ],
  92. [
  93. '/tuio/2Dcur',
  94. 'del',
  95. req.body.changedTouches[0].identifier
  96. ]
  97. );
  98. oscClient.send(oscBundle, () => {
  99. const index = alive.indexOf(req.body.changedTouches[0].identifier);
  100. alive.splice(index, 1);
  101. if (alive.length === 0) {
  102. oscBundle = new Bundle(
  103. [ '/tuio/2Dcur', 'source', `tangibles${req.body.section.toString()}@127.0.0.1` ],
  104. [ '/tuio/2Dcur', 'alive' ],
  105. [ '/tuio/2Dcur', 'fseq', fseq ]
  106. );
  107. oscClient.send(oscBundle, () => {
  108. res.status(200).json(JSON.stringify(req.body));
  109. fseq = 0;
  110. });
  111. } else {
  112. res.status(200).send();
  113. }
  114. });
  115. } else {
  116. if (req.body.changedTouches && req.body.changedTouches.length && req.body.changedTouches.length > 0) {
  117. fseq = fseq ? fseq + 1 : 1;
  118. const touches = Object.keys(req.body.changedTouches);
  119. const aliveMessage = [ '/tuio/2Dcur', 'alive' ].concat(alive);
  120. touches.forEach(touch => {
  121. const id = req.body.changedTouches[touch].identifier;
  122. if (!alive.includes(id)) {
  123. alive.push(id);
  124. aliveMessage.push(id);
  125. }
  126. });
  127. /* Listage de tous les points */
  128. const dots = [];
  129. touches.forEach(function(touch) {
  130. dots.push({
  131. id: req.body.changedTouches[touch].identifier,
  132. x: req.body.changedTouches[touch].clientX,
  133. y: req.body.changedTouches[touch].clientY
  134. });
  135. });
  136. // console.log(dots, dots.length);
  137. /* Listage des segments */
  138. const segments = [];
  139. if (dots.length > 2) {
  140. for (var i = 0; i < dots.length; i++) {
  141. for (var j = 0; j < dots.length; j++) {
  142. if (j !== i) {
  143. /* on vérifie que le segment n'est pas déjà listé */
  144. const alreadyExists = segments.find(segment => {
  145. return segment.identifiers.includes(i) && segment.identifiers.includes(j);
  146. });
  147. /* on calcule la taille du segment (l'hypoténuse) */
  148. var hyp = getHypotenuse(dots[i], dots[j]);
  149. /* on garde uniquement les segments inférieurs à 550px
  150. * cette valeur devra être une variable de configuration */
  151. if (!alreadyExists && hyp <= 750) {
  152. segments.push({
  153. identifiers: [i, j],
  154. x1: dots[i].x,
  155. x2: dots[j].x,
  156. y1: dots[i].y,
  157. y2: dots[j].y,
  158. hyp
  159. });
  160. }
  161. }
  162. }
  163. }
  164. }
  165. // console.log(segments, segments.length);
  166. /* Listage des triangles */
  167. var triangles = [];
  168. /* on boucle sur les segments */
  169. segments.forEach((segment) => {
  170. const dot1 = segment.identifiers[0];
  171. const dot2 = segment.identifiers[1];
  172. /* on vérifie que le triangle n'est pas déjà listé */
  173. const alreadyExists = triangles.find(triangle => {
  174. return triangle.includes(dot1) && triangle.includes(dot2);
  175. });
  176. if (!alreadyExists) {
  177. /* on cherche les segments qui contiennent un des 2 points du segment actuel
  178. * ex: si le segment actuel est AB, on cherche un segment contenant A (pour AC) et un autre contenant B (pour BC) */
  179. const found1 = segments.findIndex(seg => {
  180. return (seg.identifiers.includes(dot1) && !seg.identifiers.includes(dot2));
  181. });
  182. const found2 = segments.findIndex(seg => {
  183. return (seg.identifiers.includes(dot2) && !seg.identifiers.includes(dot1));
  184. });
  185. /* si on trouve bien les 2 segments (AC et BC), on peut créer un triangle */
  186. if (found1 !== -1 && found2 !== -1) {
  187. /* on devine quel est le 3ème point du triangle par rapport au segment actuel (le point C par rapport au segment AB) */
  188. const dot3 = segments[found1].identifiers.find(identifier => {
  189. return identifier !== dot1 && identifier !== dot2;
  190. });
  191. triangles.push([dot1, dot2, dot3]);
  192. }
  193. }
  194. });
  195. console.log(triangles, triangles.length);
  196. //MOD TITI
  197. //objet pour stocker les informations des triangles identifiés (points, centre, apexAngle, orientation, indice apex, width, height)
  198. objTriangle = {} ;
  199. /* Définition de l'apex */
  200. triangles.forEach(triangle => {
  201. objTriangle.dots = [];
  202. objTriangle.dots[0] = dots[triangle[0]];
  203. objTriangle.dots[1] = dots[triangle[1]];
  204. objTriangle.dots[2] = dots[triangle[2]];
  205. objTriangle.apex = getTop(objTriangle.dots);
  206. objTriangle.center = [(objTriangle.dots[0].x+objTriangle.dots[1].x+objTriangle.dots[2].x)/3 ,
  207. (objTriangle.dots[0].y+objTriangle.dots[1].y+objTriangle.dots[2].y)/3] ;
  208. objTriangle.angleApex = getAngleApex(objTriangle.dots, objTriangle.apex) ;
  209. objTriangle.orientation = getOrientation(objTriangle.dots, objTriangle.apex) ;
  210. // /* on récupère les 3 côtés (segments) du triangle */
  211. // const segment1 = segments.find(segment => {
  212. // return segment.identifiers.includes(triangle[0]) && segment.identifiers.includes(triangle[1]);
  213. // });
  214. // const segment2 = segments.find(segment => {
  215. // return segment.identifiers.includes(triangle[1]) && segment.identifiers.includes(triangle[2]);
  216. // });
  217. // const segment3 = segments.find(segment => {
  218. // return segment.identifiers.includes(triangle[0]) && segment.identifiers.includes(triangle[2]);
  219. // });
  220. // /* on trouve quel côté est le plus court
  221. // * NOTE: dans notre cas, l'apex sera toujours le point opposé au plus petit côté
  222. // * cette méthode n'est pas généralisable à d'autres projets */
  223. // const smallestSegment = [segment1, segment2, segment3].reduce(function(prev, current) {
  224. // return (prev.hyp < current.hyp) ? prev : current
  225. // });
  226. // /* on déduit quel point du triangle est l'apex */
  227. // const apexDot = triangle.find(dot => {
  228. // return dot !== smallestSegment.identifiers[0] && dot !== smallestSegment.identifiers[1];
  229. // });
  230. console.log(objTriangle.apex );
  231. console.log("centerPos : " + objTriangle.center + " orientation : " + objTriangle.orientation);
  232. /* Reste à faire:
  233. * trouver la valeur de l'angle de l'apex (théorème des cosinus)
  234. * trouver le "centre" du triangle (via les orthocentres ou médianes??)
  235. * déduire l'orientation du triangle
  236. */
  237. });
  238. //plante vite
  239. // if (objTriangle.dots != undefined){
  240. // let oscBundleObj ;
  241. // oscBundleObj = new Bundle(
  242. // [ '/tuio/2Dobj', 'source', `tangibles${req.body.section.toString()}@127.0.0.1` ],
  243. // [ '/tuio/2Dobj', 'alive', 1 ],
  244. // [
  245. // '/tuio/2Dobj',
  246. // 'set',
  247. // 1,
  248. // 1,
  249. // objTriangle.center[0],
  250. // objTriangle.center[1],
  251. // objTriangle.orientation,
  252. // 0.0,
  253. // 0.0,
  254. // 0.0,
  255. // 0.0,
  256. // 0.0
  257. // ],
  258. // [ '/tuio/2Dobj', 'fseq', fseq ]
  259. // );
  260. // // // objTriangle.forEach(triangleIndex => {
  261. // // // oscBundle.append(
  262. // // // [
  263. // // // '/tuio/2Dobj',
  264. // // // 'set',
  265. // // // triangleIndex,
  266. // // // triangleIndex,
  267. // // // objTriangle[triangleIndex].center[0],
  268. // // // objTriangle[triangleIndex].center[1],
  269. // // // objTriangle[triangleIndex].orientation,
  270. // // // 0.0,
  271. // // // 0.0,
  272. // // // 0.0,
  273. // // // 0.0,
  274. // // // 0.0
  275. // // // ]
  276. // // // );
  277. // // // });
  278. // console.log(oscBundleObj);
  279. // oscClient.send(oscBundleObj, () => {
  280. // res.status(200).json(JSON.stringify(req.body));
  281. // });
  282. // }
  283. // oscBundle = new Bundle(
  284. // [ '/tuio/2Dcur', 'source', `tangibles${req.body.section.toString()}@127.0.0.1` ],
  285. // aliveMessage,
  286. // [ '/tuio/2Dcur', 'fseq', fseq ]
  287. // );
  288. // touches.forEach(touch => {
  289. // oscBundle.append(
  290. // [
  291. // '/tuio/2Dcur',
  292. // 'set',
  293. // req.body.changedTouches[touch].identifier,
  294. // req.body.changedTouches[touch].clientX / req.body.screenW,
  295. // req.body.changedTouches[touch].clientY / req.body.screenH,
  296. // 0.0,
  297. // 0.0
  298. // ]
  299. // );
  300. // });
  301. oscBundle = new Bundle ;
  302. oscBundle.append([ '/tuio/2Dobj', 'alive', 1 ]);
  303. if (objTriangle.dots != undefined){
  304. oscBundle.append([
  305. '/tuio/2Dobj',
  306. 'set',
  307. 1,
  308. 1,
  309. objTriangle.center[0],
  310. objTriangle.center[1],
  311. objTriangle.orientation,
  312. 0.0,
  313. 0.0,
  314. 0.0,
  315. 0.0,
  316. 0.0
  317. ]);
  318. }
  319. oscBundle.append([ '/tuio/2Dobj', 'fseq', fseq ]);
  320. oscClient.send(oscBundle, () => {
  321. res.status(200).json(JSON.stringify(req.body));
  322. });}
  323. else {
  324. res.status(400).send();
  325. }
  326. }
  327. });
  328. server.listen(5001, function () {
  329. console.log('Votre app est disponible sur localhost:5001 !')
  330. });