pikvm/pikvm#281: adjustable relative mouse sensitivity

web/kvm/index.html

@@ -190,6 +190,13 @@
             </table>
           </div>
           <table class="kv">
+            <tr class="feature-disabled" id="hid-mouse-sens">
+              <td>Relative mouse sensitivity:</td>
+              <td>
+                <input class="slider" disabled type="range" id="hid-mouse-sens-slider">
+              </td>
+              <td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
+            </tr>
             <tr class="feature-disabled" id="hid-mouse-squash">
                   <td>Squash relative mouse moves:</td>
                   <td align="right">

web/kvm/navbar-system.pug

@@ -55,6 +55,10 @@ li(class="right")
 					td Mouse #[a(target="_blank" href="https://github.com/pikvm/pikvm/blob/master/pages/mouse.md") mode]:
 					td #[div(id="hid-outputs-mouse-box" class="radio-box")]
 		table(class="kv")
+			tr(id="hid-mouse-sens" class="feature-disabled")
+				td Relative mouse sensitivity:
+				td #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
+				td(id="hid-mouse-sens-value" class="value" style="min-width: 30px; max-width:30px")
 			tr(id="hid-mouse-squash" class="feature-disabled")
 				+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
 			tr(id="hid-connect" class="feature-disabled")

web/share/css/navbar.css

@@ -137,6 +137,9 @@ ul#navbar li div.menu table.kv {
 	margin: 0 10px 0 10px;
 	font-size: 12px;
 }
+ul#navbar li div.menu table.kv td {
+	text-align: left;
+}
 ul#navbar li div.menu table.kv td.value {
 	font-weight: bold;
 	max-width: 310px;

web/share/js/kvm/hid.js

@@ -157,6 +157,7 @@ export function Hid(__getResolution) {
 			tools.feature.setEnabled($("hid-outputs-keyboard"), keyboard_outputs.length);
 			tools.feature.setEnabled($("hid-outputs-mouse"), mouse_outputs.length);
 			tools.feature.setEnabled($("hid-mouse-squash"), has_relative);
+			tools.feature.setEnabled($("hid-mouse-sens"), has_relative);
 			tools.feature.setEnabled($("hid-connect"), (state.connected !== null));
 			$("hid-connect-switch").checked = !!state.connected;
 		}
@@ -164,6 +165,7 @@ export function Hid(__getResolution) {
 		tools.radio.setEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy));
 		tools.radio.setEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy));
 		tools.el.setEnabled($("hid-mouse-squash-switch"), (has_relative_squash && !state.busy));
+		tools.el.setEnabled($("hid-mouse-sens-slider"), (has_relative_squash && !state.busy));
 		tools.el.setEnabled($("hid-connect-switch"), (state && state.online && !state.busy));
 
 		if (state) {

web/share/js/kvm/mouse.js

@@ -42,6 +42,7 @@ export function Mouse(__getResolution, __recordWsEvent) {
 	var __sent_pos = {x: 0, y: 0};
 	var __wheel_delta = {x: 0, y: 0};
 	var __relative_deltas = [];
+	var __relative_sens = 1.0;
 
 	var __stream_hovered = false;
 
@@ -61,6 +62,12 @@ export function Mouse(__getResolution, __recordWsEvent) {
 		$("stream-box").onwheel = __streamWheelHandler;
 		$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
 
+		let sens_slider = $("hid-mouse-sens-slider");
+		tools.slider.setParams(sens_slider, 0.1, 1.9, 0.1, 1);
+		sens_slider.oninput = sens_slider.onchange = __updateRelativeSens;
+		sens_slider.value = tools.storage.get("hid.mouse.sens", 1.0);
+		__updateRelativeSens();
+
 		tools.storage.bindSimpleSwitch($("hid-mouse-squash-switch"), "hid.mouse.squash", true);
 
 		setInterval(__sendMove, 100);
@@ -97,6 +104,12 @@ export function Mouse(__getResolution, __recordWsEvent) {
 		__keypad.releaseAll();
 	};
 
+	var __updateRelativeSens = function() {
+		__relative_sens = parseFloat($("hid-mouse-sens-slider").value);
+		$("hid-mouse-sens-value").innerHTML = __relative_sens.toFixed(1);
+		tools.storage.set("hid.mouse.sens", __relative_sens);
+	};
+
 	var __streamHoveredHandler = function(hovered) {
 		if (__absolute) {
 			__stream_hovered = hovered;
@@ -188,8 +201,8 @@ export function Mouse(__getResolution, __recordWsEvent) {
 			};
 		} else if (__isRelativeCaptured()) {
 			let delta = {
-				x: Math.min(Math.max(-127, event.movementX), 127),
-				y: Math.min(Math.max(-127, event.movementY), 127),
+				x: Math.min(Math.max(-127, Math.floor(event.movementX * __relative_sens)), 127),
+				y: Math.min(Math.max(-127, Math.floor(event.movementY * __relative_sens)), 127),
 			};
 			if (__isRelativeSquashed()) {
 				__relative_deltas.push(delta);

web/share/js/tools.js

@@ -274,7 +274,7 @@ export var tools = new function() {
 		return {
 			"get": function(key, default_value) {
 				let value = window.localStorage.getItem(key);
-				return (value !== null ? value : default_value);
+				return (value !== null ? value : `${default_value}`);
 			},
 			"set": (key, value) => window.localStorage.setItem(key, value),