<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>ASR tangibles</title> <style> body { margin: 0; } .tuioCursor { background: #111; height: 8px; left: 0; position: absolute; top: 0; width: 8px; } .tuioObj { background: #111; height: 15px; left: 0; position: absolute; top: 0; width: 8px; rotate: 0deg; } </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> <script src="/lodash.js"></script> <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()}`); } 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 }; }; 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.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('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(); }); if (!(typeof box.ontouchstart != 'undefined')) { box.style.border = '1px solid red'; } /* -------- * 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' }), screenW = $(document).width(), screenH = $(document).height() cursors = {}, objects = {}, onConnect = function() { if (debug) { console.log('connected'); } }, onAddTuioCursor = function(addCursor) { var $addCursor = $('<div class="tuioCursor"></div>'); $('body').append($addCursor); cursors[addCursor.getCursorId()] = $addCursor; onUpdateTuioCursor(addCursor); }, onUpdateTuioCursor = function(updateCursor) { var $updateCursor = cursors[updateCursor.getCursorId()]; $updateCursor.css({ left: updateCursor.getScreenX(screenW), top: updateCursor.getScreenY(screenH) }); }, onRemoveTuioCursor = function(removeCursor) { var $removeCursor = cursors[removeCursor.getCursorId()]; $removeCursor.remove(); delete[removeCursor.getCursorId()]; }, onAddTuioObject = function(addObject) { var $addObject = $('<div class="tuioObj"></div>'); $('body').append($addObject); objects[addObject.symbolID] = $addObject; onUpdateTuioObject(addObject); if (debug) { console.log('addTuioObject', addObject); } }, onUpdateTuioObject = function(updateObject) { var $updateObject = objects[updateObject.symbolID]; $updateObject.css({ left: updateObject.getScreenX(screenW), top: updateObject.getScreenY(screenH), rotate : updateObject.getAngleDegrees() }); if (debug) { console.log('updateTuioObject', updateObject); } }, onRemoveTuioObject = function(removeObject) { var $removeObject = objects[removeObject.symbolID]; $removeObject.remove(); delete[removeObject.symbolID]; if (debug) { console.log('removeTuioObject', removeObject); } }, onRefresh = function(time) { if (debug) { console.log('refresh', time); } }; client.on('connect', onConnect); client.on('addTuioCursor', onAddTuioCursor); client.on('updateTuioCursor', onUpdateTuioCursor); client.on('removeTuioCursor', onRemoveTuioCursor); client.on('addTuioObject', onAddTuioObject); client.on('updateTuioObject', onUpdateTuioObject); client.on('removeTuioObject', onRemoveTuioObject); client.on('refresh', onRefresh); client.connect(); }); </script> </body> </html>