GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 01:00:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

adjustable stream size

Browse Source
This commit is contained in:
Devaev Maxim 2018-08-06 21:25:41 +03:00
parent ff29d85faf
commit f45efdf2fc
4 changed files with 100 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
kvmd/web/css/stream.css
View File

@ -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);
}

16
kvmd/web/index.html
View File

@ -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>

13
kvmd/web/js/mouse.js
View File

@ -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);
if (__ws) {
el_stream_image = $("stream-image");
__ws.send(JSON.stringify({
event_type: "mouse_move",
to: {
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) {
__ws.send(JSON.stringify({
event_type: "mouse_move",
to: to,
}));
}
__sent_pos = pos;

22
kvmd/web/js/stream.js
View File

@ -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");
}
});