# KX-Bridge Theme – JavaScript-Hooks

Referenz für eigenes Theme-Layout (`index.html` + gemeinsames `app.js`).

**Quelle:** `default/index.html` und `default/app.js`  
**Stand:** Theme-Struktur mit getrennten Dateien (`index.html`, `style.css`, `app.js`)

---

## Hinweise für Theme-Entwickler

- Alle `onclick`-Handler rufen **globale Funktionen** aus `app.js` auf – Namen beibehalten oder in eigenem JS neu binden.
- `app.js` wird unter `/kx/ui/app.js` geladen und ist pro Theme austauschbar; die Standard-Implementierung erwartet die Hooks unten.
- Dynamisch erzeugtes HTML (AMS-Slots, Datei-Karten, Drucker-Karten) setzt zusätzliche `onclick`-Handler – siehe Abschnitt **Dynamisch aus app.js**.

---

## Globale / Header

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `startReadyFile()` | `#file-ready-btn` | GCode vom Slicer bereit → sofort drucken |
| `startReadyFileWithSlots()` | `#file-slots-btn` | Druck mit AMS-Slot-Zuordnung |
| `cancelReadyFile()` | `#file-cancel-btn` | Upload-Banner schließen |
| `togglePrinterDropdown()` | `#printer-dropdown-btn` | Multi-Drucker-Dropdown |
| `toggleTheme()` | Theme-Button | Hell/Dunkel (`data-theme`, localStorage) |
| `toggleLang()` | `#lang-btn` | DE/EN umschalten |
| `openSettings()` | `#settings-btn` | Einstellungs-Modal |
| `toggleConnection()` | `#conn-btn` | MQTT verbinden / trennen |

---

## Einstellungs-Modal (`#settings-modal`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `closeSettings()` | Overlay (Backdrop), Schließen-Button | Modal schließen |
| `setPoll(1000)` | `#poll-1` | Status-Poll 1 s |
| `setPoll(2000)` | `#poll-2` | Status-Poll 2 s |
| `setPoll(5000)` | `#poll-5` | Status-Poll 5 s |
| `checkUpdate()` | `#btn-update-check` | Update prüfen |
| `applyUpdate()` | `#btn-update-apply` | Update installieren |
| `saveSettings()` | `#btn-save-settings` | Config speichern → Neustart |

**Ohne `onclick` in HTML:** IP-Hinweis für `#s-printer-ip` wird in `app.js` per `addEventListener('input', …)` gebunden.

---

## AMS-Slot bearbeiten (`#slot-edit-modal`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `closeSlotEdit()` | Overlay, ✕ | Dialog schließen |
| `highlightMatBtn(this.value)` | `#slot-edit-mat` `oninput` | Material-Presets hervorheben |
| `saveSlotEdit()` | `#btn-slot-edit-save` | Farbe/Material speichern |

**Inline (keine benannte Funktion):**

| Code | Element | Zweck |
|------|---------|--------|
| `document.getElementById('slot-edit-preview').style.background=this.value` | `#slot-edit-color` | Farbvorschau |

**Dynamisch aus `app.js`:**

| Aufruf | Kontext |
|--------|---------|
| `openSlotEdit(i)` | Klick auf AMS-Kachel in `#ams-slots` |
| `selectMatPreset('PLA'…)` | Material-Preset-Buttons in `#slot-mat-btns` |

---

## Navigation (Sidebar + Bottom-Nav)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `showPanel('dashboard')` | `#nb-dashboard`, `#bnb-dashboard` | Dashboard |
| `showPanel('printers'); loadPrinterTab()` | `#nb-printers`, `#bnb-printers` | Drucker-Tab |
| `showPanel('store'); loadStore()` | `#nb-store`, `#bnb-store` | Datei-Browser |
| `showPanel('console'); clearLogBadge()` | `#nb-console`, `#bnb-console` | Konsole, Badge leeren |

