pikvm/pikvm#231, pikvm/pikvm#279: pak options

5 files changed, 127 insertions, 58 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index f044cd6c..730c5b4a 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -415,25 +415,58 @@
       </li>
       <li class="right"><a class="menu-button" href="#">Shortcuts</a>
         <div class="menu" data-dont-hide-menu>
+          <div class="text"><b>Paste text as keypress sequence<br></b></div>
+          <hr>
+          <div class="text" style="margin-right: 20px">
+            <textarea id="hid-pak-text" placeholder="Enter your text here"></textarea>
+          </div>
+          <hr>
+          <table class="kv">
+            <tr>
+              <td>
+                <button disabled data-force-hide-menu id="hid-pak-button">&bull; Paste</button>
+              </td>
+              <td>using host keymap</td>
+              <td>
+                <select id="hid-pak-keymap-selector"></select>
+              </td>
+            </tr>
+          </table>
+          <hr>
+              <table class="kv">
+                <td>Ask paste confirmation:</td>
+                <td align="right">
+                  <div class="switch-box">
+                    <input checked type="checkbox" id="hid-pak-ask-switch">
+                    <label for="hid-pak-ask-switch"><span class="switch-inner"></span><span class="switch"></span></label>
+                  </div>
+                </td>
+              </table>
+          <hr>
+          <div class="text"></div>
+          <hr>
           <div class="buttons">
-            <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
-            <hr>
-            <button disabled data-force-hide-menu id="hid-pak-button">&bull; &#x21b3; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
-            <hr>
             <div class="buttons-row">
               <button class="row50" data-force-hide-menu data-shortcut="CapsLock">&bull; Caps Lock &nbsp;<img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"></button>
               <button class="row50" data-force-hide-menu data-shortcut="MetaLeft">&bull; Left Win</button>
             </div>
             <hr>
-            <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button>
-            <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button>
-            <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button>
-            <button data-force-hide-menu data-shortcut="MetaLeft Space">&bull; Win+Space</button>
-            <hr>
-            <button data-force-hide-menu data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
-            <button data-force-hide-menu data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
-            <button data-force-hide-menu data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
-            <button data-force-hide-menu data-shortcut="AltLeft F4">&bull; Alt+F4</button>
+            <div class="buttons-row">
+              <button class="row50" data-force-hide-menu data-shortcut="AltLeft ShiftLeft">&bull; Alt+Shift</button>
+              <button class="row50" data-force-hide-menu data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
+            </div>
+            <div class="buttons-row">
+              <button class="row50" data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">&bull; Ctrl+Shift</button>
+              <button class="row50" data-force-hide-menu data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
+            </div>
+            <div class="buttons-row">
+              <button class="row50" data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">&bull; Shift+Shift</button>
+              <button class="row50" data-force-hide-menu data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
+            </div>
+            <div class="buttons-row">
+              <button class="row50" data-force-hide-menu data-shortcut="MetaLeft Space">&bull; Win+Space</button>
+              <button class="row50" data-force-hide-menu data-shortcut="AltLeft F4">&bull; Alt+F4</button>
+            </div>
             <hr>
             <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
           </div>
diff --git a/web/kvm/navbar-shortcuts.pug b/web/kvm/navbar-shortcuts.pug
index 9f3a94b0..c0062071 100644
--- a/web/kvm/navbar-shortcuts.pug
+++ b/web/kvm/navbar-shortcuts.pug
@@ -1,26 +1,43 @@
 li(class="right")
 	a(class="menu-button" href="#") Shortcuts
 	div(data-dont-hide-menu class="menu")
+		div(class="text")
+			b Paste text as keypress sequence#[br]
+		hr
+		div(class="text" style="margin-right: 20px")
+			textarea(id="hid-pak-text" placeholder="Enter your text here")
+		hr
+		table(class="kv")
+			tr
+				td
+					button(disabled data-force-hide-menu id="hid-pak-button") &bull; Paste
+				td using host keymap
+				td
+					select(id="hid-pak-keymap-selector")
+		hr
+		+menu_switch("hid-pak-ask-switch", "Ask paste confirmation", true, true)
+		hr
+		div(class="text")
+		hr
 		div(class="buttons")
