Tablet-based touch input

Use this and navigate your tablet to /tablet

# Tablet Touch Handler
 
Wish the web server handles route "/tablet" with handler {
    html {
<html>
 
<body >
<span id="status">Status</span>
<canvas id="body" style="width: 100%; height: 100%; border-style: solid;"></canvas>
</body>
<script>
let el = document.getElementById("body");
let width = el.getBoundingClientRect().width;
let height = el.getBoundingClientRect().height;
 
const program = "tablet-touch-handler-" + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 
function touch(event) {
    event.preventDefault(); 
    for (let i = 0; i < event.targetTouches.length; i++) {
         send(`Commit {Claim ${program} has touch number ${i} with x ${event.targetTouches[i].screenX / width} and y ${event.targetTouches[i].screenY / height} }`);
    }
}
el.addEventListener("touchstart", touch, false);
el.addEventListener("touchmove", touch, false);
 
function stop_touch(event) { send(`Commit { Claim ${program} has no touch }`); }
el.addEventListener("touchend", stop_touch, false);
 
let ws;
let send;
function wsConnect() {
	ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws");
	send = function(s) { ws.send(s); }
 
	ws.onopen = () => { document.getElementById('status').innerHTML = "<span style=background-color:seagreen;color:white;>Connnected</span>"; };
	ws.onclose = window.onbeforeunload = () => {
	    document.getElementById('status').innerHTML = "<span style=background-color:red;color:white;>Disconnnected</span>";
 
	    send(`Commit { Claim ${program} has no touch }`);
	    setTimeout(() => { wsConnect(); }, 1000);
	};
	ws.onerror = (err) => {
	document.getElementById('status').innerText = "Error";
	console.error('Socket encountered error: ', err.message, 'Closing socket');
	ws.close();
	}
	ws.onmessage = (msg) => {
	if (msg.data.startsWith("Error:")) {
		const errorEl = document.getElementById("error");
		if (msg.data === "Error:") {
	errorEl.style.backgroundColor = "";
	errorEl.innerText = "";
		} else {
	errorEl.style.backgroundColor = "#f55";
	errorEl.innerText = msg.data;
		}
	}
	}
};
wsConnect();
 
</script>
</html>
 
}
}

Draw a little circle using touch!

When /thing/ claims /thing2/ has touch number /i/ with x /x/ and y /y/ {
    set posX [expr {int($Display::WIDTH * $x) % $Display::WIDTH}]
    set posY [expr {int($Display::HEIGHT * $y) % $Display::HEIGHT}]
 
    Wish to draw a circle with x $posX y $posY radius 20 thickness 6 color white
 
}