Files

Hirnwunde dc3722c803 added theming

2026-05-18 11:54:31 +02:00

9.8 KiB

Raw Blame History

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`

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

Mehrere Overlays nutzen:

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

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>/.

9.8 KiB Raw Blame History Unescape Escape