-			textarea(id="hid-pak-text" placeholder="Paste your text here")
-			hr
-			button(disabled data-force-hide-menu id="hid-pak-button") &bull; &#x21b3; Paste-as-Keys #[sup #[i ascii-only]]
-			hr
 			div(class="buttons-row")
 				button(data-force-hide-menu data-shortcut="CapsLock" class="row50")
 					| &bull; Caps Lock &nbsp;
 					img(class="inline-lamp hid-keyboard-caps-led led-gray" src=`${svg_dir}/led-square.svg`)
 				button(data-force-hide-menu data-shortcut="MetaLeft" class="row50") &bull; Left Win
 			hr
-			button(data-force-hide-menu data-shortcut="AltLeft ShiftLeft") &bull; Alt+Shift
-			button(data-force-hide-menu data-shortcut="ControlLeft ShiftLeft") &bull; Ctrl+Shift
-			button(data-force-hide-menu data-shortcut="ShiftLeft ShiftRight") &bull; Shift+Shift
-			button(data-force-hide-menu data-shortcut="MetaLeft Space") &bull; Win+Space
-			hr
-			button(data-force-hide-menu data-shortcut="ControlLeft KeyW") &bull; Ctrl+W
-			button(data-force-hide-menu data-shortcut="AltLeft Tab") &bull; Alt+Tab
-			button(data-force-hide-menu data-shortcut="AltLeft Enter") &bull; Alt+Enter
-			button(data-force-hide-menu data-shortcut="AltLeft F4") &bull; Alt+F4
+			div(class="buttons-row")
+				button(data-force-hide-menu data-shortcut="AltLeft ShiftLeft" class="row50") &bull; Alt+Shift
+				button(data-force-hide-menu data-shortcut="ControlLeft KeyW" class="row50") &bull; Ctrl+W
+			div(class="buttons-row")
+				button(data-force-hide-menu data-shortcut="ControlLeft ShiftLeft" class="row50") &bull; Ctrl+Shift
+				button(data-force-hide-menu data-shortcut="AltLeft Tab" class="row50") &bull; Alt+Tab
+			div(class="buttons-row")
+				button(data-force-hide-menu data-shortcut="ShiftLeft ShiftRight" class="row50") &bull; Shift+Shift
+				button(data-force-hide-menu data-shortcut="AltLeft Enter" class="row50") &bull; Alt+Enter
+			div(class="buttons-row")
+				button(data-force-hide-menu data-shortcut="MetaLeft Space" class="row50") &bull; Win+Space
+				button(data-force-hide-menu data-shortcut="AltLeft F4" class="row50") &bull; Alt+F4
 			hr
 			button(data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete") &bull; Ctrl+Alt+Del
 		hr
diff --git a/web/share/css/kvm/hid.css b/web/share/css/kvm/hid.css
index 10daad98..d32c3d98 100644
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -23,22 +23,21 @@
 textarea#hid-pak-text {
 	display: block;
 	resize: none;
+	height: 60px;
 	width: 100%;
-	height: 40px;
+	border-radius: 4px;
 	color: var(--cs-window-default-fg);
 	background-color: var(--cs-window-default-bg);
-	border: none;
-	outline: 0 !important;
 	-webkit-appearance:none;
 }
 
 textarea#hid-pak-text::-moz-placeholder {
-	line-height: 40px;
+	line-height: 60px;
 	text-align: center;
 }
 
 textarea#hid-pak-text::-webkit-input-placeholder {
-	line-height: 40px;
+	line-height: 60px;
 	text-align: center;
 }
 
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index bcd1e479..f4f2b589 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -162,6 +162,14 @@ export function Hid() {
 		}
 	};
 
