Add support for PiKVM Switch and related features

This commit introduces several new components and improvements:
- Added Switch module with firmware update and configuration support
- Implemented new media streaming capabilities
- Updated various UI elements and CSS styles
- Enhanced keyboard and mouse event handling
- Added new validators and configuration options
- Updated Python version support to 3.13
- Improved error handling and logging
This commit is contained in:
mofeng-git
2025-02-01 01:08:36 +00:00
parent 5db37797ea
commit 7b3335ea94
117 changed files with 5342 additions and 479 deletions

View File

@@ -28,3 +28,7 @@ div#msd-menu div.msd-message,
div#msd-menu input.msd-message {
display: none;
}
div#msd-menu select#msd-image-selector {
width: 100%;
}

View File

@@ -85,7 +85,8 @@ div.stream-box-mouse-none {
}
img#stream-image,
video#stream-video {
video#stream-video,
canvas#stream-canvas {
width: 100%;
height: 100%;
object-fit: contain;

View File

@@ -41,6 +41,13 @@
--led-spin-slow: spin 6s linear infinite;
--led-spin-medium: spin 3s linear infinite;
--led-spin-fast: spin 2s linear infinite;
/* Additional colors for GPIO */
--led-filter-blue: invert(0.5) sepia(1) saturate(5) hue-rotate(170deg);
--led-filter-cyan: invert(0.5) sepia(1) saturate(5) hue-rotate(130deg);
--led-filter-magenta: invert(0.5) sepia(1) saturate(5) hue-rotate(200deg);
--led-filter-pink: invert(0.5) sepia(1) saturate(5) hue-rotate(300deg);
--led-filter-white: invert(1) sepia(1);
}
img.led-gray {
@@ -48,19 +55,16 @@ img.led-gray {
-webkit-filter: var(--led-filter-gray);
filter: var(--led-filter-gray);
}
img.led-green {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green);
}
img.led-red {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-red);
filter: var(--led-filter-red);
}
img.led-yellow {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-yellow);
@@ -73,10 +77,36 @@ img.led-red-rotating-fast {
-webkit-animation: var(--led-spin-fast);
animation: var(--led-spin-fast);
}
img.led-yellow-rotating-fast {
-webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-fast);
animation: var(--led-spin-fast);
}
/* Additional colors for GPIO */
img.led-blue {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-blue);
filter: var(--led-filter-blue);
}
img.led-cyan {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-cyan);
filter: var(--led-filter-cyan);
}
img.led-magenta {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-magenta);
filter: var(--led-filter-magenta);
}
img.led-pink {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-pink);
filter: var(--led-filter-pink);
}
img.led-white {
-webkit-transform: translateZ(0);
-webkit-filter: var(--led-filter-white);
filter: var(--led-filter-white);
}

View File

