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

improved slider api

Browse Source
This commit is contained in:
Maxim Devaev 2021-10-23 06:53:05 +03:00
parent 642149daed
commit 60e2a38dcd
3 changed files with 40 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/share/js/kvm/mouse.js
View File

@ -63,20 +63,9 @@ export function Mouse(__getResolution, __recordWsEvent) {
$("stream-box").onwheel = __streamWheelHandler; $("stream-box").onwheel = __streamWheelHandler;
$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event); $("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
let rate_slider = $("hid-mouse-rate-slider");
tools.slider.setParams(rate_slider, 10, 100, 10, 100);
rate_slider.oninput = rate_slider.onchange = __updateRate;
tools.slider.setValue(rate_slider, tools.storage.get("hid.mouse.rate", 100));
let sens_slider = $("hid-mouse-sens-slider");
tools.slider.setParams(sens_slider, 0.1, 1.9, 0.1, 1);
sens_slider.oninput = sens_slider.onchange = __updateRelativeSens;
tools.slider.setValue(sens_slider, tools.storage.get("hid.mouse.sens", 1.0));
__updateRelativeSens();
tools.storage.bindSimpleSwitch($("hid-mouse-squash-switch"), "hid.mouse.squash", true); tools.storage.bindSimpleSwitch($("hid-mouse-squash-switch"), "hid.mouse.squash", true);
tools.slider.setParams($("hid-mouse-sens-slider"), 0.1, 1.9, 0.1, tools.storage.get("hid.mouse.sens", 1.0), __updateRelativeSens);
__updateRate(); // set __timer tools.slider.setParams($("hid-mouse-rate-slider"), 10, 100, 10, tools.storage.get("hid.mouse.rate", 100), __updateRate); // set __timer
}; };
/************************************************************************/ /************************************************************************/
@ -110,20 +99,19 @@ export function Mouse(__getResolution, __recordWsEvent) {
__keypad.releaseAll(); __keypad.releaseAll();
}; };
var __updateRate = function() { var __updateRate = function(value) {
let rate = tools.slider.getValue($("hid-mouse-rate-slider")); $("hid-mouse-rate-value").innerHTML = value;
$("hid-mouse-rate-value").innerHTML = rate; tools.storage.set("hid.mouse.rate", value);
tools.storage.set("hid.mouse.rate", rate);
if (__timer) { if (__timer) {
clearInterval(__timer); clearInterval(__timer);
} }
__timer = setInterval(__sendMove, rate); __timer = setInterval(__sendMove, value);
}; };
var __updateRelativeSens = function() { var __updateRelativeSens = function(value) {
__relative_sens = tools.slider.getValue($("hid-mouse-sens-slider")); $("hid-mouse-sens-value").innerHTML = value.toFixed(1);
$("hid-mouse-sens-value").innerHTML = __relative_sens.toFixed(1); tools.storage.set("hid.mouse.sens", value);
tools.storage.set("hid.mouse.sens", __relative_sens); __relative_sens = value;
}; };
var __streamHoveredHandler = function(hovered) { var __streamHoveredHandler = function(hovered) {

36
web/share/js/kvm/stream.js
View File

@ -427,14 +427,20 @@ export function Streamer() {
$("stream-led").title = "Stream inactive"; $("stream-led").title = "Stream inactive";
tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80); tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80, function(value) {
tools.slider.setOnUpDelayed($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value)); $("stream-quality-value").innerHTML = `${value}%`;
});
tools.slider.setOnUpDelayed($("stream-quality-slider"), 1000, (value) => __sendParam("quality", value));
tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000); tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000, function(value) {
tools.slider.setOnUpDelayed($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value)); $("stream-h264-bitrate-value").innerHTML = value;
});
tools.slider.setOnUpDelayed($("stream-h264-bitrate-slider"), 1000, (value) => __sendParam("h264_bitrate", value));
tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0); tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0, function(value) {
tools.slider.setOnUpDelayed($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value)); $("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
});
tools.slider.setOnUpDelayed($("stream-desired-fps-slider"), 1000, (value) => __sendParam("desired_fps", value));
$("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value)); $("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value));
@ -508,17 +514,17 @@ export function Streamer() {
if (state.streamer) { if (state.streamer) {
tools.el.setEnabled($("stream-quality-slider"), true); tools.el.setEnabled($("stream-quality-slider"), true);
tools.slider.setValue($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue); tools.slider.setValue($("stream-quality-slider"), state.streamer.encoder.quality);
if (state.features.h264 && __janus_enabled) { if (state.features.h264 && __janus_enabled) {
__setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate); __setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate);
tools.el.setEnabled($("stream-h264-bitrate-slider"), true); tools.el.setEnabled($("stream-h264-bitrate-slider"), true);
tools.slider.setValue($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue); tools.slider.setValue($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate);
} }
__setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps); __setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps);
tools.el.setEnabled($("stream-desired-fps-slider"), true); tools.el.setEnabled($("stream-desired-fps-slider"), true);
tools.slider.setValue($("stream-desired-fps-slider"), state.streamer.source.desired_fps, __updateDesiredFpsValue); tools.slider.setValue($("stream-desired-fps-slider"), state.streamer.source.desired_fps);
let resolution_str = __makeStringResolution(state.streamer.source.resolution); let resolution_str = __makeStringResolution(state.streamer.source.resolution);
if (__makeStringResolution(__resolution) !== resolution_str) { if (__makeStringResolution(__resolution) !== resolution_str) {
@ -597,18 +603,6 @@ export function Streamer() {
el.max = limits.max; el.max = limits.max;
}; };
var __updateQualityValue = function(value) {
$("stream-quality-value").innerHTML = `${value}%`;
};
var __updateDesiredFpsValue = function(value) {
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
};
var __updateH264BitrateValue = function(value) {
$("stream-h264-bitrate-value").innerHTML = value;
};
var __clickModeRadio = function() { var __clickModeRadio = function() {
if (_Janus !== null) { if (_Janus !== null) {
let mode = tools.radio.getValue("stream-mode-radio"); let mode = tools.radio.getValue("stream-mode-radio");

29
web/share/js/tools.js
View File

@ -129,13 +129,13 @@ export var tools = new function() {
self.slider = new function() { self.slider = new function() {
return { return {
"setOnUpDelayed": function(el, delay, display_callback, execute_callback) { "setOnUpDelayed": function(el, delay, execute_callback) {
el.execution_timer = null; el.__execution_timer = null;
let clear_timer = function() { let clear_timer = function() {
if (el.execution_timer) { if (el.__execution_timer) {
clearTimeout(el.execution_timer); clearTimeout(el.__execution_timer);
el.execution_timer = null; el.__execution_timer = null;
} }
}; };
@ -147,26 +147,27 @@ export var tools = new function() {
let value = self.slider.getValue(el); let value = self.slider.getValue(el);
event.preventDefault(); event.preventDefault();
clear_timer(); clear_timer();
el.execution_timer = setTimeout(function() { el.__execution_timer = setTimeout(function() {
execute_callback(value); execute_callback(value);
}, delay); }, delay);
}; };
let value = self.slider.getValue(el);
el.oninput = el.onchange = () => display_callback(value);
display_callback(value);
}, },
"setParams": function(el, min, max, step, value) { "setParams": function(el, min, max, step, value, display_callback=null) {
el.min = min; el.min = min;
el.max = max; el.max = max;
el.step = step; el.step = step;
el.value = value; el.value = value;
if (display_callback) {
el.oninput = el.onchange = () => display_callback(self.slider.getValue(el));
display_callback(self.slider.getValue(el));
el.__display_callback = display_callback;
}
}, },
"setValue": function(el, value, callback=null) { "setValue": function(el, value) {
if (el.value != value) { if (el.value != value) {
el.value = value; el.value = value;
if (callback) { if (el.__display_callback) {
callback(value); el.__display_callback(value);
} }
} }
}, },