Eskimue/ExoMy_Cuno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GUI angepasst

Browse Source
This commit is contained in:
Eskimue
2026-05-21 19:40:22 +02:00
parent 33b71416ff
commit 1c139887fd
1 changed files with 232 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ExoMy_Software-master/gui/index.html
+232 -137
View File
@@ -7,15 +7,15 @@
<script type="text/javascript" src="./vendor/roslib.min.js"></script>
<style>
:root {
--bg: #DCE3EC;
--bg: #05080F;
--pri: #0088FF;
--sec: #FF6B00;
--ok: #00C853;
--sec: #FF8C00;
--ok: #00ff91;
--warn: #FFB300;
--txt: #0B1525;
--txt2: #506070;
--panel: rgba(255,255,255,0.93);
--border: rgba(0,136,255,0.22);
--txt: rgba(0,255,145,.8);
--txt2: rgba(0,210,130,.38);
--panel: #070D18;
--border: rgba(0,255,145,.12);
--mono: "Consolas", "Cascadia Code", "Cascadia Mono", "Courier New", monospace;
--disp: "Consolas", "Cascadia Code", "Cascadia Mono", "Courier New", monospace;
}
@@ -27,8 +27,8 @@ body {
font-family: var(--mono);
background-color: var(--bg);
background-image:
linear-gradient(rgba(0,136,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,136,255,.06) 1px, transparent 1px);
linear-gradient(rgba(0,255,145,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,145,.04) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--txt);
display: flex;
@@ -114,17 +114,17 @@ header {
.panel {
position: relative;
background:
linear-gradient(#0088FF,#0088FF) 0 0 / 14px 2px no-repeat,
linear-gradient(#0088FF,#0088FF) 0 0 / 2px 14px no-repeat,
linear-gradient(#0088FF,#0088FF) 100% 0 / 14px 2px no-repeat,
linear-gradient(#0088FF,#0088FF) 100% 0 / 2px 14px no-repeat,
linear-gradient(#0088FF,#0088FF) 0 100% / 14px 2px no-repeat,
linear-gradient(#0088FF,#0088FF) 0 100% / 2px 14px no-repeat,
linear-gradient(#0088FF,#0088FF) 100% 100% / 14px 2px no-repeat,
linear-gradient(#0088FF,#0088FF) 100% 100% / 2px 14px no-repeat,
rgba(255,255,255,0.93);
border: 1px solid var(--border);
box-shadow: 0 1px 14px rgba(0,0,0,.06);
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0 / 14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0 / 1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0 / 14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0 / 1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100% / 14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100% / 1px 14px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100% / 14px 1px no-repeat,
linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100% / 1px 14px no-repeat,
#070D18;
border: 1px solid rgba(0,255,145,.1);
box-shadow: 0 0 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,255,145,.018);
}
.p-hdr {
@@ -132,12 +132,12 @@ header {
align-items: center;
gap: 7px;
padding: 7px 12px;
border-bottom: 1px solid rgba(0,136,255,.15);
background: linear-gradient(90deg, rgba(0,136,255,.07) 0%, transparent 100%);
border-bottom: 1px solid rgba(0,255,145,.08);
background: linear-gradient(90deg, rgba(0,255,145,.05) 0%, transparent 100%);
}
.p-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pri); flex-shrink: 0; }
.p-lbl { font-size: 8px; letter-spacing: 3px; color: var(--pri); text-transform: uppercase; font-weight: bold; }
.p-tag { margin-left: auto; font-size: 7px; color: var(--txt2); letter-spacing: 1px; }
.p-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex-shrink: 0; }
.p-lbl { font-size: 8px; letter-spacing: 3px; color: rgba(0,255,145,.7); text-transform: uppercase; font-weight: bold; }
.p-tag { margin-left: auto; font-size: 7px; color: rgba(0,255,145,.25); letter-spacing: 1px; }
.main {
flex: 1;
@@ -166,9 +166,9 @@ header {
align-items: center;
justify-content: center;
padding: 12px 6px;
border: 1px solid rgba(0,136,255,.28);
background: transparent;
color: var(--txt2);
border: 1px solid rgba(0,255,145,.18);
background: rgba(0,255,145,.03);
color: rgba(0,255,145,.35);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 2px;
@@ -177,15 +177,15 @@ header {
transition: all .18s ease;
}
.dbtn:hover {
border-color: var(--pri);
color: var(--pri);
background: rgba(0,136,255,.06);
border-color: rgba(0,255,145,.5);
color: rgba(0,255,145,.8);
background: rgba(0,255,145,.07);
}
.dbtn.active {
border-color: var(--pri);
background: var(--pri);
color: #fff;
box-shadow: 0 0 24px rgba(0,136,255,.45), inset 0 0 16px rgba(255,255,255,.1);
border-color: rgba(0,255,145,.7);
background: rgba(0,255,145,.1);
color: #00ff91;
box-shadow: 0 0 20px rgba(0,255,145,.25), inset 0 0 14px rgba(0,255,145,.06);
}
@keyframes mode-flash {
0% { box-shadow: 0 0 0px rgba(0,255,145,0), background-color: var(--pri); }
@@ -271,46 +271,136 @@ header {
.c-bl { bottom: 13px; left: 13px; }
.c-br { bottom: 13px; right: 13px; text-align: right; }
/* ── STAT PANEL ─────────────────────────────────────── */
.stat-list {
padding: 8px 12px 10px;
display: flex;
flex-direction: column;
gap: 5px;
background: #040810;
position: relative;
overflow: hidden;
}
.srow {
.stat-list::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,145,.012) 3px, rgba(0,255,145,.012) 4px);
pointer-events: none;
z-index: 0;
}
.ss-hdr {
display: flex;
align-items: center;
padding: 5px 8px;
background: rgba(0,136,255,.025);
border-left: 2px solid transparent;
gap: 7px;
padding: 5px 10px 4px;
background: rgba(0,255,145,.035);
border-top: 1px solid rgba(0,255,145,.1);
border-bottom: 1px solid rgba(0,255,145,.05);
position: relative;
z-index: 1;
}
.srow.ok { border-left-color: var(--ok); }
.srow.warn { border-left-color: var(--sec); }
.srow.info { border-left-color: var(--pri); }
.slbl {
.ss-hdr-line {
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg, rgba(0,255,145,.22) 0, rgba(0,255,145,.22) 3px, transparent 3px, transparent 6px);
}
.ss-hdr-txt {
font-size: 6px;
letter-spacing: 4px;
color: rgba(0,255,145,.45);
text-transform: uppercase;
}
.sr {
display: flex;
align-items: center;
padding: 4px 10px;
gap: 7px;
border-bottom: 1px solid rgba(0,255,145,.04);
position: relative;
z-index: 1;
transition: background .1s;
}
.sr:hover { background: rgba(0,255,145,.02); }
.sr-led {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(0,255,145,.15);
background: #0a1408;
}
.sr-led.led-ok { background: #00ff91; border-color: #00ff91; box-shadow: 0 0 5px #00ff91, 0 0 12px rgba(0,255,145,.55); }
.sr-led.led-warn { background: #FF8C00; border-color: #FF8C00; box-shadow: 0 0 5px #FF8C00, 0 0 12px rgba(255,140,0,.5); }
.sr-led.led-blue { background: #0088FF; border-color: #0088FF; box-shadow: 0 0 5px #0088FF, 0 0 12px rgba(0,136,255,.5); }
.sr-led.led-off { background: #0d1208; border-color: rgba(0,255,145,.08); box-shadow: none; }
.sr-key {
font-size: 7px;
letter-spacing: 2px;
color: var(--txt2);
color: rgba(0,210,130,.4);
text-transform: uppercase;
flex: 1;
min-width: 52px;
flex-shrink: 0;
}
.sval { font-size: 11px; font-weight: bold; letter-spacing: .5px; }
.sr-val {
font-size: 9px;
font-weight: 700;
letter-spacing: .8px;
margin-left: auto;
color: rgba(0,255,145,.85);
text-align: right;
}
.sr-val.b { color: #55CCFF; }
.sr-val.g { color: #00ff91; }
.sr-val.o { color: #FF8C00; }
.sr-val.alert { color: #FF3333; animation: uv-blink .9s step-end infinite; }
.sr-val.warntext { color: #FF8C00; }
/* legacy compat */
.sval.g { color: var(--ok); }
.sval.o { color: var(--sec); }
.sval.b { color: var(--pri); }
.sval.alert {
color: #D50000;
animation: uv-blink 0.9s step-end infinite;
.sval.alert { color: #D50000; animation: uv-blink .9s step-end infinite; }
.sval.warntext { color: var(--sec); }
.sval-conn { display: flex; align-items: center; gap: 5px; color: rgba(0,255,145,.85); font-size: 9px; }
/* Gauge rows */
.sr-gauge { padding-bottom: 6px; }
.gauge {
flex: 1;
height: 8px;
background: rgba(0,255,145,.04);
border: 1px solid rgba(0,255,145,.14);
position: relative;
overflow: hidden;
}
.sval.warntext { color: var(--sec); }
.sval-conn { display: flex; align-items: center; gap: 5px; color: var(--ok); font-size: 10px; }
.sbar-wrap { display: flex; align-items: center; gap: 8px; }
.sbar { width: 52px; height: 3px; background: rgba(0,136,255,.12); border-radius: 1px; overflow: hidden; }
.sbar-i { height: 100%; border-radius: 1px; background: var(--pri); }
.sbar-i.w { background: var(--sec); }
.gauge::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(4,8,16,.88) 8px, rgba(4,8,16,.88) 9px);
z-index: 2;
pointer-events: none;
}
.gauge-fill {
height: 100%;
width: 0%;
position: relative;
z-index: 1;
transition: width .6s cubic-bezier(.25,.46,.45,.94);
}
.gauge-cpu .gauge-fill { background: linear-gradient(90deg, rgba(0,160,90,.65), rgba(0,255,145,.9)); box-shadow: 2px 0 14px rgba(0,255,145,.45); }
.gauge-temp .gauge-fill { background: linear-gradient(90deg, rgba(180,60,0,.7), rgba(255,160,0,.9)); box-shadow: 2px 0 14px rgba(255,140,0,.45); }
.gauge-mem .gauge-fill { background: linear-gradient(90deg, rgba(0,70,180,.65), rgba(0,160,255,.9)); box-shadow: 2px 0 14px rgba(0,136,255,.45); }
.gauge-num {
font-size: 8px;
font-weight: 700;
min-width: 36px;
text-align: right;
letter-spacing: .5px;
}
.gauge-cpu .gauge-num { color: rgba(0,255,145,.7); }
.gauge-temp .gauge-num { color: rgba(255,160,0,.8); }
.gauge-mem .gauge-num { color: rgba(0,180,255,.8); }
@keyframes uv-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
50% { opacity: 0.2; }
}
#joy-panel .p-hdr { padding: 14px 12px; }
@@ -320,14 +410,14 @@ header {
font-size: 8px;
letter-spacing: 1.5px;
padding: 6px 14px;
border: 1px solid rgba(0,136,255,.3);
border: 1px solid rgba(0,255,145,.18);
background: transparent;
color: var(--txt2);
color: rgba(0,255,145,.35);
cursor: pointer;
transition: all .15s;
text-transform: uppercase;
}
.mtbtn.active { background: var(--pri); color: #fff; border-color: var(--pri); }
.mtbtn.active { background: rgba(0,255,145,.1); color: #00ff91; border-color: rgba(0,255,145,.5); box-shadow: 0 0 12px rgba(0,255,145,.2); }
#joy-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.joy-area,
@@ -345,22 +435,22 @@ header {
width: min(calc(100% - 28px), 40vh, 200px);
height: min(calc(100% - 28px), 40vh, 200px);
border-radius: 50%;
background: radial-gradient(circle, rgba(0,136,255,.08) 0%, rgba(0,136,255,.02) 60%, rgba(0,136,255,.05) 100%);
border: 1.5px solid rgba(0,136,255,.32);
box-shadow: inset 0 0 32px rgba(0,136,255,.06);
background: radial-gradient(circle, rgba(0,255,145,.06) 0%, rgba(0,255,145,.01) 60%, rgba(0,255,145,.03) 100%);
border: 1.5px solid rgba(0,255,145,.22);
box-shadow: inset 0 0 32px rgba(0,255,145,.04), 0 0 20px rgba(0,0,0,.4);
position: relative;
touch-action: none;
user-select: none;
cursor: grab;
}
.joy-base:active { cursor: grabbing; }
.jg-h, .jg-v { position: absolute; background: rgba(0,136,255,.13); }
.jg-h, .jg-v { position: absolute; background: rgba(0,255,145,.1); }
.jg-h { top: 50%; left: 11%; right: 11%; height: 1px; transform: translateY(-50%); }
.jg-v { left: 50%; top: 11%; bottom: 11%; width: 1px; transform: translateX(-50%); }
.jring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0,136,255,.11);
border: 1px solid rgba(0,255,145,.09);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -372,9 +462,9 @@ header {
width: 58px;
height: 58px;
border-radius: 50%;
background: radial-gradient(circle at 36% 32%, #55C0FF, #007EEE, #004499);
border: 2px solid rgba(255,255,255,.35);
box-shadow: 0 4px 20px rgba(0,136,255,.6), 0 0 0 4px rgba(0,136,255,.12);
background: radial-gradient(circle at 36% 32%, rgba(0,255,145,.9), rgba(0,180,100,.7), rgba(0,80,40,.8));
border: 2px solid rgba(0,255,145,.5);
box-shadow: 0 4px 20px rgba(0,255,145,.4), 0 0 0 4px rgba(0,255,145,.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -388,7 +478,7 @@ header {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,255,255,.44);
background: rgba(255,255,255,.35);
}
.dpad-wrap { display: none; flex-direction: column; }
@@ -402,9 +492,9 @@ header {
aspect-ratio: 1;
}
.dpad-btn {
background: rgba(0,136,255,.06);
border: 1px solid rgba(0,136,255,.28);
color: var(--txt2);
background: rgba(0,255,145,.03);
border: 1px solid rgba(0,255,145,.15);
color: rgba(0,255,145,.35);
font-size: 15px;
cursor: pointer;
display: flex;
@@ -415,16 +505,16 @@ header {
user-select: none;
border-radius: 2px;
}
.dpad-btn:hover { border-color: var(--pri); color: var(--pri); background: rgba(0,136,255,.1); }
.dpad-btn:hover { border-color: rgba(0,255,145,.45); color: rgba(0,255,145,.8); background: rgba(0,255,145,.07); }
.dpad-btn.pressed {
background: var(--pri);
border-color: var(--pri);
color: #fff;
box-shadow: 0 0 18px rgba(0,136,255,.5);
background: rgba(0,255,145,.12);
border-color: rgba(0,255,145,.7);
color: #00ff91;
box-shadow: 0 0 16px rgba(0,255,145,.3);
}
.dpad-mid {
background: rgba(0,136,255,.04);
border: 1px solid rgba(0,136,255,.12);
background: rgba(0,255,145,.02);
border: 1px solid rgba(0,255,145,.08);
border-radius: 2px;
}
.dpad-diag { font-size: 12px; opacity: .75; }
@@ -433,25 +523,25 @@ header {
.joy-vals { display: flex; gap: 22px; }
.joy-ax { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.joy-ax-n { font-size: 7px; letter-spacing: 2px; color: var(--pri); text-transform: uppercase; }
.joy-ax-n { font-size: 7px; letter-spacing: 2px; color: rgba(0,255,145,.35); text-transform: uppercase; }
.joy-ax-v {
font-family: var(--disp);
font-weight: 700;
font-size: 14px;
color: var(--txt);
color: rgba(0,255,145,.8);
min-width: 56px;
text-align: center;
letter-spacing: 2px;
}
.admin-link {
color: rgba(255,255,255,.75);
color: rgba(0,255,145,.35);
text-decoration: none;
font-size: 8px;
letter-spacing: 2px;
text-transform: uppercase;
}
.admin-link:hover { color: #fff; }
.admin-link:hover { color: rgba(0,255,145,.8); }
@media (max-width: 980px) {
body { overflow-y: auto; }
@@ -590,71 +680,76 @@ header {
<span class="p-tag">Web Control</span>
</div>
<div class="stat-list">
<div class="srow ok">
<span class="slbl">Verbindung</span>
<span class="sval">
<span class="sval-conn"><span class="pulse-dot"></span><span id="status">Verbinde…</span></span>
</span>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Status</span><div class="ss-hdr-line"></div></div>
<div class="sr">
<span class="sr-led led-ok"></span>
<span class="sr-key">Link</span>
<span class="sr-val sval-conn"><span class="pulse-dot"></span><span id="status">Verbinde…</span></span>
</div>
<div class="srow info">
<span class="slbl">Aktiver Modus</span>
<span class="sval b" id="stat-mode">Ackermann</span>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Modus</span>
<span class="sr-val b" id="stat-mode">Ackermann</span>
</div>
<div class="srow warn">
<span class="slbl">Motoren</span>
<span class="sval o" id="stat-motors">Unbekannt</span>
<div class="sr">
<span class="sr-led led-warn"></span>
<span class="sr-key">Motoren</span>
<span class="sr-val o" id="stat-motors">Unbekannt</span>
</div>
<div class="srow info">
<span class="slbl">Eingabe</span>
<span class="sval b" id="stat-input">Joystick</span>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Eingabe</span>
<span class="sr-val b" id="stat-input">Joystick</span>
</div>
<div class="srow info">
<span class="slbl">CPU Last</span>
<span class="sval b">
<div class="sbar-wrap">
<div class="sbar"><div class="sbar-i" id="bar-cpu" style="width:0%"></div></div>
<span id="val-cpu">--</span>
</div>
</span>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Telemetrie</span><div class="ss-hdr-line"></div></div>
<div class="sr sr-gauge gauge-cpu">
<span class="sr-key">CPU</span>
<div class="gauge"><div class="gauge-fill" id="bar-cpu" style="width:0%"></div></div>
<span class="gauge-num" id="val-cpu">--</span>
</div>
<div class="srow warn">
<span class="slbl">CPU Temp</span>
<span class="sval b">
<div class="sbar-wrap">
<div class="sbar"><div class="sbar-i w" id="bar-temp" style="width:0%"></div></div>
<span id="val-temp">--</span>
</div>
</span>
<div class="sr sr-gauge gauge-temp">
<span class="sr-key">Temp</span>
<div class="gauge"><div class="gauge-fill" id="bar-temp" style="width:0%"></div></div>
<span class="gauge-num" id="val-temp">--</span>
</div>
<div class="srow info">
<span class="slbl">RAM Last</span>
<span class="sval b">
<div class="sbar-wrap">
<div class="sbar"><div class="sbar-i" id="bar-mem" style="width:0%"></div></div>
<span id="val-mem">--</span>
</div>
</span>
<div class="sr sr-gauge gauge-mem">
<span class="sr-key">RAM</span>
<div class="gauge"><div class="gauge-fill" id="bar-mem" style="width:0%"></div></div>
<span class="gauge-num" id="val-mem">--</span>
</div>
<div class="srow info">
<span class="slbl">WLAN</span>
<span class="sval b" id="stat-wifi">--</span>
<div class="ss-hdr"><div class="ss-hdr-line"></div><span class="ss-hdr-txt">Netzwerk</span><div class="ss-hdr-line"></div></div>
<div class="sr">
<span class="sr-led led-ok"></span>
<span class="sr-key">WLAN</span>
<span class="sr-val b" id="stat-wifi">--</span>
</div>
<div class="srow info">
<span class="slbl">IP Adressen</span>
<span class="sval b" id="stat-ips">--</span>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">IP</span>
<span class="sr-val b" id="stat-ips">--</span>
</div>
<div class="srow warn">
<span class="slbl">Unterspannung</span>
<span class="sval b" id="stat-undervoltage">--</span>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Uptime</span>
<span class="sr-val b" id="stat-uptime">--</span>
</div>
<div class="srow info">
<span class="slbl">Uptime Pi</span>
<span class="sval b" id="stat-uptime">--</span>
<div class="sr">
<span class="sr-led led-blue"></span>
<span class="sr-key">Disk</span>
<span class="sr-val b" id="stat-disk">--</span>
</div>
<div class="srow info">
<span class="slbl">Speicher Frei</span>
<span class="sval b" id="stat-disk">--</span>
<div class="sr">
<span class="sr-led led-off"></span>
<span class="sr-key">Spannung</span>
<span class="sr-val b" id="stat-undervoltage">--</span>
</div>
</div>
</div>