refactoring

This commit is contained in:
Maxim Devaev
2025-01-30 10:34:36 +02:00
parent 4039ae0483
commit 697ef549b9
23 changed files with 1150 additions and 1065 deletions

View File

@@ -1,148 +1,138 @@
li(id="system-dropdown" class="right")
a(class="menu-button" href="#")
li.right#system-dropdown
a.menu-button(href="#")
+navbar_led("link-led", "led-link")
+navbar_led("stream-led", "led-video")
+navbar_led("hid-keyboard-led", "led-hid-keyboard")
+navbar_led("hid-mouse-led", "led-hid-mouse")
span System
div(id="system-menu" class="menu")
table(class="kv")
.menu#system-menu
table.kv
tr
td(class="value") Runtime settings & tools
td(id="system-tool-webterm" class="feature-disabled") #[button(data-force-hide-menu data-show-window="webterm-window" class="small") • Term]
td(id="system-tool-about") #[button(data-force-hide-menu data-show-window="about-window" class="small") • About]
td(id="system-tool-log") #[button(data-force-hide-menu id="open-log-button" class="small") • Log]
td(id="system-tool-wol" class="feature-disabled")
button(data-force-hide-menu class="__gpio-button-__wol__ __gpio-button small" data-channel="__wol__"
data-confirm="Are you sure to send Wake-on-LAN packet to the server?") • WoL
td.value
| Runtime settings & tools
td.feature-disabled#system-tool-webterm
button.small(data-force-hide-menu data-show-window="webterm-window") • Term
td#system-tool-about
button.small(data-force-hide-menu data-show-window="about-window") • About
td#system-tool-log
button.small#open-log-button(data-force-hide-menu) • Log
td.feature-disabled#system-tool-wol
button(
data-force-hide-menu
class="__gpio-button-__wol__ __gpio-button small"
data-channel="__wol__"
data-confirm="Are you sure to send Wake-on-LAN packet to the server?"
) • WoL
hr
div(id="stream-message-no-webrtc" class="hidden")
.hidden#stream-message-no-webrtc
+menu_message("warning", "WebRTC is not supported by this browser")
hr
div(id="stream-message-no-vd" class="hidden")
.hidden#stream-message-no-vd
+menu_message("warning", "Direct HTTP H.264 streaming is not supported")
hr
div(id="stream-message-no-h264" class="hidden")
.hidden#stream-message-no-h264
+menu_message("warning", "H.264 is not supported by this browser")
hr
table(class="kv")
tr(id="stream-resolution" class="feature-disabled")
table.kv
tr.feature-disabled#stream-resolution
td Resolution:
td #[select(disabled id="stream-resolution-selector")]
tr(id="stream-quality" class="feature-disabled")
td JPEG quality:
td(class="value-slider") #[input(disabled type="range" id="stream-quality-slider" class="slider")]
td(id="stream-quality-value" class="value-number")
td #[select#stream-resolution-selector(disabled)]
tr.feature-disabled#stream-quality
+menu_slider_td3("stream-quality-slider", "stream-quality-value", false) JPEG quality:
tr
td JPEG max fps:
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-h264-bitrate" class="feature-disabled")
td H.264 kbps:
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(id="stream-h264-gop" class="feature-disabled")
td H.264 #[a(target="_blank" href="https://docs.pikvm.org/webrtc") gop]:
td(class="value-slider") #[input(disabled type="range" id="stream-h264-gop-slider" class="slider")]
td(id="stream-h264-gop-value" class="value-number")
tr(id="stream-mode" class="feature-disabled")
td Video #[a(target="_blank" href="https://docs.pikvm.org/webrtc") mode]:
td
div(class="radio-box")
input(type="radio" id="stream-mode-radio-janus" name="stream-mode-radio" value="janus")
label(for="stream-mode-radio-janus") WebRTC
input(type="radio" id="stream-mode-radio-media" name="stream-mode-radio" value="media")
label(for="stream-mode-radio-media") H.264
input(checked type="radio" id="stream-mode-radio-mjpeg" name="stream-mode-radio" value="mjpeg")
label(for="stream-mode-radio-mjpeg") MJPEG
tr(id="stream-orient" class="feature-disabled")
td Orientation:
td
div(class="radio-box")
input(checked type="radio" id="stream-orient-radio-0" name="stream-orient-radio" value="0")
label(for="stream-orient-radio-0") Default
input(type="radio" id="stream-orient-radio-90" name="stream-orient-radio" value="90")
label(for="stream-orient-radio-90") 90°
input(type="radio" id="stream-orient-radio-180" name="stream-orient-radio" value="180")
label(for="stream-orient-radio-180") 180°
input(type="radio" id="stream-orient-radio-270" name="stream-orient-radio" value="270")
label(for="stream-orient-radio-270") 270°
tr(id="stream-audio" class="feature-disabled")
td Audio volume:
td(class="value-slider") #[input(type="range" id="stream-audio-volume-slider" class="slider")]
td(id="stream-audio-volume-value" class="value-number")
tr(id="stream-mic" class="feature-disabled")
+menu_switch_notable("stream-mic-switch", "Microphone", false, false)
+menu_slider_td3("stream-desired-fps-slider", "stream-desired-fps-value", false) JPEG max fps:
tr.feature-disabled#stream-h264-bitrate
+menu_slider_td3("stream-h264-bitrate-slider", "stream-h264-bitrate-value", false) H.264 kbps:
tr.feature-disabled#stream-h264-gop
+menu_slider_td3("stream-h264-gop-slider", "stream-h264-gop-value", false)
|H.264 #[a(target="_blank" href="https://docs.pikvm.org/webrtc") gop]:
tr.feature-disabled#stream-mode
+menu_radio_td2("stream-mode-radio", [
{title: "WebRTC", value: "janus"},
{title: "H.264", value: "media"},
{title: "MJPEG", value: "mjpeg", checked: true},
]) #[a(target="_blank" href="https://docs.pikvm.org/webrtc") Video mode]:
tr.feature-disabled#stream-orient
+menu_radio_td2("stream-orient-radio", [
{title: "Default", value: "0", checked: true},
{title: "90°", value: "90"},
{title: "180°", value: "180"},
{title: "270°", value: "270"},
]) Orientation:
tr.feature-disabled#stream-audio
+menu_slider_td3("stream-audio-volume-slider", "stream-audio-volume-value") Audio volume:
tr.feature-disabled#stream-mic
+menu_switch_td2("stream-mic-switch", false, false) Microphone:
hr
div(class="buttons buttons-row")
button(data-force-hide-menu data-show-window="stream-window" class="row33") • Show stream
button(data-force-hide-menu id="stream-screenshot-button" class="row33") • Screenshot
button(id="stream-reset-button" class="row33") Reset stream
.buttons.buttons-row
button.row33(data-force-hide-menu data-show-window="stream-window") • Show stream
button.row33#stream-screenshot-button(data-force-hide-menu) • Screenshot
button.row33#stream-reset-button Reset stream
hr
table(class="kv")
tr(id="hid-outputs-keyboard", class="feature-disabled")
table.kv
tr.feature-disabled#hid-outputs-keyboard
td Keyboard mode:
td #[div(id="hid-outputs-keyboard-box" class="radio-box")]
tr(id="hid-outputs-mouse", class="feature-disabled")
td Mouse #[a(target="_blank" href="https://docs.pikvm.org/mouse") mode]:
td #[div(id="hid-outputs-mouse-box" class="radio-box")]
details
summary Keyboard & mouse (HID) settings
div(class="spoiler")
table(class="kv")
tr
+menu_switch_notable("hid-keyboard-swap-cc-switch", "Swap Left Ctrl and Caps keys", true, false)
hr
table(class="kv")
tr
td Mouse polling:
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 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 moves", true, true)
tr
td Reverse scrolling:
td
table
tr
+menu_switch_notable("hid-mouse-reverse-scrolling-switch", "Y", true, false)
td   
+menu_switch_notable("hid-mouse-reverse-panning-switch", "X", true, false)
tr
+menu_switch_notable("hid-mouse-cumulative-scrolling-switch", "Cumulative scrolling", true, false)
tr
td Scroll rate:
td(class="value-slider") #[input(type="range" id="hid-mouse-scroll-slider" class="slider")]
td(id="hid-mouse-scroll-value" class="value-number")
tr
+menu_switch_notable("hid-mouse-dot-switch", "Show the blue dot", true, true)
details
summary Web UI settings
div(class="spoiler")
table(class="kv")
tr
+menu_switch_notable("page-close-ask-switch", "Ask page close confirmation", true, true)
tr
+menu_switch_notable("page-full-tab-stream-switch", "Expand for the entire tab by default", true, false)
table(class="kv")
td #[div.radio-box#hid-outputs-keyboard-box]
tr.feature-disabled#hid-outputs-mouse
td #[a(target="_blank" href="https://docs.pikvm.org/mouse") Mouse mode]:
td #[div.radio-box#hid-outputs-mouse-box]
+menu_spoiler("Keyboard & mouse (HID) settings")
+menu_switch_table("hid-keyboard-swap-cc-switch", true, false) Swap Left Ctrl and Caps keys:
hr
table(class="kv")
tr
+menu_slider_td3("hid-mouse-rate-slider", "hid-mouse-rate-value") Mouse polling:
tr.feature-disabled#hid-mouse-sens
+menu_slider_td3("hid-mouse-sens-slider", "hid-mouse-sens-value", false) Relative sensitivity:
tr(id="hid-mouse-squash" class="feature-disabled")
+menu_switch_td2("hid-mouse-squash-switch", true, true) Squash relative moves:
tr
td Reverse scrolling:
td
table
tr
+menu_switch_td2("hid-mouse-reverse-scrolling-switch", true, false) Y:
td   
+menu_switch_td2("hid-mouse-reverse-panning-switch", true, false) X:
tr
+menu_switch_td2("hid-mouse-cumulative-scrolling-switch", true, false) Cumulative scrolling:
tr
+menu_slider_td3("hid-mouse-scroll-slider", "hid-mouse-scroll-value") Scroll rate:
tr
+menu_switch_td2("hid-mouse-dot-switch", true, true) Show the blue dot:
+menu_spoiler("Web UI settings")
table.kv
tr
+menu_switch_td2("page-close-ask-switch", true, true) Ask page close confirmation:
tr
+menu_switch_td2("page-full-tab-stream-switch", true, false) Expand for the entire tab by default:
table.kv
tr
+menu_switch_notable("hid-keyboard-bad-link-switch", "Bad link mode (release keys immediately)", true, false)
tr(id="hid-connect" class="feature-disabled")
+menu_switch_notable("hid-connect-switch", "Connect HID to Server", true, true)
tr(id="hid-jiggler" class="feature-disabled")
+menu_switch_notable("hid-jiggler-switch", "<a href=\"https://docs.pikvm.org/mouse_jiggler\" target=\"_blank\">Mouse jiggler</a>", false, false)
+menu_switch_td2("hid-keyboard-bad-link-switch", true, false) Bad link mode (release keys immediately):
tr.feature-disabled#hid-connect
+menu_switch_td2("hid-connect-switch", true, true) Connect HID to Server:
tr.feature-disabled#hid-jiggler
+menu_switch_td2("hid-jiggler-switch", false, false)
a(target="_blank" href="https://docs.pikvm.org/mouse_jiggler") Mouse jiggler:
tr
+menu_switch_notable("hid-mute-switch", "Mute all input HID events", true, false)
tr(id="v3-usb-breaker" class="feature-disabled")
+menu_switch_notable_gpio("__v3_usb_breaker__", "Connect main USB to Server",
"Turning off this switch will disconnect the main USB from the server. Are you sure you want to continue?")
tr(id="v4-locator" class="feature-disabled")
+menu_switch_notable_gpio("__v4_locator__", "Enable locator LED")
+menu_switch_td2("hid-mute-switch", true, false) Mute all input HID events:
tr.feature-disabled#v3-usb-breaker
+menu_switch_td2_gpio(
"__v3_usb_breaker__",
"Turning off this switch will disconnect the main USB from the server. Are you sure you want to continue?"
) Connect main USB to Server:
tr.feature-disabled#v4-locator
+menu_switch_td2_gpio("__v4_locator__") Enable locator LED:
hr
div(class="buttons buttons-row")
button(data-force-hide-menu data-show-window="keyboard-window" class="row50") &bull; Show keyboard
button(disabled id="hid-reset-button" class="row50") Reset HID
.buttons.buttons-row
button.row50(data-force-hide-menu data-show-window="keyboard-window") &bull; Show keyboard
button.row50#hid-reset-button(disabled) Reset HID