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

pikvm/pikvm#803: Ability to use LEDs in GPIO title

Browse Source
This commit is contained in:
Maxim Devaev
2022-10-08 06:09:33 +03:00
parent 16d9c3815f
commit a39d3dffbe
15 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/kvm/index.html
View File

@@ -60,7 +60,7 @@
<ul id="navbar">
<li class="left"><a id="logo" href="/">&larr;&nbsp;&nbsp;<img class="svg-gray" src="/share/svg/logo.svg" alt="&amp;pi;-kvm"></a></li>
<div class="hidden" id="hw-health-dropdown">
<li class="left"><a class="menu-button" href="#"><img class="hidden" data-dont-hide-menu id="hw-health-undervoltage-led" src="/share/svg/led-undervoltage.svg"><img class="hidden" data-dont-hide-menu id="hw-health-overheating-led" src="/share/svg/led-overheating.svg"></a>
<li class="left"><a class="menu-button" href="#"><img class="hidden" id="hw-health-undervoltage-led" src="/share/svg/led-undervoltage.svg"><img class="hidden" id="hw-health-overheating-led" src="/share/svg/led-overheating.svg"></a>
<div class="menu" data-dont-hide-menu>
<div class="text">
<table>
@@ -108,7 +108,7 @@
</li>
</div>
<div class="hidden" id="fan-health-dropdown">
<li class="left"><a class="menu-button" href="#"><img class="hidden" data-dont-hide-menu id="fan-health-led" src="/share/svg/led-fan.svg"></a>
<li class="left"><a class="menu-button" href="#"><img class="hidden" id="fan-health-led" src="/share/svg/led-fan.svg"></a>
<div class="menu" data-dont-hide-menu>
<div class="text">
<table>
@@ -139,7 +139,7 @@
</div>
</li>
</div>
<li class="right" id="system-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="link-led" src="/share/svg/led-link.svg"><img class="led-gray" data-dont-hide-menu id="stream-led" src="/share/svg/led-stream.svg"><img class="led-gray" data-dont-hide-menu id="hid-keyboard-led" src="/share/svg/led-hid-keyboard.svg"><img class="led-gray" data-dont-hide-menu id="hid-mouse-led" src="/share/svg/led-hid-mouse.svg">System</a>
<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" data-dont-hide-menu id="system-menu">
<table class="kv" style="width: calc(100% - 20px)">
<tr>
@@ -335,7 +335,7 @@
</div>
</div>
</li>
<li class="right feature-disabled" id="atx-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" data-dont-hide-menu id="atx-hdd-led" src="/share/svg/led-atx-hdd.svg">ATX</a>
<li class="right feature-disabled" id="atx-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="atx-power-led" src="/share/svg/led-atx-power.svg"><img class="led-gray" id="atx-hdd-led" src="/share/svg/led-atx-hdd.svg"><span>ATX</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Control the server's power<br></b><sub>Use the short click for ACPI shutdown</sub></div>
<hr>
@@ -359,7 +359,7 @@
</div>
</div>
</li>
<li class="right feature-disabled" id="msd-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="msd-led" src="/share/svg/led-msd.svg">Drive</a>
<li class="right feature-disabled" id="msd-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="msd-led" src="/share/svg/led-msd.svg"><span>Drive</span></a>
<div class="menu" data-dont-hide-menu id="msd-menu">
<div class="text"><b>Mass Storage Drive: </b><span id="msd-status"></span><br></div>
<hr>
@@ -570,7 +570,7 @@
</div>
</div>
</li>
<li class="right" id="macro-dropdown"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="hid-recorder-led" src="/share/svg/led-gear.svg">Macro</a>
<li class="right" id="macro-dropdown"><a class="menu-button" href="#"><img class="led-gray" id="hid-recorder-led" src="/share/svg/led-gear.svg"><span>Macro</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Record and play HID/ATX/GPIO actions<br></b><sub>For security reasons, the record will not be saved on the PiKVM</sub></div>
<hr>
@@ -612,7 +612,7 @@
</div>
</div>
</li>
<li class="right" id="text-dropdown"><a class="menu-button" href="#"><img class="feature-disabled" data-dont-hide-menu id="stream-ocr-led" src="/share/svg/led-gear.svg">Text</a>
<li class="right" id="text-dropdown"><a class="menu-button" href="#"><img class="feature-disabled" id="stream-ocr-led" src="/share/svg/led-gear.svg"><span>Text</span></a>
<div class="menu" data-dont-hide-menu>
<div class="text"><b>Paste text as keypress sequence<br></b><sub>Please note that PiKVM cannot switch the keyboard layout</sub></div>
<hr>
@@ -747,7 +747,7 @@
</table>
</div>
</li>
<li class="right feature-disabled" id="gpio-dropdown"><a class="menu-button" id="gpio-menu-button" href="#">GPIO</a>
<li class="right feature-disabled" id="gpio-dropdown"><a class="menu-button" id="gpio-menu-button" href="#"><span>GPIO</span></a>
<div class="menu" data-dont-hide-menu id="gpio-menu"></div>
</li>
</ul>

2
web/kvm/navbar-atx.pug
View File

