|
|
@@ -1,189 +1,189 @@
|
|
|
<!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>
|
|
|
+ <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,
|
|
|
- });
|
|
|
+ <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,
|
|
|
- });
|
|
|
+ const touchEvent = new TouchEvent(eventType, {
|
|
|
+ cancelable: true,
|
|
|
+ bubbles: true,
|
|
|
+ touches: [touchObj],
|
|
|
+ targetTouches: [],
|
|
|
+ changedTouches: [touchObj],
|
|
|
+ shiftKey: true,
|
|
|
+ });
|
|
|
|
|
|
- element.dispatchEvent(touchEvent);
|
|
|
- }
|
|
|
+ element.dispatchEvent(touchEvent);
|
|
|
+ }
|
|
|
|
|
|
- sendTouchEvent(150, 150, box, 'touchstart');
|
|
|
- sendTouchEvent(220, 200, box, 'touchmove');
|
|
|
- sendTouchEvent(220, 200, box, 'touchend');
|
|
|
- */
|
|
|
+ sendTouchEvent(150, 150, box, 'touchstart');
|
|
|
+ sendTouchEvent(220, 200, box, 'touchmove');
|
|
|
+ sendTouchEvent(220, 200, box, 'touchend');
|
|
|
+ */
|
|
|
|
|
|
- const box = document.getElementById('box');
|
|
|
+ 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()}`);
|
|
|
- }
|
|
|
+ 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.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: '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.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.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();
|
|
|
- });
|
|
|
+ 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';
|
|
|
- }
|
|
|
+ if (!(typeof box.ontouchstart != 'undefined')) {
|
|
|
+ box.style.border = '1px solid red';
|
|
|
+ }
|
|
|
</script>
|
|
|
-</body>
|
|
|
+ </body>
|
|
|
</html>
|
bdestombes