add simple mouse controls

html/index.html

@@ -91,6 +91,7 @@ div.menu a:hover {
 var keys = [];
 var fetchqueue = [];
 var curLed = 0;
+var sendKeyInterval = null;
 const indicator_list = [
 	{id: "num", label: "NumLock"},
 	{id: "caps", label: "CapsLock"},
@@ -102,7 +103,7 @@ const macro_list = [
 	{id: "close", label: "ALT+F4", keys: ["AltLeft", "F4"]},
 	{id: "cycle", label: "ALT+Tab", keys: ["AltLeft", "Tab"]}
 ];
-const key_list = [
+const keyboard_list = [
 	[
 		{id: "Escape", label: "ESC", width: 2},
 		{id: "F1", label: "F1"},
@@ -223,6 +224,30 @@ const key_list = [
 		{id: "NumpadDecimal", label: "Del<br>."}
 	],
 ];
+const mouse_list = [
+	[
+		{id: "", label: ""},
+		{id: "MouseUp", label: "<br>&uArr;", repeat: 1},
+		{id: "", label: ""}
+	],
+	[
+		{id: "MouseLeft", label: "<br>&lArr;", repeat: 1},
+		{id: "", label: ""},
+		{id: "MouseRight", label: "<br>&rArr;", repeat: 1}
+	],
+	[
+		{id: "", label: ""},
+		{id: "MouseDown", label: "<br>&dArr;", repeat: 1},
+		{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}
+	],
+];
 
 window.setInterval("refreshIndicators();",2000);
 
@@ -231,7 +256,8 @@ window.addEventListener("keyup", onKeyUp, true);
 
 window.onload = (event) => {
 	createMacros("macros");
-	createKeys("keyboard");
+	createKeys("keyboard", keyboard_list);
+	createKeys("mouse", mouse_list);
 }
 
 function onKeyDown(event) {
@@ -245,12 +271,15 @@ function onKeyDown(event) {
 	event.preventDefault();
 }
 
-function pressKey(code) {
+function pressKey(code, repeat=false) {
 	if (keys.includes(code)) { return; }
 
 	keys.push(code);
 
 	sendKeys(keys);
+	if ( sendKeyInterval == null && repeat) {
+		sendKeyInterval = setInterval( function() { sendKeys(keys); }, 200 );
+	}
 }
 
 function onKeyUp(event) {
@@ -264,19 +293,24 @@ function onKeyUp(event) {
 	event.preventDefault();
 }
 
-function releaseKey(code) {
+function releaseKey(code, repeat=false) {
 	if (keys.includes(code)) {
 		keys.splice(keys.indexOf(code),1);
 	}
 
 	sendKeys(keys);
+
+	if (sendKeyInterval != null && repeat) {
+		clearInterval(sendKeyInterval);
+		sendKeyInterval = null;
+	}
 }
 
 
 function sendKeys(curKeys) {
 	const url="sendkeys.cgi?keys=".concat(curKeys);
 	fetchqueue.push(url);
-	console.log(fetchqueue);
+	//console.log(fetchqueue);
 	document.getElementById("downKeys")
 		.innerHTML = curKeys;
 	prev_keys = document.getElementsByClassName("pressed");
@@ -314,8 +348,8 @@ function refreshIndicators() {
 	indicatorFrame.contentWindow.location.reload(true);
 }
 
-function createKeys(keyboard_id) {
-	let keyboardDiv = document.getElementById(keyboard_id);
+function createKeys(div_id, key_list) {
+	let keyboardDiv = document.getElementById(div_id);
 	for (let row of key_list) {
 		let newRow = document.createElement("div");
 		keyboardDiv.appendChild(newRow);
@@ -325,14 +359,25 @@ function createKeys(keyboard_id) {
 				newDiv.id = key.id;
 				newDiv.innerHTML = key.label;
 				newDiv.className = "key";
-				newDiv.addEventListener("touchstart", function (event) {
-					event.preventDefault(); pressKey(key.id); });
-				newDiv.addEventListener("touchend", function (event) {
-					event.preventDefault(); releaseKey(key.id); });
-				newDiv.addEventListener("mousedown", function () {
-					pressKey(key.id); });
-				newDiv.addEventListener("mouseup", function () {
-					releaseKey(key.id); });
+				if (key.repeat) {
+					newDiv.addEventListener("touchstart", function (event) {
+						event.preventDefault(); pressKey(key.id, true); });
+					newDiv.addEventListener("touchend", function (event) {
+						event.preventDefault(); releaseKey(key.id, true); });
+					newDiv.addEventListener("mousedown", function () {
+						pressKey(key.id, true); });
+					newDiv.addEventListener("mouseup", function () {
+						releaseKey(key.id, true); });
+				} else {
+					newDiv.addEventListener("touchstart", function (event) {
+						event.preventDefault(); pressKey(key.id); });
+					newDiv.addEventListener("touchend", function (event) {
+						event.preventDefault(); releaseKey(key.id); });
+					newDiv.addEventListener("mousedown", function () {
+						pressKey(key.id); });
+					newDiv.addEventListener("mouseup", function () {
+						releaseKey(key.id); });
+				}
 			} else {
 				newDiv.className = "key blank";
 			}
@@ -372,7 +417,10 @@ function createMacros(macro_id) {
 <body>
 <div class="container">
 	<div id="keyboard"></div>
-	<div id="indicators"></div>
+	<div>
+		<div id="indicators"></div>
+		<div id="mouse"></div>
+	</div>
 </div>
 
 <div id="macros"></div>