web: option to remap ctrl/caps

4 files changed, 33 insertions, 4 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 74485ade..33533dc1 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -259,11 +259,23 @@
             </table>
           </div>
           <details>
-            <summary>Mouse settings</summary>
+            <summary>Keyboard &amp; Mouse (HID) settings</summary>
             <div class="spoiler">
               <table class="kv">
                 <tr>
-                  <td>Polling interval:</td>
+                      <td>Swap Left Ctrl and Caps keys:</td>
+                      <td align="right">
+                        <div class="switch-box">
+                          <input type="checkbox" id="hid-keyboard-swap-cc-switch">
+                          <label for="hid-keyboard-swap-cc-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                        </div>
+                      </td>
+                </tr>
+              </table>
+              <hr>
+              <table class="kv">
+                <tr>
+                  <td>Mouse polling:</td>
                   <td class="value-slider">
                     <input class="slider" type="range" id="hid-mouse-rate-slider">
                   </td>
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index f8d53793..f41e0abb 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -69,11 +69,15 @@ li(id="system-dropdown" class="right")
 					td Mouse #[a(target="_blank" href="https://docs.pikvm.org/mouse") mode]:
 					td #[div(id="hid-outputs-mouse-box" class="radio-box")]
 		details
-			summary Mouse settings
+			summary Keyboard &amp; Mouse (HID) settings
 			div(class="spoiler")
 				table(class="kv")
 					tr
-						td Polling interval:
+						+menu_switch_notable("hid-keyboard-swap-cc-switch", "Swap Left Ctrl and Caps keys", true, false)
+				hr
+				table(class="kv")
+					tr
+						td Mouse polling:
 						td(class="value-slider") #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
 						td(id="hid-mouse-rate-value" class="value-number")
 					tr(id="hid-mouse-sens" class="feature-disabled")
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index afee8f02..00249647 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -150,6 +150,10 @@ ul#navbar li div.menu details div.spoiler {
 	border-left: var(--border-default-thin);
 	border-bottom: var(--border-default-thin);
 }
+ul#navbar li div.menu details div.spoiler hr {
+	border: none;
+	border-top: var(--border-default-thin);
+}
 ul#navbar li div.menu details summary::marker {
 	color: var(--cs-marker-fg);
 }
diff --git a/web/share/js/kvm/keyboard.js b/web/share/js/kvm/keyboard.js
index b398e769..686d968b 100644
--- a/web/share/js/kvm/keyboard.js
+++ b/web/share/js/kvm/keyboard.js
@@ -51,6 +51,8 @@ export function Keyboard(__recordWsEvent) {
 
 		window.addEventListener("focusin", __updateOnlineLeds);
 		window.addEventListener("focusout", __updateOnlineLeds);
+
+		tools.storage.bindSimpleSwitch($("hid-keyboard-swap-cc-switch"), "hid.keyboard.swap_cc", false);
 	};
 
 	/************************************************************************/
@@ -129,6 +131,13 @@ export function Keyboard(__recordWsEvent) {
 
 	var __sendKey = function(code, state) {
 		tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
+		if ($("hid-keyboard-swap-cc-switch").checked) {
+			if (code === "ControlLeft") {
+				code = "CapsLock";
+			} else if (code === "CapsLock") {
+				code = "ControlLeft";
+			}
+		}
 		let event = {
 			"event_type": "key",
 			"event": {"key": code, "state": state},