128 lines
4.6 KiB
Markdown
128 lines
4.6 KiB
Markdown
# appRobotFileservice — Web-UI (Datei-Browser)
|
|
|
|
> Stand: 2026-06-15
|
|
> Beschreibt den implementierten Ist-Zustand der Browser-Oberfläche auf Port 2100.
|
|
|
|
---
|
|
|
|
## Implementierter Funktionsumfang
|
|
|
|
**Dateien:** `public/index.html`, `public/index.css`
|
|
|
|
### Programm-Liste (linke Spalte)
|
|
|
|
| Feature | Status | Endpunkt |
|
|
|---|---|---|
|
|
| Programme auflisten | ✅ | `GET /api/programs?dir=` |
|
|
| Unterordner auflisten | ✅ | `GET /api/folders?dir=` |
|
|
| Breadcrumb-Navigation | ✅ | — |
|
|
| In Unterordner navigieren (Klick) | ✅ | — |
|
|
| Programm laden (Einzelklick) | ✅ | `PUT /api/active` |
|
|
| Neue Datei anlegen (📄+) | ✅ | `POST /api/programs` |
|
|
| Neuen Ordner anlegen (📁+) | ✅ | `POST /api/folders` |
|
|
| Auswahl löschen (🗑) — Datei oder Ordner | ✅ | `DELETE /api/programs/:id` / `DELETE /api/folders/:name` |
|
|
| Ordner-Löschen rekursiv | ✅ | `DELETE /api/folders/:name?dir=` |
|
|
| Auto-Refresh (5 s Polling) | ✅ | — |
|
|
|
|
### Aktives Programm (rechte Spalte)
|
|
|
|
| Feature | Status | Endpunkt |
|
|
|---|---|---|
|
|
| Aktives Programm anzeigen (Zeilenliste in Grad) | ✅ | `GET /api/active` |
|
|
| Cursor in Tabelle hervorheben + auto-scrollen | ✅ | — |
|
|
| Stepping: First / Prev / Next / Last | ✅ | `POST /api/active/first|prev|next|last` |
|
|
| Programm leeren (FClear) | ✅ | `POST /api/active/clear` |
|
|
| Download `.gcode` | ✅ | `GET /api/programs/:id/download` |
|
|
| Zeilen löschen (🗑 pro Zeile, pending-State) | ✅ | `DELETE /api/active/lines/:index` |
|
|
| Abbrechen / Speichern Edit-Bar | ✅ | — |
|
|
|
|
### Navigieren / Senden Toggle (rechts in Controls-Zeile)
|
|
|
|
| Feature | Status | Details |
|
|
|---|---|---|
|
|
| Modus-Schalter `↕ Navigieren` / `▶ Senden` | ✅ | Drei-Gruppen-Layout |
|
|
| Navigieren-Modus: nur Cursor bewegen | ✅ | `POST /api/active/next` |
|
|
| Senden-Modus: G-Code-Zeile an Driver senden | ✅ | `POST /api/active/next?execute=true` |
|
|
| Pfeil-Buttons während Fahrt gesperrt | ✅ | Bis HTTP-Antwort kommt |
|
|
| Driver-Fehlermeldung im UI anzeigen | ✅ | HTTP 502 → Statuszeile |
|
|
| Senden-Button deaktiviert wenn kein Driver | ✅ | `GET /api/config` beim Start |
|
|
|
|
---
|
|
|
|
## Architektur
|
|
|
|
```
|
|
Browser (index.html)
|
|
│
|
|
├──[Navigieren]─► POST /api/active/next (Fileservice)
|
|
│ Cursor +1, ;! in .gcode gespeichert
|
|
│
|
|
└──[Senden]──────► POST /api/active/next?execute=true (Fileservice)
|
|
Fileservice: Cursor +1, sendet G-Code-Zeile
|
|
│ server-seitig (lokales Netz)
|
|
└──► appRobotDriver WS
|
|
Inverse Kinematik → GRBL → Roboter
|
|
M114-Broadcast / Fehler zurück an Fileservice
|
|
Fileservice → HTTP 200 (OK) oder 502 (Driver-Fehler)
|
|
```
|
|
|
|
Der Browser verbindet sich **niemals direkt** mit dem Driver — der Fileservice
|
|
ist die einzige Aussenschnittstelle.
|
|
|
|
---
|
|
|
|
## Cursor-Persistenz
|
|
|
|
Der Cursor wird als `;!`-Marker direkt **in der `.gcode`-Datei** gespeichert
|
|
(primäre Quelle, sichtbar in jedem Texteditor). Das `.json`-Sidecar enthält `cursor`
|
|
nur noch als Fallback für Altdateien ohne Marker.
|
|
|
|
```
|
|
G90 G1 x0 y300 z0 a90.00 b-90.00 c0.00 e0.00 f1000 ;1
|
|
G90 G1 x10 y300 z0 a0.00 b-90.00 c0.00 e0.00 f1000 ;2! ← Cursor-Zeile
|
|
```
|
|
|
|
`store.read()` liefert immer saubere Zeilen (kein `!`) und `cursor` als Index.
|
|
|
|
---
|
|
|
|
## Verzeichnis-Navigation
|
|
|
|
- Echte Unterverzeichnisse in `GCodeFiles/` (max. 5 Ebenen tief)
|
|
- Segmente validiert mit `/^[a-z0-9_-]+$/`
|
|
- `dir`-Parameter in allen relevanten Endpoints (`?dir=training/run1`)
|
|
- Breadcrumb: klickbare Segmente, Root = `GCodeFiles`
|
|
|
|
---
|
|
|
|
## Noch nicht implementiert / offene Punkte
|
|
|
|
| Feature | Priorität | Hinweis |
|
|
|---|---|---|
|
|
| Upload `.gcode` vom Desktop | P2 | `POST /api/programs/upload` (multipart) |
|
|
| Programm umbenennen | P2 | `PUT /api/programs/:id` (Backend vorhanden, UI fehlt) |
|
|
| Zeile inline bearbeiten | P3 | `PUT /api/active/lines/:index` (Backend vorhanden) |
|
|
| Zeile einfügen | P3 | `POST /api/active/lines { atIndex }` (Backend vorhanden) |
|
|
| Live-Updates via SSE | P4 | statt 5s-Polling; `GET /api/events` |
|
|
| `FPlay` / `FStop` im Browser | P4 | Playback-Modus |
|
|
|
|
---
|
|
|
|
## Datei-Übersicht
|
|
|
|
```
|
|
public/
|
|
index.html HTML + JavaScript (inline)
|
|
index.css Design-System (dark, CSS-Variablen)
|
|
src/
|
|
server.js GET /api/config → driverConfigured
|
|
driverClient.js WS-Client zum Driver (für Senden-Modus)
|
|
routes/
|
|
programs.js /api/programs* inkl. /download
|
|
active.js /api/active* mit ?execute=true für Step-Routes
|
|
folders.js /api/folders*
|
|
doc/
|
|
fileBrowser.md diese Datei (Ist-Zustand)
|
|
commandsFromGCodeFile.md Senden-Modus Konzept + Implementierungsplan
|
|
```
|