GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-30 17:41:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

configurable stream resolution

Browse Source
This commit is contained in:
Devaev Maxim
2018-08-24 07:13:40 +03:00
parent 0468100bba
commit 52d2b8a315
12 changed files with 383 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
kvmd/web/css/main.css
View File

@@ -91,7 +91,7 @@ div.ctl-dropdown-content div.buttons-row {
padding: 0;
font-size: 0;
}
div.ctl-dropdown-content button {
div.ctl-dropdown-content button, select {
box-shadow: none;
border: none;
color: var(--fg-color-normal);
@@ -105,26 +105,48 @@ div.ctl-dropdown-content button {
outline: none;
cursor: pointer;
}
div.ctl-dropdown-content button:enabled:hover {
div.ctl-dropdown-content button:enabled:hover, select:enabled:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-dark) !important;
}
div.ctl-dropdown-content button:disabled {
div.ctl-dropdown-content button:disabled, select:disabled {
color: var(--fg-color-inactive);
cursor: default;
}
div.ctl-dropdown-content button:active {
div.ctl-dropdown-content button:active, select:active {
color: var(--fg-color-selected) !important;
}
div.ctl-dropdown-content button.row50 {
div.ctl-dropdown-content select {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-image: url("../svg/select-arrow-normal.svg");
background-position: center right;
background-repeat: no-repeat;
}
div.ctl-dropdown-content select:enabled:hover {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
div.ctl-dropdown-content select:disabled {
background-image: url("../svg/select-arrow-inactive.svg") !important;
}
div.ctl-dropdown-content select:active {
color: var(--fg-color-intensive) !important;
background-color: var(--bg-color-dark) !important;
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
div.ctl-dropdown-content .row50 {
display: inline-block;
width: 50%;
}
div.ctl-dropdown-content button.row25 {
div.ctl-dropdown-content .row25 {
display: inline-block;
width: 25%;
}
div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first-child) {
div.ctl-dropdown-content .row50:not(:first-child), .row25:not(:first-child) {
border-left: var(--dark-border);
}
div.ctl-dropdown-content hr {

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

@@ -35,21 +35,26 @@ div.stream-box-mouse-enabled {
cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
}
div#stream-size {
div.stream-params {
-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-params select#stream-resolution-select {
margin: 8px 0 8px 0;
}
div#stream-size div#stream-size-slider-box {
div.stream-params span#stream-size-value {
}
div.stream-params 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] {
div.stream-params div#stream-size-slider-box input[type=range] {
cursor: pointer;
outline: none;
width: 100%;
@@ -60,7 +65,7 @@ div#stream-size div#stream-size-slider-box {
}
}
@supports not (-webkit-appearance:none) {
div#stream-size div#stream-size-slider-box input[type=range] {
div.stream-params div#stream-size-slider-box input[type=range] {
cursor: pointer;
outline: none;
width: 100%;
@@ -69,12 +74,12 @@ div#stream-size div#stream-size-slider-box {
margin-right: 0;
}
}
div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
div.stream-params 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 {
div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
border: var(--intensive-border);
height: 18px;
width: 18px;
@@ -83,12 +88,12 @@ div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-thu
-webkit-appearance: none;
margin-top: -7px;
}
div#stream-size div#stream-size-slider-box input[type=range]::-moz-range-track {
div.stream-params 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 {
div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-thumb {
border: var(--intensive-border);
height: 18px;
width: 18px;

11
kvmd/web/index.html
View File

@@ -70,8 +70,15 @@
<button id="show-stream-button">&bull; Show stream</button>
<button disabled id="stream-reset-button">&bull; Reset stream</button>
<hr>
<div data-dont-hide-menu id="stream-size">
Stream size: <span id="stream-size-counter">100%</span>
<div data-dont-hide-menu class="stream-params">
Resolution:
<select disabled data-dont-hide-menu id="stream-resolution-select">
<option>640x480</option>
</select>
</div>
<hr>
<div data-dont-hide-menu class="stream-params">
Stream size: <span id="stream-size-value">100%</span>
<div id="stream-size-slider-box">
<input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
</div>

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

@@ -4,6 +4,10 @@ function Stream(ui) {
/********************************************************************************/
var __prev_state = false;
var __resolution = "640x480";
var __resolutions = ["640x480"];
var __normal_size = {width: 640, height: 480};
var __size_factor = 1;
@@ -11,6 +15,7 @@ function Stream(ui) {
$("stream-led").title = "Stream inactive";
$("stream-reset-button").onclick = __clickResetButton;
$("stream-resolution-select").onchange = __changeResolution;
$("stream-size-slider").oninput = __resize;
$("stream-size-slider").onchange = __resize;
@@ -19,6 +24,8 @@ function Stream(ui) {
/********************************************************************************/
// XXX: In current implementation we don't need this event because Stream() has own state poller
var __startPoller = function() {
var http = tools.makeRequest("GET", "/streamer/?action=snapshot", function() {
if (http.readyState === 2 || http.readyState === 4) {
@@ -33,6 +40,7 @@ function Stream(ui) {
$("stream-led").className = "led-off";
$("stream-led").title = "Stream inactive";
$("stream-reset-button").disabled = true;
$("stream-resolution-select").disabled = true;
} else if (!__prev_state) {
__refreshImage();
__prev_state = true;
@@ -44,7 +52,7 @@ function Stream(ui) {
}
}
});
setTimeout(__startPoller, 2000);
setTimeout(__startPoller, 1500);
};
var __clickResetButton = function() {
@@ -58,9 +66,23 @@ function Stream(ui) {
});
};
var __changeResolution = function() {
var resolution = $("stream-resolution-select").value;
if (__resolution != resolution) {
$("stream-resolution-select").disabled = true;
var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?resolution=" + resolution, function() {
if (http.readyState === 4) {
if (http.status !== 200) {
alert("Can't change stream:", http.responseText);
}
}
});
}
};
var __resize = function() {
var percent = $("stream-size-slider").value;
$("stream-size-counter").innerHTML = percent + "%";
$("stream-size-value").innerHTML = percent + "%";
__size_factor = percent / 100;
__applySizeFactor();
};
@@ -75,7 +97,25 @@ function Stream(ui) {
var __refreshImage = function() {
var http = tools.makeRequest("GET", "/kvmd/streamer", function() {
if (http.readyState === 4 && http.status === 200) {
__normal_size = JSON.parse(http.responseText).result.size;
var result = JSON.parse(http.responseText).result;
if (__resolutions != result.resolutions) {
tools.info("Resolutions list changed:", result.resolutions);
$("stream-resolution-select").innerHTML = "";
result.resolutions.forEach(function(resolution) {
$("stream-resolution-select").innerHTML += "<option value=\"" + resolution + "\">" + resolution + "</option>";
});
$("stream-resolution-select").disabled = (result.resolutions.length == 1);
__resolutions = result.resolutions;
}
if (__resolution != result.resolution) {
tools.info("Resolution changed:", result.resolution);
document.querySelector("#stream-resolution-select [value=\"" + result.resolution + "\"]").selected = true;
__resolution = result.resolution;
}
__normal_size = result.size;
__applySizeFactor();
$("stream-image").src = "/streamer/?action=stream&time=" + new Date().getTime();
}

78
kvmd/web/svg/select-arrow-inactive.svg Normal file
View File

@@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="31.999998"
viewBox="0 0 6.3500001 8.4666662"
version="1.1"
id="svg8"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="select-arrow-inactive.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="27.151934"
inkscape:cy="16.615415"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1020"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-8.8745959,-36.821965)">
<path
sodipodi:type="star"
style="opacity:1;fill:#6c7481;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
id="path4749"
sodipodi:sides="3"
sodipodi:cx="12.049596"
sodipodi:cy="40.702518"
sodipodi:r1="1.411111"
sodipodi:r2="0.70555568"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
inkscape:transform-center-y="0.3527758" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

78
kvmd/web/svg/select-arrow-intensive.svg Normal file
View File

@@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="31.999998"
viewBox="0 0 6.3500001 8.4666662"
version="1.1"
id="svg8"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="select-arrow-intensive.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="27.151934"
inkscape:cy="16.615415"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1020"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-8.8745959,-36.821965)">
<path
sodipodi:type="star"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
id="path4749"
sodipodi:sides="3"
sodipodi:cx="12.049596"
sodipodi:cy="40.702518"
sodipodi:r1="1.411111"
sodipodi:r2="0.70555568"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
inkscape:transform-center-y="0.3527758" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

78
kvmd/web/svg/select-arrow-normal.svg Normal file
View File

@@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="31.999998"
viewBox="0 0 6.3500001 8.4666662"
version="1.1"
id="svg8"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="select-arrow-normal.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="27.151934"
inkscape:cy="16.615415"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1020"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-8.8745959,-36.821965)">
<path
sodipodi:type="star"
style="opacity:1;fill:#c3c3c3;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
id="path4749"
sodipodi:sides="3"
sodipodi:cx="12.049596"
sodipodi:cy="40.702518"
sodipodi:r1="1.411111"
sodipodi:r2="0.70555568"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
inkscape:transform-center-y="0.3527758" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB