summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--kvmd/web/css/stream.css63
-rw-r--r--kvmd/web/index.html16
-rw-r--r--kvmd/web/js/mouse.js13
-rw-r--r--kvmd/web/js/stream.js22
4 files changed, 100 insertions, 14 deletions
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css
index fa892545..c3429630 100644
--- a/kvmd/web/css/stream.css
+++ b/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);
+}
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 90e5da0e..9d87e392 100644
--- a/kvmd/web/index.html
+++ b/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>
diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js
index ba4eb264..d02762e4 100644
--- a/kvmd/web/js/mouse.js
+++ b/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: {
- x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
- y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
- },
+ to: to,
}));
}
__sent_pos = pos;
diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js
index e7bd82d4..e393c6fe 100644
--- a/kvmd/web/js/stream.js
+++ b/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;
- el_stream_image = $("stream-image");
- el_stream_image.style.width = size.width + "px";
- el_stream_image.style.height = size.height + "px";
- el_stream_image.src = "/streamer/?action=stream&time=" + new Date().getTime();
+ __normal_size = JSON.parse(http.responseText).result.size;
+ __applySizeFactor();
+ $("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
ui.showWindow("stream-window");
}
});
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 20:50:14 +0000