**Erforderliche Panel-IDs:** `panel-dashboard`, `panel-printers`, `panel-store`, `panel-console`  
**Nav-IDs:** `nb-*` und `bnb-*` mit gleichem Suffix (`dashboard`, `printers`, `store`, `console`)

---

## Dashboard – Kamera

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `setLight()` | `#d-light-toggle` `onchange` | Drucker-Licht |
| `toggleCam()` | `#cam-toggle-btn` | Stream starten/stoppen |

Intern: `toggleCam()` → `camStart()` / `camStop()` (nur in `app.js`).

---

## Dashboard – Drucksteuerung

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `printAction('pause')` | `#d-btn-pause` | Pausieren |
| `printAction('resume')` | `#d-btn-resume` | Fortsetzen |
| `confirmCancel()` | `#d-btn-cancel` | Bestätigung → `printAction('cancel')` |

---

## Dashboard – Temperaturen

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `setNozzle()` | Set-Button Nozzle | Zieltemperatur Düse (`#p-nozzle-inp`) |
| `setBed()` | Set-Button Bett | Zieltemperatur Bett (`#p-bed-inp`) |

**Inline:** Aus-Button setzt Input auf `0`, dann `setNozzle()` bzw. `setBed()`.

---

## Dashboard – Achsensteuerung

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `move(1, 1, getStep())` | Joypad ▲ | Y+ |
| `move(1, -1, getStep())` | Joypad ▼ | Y− |
| `move(0, -1, getStep())` | Joypad ◀ | X− |
| `move(0, 1, getStep())` | Joypad ▶ | X+ |
| `move(2, 1, getStep())` | Z ▲ | Z+ |
| `move(2, -1, getStep())` | Z ▼ | Z− |
| `homeAll()` | Joypad ⌂, Home-All | Referenzfahrt alle Achsen |
| `homeZ()` | Home Z | Nur Z |
| `homeXY()` | Home XY | Nur X/Y |
| `disableMotors()` | Motors Off | Motoren aus |
| `setStep(this, 0.1\|1\|5\|10)` | Schrittweiten-Buttons | Jog-Schrittweite |
| `getStep()` | in allen `move(…)` | Aktuelle Schrittweite (Hilfsfunktion) |

---

## Dashboard – Druckgeschwindigkeit

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `setSpeed(1)` | `#d-spd-1` | Leise |
| `setSpeed(2)` | `#d-spd-2` | Normal |
| `setSpeed(3)` | `#d-spd-3` | Sport |

---

## Dashboard – Lüfter

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `setFan()` | `#d-fan` `onchange` | Slider-Wert senden |
| `quickFan(0\|25\|50\|75\|100)` | Schnell-Buttons | Vordefinierte Stufen |

**Inline:** `#d-fan` `oninput` → `#d-fan-val` aktualisieren.

---

## Dashboard – AMS / Filament

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `amsFeed(1)` | Einziehen | Filament laden |
| `amsFeed(2)` | Ausziehen | Filament entladen |

**Inline:** `#ams-slot-sel` `oninput` → `#ams-slot-label` („Slot 1…4“).

---

## Drucker-Tab (`#panel-printers`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `openAddPrinterDialog()` | „+ Drucker hinzufügen“ | Dialog öffnen |
| `loadPrinterTab()` | ↻-Button | Liste neu laden |

**Dynamisch:** `removePrinter(id, name)` auf Drucker-Karten in `#printers-grid`.

---

## Datei-Browser (`#panel-store`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `loadStore()` | `#store-refresh-btn` | Dateiliste laden |
| `renderStore()` | `#store-search`, `#store-filter`, `#store-sort` | Filtern/Sortieren |

**Dynamisch:** `storePrint(fileId, filename)`, `storeDelete(fileId)` auf Karten in `#store-grid`.

---

## Konsole (`#panel-console`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `renderLog()` | `#log-filter` `oninput`, Clear-Button | Filtern / leeren |
| `toggleAutoScroll()` | `#btn-autoscroll` | Auto-Scroll |
| `setLogDir('all'\|'rx'\|'tx')` | `#logdir-all`, `#logdir-rx`, `#logdir-tx` | Richtungsfilter |
| `setLogTopic('multiColorBox'\|'print'\|'info'\|'status')` | Topic-Buttons | MQTT-Topic |
| `onLogScroll()` | `#console-log` `onscroll` | Auto-Scroll bei manuellem Scroll deaktivieren |

