# 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>`