mouse support

kvmd/web/js/hid.js

@@ -1,10 +1,4 @@
 var hid = new function() {
-	var __install_timer = null;
-	var __installed = false;
-
-	var __hidden_attr = null;
-	var __visibility_change_attr = null;
-
 	this.init = function() {
 		keyboard.init();
 		mouse.init();
@@ -32,32 +26,12 @@ var hid = new function() {
 	};
 
 	this.installCapture = function(ws) {
-		var http = tools.makeRequest("GET", "/kvmd/hid", function() {
-			if (http.readyState === 4) {
-				if (http.status === 200) {
-					features = JSON.parse(http.responseText).result.features;
-					if (features.mouse) {
-						mouse.setSocket(ws);
-					}
-					keyboard.setSocket(ws);
-					__installed = true;
-				} else {
-					tools.error("Can't resolve HID features:", http.responseText);
-					__install_timer = setTimeout(() => hid.installCapture(ws), 1000);
-				}
-			}
-		});
+		keyboard.setSocket(ws);
+		mouse.setSocket(ws);
 	};
 
 	this.clearCapture = function() {
-		if (__install_timer) {
-			clearTimeout(__install_timer);
-			__install_timer = null;
-		}
-		if (__installed) {
-			mouse.setSocket(null);
-			keyboard.setSocket(null);
-			__installed = false;
-		}
+		mouse.setSocket(null);
+		keyboard.setSocket(null);
 	};
 }

kvmd/web/js/keyboard.js

@@ -27,8 +27,10 @@ var keyboard = new function() {
 	};
 
 	this.setSocket = function(ws) {
-		keyboard.releaseAll();
-		__ws = ws;
+		if (ws !== __ws) {
+			keyboard.releaseAll();
+			__ws = ws;
+		}
 		keyboard.updateLeds();
 	};
 

kvmd/web/js/mouse.js

@@ -2,9 +2,12 @@ var mouse = new function() {
 	var __ws = null;
 	var __current_pos = {x: 0, y:0};
 	var __sent_pos = {x: 0, y:0};
+	var __stream_hovered = false;
 
 	this.init = function() {
 		el_stream_box = $("stream-box");
+		el_stream_box.onmouseenter = __hoverStream;
+		el_stream_box.onmouseleave = __leaveStream;
 		el_stream_box.onmousedown = (event) => __buttonHandler(event, true);
 		el_stream_box.onmouseup = (event) => __buttonHandler(event, false);
 		el_stream_box.oncontextmenu = (event) => event.preventDefault();
@@ -15,11 +18,25 @@ var mouse = new function() {
 
 	this.setSocket = function(ws) {
 		__ws = ws;
+		if (ws) {
+			$("stream-box").classList.add("stream-box-mouse-enabled");
+		} else {
+			$("stream-box").classList.remove("stream-box-mouse-enabled");
+		}
+	};
+
+	var __hoverStream = function() {
+		__stream_hovered = true;
+		mouse.updateLeds();
+	};
+
+	var __leaveStream = function() {
+		__stream_hovered = false;
+		mouse.updateLeds();
 	};
 
 	this.updateLeds = function() {
-		var focused = (__ws && document.activeElement === $("stream-window"));
-		$("hid-mouse-led").className = (focused ? "led-on" : "led-off");
+		$("hid-mouse-led").className = (__ws && __stream_hovered ? "led-on" : "led-off");
 	};
 
 	var __buttonHandler = function(event, state) {
@@ -56,15 +73,23 @@ var mouse = new function() {
 		if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
 			tools.debug("Mouse move:", pos);
 			if (__ws) {
+				el_stream_image = $("stream-image");
 				__ws.send(JSON.stringify({
 					event_type: "mouse_move",
-					to: pos,
+					to: {
+						x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
+						y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
+					},
 				}));
 			}
 			__sent_pos = pos;
 		}
 	};
 
+	var __translate = function(x, a, b, c, d) {
+		return Math.round((x - a) / (b - a) * (d - c) + c);
+	};
+
 	var __wheelHandler = function(event) {
 		// https://learn.javascript.ru/mousewheel
 		if (event.preventDefault) {

kvmd/web/js/stream.js

@@ -11,14 +11,14 @@ var stream = new function() {
 					tools.info("Refreshing stream ...");
 					__prev_state = false;
 					$("stream-image").className = "stream-image-inactive";
-					$("stream-box").className = "stream-box-inactive";
+					$("stream-box").classList.add("stream-box-inactive");
 					$("stream-led").className = "led-off";
 					$("stream-reset-button").disabled = true;
 				} else if (!__prev_state) {
 					__refreshImage();
 					__prev_state = true;
 					$("stream-image").className = "stream-image-active";
-					$("stream-box").className = "stream-box-active";
+					$("stream-box").classList.remove("stream-box-inactive");
 					$("stream-led").className = "led-on";
 					$("stream-reset-button").disabled = false;
 				}