**Inline Clear:** `consoleLogs=[]; renderLog()` (keine eigene Funktion).

---

## Filament-Dialog (`#filament-dialog`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `closeFilamentDialog()` | Overlay, Abbrechen, ✕ | Schließen |
| `confirmFilamentPrint()` | „▶ Drucken“ | Slot-Zuordnung bestätigen |

Inhalt von `#fd-slots` wird von `openFilamentDialog()` befüllt (nach `startReadyFileWithSlots()` / `storePrint()`).

---

## Drucker-hinzufügen-Dialog (`#add-printer-dialog`)

| Aufruf | HTML-Element | Kontext |
|--------|--------------|---------|
| `closeAddPrinterDialog()` | Overlay, Abbrechen, ✕ | Schließen |
| `confirmAddPrinter()` | `#apd-confirm` | IP/Name senden → Neustart |

---

## Modal-Backdrop-Muster

Mehrere Overlays nutzen:

```html
onclick="if(event.target===this)closeSettings()"
```

| Funktion | Modal-ID |
|----------|----------|
| `closeSettings()` | `#settings-modal` |
| `closeSlotEdit()` | `#slot-edit-modal` |
| `closeFilamentDialog()` | `#filament-dialog` |
| `closeAddPrinterDialog()` | `#add-printer-dialog` |

---

## Funktionen ohne HTML-Hook (automatisch)

| Funktion | Wann / wofür |
|----------|----------------|
| `poll()` | Periodisch `/api/state` – Dashboard-Update |
| `applyState()` | Poll-Daten ins DOM schreiben |
| `initPrinters()` | Multi-Drucker-Liste beim Start |
| `renderPrinterDropdown()` | Header-Dropdown |
| `applyLang()` | Übersetzungen (Start + nach `toggleLang()`) |
| `updateConnBtn()` | Verbindungs-Button |
| `updateHistory()` / `drawChart()` | Temperatur-Verlauf `#d-chart` |
| `connect()` (SSE) | Live-Server-Log |
| `openFilamentDialog()` | Multi-Farben-Druck |
| `openSlotEdit()` | AMS-Kacheln |
| `storePrint()` / `storeDelete()` | Datei-Karten |
| `removePrinter()` | Drucker-Karten |
| `camStart()` / `camStop()` | Kamera (auch auto bei Druckstart) |

---

## CSS-Klassen (keine IDs, aber von app.js genutzt)

| Klasse | Verwendung |
|--------|------------|
| `.panel` | Tab-Panels (`showPanel`) |
| `.nav-btn`, `.bnav-btn` | Navigation active-State |
| `.nav-text` | Sidebar-Label (i18n) |
| `.lbl-set`, `.lbl-off` | Temp-Button-Texte |
| `.lbl-home-z`, `.lbl-home-xy`, `.lbl-home-all`, `.lbl-disable-motors` | Home-Buttons |
| `.lbl-step` | Schrittweiten-Label |
| `.lbl-feed`, `.lbl-unload` | AMS-Buttons |
| `.temp-input` | Placeholder i18n |
| `.step-btn` | Schrittweiten-Auswahl |
| `.poll-btn` | Poll-Intervall |
| `.log-dir-btn`, `.log-topic-btn` | Log-Filter |
| `.mat-preset-btn` | Slot-Material (dynamisch) |
| `.ams-slot` | AMS-Kacheln (dynamisch) |

---

## Theme aktivieren

```bash
python kobrax_moonraker_bridge.py … --ui-theme default
# oder
KX_UI_THEME=new1 python kobrax_moonraker_bridge.py …
```

Pro Theme-Ordner: `index.html`, `style.css`, `app.js` unter `web/themes/<name>/`.