diff --git a/web/kvm/index.html b/web/kvm/index.html index 26c798d1..6d64ec5a 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -772,21 +772,26 @@
-
Mouse
Left
-
•
← Hold
-
-
Mouse
Middle
-
•
← Hold
-
-
•
Hold →
-
Mouse
Right
-
-
@@ -803,53 +808,74 @@
Esc
-
+
+
+
 
+
+
F1
+
F2
+
F3
+
F4
-
+
+
+
 
+
+
F5
+
F6
+
F7
+
F8
-
+
+
+
 
+
+
F9
+
F10
+
F11
+
F12
@@ -861,217 +887,266 @@
~
`
+
!
1
+
@
2
+
#
3
+
$
4
+
%
5
+
^
6
+
&
7
+
*
8
+
(
9
+
)
0
+
_
-
+
+
=
-
+
+
↤
-
+
⇤
⇥
+
Q
+
W
+
E
+
R
+
T
+
Y
+
U
+
I
+
O
+
P
+
{
[
+
}
]
+
|
\
-
+

Caps Lock
+
A
+
S
+
D
+
F
+
G
+
H
+
J
+
K
+
L
+
:
;
+
"
'
-
+
+
Enter
↵
-
+
•
Shift
+
Z
+
X
+
C
+
V
+
B
+
N
+
M
+
<
,
+
>
.
+
?
/
-
+
+
•
Shift
@@ -1081,26 +1156,32 @@
•
Ctrl
+
•
Win
+
•
Alt
-
+
+
+
•
Alt
+
•
Win
+
•
Ctrl
@@ -1113,10 +1194,12 @@
•
Pt/Sq
+

ScrLk
+
P/Brk
@@ -1128,10 +1211,12 @@
Ins
+
Home
+
PgUp
@@ -1142,10 +1227,12 @@
Del
+
End
+
PgDn
@@ -1153,22 +1240,30 @@
-
+
+
 
+
+
↑
-
+
+
+
 
+
←
+
↓
+
→
@@ -1177,15 +1272,20 @@
-
+
+
 
+
+
Yen
+
N/US
+
PWR
@@ -1197,14 +1297,17 @@

NmLk
+
/
+
*
+
-
@@ -1215,29 +1318,37 @@
7
Home
+
8
↑
+
9
PgUp
-
+
+
+
 
+
4
←
+
5

+
6
→
+
+
@@ -1248,26 +1359,36 @@
1
End
+
2
↓
+
3
PgDn
-
+
+
+
 
+
0
Ins
-
+
+
+
 
+
+
.
Del
+
Ent
@@ -1278,85 +1399,93 @@
-
+
Esc
-
-
+
+
F1
-
+
F2
-
+
F3
-
+
F4
-
+
+
F5
-
+
F6
-
+
F7
-
+
F8
-
+
+
F9
-
+
F10
-
+
F11
-
+
F12
-
-
+
+
•
Pt/Sq
-
+
+

ScrLk
-
+
+
P/Brk
-
+
+
Ins
-
+
+
Home
-
+
+
End
-
+
+
Del
@@ -1366,224 +1495,275 @@
~
`
+
!
1
+
@
2
+
#
3
+
$
4
+
%
5
+
^
6
+
&
7
+
*
8
+
(
9
+
)
0
+
_
-
+
+
=
-
+
+
↤
-
+
⇤
⇥
+
Q
+
W
+
E
+
R
+
T
+
Y
+
U
+
I
+
O
+
P
+
{
[
+
}
]
-
+
+
|
\
-
+

