send keys over WebSocket

html/index.html

@@ -48,12 +48,6 @@ div.blank {
 	opacity: 0;
 }
 
-div.info div {
-	font-size: 1.5em;
-	display: inline-block;
-	margin: 1em;
-}
-
 div#macros div {
 	width: 9em;
 	display: inline-block;
@@ -89,9 +83,8 @@ div.menu a:hover {
 
 <script>
 var keys = [];
-var fetchqueue = [];
-var curLed = 0;
-var sendKeyInterval = null;
+var mouse = [];
+var sendMouseInterval = null;
 const indicator_list = [
 	{id: "num", label: "NumLock"},
 	{id: "caps", label: "CapsLock"},
@@ -241,23 +234,25 @@ const mouse_list = [
 		{id: "", label: ""}
 	],
 	[
-		{id: "", label: "", width: 3}
-	],
-	[
-		{id: "MouseClickLeftt", label: "Left Click", width: 1.5, height: 0.75},
-		{id: "MouseClickRight", label: "Right Click", width: 1.5, height: 0.75}
+		{id: "MouseClickLeftt", label: "Left Click", width: 1.5},
+		{id: "MouseClickRight", label: "Right Click", width: 1.5}
 	],
 ];
 
-window.setInterval("refreshIndicators();",2000);
-
-window.addEventListener("keydown", onKeyDown, true);
-window.addEventListener("keyup", onKeyUp, true);
 
 window.onload = (event) => {
 	createMacros("macros");
 	createKeys("keyboard", keyboard_list);
 	createKeys("mouse", mouse_list);
+	createIndicators("indicators");
+
+	window.addEventListener("keydown", onKeyDown, true);
+	window.addEventListener("keyup", onKeyUp, true);
+
+	socket = new WebSocket("ws://" + window.location.hostname + ":8080/");
+	//socket.onopen = function (event) { document.getElementById("websocket").innerHTML="connected"; };
+	//socket.onclose = function (event) { document.getElementById("websocket").innerHTML="closed"; };
+	socket.onmessage = function (event) { updateLEDs(event.data); };
 }
 
 function onKeyDown(event) {
@@ -272,13 +267,18 @@ function onKeyDown(event) {
 }
 
 function pressKey(code, repeat=false) {
-	if (keys.includes(code)) { return; }
+	if (code.indexOf("Mouse") >= 0) {
+		if (mouse.includes(code)) { return; }
+		mouse.push(code);
+		sendKeys(mouse, true);
+	} else{
+		if (keys.includes(code)) { return; }
+		keys.push(code);
+		sendKeys(keys);
+	}
 
-	keys.push(code);
-
-	sendKeys(keys);
-	if ( sendKeyInterval == null && repeat) {
-		sendKeyInterval = setInterval( function() { sendKeys(keys); }, 200 );
+	if ( sendMouseInterval == null && repeat) {
+		sendMouseInterval = setInterval( function() { sendKeys(mouse, true); }, 50 );
 	}
 }
 
@@ -294,25 +294,26 @@ function onKeyUp(event) {
 }
 
 function releaseKey(code, repeat=false) {
-	if (keys.includes(code)) {
-		keys.splice(keys.indexOf(code),1);
+	if (code.indexOf("Mouse") >= 0) {
+		if (mouse.includes(code)) {
+			mouse.splice(mouse.indexOf(code),1);
+		}
+		sendKeys(mouse, true);
+	} else{ 
+		if (keys.includes(code)) {
+			keys.splice(keys.indexOf(code),1);
+		}
+		sendKeys(keys);
 	}
 
-	sendKeys(keys);
-
-	if (sendKeyInterval != null && repeat) {
-		clearInterval(sendKeyInterval);
-		sendKeyInterval = null;
+	if (sendMouseInterval != null && repeat) {
+		clearInterval(sendMouseInterval);
+		sendMouseInterval = null;
 	}
 }
 
-
-function sendKeys(curKeys) {
-	const url="sendkeys.cgi?keys=".concat(curKeys);
-	fetchqueue.push(url);
-	//console.log(fetchqueue);
-	document.getElementById("downKeys")
-		.innerHTML = curKeys;
+function sendKeys(curKeys, is_mouse) {
+	// update highlighting of pressed keys
 	prev_keys = document.getElementsByClassName("pressed");
 	for (let key of curKeys) {
 		keyDiv = document.getElementById(key);
@@ -323,31 +324,17 @@ function sendKeys(curKeys) {
 			key.classList.remove("pressed");
 		}
 	}
-	if (fetchqueue.length == 1) {
-		runQueue();
+
+	// send updated key or mouse status
+	if (socket.readyState == WebSocket.OPEN) {
+		if (is_mouse == true) {
+			socket.send("M: " + curKeys);
+		} else {
+			socket.send("K: " + curKeys);
+		}
 	}
 }
 
-async function runQueue() {
-	const url = fetchqueue[0];
-	await fetch(url);
-	fetchqueue.shift();
-	if (fetchqueue.length > 0) {
-		runQueue();
-	}
-}
-
-function updateIndicators() {
-	let indicatorFrame = document.getElementById("indicatorFrame");
-	let indicatorDiv = document.getElementById("indicators");
-	indicatorDiv.innerHTML = indicatorFrame.contentDocument.body.innerHTML;
-}
-
-function refreshIndicators() {
-	let indicatorFrame = document.getElementById("indicatorFrame");
-	indicatorFrame.contentWindow.location.reload(true);
-}
-
 function createKeys(div_id, key_list) {
 	let keyboardDiv = document.getElementById(div_id);
 	for (let row of key_list) {
@@ -410,6 +397,29 @@ function createMacros(macro_id) {
 	}
 }
 
+function createIndicators(indicator_id) {
+	let indicatorDiv = document.getElementById(indicator_id);
+	for (let indicator of indicator_list) {
+		let newDiv = document.createElement("div");
+		newDiv.id = indicator.id;
+		newDiv.textContent = indicator.label;
+		newDiv.className = "off";
+		indicatorDiv.appendChild(newDiv);
+	}
+}
+
+function updateLEDs(cur_state) {
+	let on_leds = cur_state.split(",");
+	for (let indicator of indicator_list) {
+		let indicator_div = document.getElementById(indicator.id);
+		if (on_leds.includes(indicator.id)) {
+			indicator_div.className = "on";
+		} else {
+			indicator_div.className = "off";
+		}
+	}
+}
+
 </script>
 
 </head>
@@ -419,17 +429,13 @@ function createMacros(macro_id) {
 	<div id="keyboard"></div>
 	<div>
 		<div id="indicators"></div>
+		<div>Mouse Controls:</div>
 		<div id="mouse"></div>
 	</div>
 </div>
 
 <div id="macros"></div>
 
-<div class="info">
-	<div>Currently pressed keys:</div>
-	<div id="downKeys"></div>
-</div>
-
 <div>
 	<div class="menu">
 		<a href="wifi.shtml">Configure Wi-Fi</a>
@@ -439,11 +445,6 @@ function createMacros(macro_id) {
 	</div>
 </div>
 
-<div id="status_frames">
-	<iframe id="indicatorFrame" src="indicators.shtml"
-		onload="updateIndicators();"></iframe>
-</div>
-
 </body>
 
 </html>