# Label Designer

## Bereich

- Route: `/labels/designer`
- Zweck: freie Label-Layouts erstellen, testen, als Preset speichern und fuer verschiedene Druckertypen vorbereiten

## Wann du diesen Bereich nutzt

Der Label Designer ist der richtige Ort, wenn:

- ein komplett neues Label entsteht
- bestehende Vorlagen angepasst werden
- Logos, QR-Codes, Barcodes oder neue UI-Bausteine gesetzt werden muessen
- ein neues Preset fuer A4, Thermodrucker oder ein freies Format gebaut werden soll
- sichere Druckbereiche, Rander und Druckermodelle sichtbar geprueft werden sollen

## Wichtige Bereiche auf der Seite

### Werkzeugleiste oben

Funktionen fuer:

- Datei-, Bearbeiten-, Ansicht-, Druck-, Tools- und Hilfe-Menues
- Baustein-Menues fuer Text, Formen, Bilder und QR oder Barcodes
- Ausrichten, Zoom und Stage-Werkzeuge
- Layer-Dropdown und Schnellfunktionen fuer das aktive Objekt

### Workflow links

Die Arbeit ist in Schritte gegliedert:

- Layout
- Felder
- Design
- Ausgabe

Jeder Schritt fuehrt durch passende Unterbereiche statt alle Optionen gleichzeitig zu zeigen.

### Stage in der Mitte

Hier wird das Label gebaut. Die Arbeitsflaeche zeigt:

- das zentrierte Label
- Grid oder Dot-Ansicht
- den druckbaren Bereich
- Sicherheitsabstaende
- die aktuelle Zoom-Stufe

### Einstellungen und Vorschau

Rechts liegen als Tabs oder Panels die kompakten Bearbeitungsbereiche fuer:

- Objekt-Eigenschaften
- Dokumentparameter
- Vorschau
- Export

Assets werden zusaetzlich ueber einen eigenen Modal-Browser geladen und koennen per Drag-and-Drop auf das Label gezogen werden.

## Voraussetzungen

Vor dem Arbeiten im Designer sollten vorhanden sein:

- mindestens eine Beispiel-Spule fuer die Vorschau
- ein klares Zielmedium
- gegebenenfalls Logos oder Assets
- ein Druckerformat oder freies Layout als Startpunkt

## Schritt-fuer-Schritt Anleitung

### Schritt 1: Designer oeffnen

1. `Label Designer` oeffnen.
2. Warten, bis Menueleiste, Workflow, Stage und Vorschau sichtbar sind.

### Schritt 2: Arbeitsmodus festlegen

1. Zwischen `Freies Layout` und `Preset nach Drucker` waehlen.
2. Falls ein Drucker-Preset genutzt wird, Hersteller, Familie, Format und Druckrand festlegen.
3. Danach die Beispiel-Spule fuer die Vorschau setzen.

### Schritt 3: Elemente einfuegen

1. Oben das Baustein-Menue fuer `Text`, `Formen`, `Bilder` oder `QR & Barcodes` oeffnen.
2. Das passende Element auf die Stage ziehen oder per Klick einfuegen.
3. Fuer dynamische Inhalte bevorzugt Feld- oder Checkbox-Bausteine mit echter Datenquelle nutzen.

### Schritt 4: Eigenschaften setzen

1. Das Element anklicken.
2. Rechts die passenden Objekt-Eigenschaften oeffnen.
3. Position, Groesse, Text, Feldzuordnung, Farben, Font oder Sichtbarkeit anpassen.
4. Mit `Entfernen` kann das aktive Element direkt geloescht werden.

### Schritt 5: Layer und Assets verwalten

1. Ueber das Layer-Menue die Reihenfolge und Sichtbarkeit kontrollieren.
2. Ueber den Asset-Browser Logos oder Bildquellen hochladen.
3. Assets per Drag-and-Drop direkt auf das Label ziehen.

### Schritt 6: Vorschau testen

1. Die Vorschau aktualisieren.
2. Mit einer Beispiel-Spule pruefen, ob alle Werte lesbar sind.
3. Sichere Druckzone, Barcode, QR-Code und Datenfelder visuell kontrollieren.
4. Im Zoom pruefen, ob Abstaende und Ausrichtungen sauber sitzen.

### Schritt 7: Preset speichern oder Bibliothek nutzen

1. Das Layout als globales Custom-Layout oder als neues Preset speichern.
2. Ueber den Preset-Modal vorhandene System- und Custom-Presets als Vorschau laden.
3. Danach im Label Tool pruefen, ob das Preset fuer echte Drucke verfuegbar ist.

## Beispiel-Eingaben

```text
Preview-Spule: 10027
Modus: Preset nach Drucker
Hersteller: Niimbot
Format: 50 x 30 mm
Field: {{brand}}
Checkbox-Feld: {{is_silk}}
Barcode: {{sku_or_id}}
Asset: logo-company
```

## Typische Fehler oder Stolperstellen

- Freitext statt Feld verwendet, obwohl dynamische Daten gebraucht werden
- Vorschau ohne echte Beispiel-Spule beurteilt
- Layer-Reihenfolge verdeckt wichtige Inhalte
- Druckrand oder Sicherheitszone ignoriert
- falscher Arbeitsmodus fuer das Zielgeraet genutzt
- ein Asset wurde geladen, aber nicht auf die Stage gezogen

## Screenshot-Pflicht

1. Gesamtansicht Designer
2. Preset-Browser oder Asset-Modal
3. Vorschau mit sichtbarer Druckzone
