339 lines
12 KiB
Markdown
339 lines
12 KiB
Markdown
# KX-Bridge Theme – Element-ID-Checkliste
|
||
|
||
Alle IDs, die `default/app.js` erwartet oder nutzt. Beim Umbau eines Themes (`new1`, …) müssen diese **IDs beibehalten** werden, sonst brechen Features still (null-Check) oder mit Fehler (ohne null-Check).
|
||
|
||
**Legende**
|
||
|
||
| Symbol | Bedeutung |
|
||
|--------|-----------|
|
||
| **Pflicht** | Fehlt → Laufzeitfehler oder zentraler Ablauf bricht |
|
||
| **Empfohlen** | Fehlt → Feature funktioniert nicht (meist mit `if(el)` abgesichert) |
|
||
| **Optional** | Nur i18n, Dekoration oder rein HTML-seitig |
|
||
|
||
**Quelle:** automatisch aus `default/app.js` extrahiert + Abgleich mit `default/index.html`
|
||
|
||
---
|
||
|
||
## Navigation & Panels
|
||
|
||
| ID | Pflicht | Verwendung in app.js |
|
||
|----|---------|----------------------|
|
||
| `panel-dashboard` | **Pflicht** | `showPanel('dashboard')` |
|
||
| `panel-printers` | **Pflicht** | `showPanel('printers')` |
|
||
| `panel-store` | **Pflicht** | `showPanel('store')` |
|
||
| `panel-console` | **Pflicht** | `showPanel('console')` |
|
||
| `nb-dashboard` | Empfohlen | Sidebar active + i18n `.nav-text` |
|
||
| `nb-printers` | Empfohlen | Sidebar active + i18n |
|
||
| `nb-store` | Empfohlen | Sidebar active + i18n |
|
||
| `nb-console` | Empfohlen | Sidebar active + i18n + `#log-badge` |
|
||
| `bnb-dashboard` | Empfohlen | Bottom-Nav active + i18n |
|
||
| `bnb-printers` | Empfohlen | Bottom-Nav |
|
||
| `bnb-store` | Empfohlen | Bottom-Nav |
|
||
| `bnb-console` | Empfohlen | Bottom-Nav + `#log-badge-bot` |
|
||
| `log-badge` | Empfohlen | Fehler-Badge Sidebar-Konsole |
|
||
| `log-badge-bot` | Empfohlen | Fehler-Badge Bottom-Nav |
|
||
|
||
**CSS-Klassen:** `.panel`, `.nav-btn`, `.bnav-btn`, `.nav-text` (in Sidebar-Buttons)
|
||
|
||
---
|
||
|
||
## Header & Banner
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `lang-btn` | **Pflicht** | Sprachumschalter (ohne null-Check) |
|
||
| `conn-btn` | **Pflicht** | Verbinden/Trennen, `updateConnBtn()` |
|
||
| `settings-btn` | Optional | Nur HTML – `openSettings()` per onclick |
|
||
| `printer-dropdown-wrap` | Empfohlen | Multi-Drucker UI |
|
||
| `printer-dropdown-btn` | Optional | Nur HTML-onclick |
|
||
| `printer-dropdown-menu` | Empfohlen | Dropdown-Inhalt |
|
||
| `h-pname` | Empfohlen | Druckername (Multi-Modus) |
|
||
| `h-pname-single` | Empfohlen | Druckername (Einzel-Modus) |
|
||
| `h-version` | Empfohlen | Bridge-Version aus `/api/state` |
|
||
| `h-badge` | Empfohlen | Status-Badge CSS-Klasse |
|
||
| `h-state` | Empfohlen | Status-Text |
|
||
| `conn-error-banner` | Empfohlen | MQTT-Verbindungsfehler |
|
||
| `file-ready-banner` | Empfohlen | Slicer-Upload bereit |
|
||
| `file-ready-name` | Empfohlen | Dateiname im Banner |
|
||
| `file-ready-btn` | Empfohlen | Druck starten |
|
||
| `file-slots-btn` | Empfohlen | Slots wählen |
|
||
| `file-cancel-btn` | Empfohlen | Banner abbrechen |
|
||
|
||
---
|
||
|
||
## Dashboard – Kamera
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `d-light-toggle` | **Pflicht** | Licht sync in `applyState()` (`.checked`) |
|
||
| `cam-toggle-btn` | Empfohlen | Start/Stop-Label |
|
||
| `cam-img` | Empfohlen | MJPEG-Stream |
|
||
| `cam-placeholder` | Empfohlen | Platzhalter sichtbar/unsichtbar |
|
||
| `cam-placeholder-txt` | Empfohlen | i18n Platzhaltertext |
|
||
| `cam-spinner` | Empfohlen | Lade-Animation |
|
||
| `cam-overlay` | Empfohlen | Dateiname über Video |
|
||
| `cam-fname` | Empfohlen | Dateiname in Overlay |
|
||
| `cam-wrap` | Optional | Nur HTML/CSS |
|
||
|
||
---
|
||
|
||
## Dashboard – Fortschritt & Druck
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `d-pct` | Empfohlen | Prozent-Anzeige |
|
||
| `d-pbar` | Empfohlen | Fortschrittsbalken |
|
||
| `d-layers` | Empfohlen | Layer X / Y |
|
||
| `d-elapsed` | Empfohlen | Verstrichene Zeit |
|
||
| `d-remain` | Empfohlen | Restzeit |
|
||
| `d-slicer-row` | Empfohlen | Slicer-Schätzung ein/aus |
|
||
| `d-slicer-time` | Empfohlen | Slicer-Zeitwert |
|
||
| `d-fname` | Empfohlen | Aktueller Dateiname |
|
||
| `d-thumbnail` | Empfohlen | GCode-Vorschaubild |
|
||
| `d-btn-pause` | Empfohlen | i18n + onclick |
|
||
| `d-btn-resume` | Empfohlen | i18n + onclick |
|
||
| `d-btn-cancel` | Empfohlen | i18n + onclick |
|
||
| `d-ctrl-btns` | Optional | Nur Layout |
|
||
| `p-fname` | Optional | Legacy/Print-Panel (falls vorhanden) |
|
||
| `d-card-progress` | Optional | i18n Kartentitel |
|
||
| `d-lbl-elapsed` | Optional | i18n |
|
||
| `d-lbl-remain` | Optional | i18n |
|
||
| `d-lbl-layers` | Optional | i18n |
|
||
| `d-slicer-label` | Optional | i18n |
|
||
|
||
---
|
||
|
||
## Dashboard – Temperaturen
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `d-nt` | Empfohlen | Ist-Temperatur Düse |
|
||
| `d-nt-t` | Empfohlen | Soll-Temperatur Düse |
|
||
| `d-bt` | Empfohlen | Ist-Temperatur Bett |
|
||
| `d-bt-t` | Empfohlen | Soll-Temperatur Bett |
|
||
| `d-ntbar` | Empfohlen | Fortschrittsbalken Düse |
|
||
| `d-btbar` | Empfohlen | Fortschrittsbalken Bett |
|
||
| `p-nozzle-inp` | Empfohlen | Eingabe Ziel Düse (`setNozzle`) |
|
||
| `p-bed-inp` | Empfohlen | Eingabe Ziel Bett (`setBed`) |
|
||
| `d-chart` | Empfohlen | Canvas Temperatur-Verlauf |
|
||
| `d-chart-label` | Optional | i18n |
|
||
| `d-card-temps` | Optional | i18n |
|
||
| `d-lbl-bed` | Optional | i18n |
|
||
|
||
**CSS-Klassen:** `.lbl-set`, `.lbl-off`, `.temp-input`
|
||
|
||
---
|
||
|
||
## Dashboard – Achsen & Schrittweite
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `step-display` | Empfohlen | Anzeige aktuelle Schrittweite |
|
||
| `ptitle-motion-xy` | Optional | i18n |
|
||
| `ptitle-motion-z` | Optional | i18n |
|
||
|
||
**CSS-Klassen:** `.step-btn`, `.joy`, `.lbl-home-z`, `.lbl-home-xy`, `.lbl-home-all`, `.lbl-disable-motors`, `.lbl-step`
|
||
|
||
---
|
||
|
||
## Dashboard – Geschwindigkeit & Lüfter
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `d-spd-1` | Empfohlen | Speed-Modus Leise |
|
||
| `d-spd-2` | Empfohlen | Speed-Modus Normal |
|
||
| `d-spd-3` | Empfohlen | Speed-Modus Sport |
|
||
| `d-spd-bar` | Empfohlen | Speed-Balken |
|
||
| `d-fan` | Empfohlen | Lüfter-Slider |
|
||
| `d-fan-val` | Empfohlen | Lüfter-Prozent-Anzeige |
|
||
| `d-card-speed` | Optional | i18n |
|
||
| `d-card-lightfan` | Optional | i18n |
|
||
| `d-spd-lbl-1` | Optional | i18n |
|
||
| `d-spd-lbl-2` | Optional | i18n |
|
||
| `d-spd-lbl-3` | Optional | i18n |
|
||
| `d-lbl-light` | Optional | i18n |
|
||
|
||
**CSS-Klassen:** `.lbl-feed`, `.lbl-unload` (AMS-Bereich)
|
||
|
||
---
|
||
|
||
## Dashboard – AMS
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `ams-slots` | **Pflicht** | Container für dynamische Slot-Kacheln |
|
||
| `ams-slot-sel` | Empfohlen | Slot-Auswahl für Feed/Unload |
|
||
| `ams-slot-label` | Optional | Nur HTML-oninput Label |
|
||
| `ams-no-data` | Optional | Platzhalter (wird durch JS ersetzt) |
|
||
| `btn-unload` | Optional | Nur HTML |
|
||
| `d-card-ams` | Optional | i18n |
|
||
| `d-card-cam` | Optional | i18n |
|
||
|
||
---
|
||
|
||
## Einstellungen (`#settings-modal`)
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `settings-modal` | **Pflicht** | Modal open/close (`.classList`) |
|
||
| `s-printer-name` | Empfohlen | Config-Feld |
|
||
| `s-printer-ip` | **Pflicht** | Config + IP-Hinweis-Listener |
|
||
| `s-mqtt-port` | Empfohlen | Config |
|
||
| `s-username` | Empfohlen | Config |
|
||
| `s-password` | Empfohlen | Config |
|
||
| `s-device-id` | Empfohlen | Config |
|
||
| `s-mode-id` | Empfohlen | Config |
|
||
| `s-default-slot` | Empfohlen | AMS-Standard-Slot |
|
||
| `s-auto-leveling` | Empfohlen | Checkbox Auto-Leveling |
|
||
| `poll-1` | Empfohlen | Poll 1 s |
|
||
| `poll-2` | Empfohlen | Poll 2 s |
|
||
| `poll-5` | Empfohlen | Poll 5 s |
|
||
| `s-version-label` | Empfohlen | Versionsanzeige |
|
||
| `update-status` | Empfohlen | Update-Status-Text |
|
||
| `btn-update-apply` | Empfohlen | Update installieren |
|
||
| `update-changelog` | Empfohlen | Changelog-Anzeige |
|
||
| `btn-save-settings` | Empfohlen | Speichern |
|
||
| `btn-update-check` | Optional | Nur HTML-onclick |
|
||
| `lbl-ip-hint` | Empfohlen | IP-Format-Warnung |
|
||
| `modal-title-settings` | Optional | i18n |
|
||
| `modal-sec-connection` | Optional | i18n |
|
||
| `modal-sec-print` | Optional | i18n |
|
||
| `modal-sec-poll` | Optional | i18n |
|
||
| `modal-sec-version` | Optional | i18n |
|
||
| `lbl-printer-name` … `lbl-mode-id` | Optional | i18n Labels |
|
||
| `lbl-default-slot` | Optional | i18n |
|
||
| `lbl-auto-leveling` | Optional | i18n |
|
||
| `opt-slot-auto` | Optional | i18n |
|
||
| `opt-slot-0` … `opt-slot-3` | Optional | Nur HTML |
|
||
| `lbl-update-check` | Optional | i18n |
|
||
| `lbl-update-apply` | Optional | i18n |
|
||
|
||
**CSS-Klasse:** `.poll-btn`
|
||
|
||
---
|
||
|
||
## AMS-Slot-Dialog (`#slot-edit-modal`)
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `slot-edit-modal` | **Pflicht** | Modal open/close |
|
||
| `slot-edit-title` | Empfohlen | Dialogtitel |
|
||
| `slot-edit-color` | Empfohlen | Farbwähler |
|
||
| `slot-edit-preview` | Empfohlen | Farbvorschau |
|
||
| `slot-edit-mat` | Empfohlen | Material-Text |
|
||
| `slot-mat-btns` | Empfohlen | Preset-Buttons (dynamisch) |
|
||
| `btn-slot-edit-save` | Empfohlen | Speichern |
|
||
| `lbl-slot-color` | Optional | i18n |
|
||
| `lbl-slot-material` | Optional | i18n |
|
||
|
||
**CSS-Klasse:** `.mat-preset-btn` (dynamisch)
|
||
|
||
---
|
||
|
||
## Filament-Druck-Dialog (`#filament-dialog`)
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `filament-dialog` | **Pflicht** | Modal open/close |
|
||
| `fd-title` | Empfohlen | Dateiname im Titel |
|
||
| `fd-slots` | Empfohlen | Kanal→Slot-Zuordnung (dynamisch) |
|
||
|
||
---
|
||
|
||
## Drucker hinzufügen (`#add-printer-dialog`)
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `add-printer-dialog` | **Pflicht** | Modal open/close |
|
||
| `apd-ip` | Empfohlen | IP-Eingabe |
|
||
| `apd-name` | Empfohlen | Name optional |
|
||
| `apd-status` | Empfohlen | Status/Fehlermeldung |
|
||
| `apd-confirm` | Empfohlen | Bestätigen |
|
||
| `apd-title` | Optional | i18n |
|
||
| `apd-lbl-ip` | Optional | i18n |
|
||
| `apd-lbl-name` | Optional | i18n |
|
||
| `add-printer-btn-label` | Optional | i18n |
|
||
|
||
---
|
||
|
||
## Drucker-Tab
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `printers-grid` | Empfohlen | Container Drucker-Karten |
|
||
| `printers-panel-title` | Optional | i18n |
|
||
|
||
---
|
||
|
||
## Datei-Browser
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `store-grid` | Empfohlen | Datei-Karten (dynamisch) |
|
||
| `store-empty` | Empfohlen | Leer-/Kein-Treffer-Hinweis |
|
||
| `store-search` | Empfohlen | Suche |
|
||
| `store-filter` | Empfohlen | Filter Select |
|
||
| `store-sort` | Empfohlen | Sortierung Select |
|
||
| `store-refresh-btn` | Optional | i18n Button-Text |
|
||
| `store-panel-title` | Optional | i18n |
|
||
| `sf-all`, `sf-ok`, `sf-err`, `sf-new` | Optional | i18n Optionen |
|
||
| `ss-date`, `ss-name`, `ss-dur` | Optional | i18n Optionen |
|
||
|
||
---
|
||
|
||
## Konsole
|
||
|
||
| ID | Pflicht | Verwendung |
|
||
|----|---------|------------|
|
||
| `console-log` | Empfohlen | Log-Ausgabe |
|
||
| `log-filter` | Empfohlen | Textfilter |
|
||
| `btn-autoscroll` | Empfohlen | Auto-Scroll Toggle |
|
||
| `logdir-all` | Empfohlen | Filter Alle |
|
||
| `logdir-rx` | Empfohlen | Filter RX |
|
||
| `logdir-tx` | Empfohlen | Filter TX |
|
||
| `ptitle-console` | Optional | i18n |
|
||
| `btn-log-dl` | Optional | Nur HTML – Download-Link `/api/log/download` |
|
||
|
||
**CSS-Klassen:** `.log-dir-btn`, `.log-topic-btn` (Topic-Buttons nutzen `data-topic`, keine festen IDs)
|
||
|
||
---
|
||
|
||
## IDs nur in HTML (nicht in app.js)
|
||
|
||
Diese IDs sind im Default-Theme vorhanden, werden von `app.js` aber nicht per `getElementById` angesprochen:
|
||
|
||
| ID | Anmerkung |
|
||
|----|-----------|
|
||
| `settings-btn` | Nur `onclick="openSettings()"` |
|
||
| `printer-dropdown-btn` | Nur onclick |
|
||
| `btn-update-check` | Nur onclick |
|
||
| `opt-slot-0` … `opt-slot-3` | Option-Labels statisch |
|
||
| `cam-wrap` | Layout |
|
||
| `d-ctrl-btns` | Layout |
|
||
| `ams-no-data` | Initial-Platzhalter, wird von JS überschrieben |
|
||
| `ams-slot-label` | Nur inline oninput |
|
||
| `btn-unload` | Nur HTML |
|
||
| `btn-log-dl` | Statischer Download-Link |
|
||
|
||
---
|
||
|
||
## Schnell-Check vor Theme-Release
|
||
|
||
- [ ] Alle vier `panel-*` vorhanden und in `.panel` gewrappt
|
||
- [ ] `lang-btn`, `conn-btn`, `d-light-toggle`, `settings-modal`, `ams-slots` vorhanden
|
||
- [ ] Alle Modals: `settings-modal`, `slot-edit-modal`, `filament-dialog`, `add-printer-dialog`
|
||
- [ ] Navigation: `nb-*` / `bnb-*` für `dashboard`, `printers`, `store`, `console`
|
||
- [ ] Dashboard-Kern: Temps, Progress, Fan, Speed, AMS-Container
|
||
- [ ] Store: `store-grid`, `store-search`, `store-filter`, `store-sort`
|
||
- [ ] Konsole: `console-log`, `log-filter`
|
||
- [ ] `index.html` bindet `/kx/ui/style.css` und `/kx/ui/app.js` ein
|
||
- [ ] Alle `onclick`-Handler aus [THEME-JS-HOOKS.md](./THEME-JS-HOOKS.md) gesetzt oder ersetzt
|
||
|
||
---
|
||
|
||
## Siehe auch
|
||
|
||
- [THEME-JS-HOOKS.md](./THEME-JS-HOOKS.md) – alle JS-Funktionsaufrufe mit Kontext
|
||
- Theme-Ordner: `web/themes/<name>/` mit `index.html`, `style.css`, `app.js`
|
||
- Aktivierung: `--ui-theme <name>` oder `KX_UI_THEME=<name>`
|