adjustable stream size

kvmd/web/css/stream.css

@@ -1,7 +1,7 @@
 img#stream-image {
 	width: 640px;
 	height: 480px;
-	display: inline-block;
+	display: block;
 	background-color: var(--bg-color-stream-screen);
 }
 
@@ -34,3 +34,64 @@ div.stream-box-inactive::after {
 div.stream-box-mouse-enabled {
 	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
 }
+
+div#stream-size {
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+	font-size: 12px;
+	margin: 5px 15px 5px 15px;
+}
+div#stream-size span#stream-size-counter {
+}
+div#stream-size div#stream-size-slider-box {
+	margin-top: 5px;
+	display: flex;
+}
+@supports (-webkit-appearance:none) {
+	div#stream-size div#stream-size-slider-box input[type=range] {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		background: transparent;
+		margin: 8px 0 8px 0;
+		-webkit-appearance: none;
+	}
+}
+@supports not (-webkit-appearance:none) {
+	div#stream-size div#stream-size-slider-box input[type=range] {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+	-webkit-appearance: none;
+	margin-top: -7px;
+}
+div#stream-size div#stream-size-slider-box input[type=range]::-moz-range-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+div#stream-size div#stream-size-slider-box input[type=range]::-moz-range-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+}

kvmd/web/index.html

@@ -46,11 +46,23 @@
 					System ↴
 				</a>
 				<div class="ctl-dropdown-content">
-					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
-					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
 					<button onclick="ui.showWindow('about-window')">&bull; Show about</button>
 					<hr>
+					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
+					<hr>
+					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
 					<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
+					<hr>
+					<div data-dont-hide-menu id="stream-size">
+						Stream size: <span id="stream-size-counter">100%</span>
+						<div id="stream-size-slider-box">
+							<input
+								type="range" min="50" max="150" value="100" step="10"
+								oninput="stream.resize(this.value);"
+								onchange="stream.resize(this.value);"
+							/>
+						</div>
+					</div>
 				</div>
 			</div>
 		</li>

kvmd/web/js/mouse.js

@@ -71,15 +71,16 @@ var mouse = new function() {
 	var __sendMove = function() {
 		var pos = __current_pos;
 		if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
-			tools.debug("Mouse move:", pos);
+			el_stream_image = $("stream-image");
+			var to = {
+				x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
+				y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
+			};
+			tools.debug("Mouse move:", to);
 			if (__ws) {
-				el_stream_image = $("stream-image");
 				__ws.send(JSON.stringify({
 					event_type: "mouse_move",
-					to: {
+					to: 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;

kvmd/web/js/stream.js

@@ -1,5 +1,7 @@
 var stream = new function() {
 	var __prev_state = false;
+	var __normal_size = {width: 640, height: 480};
+	var __size_factor = 1;
 
 	this.startPoller = function() {
 		var http = tools.makeRequest("GET", "/streamer/?action=snapshot", function() {
@@ -38,14 +40,24 @@ var stream = new function() {
 		});
 	};
 
+	this.resize = function(percent) {
+		$("stream-size-counter").innerHTML = percent + "%";
+		__size_factor = percent / 100;
+		__applySizeFactor();
+	};
+
+	var __applySizeFactor = function() {
+		var el_stream_image = $("stream-image");
+		el_stream_image.style.width = __normal_size.width * __size_factor + "px";
+		el_stream_image.style.height = __normal_size.height * __size_factor + "px";
+	};
+
 	var __refreshImage = function() {
 		var http = tools.makeRequest("GET", "/kvmd/streamer", function() {
 			if (http.readyState === 4 && http.status === 200) {
-				size = JSON.parse(http.responseText).result.size;
+				__normal_size = JSON.parse(http.responseText).result.size;
-				el_stream_image = $("stream-image");
+				__applySizeFactor();
-				el_stream_image.style.width = size.width + "px";
+				$("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
-				el_stream_image.style.height = size.height + "px";
-				el_stream_image.src = "/streamer/?action=stream&time=" + new Date().getTime();
 				ui.showWindow("stream-window");
 			}
 		});