+	self.setKeymaps = function(state) {
+		let html = "";
+		for (let variant of state.keymaps.available) {
+			html += `<option value=${variant} ${variant === state.keymaps.default ? "selected" : ""}>${variant}</option>`;
+		}
+		$("hid-pak-keymap-selector").innerHTML = html;
+	};
+
 	var __releaseAll = function() {
 		__keyboard.releaseAll();
 		__mouse.releaseAll();
@@ -196,34 +204,45 @@ export function Hid() {
 	var __clickPasteAsKeysButton = function() {
 		let text = $("hid-pak-text").value.replace(/[^\x00-\x7F]/g, "");  // eslint-disable-line no-control-regex
 		if (text) {
-			let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
-			confirm_msg += "Are you sure you want to continue?";
-
-			wm.confirm(confirm_msg).then(function(ok) {
-				if (ok) {
-					wm.setElementEnabled($("hid-pak-text"), false);
-					wm.setElementEnabled($("hid-pak-button"), false);
-
-					tools.debug("HID: paste-as-keys:", text);
-
-					let http = tools.makeRequest("POST", "/api/hid/print?limit=0", function() {
-						if (http.readyState === 4) {
-							wm.setElementEnabled($("hid-pak-text"), true);
-							wm.setElementEnabled($("hid-pak-button"), true);
-							$("hid-pak-text").value = "";
-							if (http.status === 413) {
-								wm.error("Too many text for paste!");
-							} else if (http.status !== 200) {
-								wm.error("HID paste error:<br>", http.responseText);
-							} else if (http.status === 200) {
-								__recorder.recordPrintEvent(text);
-							}
+			let paste_as_keys = function() {
+				wm.setElementEnabled($("hid-pak-text"), false);
+				wm.setElementEnabled($("hid-pak-button"), false);
+				wm.setElementEnabled($("hid-pak-keymap-selector"), false);
+
+				let keymap = $("hid-pak-keymap-selector").value;
+
+				tools.debug(`HID: paste-as-keys ${keymap}: ${text}`);
+
+				let http = tools.makeRequest("POST", `/api/hid/print?limit=0&keymap=${keymap}`, function() {
+					if (http.readyState === 4) {
+						wm.setElementEnabled($("hid-pak-text"), true);
+						wm.setElementEnabled($("hid-pak-button"), true);
+						wm.setElementEnabled($("hid-pak-keymap-selector"), true);
+						$("hid-pak-text").value = "";
+						if (http.status === 413) {
+							wm.error("Too many text for paste!");
+						} else if (http.status !== 200) {
+							wm.error("HID paste error:<br>", http.responseText);
+						} else if (http.status === 200) {
+							__recorder.recordPrintEvent(text);
 						}
-					}, text, "text/plain");
-				} else {
-					$("hid-pak-text").value = "";
-				}
-			});
+					}
+				}, text, "text/plain");
+			};
+
+			if ($("hid-pak-ask-switch").checked) {
+				let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
+				confirm_msg += "Are you sure you want to continue?";
+				wm.confirm(confirm_msg).then(function(ok) {
+					if (ok) {
+						paste_as_keys();
+					} else {
+						$("hid-pak-text").value = "";
+					}
+				});
+			} else {
+				paste_as_keys();
+			}
 		}
 	};
 
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index 5aa0a6a0..b278dd06 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -221,6 +221,7 @@ export function Session() {
 			case "wol_state": __wol.setState(data.event); break;
 			case "gpio_model_state": __gpio.setModel(data.event); break;
 			case "gpio_state": __gpio.setState(data.event); break;
+			case "hid_keymaps_state": __hid.setKeymaps(data.event); break;
 			case "hid_state": __hid.setState(data.event); break;
 			case "atx_state": __atx.setState(data.event); break;
 			case "msd_state": __msd.setState(data.event); break;