|
|
@@ -13,8 +13,16 @@
|
|
|
background-color: #EEEEEE;
|
|
|
}
|
|
|
#box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ background-color: #0b5397;
|
|
|
+ margin:0px;
|
|
|
+ }
|
|
|
+ #box2 {
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ background-color: #0b9756;
|
|
|
+ margin:0px;
|
|
|
}
|
|
|
.tuioCursor {
|
|
|
background: #111;
|
|
|
@@ -39,7 +47,8 @@
|
|
|
<body>
|
|
|
|
|
|
<!--<div id="box"></div>-->
|
|
|
- <canvas id="box"></canvas>
|
|
|
+ <div id="box"></div>
|
|
|
+ <div id="box2"></div>
|
|
|
|
|
|
<!--<script src="/jquery-1.7.2.js"></script>-->
|
|
|
<script src="/lodash.js"></script>
|
|
|
@@ -56,10 +65,6 @@
|
|
|
}).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 ###');
|
|
|
}
|
|
|
@@ -77,23 +82,31 @@
|
|
|
* -------
|
|
|
*/
|
|
|
const box = document.getElementById('box');
|
|
|
+ const box2 = document.getElementById('box2');
|
|
|
+
|
|
|
+
|
|
|
+ const boxes = [box, box2]
|
|
|
|
|
|
const eventHandler = (evt, type) => {
|
|
|
const touches = [];
|
|
|
for (var i = 0; i < evt.touches.length; i++) {
|
|
|
- touches[i] = {
|
|
|
- clientX: evt.touches[i].clientX,
|
|
|
- clientY: evt.touches[i].clientY,
|
|
|
- force: evt.touches[i].force,
|
|
|
- identifier: ((evt.touches[i].identifier + 1) % 100) + section,
|
|
|
- pageX: evt.touches[i].pageX,
|
|
|
- pageY: evt.touches[i].pageY,
|
|
|
- radiusX: evt.touches[i].radiusX,
|
|
|
- radiusY: evt.touches[i].radiusY,
|
|
|
- rotationAngle: evt.touches[i].rotationAngle,
|
|
|
- screenX: evt.touches[i].screenX,
|
|
|
- screenY: evt.touches[i].screenY
|
|
|
- };
|
|
|
+ const boxId = boxes.findIndex(box => box.id == evt.touches[i].target.id);
|
|
|
+ console.log(boxId);
|
|
|
+ if(boxId >= 0){ // we only keep touches in the initial div
|
|
|
+ touches.push({
|
|
|
+ clientX: evt.touches[i].clientX,
|
|
|
+ clientY: evt.touches[i].clientY,
|
|
|
+ force: evt.touches[i].force,
|
|
|
+ identifier: evt.touches[i].identifier,
|
|
|
+ pageX: evt.touches[i].pageX,
|
|
|
+ pageY: evt.touches[i].pageY,
|
|
|
+ radiusX: evt.touches[i].radiusX,
|
|
|
+ radiusY: evt.touches[i].radiusY,
|
|
|
+ rotationAngle: evt.touches[i].rotationAngle,
|
|
|
+ screenX: evt.touches[i].screenX,
|
|
|
+ screenY: evt.touches[i].screenY,
|
|
|
+ target: boxId});
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
if (config.app.debug && config.app.debugLog.frontend.emitter.events) {
|
|
|
@@ -101,7 +114,7 @@
|
|
|
}
|
|
|
|
|
|
if (config.app.debug && config.app.debugDisplay) {
|
|
|
- box.innerHTML = evt.touches.length;
|
|
|
+ //box.innerHTML = evt.touches.length;
|
|
|
}
|
|
|
|
|
|
fetch(`http://localhost:${config.app.httpPort}/emitter/json`, {
|
|
|
@@ -116,7 +129,6 @@
|
|
|
referrerPolicy: 'no-referrer',
|
|
|
body: JSON.stringify({
|
|
|
type,
|
|
|
- section,
|
|
|
screenW,
|
|
|
screenH,
|
|
|
touches
|
|
|
@@ -137,45 +149,22 @@
|
|
|
return eventHandler(evt, 'touchend');
|
|
|
});
|
|
|
|
|
|
+ box2.addEventListener('touchstart', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchstart');
|
|
|
+ });
|
|
|
+
|
|
|
+ box2.addEventListener('touchmove', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchmove');
|
|
|
+ });
|
|
|
+
|
|
|
+ box2.addEventListener('touchend', (evt) => {
|
|
|
+ return eventHandler(evt, 'touchend');
|
|
|
+ });
|
|
|
+
|
|
|
/* --------
|
|
|
* RECEIVER
|
|
|
* --------
|
|
|
*/
|
|
|
-
|
|
|
- const canvas = document.getElementById('box');
|
|
|
- canvas.width = screenW;
|
|
|
- canvas.height = screenH;
|
|
|
- context = canvas.getContext('2d');
|
|
|
- context.font = '10px serif';
|
|
|
-
|
|
|
- setInterval(draw, 10);
|
|
|
-
|
|
|
- const cursors = {};
|
|
|
- const tuioObjects = {};
|
|
|
-
|
|
|
- function draw(){
|
|
|
- context.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- for(obj of Object.values(tuioObjects)){
|
|
|
- if (config.app.debugDisplay) {
|
|
|
- const apex = {
|
|
|
- x: Math.cos(obj.angle * Math.PI /180) * 150 + obj.xPos,
|
|
|
- y: Math.sin(obj.angle * Math.PI /180) * 150 + obj.yPos
|
|
|
- };
|
|
|
- drawIndicationLine(apex, {
|
|
|
- x: obj.xPos,
|
|
|
- y: obj.yPos
|
|
|
- }, obj.symbolId);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const drawIndicationLine = (apex, center, id) => {
|
|
|
- const path = new Path2D();
|
|
|
- path.moveTo(Math.round(center.x), Math.round(center.y));
|
|
|
- path.lineTo(Math.round(apex.x), Math.round(apex.y));
|
|
|
- context.stroke(path);
|
|
|
- context.fillText(id, Math.round(apex.x), Math.round(apex.y));
|
|
|
- };
|
|
|
|
|
|
const client = new Tuio.Client({
|
|
|
host: `http://localhost:${config.app.httpPort}`
|
|
|
@@ -207,14 +196,16 @@
|
|
|
},
|
|
|
|
|
|
onAddTuioObject = function(addObject) {
|
|
|
- tuioObjects[addObject.symbolId] = addObject;
|
|
|
+ boxes[addObject.xPos].innerText = addObject.angle + " added " + addObject.symbolId;
|
|
|
+ boxes[addObject.xPos].style.transform = "rotate(" + addObject.angle + "deg)";
|
|
|
if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioObject) {
|
|
|
console.log('addTuioObject', addObject);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
onUpdateTuioObject = function(updateObject) {
|
|
|
- tuioObjects[updateObject.symbolId] = updateObject;
|
|
|
+ boxes[updateObject.xPos].innerText = updateObject.angle + " " + updateObject.symbolId;
|
|
|
+ boxes[updateObject.xPos].style.transform = "rotate(" + updateObject.angle + "deg)";
|
|
|
|
|
|
if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
|
|
|
console.log('updateTuioObject', updateObject);
|
|
|
@@ -223,7 +214,8 @@
|
|
|
|
|
|
onRemoveTuioObject = function(removeObject) {
|
|
|
|
|
|
- delete tuioObjects[removeObject.symbolId];
|
|
|
+ boxes[removeObject.xPos].innerText = "removed";
|
|
|
+ boxes[removeObject.xPos].style.transform = "rotate(0deg)"
|
|
|
|
|
|
if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioObject) {
|
|
|
console.log('removeTuioObject', removeObject);
|
asr@asr.fr