titi
/
ASR_tangibles


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!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>