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

improved sliders in the system menu

Browse Source
This commit is contained in:
Maxim Devaev 2022-10-28 02:32:41 +03:00
parent 5eaf2aa247
commit 6ea60321b0
5 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/kvm/index.html
View File

@ -141,7 +141,7 @@
</div>
<li class="right" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg"><span>System</span></a>
<div class="menu" id="system-menu">
<table class="kv" style="width: calc(100% - 20px)">
<table class="kv">
<tr>
<td class="value">Runtime settings &amp; tools</td>
<td class="feature-disabled" id="system-tool-webterm">
@ -181,7 +181,7 @@
</div>
<hr>
</div>
<table class="kv" style="width: calc(100% - 20px)">
<table class="kv">
<tr class="feature-disabled" id="stream-resolution">
<td>Resolution:</td>
<td>
@ -190,24 +190,24 @@
</tr>
<tr class="feature-disabled" id="stream-quality">
<td>JPEG quality:</td>
<td>
<td class="value-slider">
<input class="slider" disabled type="range" id="stream-quality-slider">
</td>
<td class="value" id="stream-quality-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="stream-quality-value"></td>
</tr>
<tr class="feature-disabled" id="stream-h264-bitrate">
<td>H.264 kbps:</td>
<td>
<td class="value-slider">
<input class="slider" disabled type="range" id="stream-h264-bitrate-slider">
</td>
<td class="value" id="stream-h264-bitrate-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="stream-h264-bitrate-value"></td>
</tr>
<tr>
<td>Max FPS:</td>
<td>
<td class="value-slider">
<input class="slider" disabled type="range" id="stream-desired-fps-slider">
</td>
<td class="value" id="stream-desired-fps-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="stream-desired-fps-value"></td>
</tr>
<tr class="feature-disabled" id="stream-mode">
<td>Video <a target="_blank" href="https://docs.pikvm.org/webrtc">mode</a>:</td>
@ -222,10 +222,10 @@
</tr>
<tr class="feature-disabled" id="stream-audio">
<td>Audio volume:</td>
<td>
<td class="value-slider">
<input class="slider" type="range" id="stream-audio-volume-slider">
</td>
<td class="value" id="stream-audio-volume-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="stream-audio-volume-value"></td>
</tr>
</table>
<hr>
@ -256,21 +256,21 @@
<div class="spoiler">
<table class="kv">
<tr>
<td>Mouse polling rate:</td>
<td>
<td>Polling rate:</td>
<td class="value-slider">
<input class="slider" type="range" id="hid-mouse-rate-slider">
</td>
<td class="value" id="hid-mouse-rate-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="hid-mouse-rate-value"></td>
</tr>
<tr class="feature-disabled" id="hid-mouse-sens">
<td>Relative mouse sensitivity:</td>
<td>
<td>Relative sensitivity:</td>
<td class="value-slider">
<input class="slider" disabled type="range" id="hid-mouse-sens-slider">
</td>
<td class="value" id="hid-mouse-sens-value" style="min-width: 30px; max-width:30px"></td>
<td class="value-number" id="hid-mouse-sens-value"></td>
</tr>
<tr class="feature-disabled" id="hid-mouse-squash">
<td>Squash relative mouse moves:</td>
<td>Squash relative moves:</td>
<td align="right">
<div class="switch-box">
<input checked type="checkbox" id="hid-mouse-squash-switch">
@ -279,7 +279,7 @@
</td>
</tr>
<tr>
<td>Reverse mouse scrolling:</td>
<td>Reverse scrolling:</td>
<td align="right">
<div class="switch-box">
<input type="checkbox" id="hid-mouse-reverse-scrolling-switch">

36
web/kvm/navbar-system.pug
View File

