<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ASR tangibles</title>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #EEEEEE;
}
#box {
width: 50%;
height: 50%;
background-color: #0b5397;
margin:0px;
}
#box2 {
width: 50%;
height: 50%;
background-color: #0b9756;
margin:0px;
}
.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>
<!--<div id="box"></div>-->
<div id="box"></div>
<div id="box2"></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>
let config = {};
const getConfig = () => {
return fetch('/config.json');
};
getConfig().then(response => {
return response.json();
}).then(data => {
config = data;
if (config.app.debug) {
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} --`);
}
/* -------
* EMITTER
* -------
*/
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++) {
const boxId = boxes.findIndex(box => box.id == evt.touches[i].target.id);
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) {
console.log(`-- Event: ${type} --`, touches);
}
if (config.app.debug && config.app.debugDisplay) {
//box.innerHTML = evt.touches.length;
}
fetch(`http://localhost:${config.app.httpPort}/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({
type,
screenW,
screenH,
touches
})
});
evt.preventDefault();
};
box.addEventListener('touchstart', (evt) => {
return eventHandler(evt, 'touchstart');
});
box.addEventListener('touchmove', (evt) => {
return eventHandler(evt, 'touchmove');
});
box.addEventListener('touchend', (evt) => {
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 client = new Tuio.Client({
host: `http://localhost:${config.app.httpPort}`
});
onConnect = function() {
if (config.app.debug) {
console.log('connected to web-socket');
}
},
onAddTuioCursor = function(addCursor) {
onUpdateTuioCursor(addCursor);
if (config.app.debug && config.app.debugLog.frontend.receiver.onAddTuioCursor) {
console.log('addTuioCursor', addCursor);
}
},
onUpdateTuioCursor = function(updateCursor) {
if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioCursor) {
console.log('updateTuioCursor', updateCursor);
}
},
onRemoveTuioCursor = function(removeCursor) {
if (config.app.debug && config.app.debugLog.frontend.receiver.onRemoveTuioCursor) {
console.log('removeTuioCursor', removeCursor);
}
},
onAddTuioObject = function(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) {
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);
}
},
onRemoveTuioObject = function(removeObject) {
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);
}
},
onRefresh = function(time) {
if (config.app.debug && config.app.debugLog.frontend.receiver.onRefresh) {
console.log('refresh', this.objectList);
}
};
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>