@@ -2,7 +2,7 @@ li(id="atx-dropdown" class="right feature-disabled")
a(class="menu-button" href="#")
+navbar_led("atx-power-led", "led-atx-power")
+navbar_led("atx-hdd-led", "led-atx-hdd")
| ATX
span ATX
div(data-dont-hide-menu class="menu")
div(class="text")
b Control the server's power#[br]

2
web/kvm/navbar-gpio.pug
View File

@@ -1,4 +1,4 @@
li(id="gpio-dropdown" class="right feature-disabled")
a(class="menu-button" id="gpio-menu-button" href="#")
| GPIO
span GPIO
div(data-dont-hide-menu id="gpio-menu" class="menu")

2
web/kvm/navbar-macro.pug
View File

@@ -1,7 +1,7 @@
li(id="macro-dropdown" class="right")
a(class="menu-button" href="#")
+navbar_led("hid-recorder-led", "led-gear")
| Macro
span Macro
div(data-dont-hide-menu class="menu")
div(class="text")
b Record and play HID/ATX/GPIO actions#[br]

2
web/kvm/navbar-msd.pug
View File

@@ -1,7 +1,7 @@
li(id="msd-dropdown" class="right feature-disabled")
a(class="menu-button" href="#")
+navbar_led("msd-led", "led-msd")
| Drive
span Drive
div(data-dont-hide-menu id="msd-menu" class="menu")
div(class="text")
b Mass Storage Drive:

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

@@ -4,7 +4,7 @@ li(id="system-dropdown" class="right")
+navbar_led("stream-led", "led-stream")
+navbar_led("hid-keyboard-led", "led-hid-keyboard")
+navbar_led("hid-mouse-led", "led-hid-mouse")
| System
span System
div(data-dont-hide-menu id="system-menu" class="menu")
table(class="kv" style="width: calc(100% - 20px)")
tr

2
web/kvm/navbar-text.pug
View File

@@ -1,7 +1,7 @@
li(id="text-dropdown" class="right")
a(class="menu-button" href="#")
+navbar_led("stream-ocr-led", "led-gear", "feature-disabled")
| Text
span Text
div(data-dont-hide-menu class="menu")
div(class="text")
b Paste text as keypress sequence#[br]

2
web/kvm/navbar.pug
View File

@@ -1,5 +1,5 @@
mixin navbar_led(id, icon, cls="led-gray")
img(data-dont-hide-menu id=id, class=cls src=`${svg_dir}/${icon}.svg`)
img(id=id, class=cls src=`${svg_dir}/${icon}.svg`)
mixin menu_message(icon, short, classes="")
div(class="text")

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

@@ -44,6 +44,7 @@ ul#navbar li.left {
}
ul#navbar li a#logo {
height: 50px; /* Чтобы вертикальные разделители не вылезали за пределы навбара */
line-height: 50px;
outline: none;
cursor: pointer;
@@ -55,6 +56,7 @@ ul#navbar li a#logo {
}
ul#navbar li a.menu-button {
height: 50px; /* То же самое */
line-height: 50px;
outline: none;
cursor: pointer;
@@ -83,7 +85,7 @@ ul#navbar li a.menu-button:hover:not(.active) {
@media only screen and (pointer: coarse) {
ul#navbar li a#logo:hover:not(.active),
ul#navbar li a.menu-button:hover:not(.active) {
background-color: var(--cs-navbar-default-bg) !important;
background-color: var(--cs-navbar-default-bg);
}
}
@@ -92,11 +94,15 @@ ul#navbar li a#logo img {
height: 24px;
}
ul#navbar li a.menu-button span,
ul#navbar li a.menu-button img {
vertical-align: middle;
margin-right: 10px;
height: 20px;
}
ul#navbar li a.menu-button span:not(:last-child),
ul#navbar li a.menu-button img:not(:last-child) {
margin-right: 10px;
}
ul#navbar li a.menu-button-pressed {
box-shadow: var(--shadow-navbar-item-pressed);

11
web/share/js/kvm/gpio.js
View File

@@ -72,7 +72,16 @@ export function Gpio(__recorder) {
self.setModel = function(model) {
tools.feature.setEnabled($("gpio-dropdown"), model.view.table.length);
if (model.view.table.length) {
$("gpio-menu-button").innerHTML = `${model.view.header.title}`;
let title = [];
let last_is_label = false;
for (let item of model.view.header.title) {
if (last_is_label && item.type === "label") {
title.push("<span></span>");
}
last_is_label = (item.type === "label");
title.push(__createItem(item));
}
$("gpio-menu-button").innerHTML = title.join(" ");
}
let content = "<table class=\"kv\">";

5
web/share/js/wm.js
View File

@@ -344,8 +344,9 @@ function __WindowManager() {
var __globalMouseButtonHandler = function(event) {
if (
event.target.matches && !event.target.matches(".menu-button")
&& event.target.closest && !event.target.closest(".modal")
event.target.closest
&& !event.target.closest(".menu-button")
&& !event.target.closest(".modal")
) {
for (let el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
if (el_item.hasAttribute("data-force-hide-menu")) {