<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch detect and send to Node server</title>
</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>
/* simulation de touch events */
/*
function sendTouchEvent(x, y, element, eventType) {
const touchObj = new Touch({
identifier: Date.now(),
target: element,
clientX: x,
clientY: y,
radiusX: 2.5,
radiusY: 2.5,
rotationAngle: 10,
force: 0.5,
});
const touchEvent = new TouchEvent(eventType, {
cancelable: true,
bubbles: true,
touches: [touchObj],
targetTouches: [],
changedTouches: [touchObj],
shiftKey: true,
});
element.dispatchEvent(touchEvent);
}
sendTouchEvent(150, 150, box, 'touchstart');
sendTouchEvent(220, 200, box, 'touchmove');
sendTouchEvent(220, 200, box, 'touchend');
*/
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:5001/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:5001/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:5001/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';
}
</script>
</body>
</html>