@ -6,7 +6,7 @@ li(id="system-dropdown" class="right")
+navbar_led("hid-mouse-led", "led-hid-mouse")
span System
div(id="system-menu" class="menu")
table(class="kv" style="width: calc(100% - 20px)")
table(class="kv")
tr
td(class="value") Runtime settings &amp; tools
td(id="system-tool-webterm" class="feature-disabled") #[button(data-force-hide-menu data-show-window="webterm-window" class="small") &bull; Term]
@ -22,22 +22,22 @@ li(id="system-dropdown" class="right")
div(id="stream-message-no-h264" class="hidden")
+menu_message("warning", "H.264 is not supported by this browser")
hr
table(class="kv" style="width: calc(100% - 20px)")
table(class="kv")
tr(id="stream-resolution" class="feature-disabled")
td Resolution:
td #[select(disabled id="stream-resolution-selector")]
tr(id="stream-quality" class="feature-disabled")
td JPEG quality:
td #[input(disabled type="range" id="stream-quality-slider" class="slider")]
td(id="stream-quality-value" class="value" style="min-width: 30px; max-width:30px")
td(class="value-slider") #[input(disabled type="range" id="stream-quality-slider" class="slider")]
td(id="stream-quality-value" class="value-number")
tr(id="stream-h264-bitrate" class="feature-disabled")
td H.264 kbps:
td #[input(disabled type="range" id="stream-h264-bitrate-slider" class="slider")]
td(id="stream-h264-bitrate-value" class="value" style="min-width: 30px; max-width:30px")
td(class="value-slider") #[input(disabled type="range" id="stream-h264-bitrate-slider" class="slider")]
td(id="stream-h264-bitrate-value" class="value-number")
tr
td Max FPS:
td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
td(id="stream-desired-fps-value" class="value" style="min-width: 30px; max-width:30px")
td(class="value-slider") #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
td(id="stream-desired-fps-value" class="value-number")
tr(id="stream-mode" class="feature-disabled")
td Video #[a(target="_blank" href="https://docs.pikvm.org/webrtc") mode]:
td
@ -48,8 +48,8 @@ li(id="system-dropdown" class="right")
label(for="stream-mode-radio-janus") H.264 / WebRTC
tr(id="stream-audio", class="feature-disabled")
td Audio volume:
td #[input(type="range" id="stream-audio-volume-slider" class="slider")]
td(id="stream-audio-volume-value" class="value" style="min-width: 30px; max-width:30px")
td(class="value-slider") #[input(type="range" id="stream-audio-volume-slider" class="slider")]
td(id="stream-audio-volume-value" class="value-number")
hr
div(class="buttons buttons-row")
button(data-force-hide-menu data-show-window="stream-window" class="row33") &bull; Show stream
@ -69,17 +69,17 @@ li(id="system-dropdown" class="right")
div(class="spoiler")
table(class="kv")
tr
td Mouse polling rate:
td #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
td(id="hid-mouse-rate-value" class="value" style="min-width: 30px; max-width:30px")
td Polling rate:
td(class="value-slider") #[input(type="range" id="hid-mouse-rate-slider" class="slider")]
td(id="hid-mouse-rate-value" class="value-number")
tr(id="hid-mouse-sens" class="feature-disabled")
td Relative mouse sensitivity:
td #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
td(id="hid-mouse-sens-value" class="value" style="min-width: 30px; max-width:30px")
td Relative sensitivity:
td(class="value-slider") #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
td(id="hid-mouse-sens-value" class="value-number")
tr(id="hid-mouse-squash" class="feature-disabled")
+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
+menu_switch_notable("hid-mouse-squash-switch", "Squash relative moves", true, true)
tr
+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse mouse scrolling", true, false)
+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Reverse scrolling", true, false)
table(class="kv")
tr(id="hid-connect" class="feature-disabled")
+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)

1
web/share/css/kvm/system.css
View File

@ -22,4 +22,5 @@
div#system-menu {
min-width: 400px;
max-width: 400px;
}

10
web/share/css/navbar.css
View File

@ -158,6 +158,16 @@ ul#navbar li div.menu table.kv td.value {
max-width: 310px;
overflow: hidden;
}
ul#navbar li div.menu table.kv td.value-slider {
width: 100%;
}
ul#navbar li div.menu table.kv td.value-number {
font-weight: bold;
max-width: 310px;
overflow: hidden;
min-width: 40px;
max-width: 40px;
}
ul#navbar li div.menu div.buttons button,
ul#navbar li div.menu div.buttons select {

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

@ -105,7 +105,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
};
var __updateRate = function(value) {
$("hid-mouse-rate-value").innerHTML = value;
$("hid-mouse-rate-value").innerHTML = value + " ms";
tools.storage.set("hid.mouse.rate", value);
if (__timer) {
clearInterval(__timer);