1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
|
mixin navbar_led(id, icon)
img(data-dont-hide-menu id=id, class="led-gray" src=`${svg_dir}/${icon}.svg`)
mixin navbar_message(icon, short)
div(class="text")
table
tr
td #[img(class="sign" src=`${svg_dir}/${icon}.svg`)]
td
| #[b #{short}]
if block
br
sup
block
mixin navbar_health_message(icon, short, gray)
div(class="text")
table
tr
td #[img(class=`sign ${gray ? " led-gray" : ""}` src=`${svg_dir}/${icon}.svg`)]
td
| #[b #{short}] #[br] #[br]
sup
block
mixin switch(id)
div(class="switch-box")
input(checked type="checkbox" id=id class="switch-checkbox")
label(class="switch-label" for=id)
span(class="switch-inner")
span(class="switch")
ul(id="navbar")
li(class="left")
a(id="logo" href="/") ←
img(class="svg-gray" src=`${svg_dir}/logo.svg` alt="π-kvm")
div(id="hw-health-dropdown" class="hidden")
li(class="left")
a(class="menu-button" href="#")
img(data-dont-hide-menu id="hw-health-undervoltage-led" class="hidden" src=`${svg_dir}/led-undervoltage.svg`)
img(data-dont-hide-menu id="hw-health-overheating-led" class="hidden" src=`${svg_dir}/led-overheating.svg`)
| ↴
div(data-dont-hide-menu class="menu")
+navbar_health_message("warning", "Raspberry Pi's health is at risk", false)
| This is not a drill! A red icon indicates a current issue,#[br]
| a yellow one that was observed since the device booted up.
div(id="hw-health-message-undervoltage" class="hidden")
hr
+navbar_health_message("led-undervoltage", "Undervoltage detected", true)
| Make sure your power supply and cabling are providing#[br]
| enough power to the Raspberry Pi (3A minimum).
div(id="hw-health-message-overheating" class="hidden")
hr
+navbar_health_message("led-overheating", "Overheating detected", true)
| Frequency capping due to overheating.#[br]
| Improve cooling of the Raspberry Pi.
li(class="right")
a(class="menu-button" href="#")
+navbar_led("link-led", "led-link")
+navbar_led("stream-led", "led-stream")
+navbar_led("hid-keyboard-led", "led-hid-keyboard")
+navbar_led("hid-mouse-led", "led-hid-mouse")
| System ↴
div(data-dont-hide-menu class="menu")
div(class="buttons")
button(disabled data-force-hide-menu id="stream-screenshot-button") • Take a screenshot
hr
button(data-force-hide-menu id="show-stream-button") • Show stream
button(data-force-hide-menu id="show-keyboard-button") • Show keyboard
button(data-force-hide-menu id="show-about-button") • Show about
div(id="stream-resolution" class="feature-disabled")
hr
div(class="text")
| Stream resolution:
div(class="stream-param-box")
select(disabled data-dont-hide-menu id="stream-resolution-selector")
div(id="stream-quality" class="feature-disabled")
hr
div(class="text")
| Stream quality: #[span(id="stream-quality-value") 80%]
div(class="stream-param-box")
input(disabled type="range" id="stream-quality-slider" class="slider")
hr
div(class="text")
| Stream FPS: #[span(id="stream-desired-fps-value") 0]
div(class="stream-param-box")
input(disabled type="range" id="stream-desired-fps-slider" class="slider")
hr
div(class="text")
| Stream size: #[span(id="stream-size-value") 100%]
div(class="stream-param-box")
input(type="range" id="stream-size-slider" class="slider")
hr
div(class="text")
table(class="one-line-switch")
td Auto-resize stream:
td(align="right")
+switch("stream-auto-resize-checkbox")
hr
div(class="buttons")
button(disabled data-force-hide-menu id="stream-reset-button") • Reset stream
button(disabled data-force-hide-menu id="hid-reset-button") • Reset keyboard & mouse
button(disabled data-force-hide-menu id="msd-reset-button" class="feature-disabled") • Reset mass storage
hr
div(class="buttons")
button(data-force-hide-menu id="open-log-button") • Open log
div(id="wol" class="buttons feature-disabled")
hr
button(disabled id="wol-wakeup-button") • Wake on LAN server
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 ↴
div(class="menu")
div(class="buttons")
button(disabled id="atx-power-button") • Click Power #[sup #[i short]]
button(disabled id="atx-power-button-long") • Click Power #[sup #[i long]]
hr
button(disabled id="atx-reset-button") • Click Reset
li(id="msd-dropdown" class="right feature-disabled")
a(class="menu-button" href="#")
+navbar_led("msd-led", "led-msd")
| Mass Storage ↴
div(data-dont-hide-menu id="msd-menu" class="menu")
div(id="msd-message-offline" class="hidden")
+navbar_message("warning", "Mass Storage Device is offline")
hr
div(id="msd-message-image-broken" class="hidden")
+navbar_message("warning", "Current image is broken!")
| Perhaps uploading was interrupted
hr
div(id="msd-message-too-big-for-cdrom" class="hidden")
+navbar_message("warning", "Current image is too big for CD-ROM!")
| The device filesystem will be truncated to 2.2GiB
hr
div(id="msd-message-out-of-storage" class="hidden")
+navbar_message("warning", "Current image is out of storag")
| This image was connected manually using #[b kvmd-otgmsd]
hr
div(id="msd-message-another-user-uploads" class="hidden")
+navbar_message("info", "Another user uploads an image")
hr
table(class="kv")
tr
td Status:
td(id="msd-status" class="value")
hr
table(class="kv msd-single-storage feature-disabled")
tr
td Current image:
td(id="msd-image-name" class="value")
tr
td Image size:
td(id="msd-image-size" class="value")
tr
td Storage size:
td(id="msd-storage-size" class="value")
table(class="kv msd-multi-storage feature-disabled")
tr
td Image:
td(width="100%") #[select(disabled id="msd-image-selector")]
td #[button(disabled id="msd-remove-image") Remove]
table(class="kv msd-multi-storage feature-disabled")
tr(class="msd-cdrom-emulation feature-disabled")
td Emulate CD-ROM drive:
td
+switch("msd-emulate-cdrom-checkbox")
div(class="msd-multi-storage feature-disabled")
hr
div(class="text")
div(id="msd-storage-progress" class="progress")
span(id="msd-storage-progress-value" class="progress-value")
hr
input(type="file" id="msd-select-new-image-file" class="hidden")
div(class="buttons buttons-row")
button(disabled id="msd-select-new-image-button" class="row50") Upload new image
button(disabled id="msd-upload-new-image-button" class="row25") Start
button(disabled id="msd-abort-uploading-button" class="row25") Abort
hr
div(id="msd-submenu-new-image" class="hidden")
table(class="kv")
tr
td New image:
td(id="msd-new-image-name" class="value")
tr
td Upload size:
td(id="msd-new-image-size" class="value")
hr
div(class="text")
div(id="msd-uploading-progress" class="progress")
span(id="msd-uploading-progress-value" class="progress-value")
hr
div(class="buttons buttons-row")
button(disabled data-force-hide-menu id="msd-connect-button" class="row50") • Connect drive to Server
button(disabled data-force-hide-menu id="msd-disconnect-button" class="row50") • Disconnect drive
li(class="right")
a(class="menu-button" href="#")
+navbar_led("hid-recorder-led", "led-gear")
| Macro ↴
div(data-dont-hide-menu class="menu")
div(class="text")
b Record and play keyboard & mouse actions#[br]
sub For security reasons, the record will not saved on Pi-KVM
div(class="buttons buttons-row")
button(disabled data-force-hide-menu id="hid-recorder-record" class="row25") • Rec
button(disabled id="hid-recorder-stop" class="row25") Stop
button(disabled id="hid-recorder-play" class="row25") Play
button(disabled id="hid-recorder-clear" class="row25") Clear
hr
table(class="kv")
tr
td Script time:
td(colspan="2" id="hid-recorder-time" class="value") 00:00:00.0
tr
td Scripted events:
td(id="hid-recorder-events-count" class="value") 0
td #[sup #[i include delays]]
hr
input(type="file" id="hid-recorder-new-script-file")
div(class="buttons buttons-row")
button(disabled id="hid-recorder-upload" class="row50") Upload script
button(disabled id="hid-recorder-download" class="row50") Download script
li(class="right")
a(class="menu-button" href="#") Shortcuts ↴
div(data-dont-hide-menu class="menu")
div(class="buttons")
textarea(id="hid-pak-text" placeholder="Paste your text here")
hr
button(disabled data-force-hide-menu id="hid-pak-button") • ↳ Paste-as-Keys #[sup #[i ascii-only]]
hr
div(class="buttons-row")
button(data-force-hide-menu data-shortcut="CapsLock" class="row50")
| • Caps Lock
img(class="inline-lamp hid-keyboard-caps-led led-gray" src=`${svg_dir}/led-square.svg`)
button(data-force-hide-menu data-shortcut="MetaLeft" class="row50") • Left Win
hr
button(data-force-hide-menu data-shortcut="AltLeft ShiftLeft") • Alt+Shift
button(data-force-hide-menu data-shortcut="ControlLeft ShiftLeft") • Ctrl+Shift
button(data-force-hide-menu data-shortcut="ShiftLeft ShiftRight") • Shift+Shift
button(data-force-hide-menu data-shortcut="MetaLeft Space") • Win+Space
hr
button(data-force-hide-menu data-shortcut="ControlLeft KeyW") • Ctrl+W
button(data-force-hide-menu data-shortcut="AltLeft Tab") • Alt+Tab
button(data-force-hide-menu data-shortcut="AltLeft Enter") • Alt+Enter
button(data-force-hide-menu data-shortcut="AltLeft F4") • Alt+F4
hr
button(data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete") • Ctrl+Alt+Del
hr
div(class="text")
| ↓ Alt+SysRq+... <sup><i>linux magic
| #[a(target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html") help]</i></sup>
hr
div(class="buttons")
div(class="buttons-row")
each key in ["R", "E", "I", "S", "U", "B"]
button(data-shortcut=`AltLeft PrintScreen Key${key}` class="row16") #{key}
|