@@ -88,12 +88,17 @@ img.svg-gray {
}
img.inline-lamp {
vertical-align: middle;
height: 1em;
margin-left: 2px;
margin-right: 2px;
}
img.inline-lamp-small {
vertical-align: middle;
height: 8px;
margin-left: 2px;
margin-right: 2px;
}
img.inline-lamp-big {
vertical-align: middle;
height: 20px;
@@ -104,7 +109,8 @@ img.inline-lamp-big {
button,
select,
input[type=file]::-webkit-file-selector-button,
input[type=file]::file-selector-button {
input[type=file]::file-selector-button,
input[type=color] {
border: none;
border-radius: 4px;
color: var(--cs-control-default-fg);
@@ -117,11 +123,9 @@ input[type=file]::file-selector-button {
}
button {
display: block;
width: 100%;
}
select {
display: block;
width: 100%;
padding-left: 5px;
}
select[size] {
@@ -194,6 +198,7 @@ select:not([size]) option.comment {
input[type=text], input[type=password] {
overflow-x: auto;
font-family: monospace;
box-sizing: border-box;
border-radius: 4px;
border: var(--border-default-thin);
color: var(--cs-code-default-fg);
@@ -223,42 +228,35 @@ textarea::-webkit-input-placeholder {
}
div.buttons-row {
display: flex;
margin: 0;
padding: 0;
font-size: 0;
}
.row50 {
display: inline-block;
width: 50%;
}
.row33 {
display: inline-block;
width: 33.33%;
}
.row25 {
display: inline-block;
width: 25%;
}
.row16 {
display: inline-block;
width: 16.66%;
}
.row50:not(:first-child),
.row33:not(:first-child),
.row25:not(:first-child),
.row16:not(:first-child) {
div.buttons-row button:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: var(--border-control-thin) !important;
}
.row50:not(:last-child),
.row33:not(:last-child),
.row25:not(:last-child),
.row16:not(:last-child) {
div.buttons-row button:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button.row100 {
width: 100% !important;
}
button.row50 {
width: 50% !important;
}
button.row33 {
width: 33.33% !important;
}
button.row25 {
width: 25% !important;
}
button.row16 {
width: 16.66% !important;
}
table.kv {
border-spacing: 5px;

View File

@@ -63,9 +63,11 @@ div.modal div.modal-window div.modal-content {
div.modal div.modal-window div.modal-buttons {
border-top: var(--border-control-thin);
display: flex;
margin: 0;
padding: 0;
font-size: 0;
width: 100%;
}
div.modal div.modal-window div.modal-buttons button {

View File

@@ -172,6 +172,7 @@ ul#navbar li div.menu div.buttons select {
border-radius: 0;
text-align: left;
padding: 0 16px;
width: 100%;
}
ul#navbar li div.menu input[type=text] {

View File

@@ -21,7 +21,7 @@
@supports (-webkit-appearance:none) {
input[type=range].slider {
input[type=range] {
cursor: pointer;
outline: none;
width: 100%;
@@ -33,7 +33,7 @@
}
}
@supports not (-webkit-appearance:none) {
input[type=range].slider {
input[type=range] {
cursor: pointer;
outline: none;
width: 100%;
@@ -42,20 +42,20 @@
margin-right: 0;
}
}
input[type=range].slider:disabled {
input[type=range]:disabled {
cursor: default;
}
input[type=range].slider::-webkit-slider-runnable-track {
input[type=range]::-webkit-slider-runnable-track {
height: 5px;
background: var(--cs-control-default-bg);
border-radius: 3px;
}
input[type=range].slider:disabled::-webkit-slider-runnable-track {
input[type=range]:disabled::-webkit-slider-runnable-track {
cursor: default;
}
input[type=range].slider::-webkit-slider-thumb {
input[type=range]::-webkit-slider-thumb {
border: var(--border-intensive-2px);
height: 18px;
width: 18px;
@@ -64,29 +64,29 @@ input[type=range].slider::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range].slider:disabled::-webkit-slider-thumb {
input[type=range]:disabled::-webkit-slider-thumb {
cursor: default;
border: var(--border-default-2px);
background: var(--cs-thumb-disabled-bg);
}
input[type=range].slider::-moz-range-track {
input[type=range]::-moz-range-track {
height: 5px;
background: var(--cs-control-default-bg);
border-radius: 3px;
}
input[type=range].slider:disabled::-moz-range-track {
input[type=range]:disabled::-moz-range-track {
cursor: default;
}
input[type=range].slider::-moz-range-thumb {
input[type=range]::-moz-range-thumb {
border: var(--border-intensive-2px);
height: 18px;
width: 18px;
border-radius: 25px;
background: var(--cs-thumb-default-bg);
}
input[type=range].slider:disabled::-moz-range-thumb {
input[type=range]:disabled::-moz-range-thumb {
cursor: default;
border: var(--border-default-2px);
background: var(--cs-thumb-disabled-bg);

View File

@@ -25,7 +25,8 @@
button:enabled:hover,
select:not([size]):enabled:hover,
input[type=file]:enabled:hover::-webkit-file-selector-button,
input[type=file]:enabled:hover::file-selector-button {
input[type=file]:enabled:hover::file-selector-button,
input[type=color]:enabled:hover {
color: var(--cs-control-hovered-fg);
background-color: var(--cs-control-hovered-bg);
}
@@ -33,7 +34,8 @@ input[type=file]:enabled:hover::file-selector-button {
button:active,
select:not([size]):active,
input[type=file]:active::-webkit-file-selector-button,
input[type=file]:active::file-selector-button {
input[type=file]:active::file-selector-button,
input[type=color]:active {
color: var(--cs-control-pressed-fg) !important;
background-color: var(--cs-control-pressed-bg) !important;
}
@@ -60,12 +62,12 @@ div.radio-box input[type=radio]:not(:checked):not(:disabled) + label:hover {
/* ===== slider.css ===== */
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
input[type=range].slider:not(:disabled):hover::-webkit-slider-runnable-track {
input[type=range]:not(:disabled):hover::-webkit-slider-runnable-track {
background-color: var(--cs-control-hovered-bg);
}
/*div.switch-box label span.switch-inner:not(:disabled):hover::before {*/
input[type=range].slider:not(:disabled):hover::-moz-range-track {
input[type=range]:not(:disabled):hover::-moz-range-track {
background-color: var(--cs-control-hovered-bg);
}

View File

@@ -92,7 +92,7 @@ ul#navbar li a.menu-button:hover:not(.active) {
/*@media only screen and (orientation: portrait) {
@supports (-webkit-appearance: none) {
input[type=range].slider {
input[type=range] {
margin: 20px 0 20px 0 !important;
}
}