autotel/multi-touch-test.html

## multi-touch-test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Multi touch test</title>
</head>
<style>
    #container {
        position:fixed;
        left: 0;
        top: 0;
    }
    #pseudo-console {
        position:fixed;
        left: 0;
        top: 0;
    }


    #container .touch-element {
        border: solid 1px;
        width: 70px;
        height: 70px;
        position: absolute;
        text-align: center;
        padding-top: -30px;
    }
    .hide {
        display: none;
    }
</style>
<body>
    <div id="container"></div>
    <div id="pseudo-console"></div>
</body>
<script>

const container = document.getElementById("container");
const pseudoLog = (tx) => {
    const cont = document.getElementById("pseudo-console");
    cont.innerHTML = JSON.stringify(tx);
};

const TouchDiv = function () {
    const diameter = 100;
    const radius = (diameter / 2);
    const element = document.createElement("div");
    element.classList.add("touch-element");
    container.appendChild(element);
    this.position = (coords) => {
        element.style.left = (coords.x - radius) + "px";
        element.style.top = (coords.y - radius) + "px";
    }
    this.text = (txt) => {
        element.innerHTML = txt + "";
    }
    this.hide = () => {
        element.classList.add("hide");
    }
    this.show = () => {
        element.classList.remove("hide");

        element.style.width = diameter + "px";
        element.style.height = diameter + "px";
        element.style["border-radius"] = radius + "px";
    }
}

const touchSprites = [];

const touchesUpdate = (touches) => {

    for (let touch of touches) {
        const number = touch.identifier;

        if(!touchSprites[number]){
            touchSprites [number] = new TouchDiv();
        }

        touchSprites[number].show();
        const tts = touchSprites[number];

        tts.position({
            x: touch.clientX,
            y: touch.clientY,
        });
        tts.text(number);
    }

    touchSprites.slice(touches.length).forEach((touchSprite)=>touchSprite.hide());
}

document.addEventListener("touchmove",(event) => {
    event.preventDefault();
    touchesUpdate(event.targetTouches);
});

document.addEventListener("touchstart",(event) => {
    event.preventDefault();
    touchesUpdate(event.targetTouches);
});

document.addEventListener("touchend",(event) => {
    event.preventDefault();
    touchesUpdate(event.targetTouches);
});

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<title>Multi touch test</title>
	</head>
	<style>
	#container {
	position:fixed;
	left: 0;
	top: 0;
	}
	#pseudo-console {
	position:fixed;
	left: 0;
	top: 0;
	}


	#container .touch-element {
	border: solid 1px;
	width: 70px;
	height: 70px;
	position: absolute;
	text-align: center;
	padding-top: -30px;
	}
	.hide {
	display: none;
	}
	</style>
	<body>
	<div id="container"></div>
	<div id="pseudo-console"></div>
	</body>
	<script>

	const container = document.getElementById("container");
	const pseudoLog = (tx) => {
	const cont = document.getElementById("pseudo-console");
	cont.innerHTML = JSON.stringify(tx);
	};

	const TouchDiv = function () {
	const diameter = 100;
	const radius = (diameter / 2);
	const element = document.createElement("div");
	element.classList.add("touch-element");
	container.appendChild(element);
	this.position = (coords) => {
	element.style.left = (coords.x - radius) + "px";
	element.style.top = (coords.y - radius) + "px";
	}
	this.text = (txt) => {
	element.innerHTML = txt + "";
	}
	this.hide = () => {
	element.classList.add("hide");
	}
	this.show = () => {
	element.classList.remove("hide");

	element.style.width = diameter + "px";
	element.style.height = diameter + "px";
	element.style["border-radius"] = radius + "px";
	}
	}

	const touchSprites = [];

	const touchesUpdate = (touches) => {

	for (let touch of touches) {
	const number = touch.identifier;

	if(!touchSprites[number]){
	touchSprites [number] = new TouchDiv();
	}

	touchSprites[number].show();
	const tts = touchSprites[number];

	tts.position({
	x: touch.clientX,
	y: touch.clientY,
	});
	tts.text(number);
	}

	touchSprites.slice(touches.length).forEach((touchSprite)=>touchSprite.hide());
	}

	document.addEventListener("touchmove",(event) => {
	event.preventDefault();
	touchesUpdate(event.targetTouches);
	});

	document.addEventListener("touchstart",(event) => {
	event.preventDefault();
	touchesUpdate(event.targetTouches);
	});

	document.addEventListener("touchend",(event) => {
	event.preventDefault();
	touchesUpdate(event.targetTouches);
	});

	</script>
	</html>