Caps Lock
+
A
+
S
+
D
+
F
+
G
+
H
+
J
+
K
+
L
+
:
;
+
`
'
-
+
+
Enter
↵
-
+
•
Shift
+
Z
+
X
+
C
+
V
+
B
+
N
+
M
+
-
lt;
, +
<
,
+
>
.
+
?
/
+
PgUp
+
↑
+
PgDn
@@ -1594,42 +1774,52 @@
•
Ctrl
+
•
Win
+
•
Alt
+
+
•
Alt
+
•
Win
+
•
Shift
+
•
Ctrl
+
←
+
↓
+
→
diff --git a/web/kvm/window-keyboard.pug b/web/kvm/window-keyboard.pug index 7346e88c..2a1191f0 100644 --- a/web/kvm/window-keyboard.pug +++ b/web/kvm/window-keyboard.pug @@ -1,16 +1,29 @@ -mixin key(code, classes="", width=0) +mixin key(spacer, code, classes="", width=0) div(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : "")) div(class="label") block + if spacer == 1 + div(class="spacer") + else if spacer == 2 + div(class="spacer-fixed") -mixin modifier(code, classes="", width=0) +mixin modifier(spacer, code, classes="", width=0) div(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : "")) div(class="label") | #[b •]#[br] block + if spacer == 1 + div(class="spacer") + else if spacer == 2 + div(class="spacer-fixed") -mixin empty_key(width=0) - div(class="empty-key" style=(width ? `width:${width}px` : "")) +mixin empty(spacer, classes="", width=0) + div(class=`empty ${classes}` style=(width ? `width:${width}px` : "")) + div(class="label")   + if spacer == 1 + div(class="spacer") + else if spacer == 2 + div(class="spacer-fixed") mixin lamp(cls) img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`) @@ -23,173 +36,181 @@ div(id="keyboard-window" class="window") div(id="keyboard-desktop" class="keypad" align="center") div(class="keypad-block") div(class="keypad-row") - +key("Escape", "small") Esc - +empty_key(24) + +key(2, "Escape", "small") Esc + +empty(1, "", 24) each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"] - +key(key, "small") #{key} + +key((key != "F12" ? 1 : 0), key, "small") #{key} if key == "F4" || key == "F8" - +empty_key(10) + +empty(1, "", 10) hr div(class="keypad-row") - +key("Backquote") ~#[br]` + +key(1, "Backquote") ~#[br]` each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("] - +key(`Digit${index + 1}`) #{key}#[br]#{index + 1} - +key("Digit0") )#[br]0 - +key("Minus") _#[br]- - +key("Equal") +#[br]= - +key("Backspace", "wide-2 right") ↤ + +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1} + +key(1, "Digit0") )#[br]0 + +key(1, "Minus") _#[br]- + +key(2, "Equal") +#[br]= + +key(0, "Backspace", "wide-1 right") ↤ div(class="keypad-row") - +key("Tab", "wide-2 left") ⇤#[br]⇥ + +key(2, "Tab", "wide-1 left") ⇤#[br]⇥ each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] - +key(`Key${key}`, "single") #{key} - +key("BracketLeft") {#[br][ - +key("BracketRight") }#[br]] - +key("Backslash") |#[br]\ + +key(1, `Key${key}`, "single") #{key} + +key(1, "BracketLeft") {#[br][ + +key(1, "BracketRight") }#[br]] + +key(0, "Backslash") |#[br]\ div(class="keypad-row") - +key("CapsLock", "wide-3 left small") + +key(2, "CapsLock", "wide-2 left small") +lamp("hid-keyboard-caps-led") | #[br] Caps Lock each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"] - +key(`Key${key}`, "single") #{key} - +key("Semicolon") :#[br]; - +key("Quote") "#[br]' - +key("Enter", "wide-3 right small") Enter#[br]↵ + +key(1, `Key${key}`, "single") #{key} + +key(1, "Semicolon") :#[br]; + +key(2, "Quote") "#[br]' + +key(0, "Enter", "wide-2 right small") Enter#[br]↵ div(class="keypad-row") - +modifier("ShiftLeft", "wide-4 left small") Shift + +modifier(2, "ShiftLeft", "wide-3 left small") Shift each key in ["Z", "X", "C", "V", "B", "N", "M"] - +key(`Key${key}`, "single") #{key} - +key("Comma") <#[br], - +key("Period") >#[br]. - +key("Slash") ?#[br]/ - +modifier("ShiftRight", "wide-4 right small") Shift + +key(1, `Key${key}`, "single") #{key} + +key(1, "Comma") <#[br], + +key(1, "Period") >#[br]. + +key(2, "Slash") ?#[br]/ + +modifier(0, "ShiftRight", "wide-3 right small") Shift div(class="keypad-row") - +modifier("ControlLeft", "wide-1 left small") Ctrl - +modifier("MetaLeft", "wide-1 left small") Win - +modifier("AltLeft", "wide-1 left small") Alt - +key("Space", "wide-5") - +modifier("AltRight", "wide-1 right small") Alt - +modifier("MetaRight", "wide-1 right small") Win - +modifier("ControlRight", "wide-1 right small") Ctrl + +modifier(2, "ControlLeft", "wide-1 left small") Ctrl + +modifier(2, "MetaLeft", "wide-1 left small") Win + +modifier(2, "AltLeft", "wide-1 left small") Alt + +key(2, "Space", "wide-4") + +modifier(2, "AltRight", "wide-1 right small") Alt + +modifier(2, "MetaRight", "wide-1 right small") Win + +modifier(0, "ControlRight", "wide-1 right small") Ctrl div(class="keypad-block") div(class="keypad-row") - +modifier("PrintScreen", "small") Pt/Sq - +key("ScrollLock", "small") + +modifier(2, "PrintScreen", "small") Pt/Sq + +key(2, "ScrollLock", "small") +lamp("hid-keyboard-scroll-led") | #[br] ScrLk - +key("Pause", "small") P/Brk + +key(0, "Pause", "small") P/Brk hr div(class="keypad-row") - +key("Insert", "small") Ins - +key("Home", "small") Home - +key("PageUp", "small") PgUp + +key(2, "Insert", "small") Ins + +key(2, "Home", "small") Home + +key(0, "PageUp", "small") PgUp div(class="keypad-row") - +key("Delete", "small") Del - +key("End", "small") End - +key("PageDown", "small") PgDn + +key(2, "Delete", "small") Del + +key(2, "End", "small") End + +key(0, "PageDown", "small") PgDn div(class="keypad-row") div(class="keypad-row") - +empty_key() - +key("ArrowUp") ↑ - +empty_key() + +empty(1, "") + +key(2, "ArrowUp") ↑ + +empty(0, "") div(class="keypad-row") - +key("ArrowLeft") ← - +key("ArrowDown") ↓ - +key("ArrowRight") → + +key(2, "ArrowLeft") ← + +key(2, "ArrowDown") ↓ + +key(0, "ArrowRight") → div(class="keypad-block") div(class="keypad-row") - +empty_key() - +key("IntlYen", "small") Yen - +key("IntlBackslash", "small") N/US - +key("Power", "small") PWR + +empty(2, "small") + +key(2, "IntlYen", "small") Yen + +key(2, "IntlBackslash", "small") N/US + +key(0, "Power", "small") PWR hr div(class="keypad-row") - +key("NumLock", "small") + +key(2, "NumLock", "small") +lamp("hid-keyboard-num-led") | #[br] NmLk - +key("NumpadDivide") / - +key("NumpadMultiply") * - +key("NumpadSubtract") - + +key(2, "NumpadDivide") / + +key(2, "NumpadMultiply") * + +key(0, "NumpadSubtract") - div(class="keypad-row") - +key("Numpad7", "small") 7#[br]Home - +key("Numpad8", "small") 8#[br]↑ - +key("Numpad9", "small") 9#[br]PgUp - +empty_key() + +key(2, "Numpad7", "small") 7#[br]Home + +key(2, "Numpad8", "small") 8#[br]↑ + +key(2, "Numpad9", "small") 9#[br]PgUp + +empty(0, "") div(class="keypad-row") - +key("Numpad4", "small") 4#[br]← - +key("Numpad5", "small") 5#[br]#[br] - +key("Numpad6", "small") 6#[br]→ - +key("NumpadAdd") + + +key(2, "Numpad4", "small") 4#[br]← + +key(2, "Numpad5", "small") 5#[br]#[br] + +key(2, "Numpad6", "small") 6#[br]→ + +key(0, "NumpadAdd") + div(class="keypad-row") - +key("Numpad1", "small") 1#[br]End - +key("Numpad2", "small") 2#[br]↓ - +key("Numpad3", "small") 3#[br]PgDn - +empty_key() + +key(2, "Numpad1", "small") 1#[br]End + +key(2, "Numpad2", "small") 2#[br]↓ + +key(2, "Numpad3", "small") 3#[br]PgDn + +empty(0, "") div(class="keypad-row") - +key("Numpad0", "small") 0#[br]Ins - +empty_key() - +key("NumpadDecimal", "small") .#[br]Del - +key("NumpadEnter", "small") Ent + +key(2, "Numpad0", "small") 0#[br]Ins + +empty(2, "") + +key(2, "NumpadDecimal", "small") .#[br]Del + +key(0, "NumpadEnter", "small") Ent div(id="keyboard-mobile" class="keypad" align="center") div(class="keypad-block") div(class="keypad-row") - +key("Escape", "margin-0 small") Esc - +empty_key(1) - each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"] - +key(key, "wide-0 margin-0 small") #{key} - +empty_key(2) - +modifier("PrintScreen", "margin-0 small") Pt/Sq - +key("ScrollLock", "margin-0 small") + +key(1, "Escape", "small") Esc + +key(0, "F1", "wide-0 small rounded-left") F1 + +key(0, "F2", "wide-0 small rounded-none") F2 + +key(0, "F3", "wide-0 small rounded-none") F3 + +key(2, "F4", "wide-0 small rounded-right") F4 + +key(0, "F5", "wide-0 small rounded-left") F5 + +key(0, "F6", "wide-0 small rounded-none") F6 + +key(0, "F7", "wide-0 small rounded-none") F7 + +key(2, "F8", "wide-0 small rounded-right") F8 + +key(0, "F9", "wide-0 small rounded-left") F9 + +key(0, "F10", "wide-0 small rounded-none") F10 + +key(0, "F11", "wide-0 small rounded-none") F11 + +key(2, "F12", "wide-0 small rounded-right") F12 + +modifier(1, "PrintScreen", "small") Pt/Sq + +key(1, "ScrollLock", "small") +lamp("hid-keyboard-scroll-led") | #[br] ScrLk - +key("Pause", "margin-0 small") P/Brk - +key("Insert", "margin-0 small") Ins - +key("Home", "margin-0 small") Home - +key("End", "margin-0 small") End - +key("Delete", "margin-0 small") Del + +key(1, "Pause", "small") P/Brk + +key(1, "Insert", "small") Ins + +key(1, "Home", "small") Home + +key(1, "End", "small") End + +key(0, "Delete", "small") Del div(class="keypad-row") - +key("Backquote") ~#[br]` + +key(1, "Backquote") ~#[br]` each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("] - +key(`Digit${index + 1}`) #{key}#[br]#{index + 1} - +key("Digit0") )#[br]0 - +key("Minus") _#[br]- - +key("Equal") +#[br]= - +key("Backspace", "wide-3 right", 101) ↤ + +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1} + +key(1, "Digit0") )#[br]0 + +key(1, "Minus") _#[br]- + +key(1, "Equal") +#[br]= + +key(0, "Backspace", "wide-2 right", 101) ↤ div(class="keypad-row") - +key("Tab", "wide-2 left") ⇤
⇥ + +key(1, "Tab", "wide-1 left") ⇤
⇥ each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] - +key(`Key${key}`, "single") #{key} - +key("BracketLeft") {#[br][ - +key("BracketRight") }#[br]] - +key("Backslash", "wide-2 left", 78) |#[br]\ + +key(1, `Key${key}`, "single") #{key} + +key(1, "BracketLeft") {#[br][ + +key(1, "BracketRight") }#[br]] + +key(0, "Backslash", "wide-1 left", 78) |#[br]\ div(class="keypad-row") - +key("CapsLock", "wide-3 left small") + +key(1, "CapsLock", "wide-2 left small") +lamp("hid-keyboard-caps-led") | #[br] Caps Lock each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"] - +key(`Key${key}`, "single") #{key} - +key("Semicolon") :#[br]; - +key("Quote") `#[br]' - +key("Enter", "wide-4 right small", 116) Enter#[br]↵ + +key(1, `Key${key}`, "single") #{key} + +key(1, "Semicolon") :#[br]; + +key(1, "Quote") `#[br]' + +key(0, "Enter", "wide-3 right small", 116) Enter#[br]↵ div(class="keypad-row") - +modifier("ShiftLeft", "wide-4 left small") Shift + +modifier(1, "ShiftLeft", "wide-3 left small") Shift each key in ["Z", "X", "C", "V", "B", "N", "M"] - +key(`Key${key}`, "single") #{key} - +key("Comma") lt;#[br], - +key("Period") >#[br]. - +key("Slash") ?#[br]/ - +key("PageUp", "small") PgUp - +key("ArrowUp") ↑ - +key("PageDown", "small") PgDn + +key(1, `Key${key}`, "single") #{key} + +key(1, "Comma") <#[br], + +key(1, "Period") >#[br]. + +key(1, "Slash") ?#[br]/ + +key(2, "PageUp", "small") PgUp + +key(2, "ArrowUp") ↑ + +key(0, "PageDown", "small") PgDn div(class="keypad-row") - +modifier("ControlLeft", "wide-1 left small") Ctrl - +modifier("MetaLeft", "wide-1 left small") Win - +modifier("AltLeft", "wide-1 left small") Alt - +key("Space", "", 190) - +modifier("AltRight", "right small") Alt - +modifier("MetaRight", "right small") Win - +modifier("ShiftRight", "right small") Shift - +modifier("ControlRight", "right small") Ctrl - +key("ArrowLeft") ← - +key("ArrowDown") ↓ - +key("ArrowRight") → + +modifier(1, "ControlLeft", "wide-1 left small") Ctrl + +modifier(1, "MetaLeft", "wide-1 left small") Win + +modifier(1, "AltLeft", "wide-1 left small") Alt + +key(1, "Space", "", 190) + +modifier(1, "AltRight", "right small") Alt + +modifier(1, "MetaRight", "right small") Win + +modifier(1, "ShiftRight", "right small") Shift + +modifier(1, "ControlRight", "right small") Ctrl + +key(2, "ArrowLeft") ← + +key(2, "ArrowDown") ↓ + +key(0, "ArrowRight") → diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug index ad88d8af..afafd765 100644 --- a/web/kvm/window-stream.pug +++ b/web/kvm/window-stream.pug @@ -21,17 +21,17 @@ div(id="stream-window" class="window window-resizable") div(id="stream-mouse-buttons" class="keypad" align="center") div(class="keypad-block") div(class="keypad-row") - div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left] - div(data-code="left" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold] - div(class="empty-key" style="width:10px") - div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle] - div(data-code="middle" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold] - div(class="empty-key" style="width:10px") - div(data-code="right" class="modifier wide-2 right small") #[span #[b •]#[br]Hold →] - div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right] - div(class="keypad-row" style="display:none") - div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back] - div(data-code="up" class="modifier wide-2 left small") #[span #[b •]#[br]← Hold] - div(class="empty-key" style="width:10px") - div(data-code="down" class="modifier wide-2 right small") #[span #[b •]#[br]Hold →] - div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw] + div(data-code="left" class="key wide-3 left rounded-left") + div(class="label") Left + div(data-code="left" class="modifier left small rounded-right") + div(class="label") #[b •]#[br]Hold + div(class="empty" style="width:15px") + div(data-code="middle" class="key wide-1 left rounded-left") + div(class="label") Mid + div(data-code="middle" class="modifier left small rounded-right") + div(class="label") #[b •]#[br]Hold + div(class="empty" style="width:15px") + div(data-code="right" class="modifier right small rounded-left") + div(class="label") #[b •]#[br]Hold + div(data-code="right" class="key wide-3 right rounded-right") + div(class="label") Right diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css index 52a4afaf..61d56ada 100644 --- a/web/share/css/keypad.css +++ b/web/share/css/keypad.css @@ -33,6 +33,8 @@ div.keypad div.keypad-block:not(:first-child) { } div.keypad div.keypad-row { + display: flex; + flex-wrap: wrap; white-space: nowrap; height: 40px; margin-bottom: 5px; @@ -41,12 +43,18 @@ div.keypad div.keypad-row:last-child { margin-bottom: 0; } +div.keypad div.keypad-row div.spacer { + margin: 2px; + flex-grow: 1; +} +div.keypad div.keypad-row div.spacer-fixed { + margin: 3px; +} + div.keypad div.key, div.keypad div.modifier, -div.keypad div.empty-key { +div.keypad div.empty { box-sizing: border-box; - display: inline-block; - margin-right: 5px; padding: 0; width: 40px; } @@ -68,6 +76,15 @@ div.keypad div.modifier:hover { color: var(--cs-key-hovered-fg); background-color: var(--cs-key-hovered-bg); } +div.keypad div.rounded-left { + border-radius: 6px 0px 0px 6px !important; +} +div.keypad div.rounded-right { + border-radius: 0px 6px 6px 0px !important; +} +div.keypad div.rounded-none { + border-radius: 0px !important; +} div.keypad div.pressed { box-shadow: none; color: var(--cs-key-pressed-fg) !important; @@ -79,29 +96,24 @@ div.keypad div.holded { background-color: var(--cs-key-holded-bg) !important; } div.keypad div.key:last-child, -div.keypad div.empty-key:last-child, +div.keypad div.empty:last-child, div.keypad div.modifier:last-child { margin-right: 0; } -div.keypad div.margin-0 { - margin-right: 0px; -} div.keypad div.wide-0 { - width: 26px; + width: 28px; } div.keypad div.wide-1 { width: 61px; } div.keypad div.wide-2 { - width: 64px; -} -div.keypad div.wide-3 { width: 77px; } -div.keypad div.wide-4 { +div.keypad div.wide-3 { width: 102px; } -div.keypad div.wide-5 { +div.keypad div.wide-4 { + flex-grow: 1; width: 288px; } div.keypad div.left {