KX-Bridge-Release/web/themes/THEME-ID-CHECKLIST.md

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 gesetzt oder ersetzt

---

Siehe auch

• 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>