ChK/appRobotDriver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design E-Stop

Browse Source
This commit is contained in:
chk
2026-06-12 23:16:52 +02:00
parent bfb84fab50
commit 6de258bc01
6 changed files with 100 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/app.js
View File

@@ -56,10 +56,20 @@ document.addEventListener('DOMContentLoaded', function() {
const sendersUl = document.getElementById('senderList');
sendersUl.innerHTML = '';
data.senders.forEach(sender => {
const li = document.createElement('li');
const li = document.createElement('li');
const state = sender.state || 'disconnected';
const label = sender.url ? `${sender.name} (${sender.url}): ${state}` : `${sender.name}: ${state}`;
li.textContent = label;
if (sender.isGCodeReceiver === false) {
// Shelly / EmergencyStop: nur Name + Zustand, keine URL
li.textContent = `${sender.name}: ${state}`;
li.classList.add('shelly');
} else {
// Telnet / FluidNC: URL anzeigen wenn vorhanden
li.textContent = sender.url
? `${sender.name} (${sender.url}): ${state}`
: `${sender.name}: ${state}`;
}
li.classList.add(state.toLowerCase());
sendersUl.appendChild(li);
});
@@ -186,25 +196,33 @@ document.addEventListener('DOMContentLoaded', function() {
const stops = document.querySelectorAll('#estopGrad stop');
const textPath = document.querySelector('#emergency-stop textPath');
const textEl = document.querySelector('#emergency-stop text');
const btnInner = document.querySelector('#emergency-stop circle:last-of-type');
const btnOuter = document.querySelector('#emergency-stop circle:first-of-type');
const label = document.getElementById('armed-status');
if (armed) {
// Rot: Roboter bestromt → Klick = Emergency Stop
// ── E-STOP: Gelber Ring + roter Pilz — laut, hervorspringend ────────────
if (btnOuter) { btnOuter.setAttribute('fill', '#FFD700'); btnOuter.setAttribute('stroke', '#C8960A'); }
if (btnInner) { btnInner.setAttribute('r', '21'); btnInner.setAttribute('stroke', '#660000'); }
if (stops[0]) stops[0].setAttribute('stop-color', '#ff5555');
if (stops[1]) stops[1].setAttribute('stop-color', '#cc0000');
if (stops[2]) stops[2].setAttribute('stop-color', '#880000');
if (btnInner) btnInner.setAttribute('stroke', '#660000');
if (textEl) textEl.setAttribute('fill', '#1a1000');
if (textPath) textPath.textContent = 'EMERGENCY STOP';
if (label) { label.textContent = '● Bestromt'; label.className = 'estop-armed-label armed'; }
if (label) { label.textContent = '● Bestromt'; label.className = 'estop-armed-label armed'; }
} else {
// Grün: Strom AUS → Klick = Strom einschalten
if (stops[0]) stops[0].setAttribute('stop-color', '#88ff99');
if (stops[1]) stops[1].setAttribute('stop-color', '#00aa44');
if (stops[2]) stops[2].setAttribute('stop-color', '#005522');
if (btnInner) btnInner.setAttribute('stroke', '#003311');
// ── POWER ON: Dunkler Navy-Ring + blauer Knopf — ruhig, klar ────────────
// Kein gelber Ring → kein E-Stop-Charakter.
// Kompakter Knopf (r 19 statt 21) → wirkt wie klassischer Power-Switch.
if (btnOuter) { btnOuter.setAttribute('fill', '#1a3050'); btnOuter.setAttribute('stroke', '#0d1e33'); }
if (btnInner) { btnInner.setAttribute('r', '19'); btnInner.setAttribute('stroke', '#091929'); }
if (stops[0]) stops[0].setAttribute('stop-color', '#5c9fcf');
if (stops[1]) stops[1].setAttribute('stop-color', '#255f96');
if (stops[2]) stops[2].setAttribute('stop-color', '#0c3660');
if (textEl) textEl.setAttribute('fill', '#9dc8e8');
if (textPath) textPath.textContent = 'START ROBOT';
if (label) { label.textContent = '○ Kein Strom'; label.className = 'estop-armed-label disarmed'; }
if (label) { label.textContent = '○ Kein Strom'; label.className = 'estop-armed-label disarmed'; }
}
}

54
public/style.css
View File

@@ -127,6 +127,40 @@ h1 {
content: "🟡";
}
/* Shelly / EmergencyStop: CSS-Kreis statt Emoji (volle Farbkontrolle) */
.section#senders li.shelly::before {
content: "";
display: block;
position: absolute;
left: 1px;
top: 50%;
transform: translateY(-50%);
width: 11px;
height: 11px;
border-radius: 50%;
/* Default: hellblau — Strom vorhanden, Shelly bereit */
background: #89bcde;
box-shadow: 0 0 0 1px rgba(0, 30, 60, 0.4);
}
/* Gestoppt: weiß — Strom wurde abgeschaltet */
.section#senders li.shelly.stopped::before {
background: #dce9f5;
box-shadow: 0 0 0 1px rgba(100, 160, 210, 0.5);
}
/* Fehler: gedämpftes Rot */
.section#senders li.shelly.error::before {
background: #9a3a3a;
box-shadow: 0 0 0 1px rgba(60, 0, 0, 0.5);
}
/* Getrennt / unbekannt: Grau */
.section#senders li.shelly.disconnected::before {
background: #4a5a6a;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.state-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
@@ -302,8 +336,8 @@ h1 {
color: var(--muted);
}
.estop-armed-label.armed { color: #e74c3c; }
.estop-armed-label.disarmed { color: #2ecc71; }
.estop-armed-label.armed { color: #e74c3c; } /* Rot: Gefahr, bewusst laut */
.estop-armed-label.disarmed { color: #89bcde; } /* Hellblau: ruhig, stromlos */
.btn {
display: inline-block;
@@ -323,23 +357,23 @@ h1 {
cursor: not-allowed;
}
/* Alarm-Unlock: Bernstein / Orange — Recovery-Aktion */
/* Alarm-Unlock: ruhiges Blau — passend zum Stromloszustand */
.btn-unlock {
background: #c87800;
color: #fff;
background: #2a6496;
color: #e8f2fa;
}
.btn-unlock:hover:not(:disabled) {
background: #a56200;
background: #1e4d73;
}
/* Status-Zeile unterhalb des Buttons */
/* Status-Zeile unterhalb der Buttons — immer weiß/hell, keine Signalfarben */
.estop-status {
font-size: 13px;
min-height: 18px;
color: var(--text);
opacity: 0.7;
opacity: 0.65;
}
.estop-status.ok { color: #2ecc71; opacity: 1; }
.estop-status.err { color: #e74c3c; opacity: 1; }
.estop-status.ok { color: var(--text); opacity: 0.9; }
.estop-status.err { color: var(--text); opacity: 0.9; }