hid outputs switch

web/kvm/index.html

@@ -154,14 +154,31 @@
             <button class="row33" disabled data-force-hide-menu id="stream-screenshot-button">&bull; Screenshot</button>
             <button class="row33" disabled id="stream-reset-button">Reset stream</button>
           </div>
-          <div class="feature-disabled" id="mouse-squash">
+          <div class="feature-disabled" id="hid-outputs">
+            <hr>
+            <table class="kv">
+              <tr>
+                <td>Keyboard:</td>
+                <td>
+                  <div class="radio-box" id="hid-outputs-keyboard"></div>
+                </td>
+              </tr>
+              <tr>
+                <td>Mouse:</td>
+                <td>
+                  <div class="radio-box" id="hid-outputs-mouse"></div>
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div class="feature-disabled" id="hid-mouse-squash">
             <hr>
                 <table class="kv">
-                  <td>Squash mouse moves:</td>
+                  <td>Squash relative mouse moves:</td>
                   <td align="right">
                     <div class="switch-box">
-                      <input checked type="checkbox" id="mouse-squash-checkbox">
-                      <label for="mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
+                      <input checked type="checkbox" id="hid-mouse-squash-checkbox">
+                      <label for="hid-mouse-squash-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
                     </div>
                   </td>
                 </table>

web/kvm/navbar-system.pug

@@ -33,9 +33,18 @@ li(class="right")
 			button(data-force-hide-menu id="show-stream-button" class="row33") • Show stream
 			button(disabled data-force-hide-menu id="stream-screenshot-button" class="row33") • Screenshot
 			button(disabled id="stream-reset-button" class="row33") Reset stream
-		div(id="mouse-squash" class="feature-disabled")
+		div(id="hid-outputs" class="feature-disabled")
 			hr
-			+menu_switch("mouse-squash-checkbox", "Squash mouse moves", true, true)
+			table(class="kv")
+				tr
+					td Keyboard:
+					td #[div(id="hid-outputs-keyboard" class="radio-box")]
+				tr
+					td Mouse:
+					td #[div(id="hid-outputs-mouse" class="radio-box")]
+		div(id="hid-mouse-squash" class="feature-disabled")
+			hr
+			+menu_switch("hid-mouse-squash-checkbox", "Squash relative mouse moves", true, true)
 		hr
 		div(class="buttons buttons-row")
 			button(data-force-hide-menu id="show-keyboard-button" class="row50") • Show keyboard

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);

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) {

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() {

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);