titi
/
ASR_tangibles


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
							<!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);

		}

		*/


		const box = document.getElementById('box');


		const urlParams = new URLSearchParams(window.location.search);

		const sectionParam = urlParams.get('section');

		const section = sectionParam ? parseInt(sectionParam, 10) : 0;

		console.log(section);


		box.addEventListener('touchstart', function(evt) {

				console.log(evt);

				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',

						clientX: evt.changedTouches[0].clientX,

						clientY: evt.changedTouches[0].clientY,

						force: evt.changedTouches[0].force,

						identifier: section + evt.changedTouches[0].identifier,

						pageX: evt.changedTouches[0].pageX,

						pageY: evt.changedTouches[0].pageY,

						radiusX: evt.changedTouches[0].radiusX,

						radiusY: evt.changedTouches[0].radiusY,

						rotationAngle: evt.changedTouches[0].rotationAngle,

						screenX: evt.changedTouches[0].screenX,

						screenY: evt.changedTouches[0].screenY

					})

				});

				evt.preventDefault();

		});

		box.addEventListener('touchmove', function(evt) {

				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: section + evt.changedTouches[i].identifier,

						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',

						screenW: $(document).width(),

						screenH: $(document).height(),

						changedTouches: touches

					})

				});

				evt.preventDefault();

		});


		box.addEventListener('touchend', function(evt) {

				console.log(evt);

				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',

						clientX: evt.changedTouches[0].clientX,

						clientY: evt.changedTouches[0].clientY,

						force: evt.changedTouches[0].force,

						identifier: section + evt.changedTouches[0].identifier,

						pageX: evt.changedTouches[0].pageX,

						pageY: evt.changedTouches[0].pageY,

						radiusX: evt.changedTouches[0].radiusX,

						radiusY: evt.changedTouches[0].radiusY,

						rotationAngle: evt.changedTouches[0].rotationAngle,

						screenX: evt.changedTouches[0].screenX,

						screenY: evt.changedTouches[0].screenY

					})

				});

				evt.preventDefault();

		});


		if (!(typeof box.ontouchstart != 'undefined')) {

				box.style.border = '1px solid red';

		}


		/*

		sendTouchEvent(150, 150, box, 'touchstart');

		sendTouchEvent(220, 200, box, 'touchmove');

		sendTouchEvent(220, 200, box, 'touchend');

		*/


		</script>
</body>
</html>