OpenDeck/plugins/com.amansprojects.starterpack.sdPlugin/assets/propertyInspector/inputSimulation.html

<!doctype html>
<html lang="en">
	<head>
		<script>
			let update = () => {};

			function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) {
				const websocket = new WebSocket("ws://localhost:" + inPort);
				inActionInfo = JSON.parse(inActionInfo);
				websocket.onopen = () => {
					websocket.send(
						JSON.stringify({
							event: inRegisterEvent,
							uuid: inPropertyInspectorUUID,
						}),
					);
				};

				const down = document.getElementById("down");
				down.value = inActionInfo.payload.settings.down ?? "";
				const up = document.getElementById("up");
				up.value = inActionInfo.payload.settings.up ?? "";
				const anticlockwise = document.getElementById("anticlockwise");
				anticlockwise.value = inActionInfo.payload.settings.anticlockwise ?? "";
				const clockwise = document.getElementById("clockwise");
				clockwise.value = inActionInfo.payload.settings.clockwise ?? "";

				if (inActionInfo.payload.controller == "Encoder") {
					document.getElementById("encoder").style.display = "block";
					document.getElementById("down-label").innerText = "Dial down";
					document.getElementById("up-label").innerText = "Dial up";
					down.placeholder = down.placeholder.replace("key", "dial");
					up.placeholder = up.placeholder.replace("key", "dial");
				}

				update = () => {
					websocket.send(
						JSON.stringify({
							event: "setSettings",
							context: inActionInfo.context,
							payload: {
								down: down.value,
								up: up.value,
								anticlockwise: anticlockwise.value,
								clockwise: clockwise.value,
							},
						}),
					);
				};

				websocket.onmessage = (event) => {
					const data = JSON.parse(event.data);
					if (data.event == "sendToPropertyInspector") {
						if (data.payload.error) {
							document.getElementById("error").innerText = "Error: " + data.payload.error;
							document.getElementById("error").style.display = "block";
						} else {
							document.getElementById("error").style.display = "none";
						}
					}
				};
			}
		</script>
		<link rel="stylesheet" href="sdpi.css" />
	</head>
	<body>
		<div id="error" style="display: none; padding: 8px 18px 8px 12px; color: lightcoral"></div>
		<div class="sdpi-item">
			<div class="sdpi-item-label" id="down-label">Key down</div>
			<input id="down" oninput="update()" class="sdpi-item-value" style="font-family: monospace" placeholder="Input to be executed on key down" />
		</div>
		<div class="sdpi-item">
			<div class="sdpi-item-label" id="up-label">Key up</div>
			<input id="up" oninput="update()" class="sdpi-item-value" style="font-family: monospace" placeholder="Input to be executed on key up" />
		</div>
		<div id="encoder" style="display: none">
			<div class="sdpi-item">
				<div class="sdpi-item-label">Dial rotate anticlockwise</div>
				<input
					id="anticlockwise"
					oninput="update()"
					class="sdpi-item-value"
					style="font-family: monospace"
					placeholder="Input to be executed on dial rotate anticlockwise"
				/>
			</div>
			<div class="sdpi-item">
				<div class="sdpi-item-label">Dial rotate clockwise</div>
				<input
					id="clockwise"
					oninput="update()"
					class="sdpi-item-value"
					style="font-family: monospace"
					placeholder="Input to be executed on dial rotate clockwise"
				/>
			</div>
		</div>
		<details open>
			<summary style="margin-bottom: 0.25rem; font-size: 1.25rem">Details</summary>
			<code style="word-break: break-all">[t("hello world!"),m(10,10,r),s(5),b(l),k(ctrl,p),k(uni('a')),k(ctrl,r)]</code>
			<p>The example above becomes something like this:</p>
			<!-- prettier-ignore -->
			<code style="white-space: pre;">[
	Text("hello world!"),
	MoveMouse(10, 10, Relative),
	Scroll(5, Vertical),
	Button(Left, Click),
	Key(Control, Press),
	Key(Unicode('a'), Click),
	Key(Control, Release),
]</code>
			<p>
				As you can see, <code>Vertical</code> is the default for the <code>Scroll</code> action if an axis is not specified, <code>Click</code> (press followed
				by release) is the default for the <code>Button</code> and <code>Key</code> actions if a direction is not specified, and so on.
			</p>
			<!-- prettier-ignore -->
			<p>
				You can find a list of all of the keycodes
				<span style="color: dodgerblue; cursor: pointer;" onclick="window.open('https://github.com/enigo-rs/enigo/blob/v0.5.0/src/keycodes.rs', '_blank');">here</span>.
				Please note that not all keycodes are available on all operating systems, as is marked on each such keycode on the line above it.
				You can find the possible buttons, directions, axis and coordinate types
				<span style="color: dodgerblue; cursor: pointer;" onclick="window.open('https://github.com/enigo-rs/enigo/blob/v0.5.0/src/lib.rs', '_blank');">here</span>.
			</p>
		</details>
	</body>
</html>