OpenDeck/plugins/com.amansprojects.starterpack.sdPlugin/assets/propertyInspector/switchProfile.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 device = document.getElementById("device");
				device.value = inActionInfo.payload.settings.device ?? inActionInfo.device;
				const profile = document.getElementById("profile");
				profile.value = inActionInfo.payload.settings.profile ?? "Default";
				const anticlockwise = document.getElementById("anticlockwise");
				anticlockwise.value = inActionInfo.payload.settings.anticlockwise ?? "Default";
				const clockwise = document.getElementById("clockwise");
				clockwise.value = inActionInfo.payload.settings.clockwise ?? "Default";

				if (inActionInfo.payload.controller == "Encoder") {
					document.getElementById("encoder").style.display = "block";
					document.getElementById("up-label").innerText = "Dial press";
				}

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

				websocket.onmessage = (event) => {
					const data = JSON.parse(event.data);
					if (data.event == "sendToPropertyInspector" && data.payload.event == "updateDevices") {
						const datalist = document.getElementById("devices");
						datalist.innerHTML = "";
						for (const device of data.payload.devices) {
							const option = document.createElement("option");
							option.value = device;
							datalist.appendChild(option);
						}
					}
				};
			}
		</script>
		<link rel="stylesheet" href="sdpi.css" />
	</head>
	<body>
		<div class="sdpi-item">
			<div class="sdpi-item-label">Device ID</div>
			<input id="device" list="devices" type="text" oninput="update()" class="sdpi-item-value" />
			<datalist id="devices"></datalist>
		</div>
		<div class="sdpi-item">
			<div class="sdpi-item-label" id="up-label">Profile</div>
			<input id="profile" oninput="update()" class="sdpi-item-value" />
		</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" />
			</div>
			<div class="sdpi-item">
				<div class="sdpi-item-label">Dial rotate clockwise</div>
				<input id="clockwise" oninput="update()" class="sdpi-item-value" />
			</div>
		</div>
	</body>
</html>