hid outputs switch

4 files changed, 86 insertions, 5 deletions

diff --git a/web/share/css/radio.css b/web/share/css/radio.css
index 604f5ef1..e4f56d63 100644
--- a/web/share/css/radio.css
+++ b/web/share/css/radio.css
@@ -41,6 +41,10 @@ div.radio-box label {
 	cursor: pointer;
 	position: relative;
 }
+div.radio-box label:not(:last-of-type) {
+	margin-right: 1px;
+	box-shadow: 1px 0 0 0 var(--cs-control-pressed-bg);
+}
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 	div.radio-box label {
 		height: 30px !important;
@@ -65,7 +69,8 @@ div.radio-box label:last-of-type {
 }
 
 div.radio-box input[type=radio]:checked + label {
-	font-weight: bold;
+	/*font-weight: bold;*/
+	text-shadow: 0.5px 0 0 currentColor;
 	border: var(--border-intensive-2px);
 	color: var(--cs-control-intensive-fg);
 	background-color: var(--cs-thumb-default-bg);
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index 6ec64fea..75e77d7d 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -88,14 +88,74 @@ export function Hid() {
 		wm.switchEnabled($("hid-pak-text"), ws);
 		wm.switchEnabled($("hid-pak-button"), ws);
 		wm.switchEnabled($("hid-reset-button"), ws);
+		if (!ws) {
+			self.setState(null);
+		}
 		__recorder.setSocket(ws);
 		__keyboard.setSocket(ws);
 		__mouse.setSocket(ws);
 	};
 
 	self.setState = function(state) {
-		__keyboard.setState(state.keyboard);
-		__mouse.setState(state.mouse);
+		let has_relative_squash = false;
+
+		if (state && state.online) {
+			let keyboard_outputs = state.keyboard.outputs.available;
+			let mouse_outputs = state.mouse.outputs.available;
+			let has_outputs = (keyboard_outputs.length || mouse_outputs.length);
+			let has_relative = false;
+			if (has_outputs) {
+				if ($("hid-outputs-keyboard").outputs !== keyboard_outputs) {
+					let html = "";
+					for (let args of [
+						["USB", "usb"],
+						["PS/2", "ps2"],
+						["Off", ""],
+					]) {
+						if (keyboard_outputs.includes(args[1]) || !args[1]) {
+							html += tools.radioMakeItem("hid-outputs-keyboard-radio", args[0], args[1]);
+						}
+					}
+					$("hid-outputs-keyboard").innerHTML = html;
+					$("hid-outputs-keyboard").outputs = keyboard_outputs;
+					tools.radioSetOnClick("hid-outputs-keyboard-radio", () => __clickOutputsRadio("keyboard"));
+				}
+				if ($("hid-outputs-mouse").outputs !== mouse_outputs) {
+					let html = "";
+					for (let args of [
+						["USB", "usb", false],
+						["USB Relative", "usb_rel", true],
+						["PS/2", "ps2", true],
+						["Off", ""],
+					]) {
+						if (mouse_outputs.includes(args[1]) || !args[1]) {
+							html += tools.radioMakeItem("hid-outputs-mouse-radio", args[0], args[1]);
+							has_relative = (has_relative || args[2]);
+						}
+					}
+					$("hid-outputs-mouse").innerHTML = html;
+					$("hid-outputs-mouse").outputs = mouse_outputs;
+					tools.radioSetOnClick("hid-outputs-mouse-radio", () => __clickOutputsRadio("mouse"));
+				}
+				tools.radioSetValue("hid-outputs-keyboard-radio", state.keyboard.outputs.active);
+				tools.radioSetValue("hid-outputs-mouse-radio", state.mouse.outputs.active);
+				has_relative_squash = ["usb_rel", "ps2"].includes(state.mouse.outputs.active);
+			} else {
+				has_relative = !state.mouse.absolute;
+				has_relative_squash = has_relative;
+			}
+			tools.featureSetEnabled($("hid-outputs"), has_outputs);
+			tools.featureSetEnabled($("hid-mouse-squash"), has_relative);
+		}
+
+		wm.switchRadioEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy));
+		wm.switchRadioEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy));
+		wm.switchEnabled($("hid-mouse-squash-checkbox"), (has_relative_squash && !state.busy));
+
+		if (state) {
+			__keyboard.setState(state.keyboard);
+			__mouse.setState(state.mouse);
+		}
 	};
 
 	var __releaseAll = function() {
@@ -165,6 +225,17 @@ export function Hid() {
 		}
 	};
 
+	var __clickOutputsRadio = function(hid) {
+		let output = tools.radioGetValue(`hid-outputs-${hid}-radio`);
+		let http = tools.makeRequest("POST", `/api/hid/${hid}/set_params?output=${output}`, function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("Can't configure HID:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
 	var __clickResetButton = function() {
 		wm.confirm("Are you sure you want to reset HID (keyboard & mouse)?").then(function(ok) {
 			if (ok) {
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index bcfc7bf0..5aa803d9 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -85,7 +85,6 @@ export function Mouse(record_callback) {
 		if (__absolute && !state.absolute) {
 			__relative_deltas = [];
 		}
-		tools.featureSetEnabled($("mouse-squash"), !state.absolute);
 		__absolute = state.absolute;
 		__updateOnlineLeds();
 	};
@@ -135,7 +134,7 @@ export function Mouse(record_callback) {
 	};
 
 	var __isRelativeSquashed = function() {
-		return $("mouse-squash-checkbox").checked;
+		return $("hid-mouse-squash-checkbox").checked;
 	};
 
 	var __relativeCapturedHandler = function() {
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 74565932..702783d6 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -141,6 +141,12 @@ export var tools = new function() {
 		el.value = value;
 	};
 
+	this.radioMakeItem = function(name, title, value) {
+		return `
+			<input type="radio" id="${name}-${value}" name="${name}" value="${value}" />
+			<label for="${name}-${value}">${title}</label>
+		`;
+	};
 	this.radioSetOnClick = function(name, callback) {
 		for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
 			this.setOnClick(el, callback);