td-tut-ngrok/remote.html at master · OpenISS/td-tut-ngrok · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
	<title>TD Remote</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body { margin: 0; padding-bottom: 2em; overflow: hidden; }
		#ctrl_panel { display: flex; justify-content: space-between; align-items: center; max-width: 600px; margin: 0 auto; }
		#event_log { text-align: center; }
		#trackpad {
		    width: 100%; max-width: 600px; height: 100vw; max-height: 600px;
		    box-sizing: border-box; margin: 0 auto; background-color: #c8c8c8;
		    position: relative; display: flex; color: #a2a2a2; }
		#trackpad:before {
		    content: attr(data-label); margin: auto; font-size: 12vw;
		    font-family: monospace; }
		@media screen and (min-width:600px) {
		    #trackpad:before { font-size: 5em; } }
		@media screen and (max-height:600px) {
		    body { overflow: scroll; } }
	</style>
</head>
<body>
	<div id="trackpad" data-label="TRACKPAD"></div>
	<div id="ctrl_panel">
		<button id="wipe">Wipe Canvas</button>
		<span id="event_log"></span>
	</div>
	<script>
	(() => {
		// This code should execute on all modern browsers
		// To support legacy browsers i.e IE <= 11, see
		// https://babeljs.io/en/repl

		/****************** Here ******************/
		const url = "localhost:9980" // replace with ngrok url
		/****************************************/
		const socket = new WebSocket(`ws://${url}`)
		const trackpad = document.querySelector("#trackpad")
		const wipe = document.querySelector("#wipe")
		const log = document.querySelector("#event_log")

		/**** Post messages to the event log ****/
		socket.onmessage = (event) => log.innerHTML = event.data

		/***** Trackpad Events *****/
		trackpad.ontouchmove = (e) => handleTrackpad(e.targetTouches[0], e.target)
		trackpad.ontouchstart = (e) => {
			e.preventDefault()
			handleTrackpad(e.targetTouches[0], e.target) }
		trackpad.onmousedown = (e) => {
			const handler = (e) => handleTrackpad(e, e.target)
			window.addEventListener("mousemove", handler)
			window.onmouseup = () => window.removeEventListener("mousemove", handler)
			handleTrackpad(e, e.target) }
		function handleTrackpad(user, target) {
			const { x, y, width, height, left, top } = target.getBoundingClientRect()
			const { clientX, clientY } = user
			const { u, v } = formatUV([
				(clientX - (x||left)) / width, // left / top supports legacy Edge
				(clientY - (y||top)) / height, ])
			const json = JSON.stringify({ type: "player:trackpad", u, v })
			socket.send(json) }

		/**** Control Events ****/
		wipe.onclick = (e) => socket.send(JSON.stringify({ type: "ctrl:wipe" }))

		/**** Helpers ****/
		function formatUV(uv) {
			// TouchDesigner expects panel values to increase from the bottom left,
			// 	 whereas web events read from the top left, so we invert our v
			return {
				u: uv[0].toFixed(2), // Round for precision
				v: (1 - uv[1]).toFixed(2), } }
	})()
	</script>
</body>
</html>