Publixx Template Designer

Anwenderdokumentation | Version 2.0 | Dezember 2025

Was ist Publixx?

Publixx Template Designer ist eine professionelle Plattform für die Erstellung von Dokumenten-Templates mit automatischer Daten-Integration. Das Besondere: Ein Template, zehn Output-Formate.

Kernfunktionen

Erste Schritte

Benutzeroberfläche

Die Publixx-Oberfläche besteht aus vier Hauptbereichen:

1. Toolbar (oben)

Die Toolbar ist in drei kompakte Dropdown-Menüs organisiert:

• 📁 Datei: Daten laden (JSON, Excel/CSV), Templates laden/speichern, PXF/zPXF Import/Export
• 📤 Export: Alle 10 Export-Formate (PDF, PowerPoint, Word, Excel, Bilder, HTML, Microsite, Website, Player, DPP)
• ✨ Layout: Magic Layout, AutoFit, Layout zurücksetzen

Zusätzlich in der Toolbar:

• Format-Auswahl: Print-Formate (A4, A5) oder Screen-Resolutions (HD bis 8K)
• Rand/Grid: Seitenrand und Raster-Einstellungen
• Live-Modus: Echtzeit-Vorschau und Play-Button für Fullscreen-Player
• Datensatz-Navigation: Datensatz-Auswahl, Filter, Datapicker
• Zoom-Controls: Zoom-Slider, 100%, Breite anpassen
• Sprache: 5 Sprachen (DE, EN, FR, ES, IT)

2. Linke Sidebar

• Element-Palette: Drag & Drop Elemente (Text, Bild, QR-Code, etc.)
• Felder-Explorer: Datenfelder aus geladenem Datensatz

3. Canvas (Mitte)

• Arbeitsbereich: Visuelles Design-Canvas
• Grid: Intelligentes Raster für präzise Positionierung
• Live-Vorschau: Echtzeit-Rendering der Daten

4. Rechte Sidebar (Inspector)

• Properties: Eigenschaften des gewählten Elements
• Positioning: X/Y-Position, Breite, Höhe
• Styling: Farben, Schriften, Abstände
• Data Binding: Verknüpfung mit Datenfeldern

Grundlegende Arbeitsschritte

1. Format wählen (A4 Hochformat, Full HD, etc.)
2. Daten laden (JSON, CSV oder Excel)
3. Elemente platzieren (Drag & Drop aus Palette)
4. Properties anpassen (Inspector rechts)
5. Template speichern (für Wiederverwendung)
6. Exportieren (in gewünschtem Format)

Daten laden

Publixx unterstützt drei Datenformate: JSON, CSV und Excel (XLSX).

JSON-Daten laden

Button: Daten laden (JSON)

Einfaches JSON-Array

[
  {
    "sku": "10001",
    "name": "SmartOne X",
    "description": "Leistungsstarkes OLED-Smartphone mit 5G",
    "price": 799.00,
    "image": "https://placehold.co/800x600/png?text=SmartOne+X"
  },
  {
    "sku": "10002",
    "name": "SmartOne X Pro",
    "description": "Flaggschiff mit Periskop-Zoom",
    "price": 999.00,
    "image": "https://placehold.co/800x600/png?text=SmartOne+X+Pro"
  }
]

Verschachteltes JSON

Publixx kann auch verschachtelte Strukturen verarbeiten:

[
  {
    "product": {
      "name": "SmartOne X",
      "specs": {
        "display": "6,7\" OLED",
        "processor": "Octa-Core 3,0 GHz"
      }
    },
    "pricing": {
      "basePrice": 799,
      "currency": "EUR"
    }
  }
]

Zugriff im Template: product.name, product.specs.display, pricing.basePrice

Arrays für Listen und Tabellen

Für Listen und Tabellen können Sie Arrays direkt im Datensatz verwenden:

{
  "name": "SmartOne X",
  "bullets": [
    "5G Highspeed",
    "Schnelles Laden (65 W)",
    "Stereo-Lautsprecher"
  ],
  "rows": [
    { "label": "Display", "value": "6,7\" OLED (120 Hz)" },
    { "label": "Prozessor", "value": "Octa-Core 3,0 GHz" },
    { "label": "RAM", "value": "8 GB" }
  ]
}

Binding: Listen-Element an bullets, Tabellen-Element an rows

vfetch - Mehrere JSON-Quellen zusammenführen

Mit der vfetch-Funktion können Sie mehrere JSON-Dateien über Primary Keys verknüpfen:

// products.json
[
  {
    "id": "10001",
    "name": "SmartOne X",
    "categoryId": "PREMIUM"
  }
]

// categories.json
[
  {
    "id": "PREMIUM",
    "name": "Premium-Serie",
    "badge": "flagship.svg"
  }
]

Ergebnis: Automatische Verknüpfung über categoryId

CSV & Excel laden

Button: Excel laden (XLSX/CSV)

CSV-Format

sku,name,price,description,image
10001,SmartOne X,799,OLED-Smartphone mit 5G,https://cdn.example.com/smartone-x.jpg
10002,SmartOne X Pro,999,Flaggschiff mit Periskop-Zoom,https://cdn.example.com/smartone-xpro.jpg

Asset-Base-URL

Für Bilder und Assets können Sie eine Base-URL definieren:

Asset-Base-URL: https://cdn.example.com/products/
Datensatz: image = "smartone-x.jpg"
Ergebnis:  https://cdn.example.com/products/smartone-x.jpg

PQL-Filter (Publixx Query Language)

Feld: Filter (Primärfelder)

Filtern Sie Datensätze mit SQL-ähnlicher Syntax:

Beispiele

-- Einfache Bedingung
price > 50000

-- Mehrere Bedingungen (UND)
price > 40000 AND category = "SUV"

-- ODER-Verknüpfung
category = "SUV" OR category = "Limousine"

-- Text-Suche (LIKE)
name LIKE "%A4%"

-- Bereich
price BETWEEN 40000 AND 60000

-- IN-Liste
category IN ("SUV", "Limousine", "Kombi")

Verfügbare Operatoren

Template gestalten

Format wählen

Dropdown: Format

Print-Formate

• DIN A4 – Hoch (210 × 297 mm)
• DIN A4 – Quer (297 × 210 mm)
• DIN A5 – Hoch (148 × 210 mm)
• DIN A5 – Quer (210 × 148 mm)

Screen Resolutions (16:9)

• HD – 1280 × 720 px
• Full HD – 1920 × 1080 px
• WQHD – 2560 × 1440 px
• 4K UHD – 3840 × 2160 px
• 8K UHD – 7680 × 4320 px

Screen Resolutions (16:10)

• WXGA – 1280 × 800 px
• WUXGA – 1920 × 1200 px
• WQXGA – 2560 × 1600 px

Elemente platzieren

Verfügbare Elemente (Drag & Drop aus Palette)

• 📝 Freier Text - Dynamischer Text aus Daten
• 🔤 Fixer Text - Statischer Text
• 🖼️ Bild - Bilder aus URLs
• 📊 Tabelle - Tabellarische Daten
• 📋 Liste - Listen-Darstellung
• 🔲 Barcode (Code39) - Barcodes
• 📱 QR-Code - QR-Codes mit URLs/Daten
• ➖ Linie - Horizontale/Vertikale Trennlinien
• ▭ Rechteck - Dekorative Rechtecke
• 🗺️ Karte - OpenStreetMap Integration
• 📷 EXIF Daten - Kamera-Metadaten aus Bildern

Workflow

1. Element aus Palette auf Canvas ziehen
2. Element wird an Grid "gesnapped"
3. Element automatisch selektiert
4. Inspector zeigt Properties

Template speichern und laden

• Template speichern: Speichert komplettes Template als JSON
• Template laden: Stellt gespeichertes Template wieder her

Element-Typen und Properties

Jedes Element hat spezifische Properties, die im Inspector (rechte Sidebar) bearbeitet werden.

Allgemeine Properties (alle Elemente)

• X: Horizontale Position in px
• Y: Vertikale Position in px
• W: Breite in px
• H: Höhe in px

📝 Text (Freier Text)

Dynamisches Text-Element, das Daten aus dem aktuellen Datensatz anzeigt.

Data Binding

• Bind Path: Feld-Pfad (z.B. name, product.specs.engine)

Typography

• Font Size: Schriftgröße in px (6-120)
• Font Weight: 100-900 (Thin bis Black)
• Font Family: Schriftart-Auswahl
• Text Color: Textfarbe (Hex oder Picker)
• Text Align: Horizontale Ausrichtung – Left, Center, Right
• Vertical Align: Vertikale Ausrichtung – Oben, Mitte, Unten

Layout

• Padding: Innenabstand in px
• Background: Hintergrundfarbe
• Radius: Ecken-Rundung in px

Prefix & Suffix

Text vor und nach dem Wert:

Daten: price = 45000
Prefix: "ab "
Suffix: " €"
Ergebnis: "ab 45000 €"

Number Formatting

• Decimals: Anzahl Dezimalstellen
• Thousands Separator: Tausender-Trennzeichen (z.B. .)
• Decimal Separator: Dezimal-Trennzeichen (z.B. ,)

Hyperlink

Text als anklickbarer Link:

• From Data: URL aus Bind-Feld
• From Field: URL aus anderem Feld
• Fixed: Feste URL

🖼️ Image (Bild)

Zeigt Bilder aus URLs an.

Data Binding

• Bind Path: Feld mit Bild-URL
• Fixed URL: Oder feste URL

Image Styling

• Object Fit: Cover, Contain, Fill, None
• Object Position: Center, Top, Bottom, Left, Right
• Grayscale: Schwarz-Weiß-Filter
• Opacity: Transparenz (0.0 - 1.0)

URL Configuration

Asset Base: https://cdn.example.com/
Prefix: products/
Bind: image (Wert: "smartone-x.jpg")
Suffix: ?w=800
Ergebnis: https://cdn.example.com/products/smartone-x.jpg?w=800

📊 Table (Tabelle)

Zeigt Arrays oder Objekte als zweispaltige Key-Value-Tabelle an. Perfekt für Spezifikationen, technische Daten oder Produkteigenschaften.

Table Styling

Umfangreiche Styling-Optionen für professionelle Tabellen-Darstellung:

📋 List (Liste)

Zeigt Arrays als Aufzählungsliste an. Ideal für Features, Vorteile oder Bullet Points.

List Styling

• Bullet Type: Disc (●), Circle (○), Square (■), None, Custom
• Custom Bullet: Eigenes Zeichen (z.B. ▸, ✓, →)
• Item Spacing: Abstand zwischen Items (0-20 px)

🔲 Barcode (Code39)

Generiert CODE39 Barcodes.

• Bind Path: Feld mit Barcode-Daten
• Prefix/Suffix: Text vor/nach Barcode-Daten

📱 QR-Code

Generiert QR-Codes für URLs, Text oder Daten.

• Verwendung: Produkt-URLs, vCard, WLAN-Daten, beliebige Texte

➖ Line (Linie)

Horizontale oder vertikale Trennlinien.

• Line Orientation: Horizontal oder Vertical
• Line Width: Linienstärke (1-20 px)

▭ Rectangle (Rechteck)

Dekorative Rechtecke für Hintergründe oder Rahmen.

• Stroke: Rahmenfarbe und -stärke
• Fill: Füllfarbe
• Radius: Ecken-Rundung

🗺️ Map (Karte)

OpenStreetMap Integration mit GPS-Koordinaten.

Data Source

• Fields Mode: Koordinaten aus Datenfeldern (lat, lon)
• EXIF Mode: GPS aus Bild-Metadaten

Map Configuration

• Zoom: Level 1-18 (1=Welt, 18=Gebäude)
• Marker: Pin/Marker anzeigen
• Map Style: Standard, Satellite, Terrain

📷 EXIF Data

Extrahiert und zeigt Kamera-Metadaten aus Bildern.

Verfügbare EXIF-Felder

• Camera: Kamera-Modell
• Focal Length: Brennweite
• Aperture: Blende
• ISO: ISO-Wert
• Latitude/Longitude: GPS-Koordinaten

📍 Location (Standort)

Zeigt den Aufnahmeort eines Bildes als lesbaren Text an. Verwendet Reverse Geocoding über die OpenStreetMap Nominatim API, um GPS-Koordinaten in Ortsnamen umzuwandeln.

Datenquellen

Das Location-Element unterstützt drei verschiedene Quellen für Koordinaten:

Anzeigeformate

Wählen Sie aus 11 verschiedenen Anzeigeformaten:

Konfiguration

• Bild-Quelle: Bei EXIF-Modus das Bild-Feld auswählen
• Lat/Lon-Felder: Bei Datenfelder-Modus die entsprechenden Felder binden
• Anzeigeformat: Gewünschtes Format aus Dropdown wählen
• Styling: Schriftgröße, Farbe, Ausrichtung wie bei Text-Elementen

🎬 Video

Zeigt Videos aus URLs an. Ideal für Produktvideos, Tutorials oder Präsentationen im Fullscreen Player.

Video-Quellen

• Bind Path: Video-URL aus Datenfeld
• Fixed URL: Feste Video-URL
• Poster: Vorschaubild (optional)

Wiedergabe-Optionen

Unterstützte Formate

• MP4 (H.264) – beste Kompatibilität
• WebM (VP8/VP9)
• OGV (Theora)

🔊 Audio

Bettet Audio-Dateien ein. Perfekt für Podcast-Previews, Sprachaufnahmen oder Hintergrundmusik im Player.

Audio-Quellen

• Bind Path: Audio-URL aus Datenfeld
• Fixed URL: Feste Audio-URL

Wiedergabe-Optionen

• Autoplay: Audio startet automatisch
• Loop: Endlosschleife
• Controls: Player-Steuerelemente anzeigen

Unterstützte Formate

• MP3 – beste Kompatibilität
• WAV – unkomprimiert
• OGG – Open Source
• M4A – Apple Audio

🗣️ Text-to-Speech (TTS)

Sprachsynthese-Element für barrierefreie Inhalte und Kiosk-Anwendungen. Nutzt die Browser-eigene Speech Synthesis API.

Eigenschaften

🔌 API Element

Bindet externe REST-APIs ein für dynamische Daten wie Preise, Lagerbestände oder Wetterdaten.

Konfiguration

Export-Funktionen

Publixx unterstützt 10 Export-Formate aus einem Template.

PXF Export (Publixx Exchange Format)

Menü: Datei → PXF Export oder Datei → zPXF Export

Das PXF-Format ist das proprietäre Austauschformat von Publixx, das Template + gefilterte Daten in einer Datei kombiniert.

Zwei Varianten

Features

• Alles in einer Datei: Template-Design + Daten + Metadaten
• Intelligente Filterung:
  • Nur aktive Datensätze: Exportiert nur die aktuell gefilterten/ausgewählten Datensätze
  • Nur verwendete Felder: Exportiert nur Datenfelder, die im Template platziert sind
• Verschlüsselung: Optional mit AES-256-GCM
  • Lizenzschlüssel: Automatische Verschlüsselung für Partner mit gleicher Lizenz
  • Eigener Schlüssel: Custom-Verschlüsselung für Partner ohne Publixx-Lizenz
  • Unverschlüsselt: Für öffentliche Templates
• Wiedereinlesbar: 1-Klick-Import mit allen Einstellungen

zPXF: Offline-Pakete mit Bildern

Das zPXF-Format ist ideal für den Austausch, wenn keine Netzwerkverbindung verfügbar ist oder Bilder nicht über URLs erreichbar sind:

• Alle Bilder eingebettet: Bilder werden automatisch heruntergeladen und im ZIP gespeichert
• Offline-fähig: Keine Internet-Verbindung beim Import nötig
• Portabel: Eine Datei enthält wirklich alles
• Automatische URL-Konvertierung: Bild-URLs werden beim Import zu lokalen Blob-URLs

Verwendung

1. Template erstellen und Daten laden
2. Optional: Datensätze filtern (nur aktive werden exportiert)
3. Datei → PXF Export oder zPXF Export wählen
4. Dateiname vergeben
5. Verschlüsselung wählen (optional)
6. Download der .pxf oder .zpxf-Datei

Import

• Menü: Datei → PXF Import oder zPXF Import
• Drag & Drop: .pxf oder .zpxf-Datei auf Canvas ziehen
• Bei verschlüsselten Dateien: Automatische Schlüssel-Abfrage

PDF Export

Menü: Export → PDF

• Aktueller Datensatz: Nur aktueller Datensatz als PDF
• Alle (gefiltert) in einer PDF: Multi-Page PDF mit allen aktiven Datensätzen
• Eine Datei je Datensatz (ZIP): Separate PDFs als ZIP-Archiv

Features: Hochauflösend (300 DPI), Vektorbasiert, Eingebettete Schriften, Interaktive Links

PowerPoint Export

Menü: Export → PowerPoint

• Aktueller Datensatz: Eine Folie
• Alle (gefiltert) in einer PPTX: Alle Datensätze als Folien in einer Präsentation
• Eine Datei je Datensatz (ZIP): Separate PPTX-Dateien als ZIP

Features: Native PowerPoint-Formate, Editierbare Text-Boxen, Hochauflösende Bilder

Word Export

Menü: Export → Word

Exportiert als editierbares Word-Dokument (.docx) mit nativen Word-Formaten.

Layout-Modi

Features

• Native Word-Formate: Editierbare Texte, Tabellen, Listen
• Eingebettete Bilder: Alle Bilder werden ins Dokument eingebettet
• Formatierung erhalten: Schriftarten, Farben, Abstände werden übernommen

Excel Export

Menü: Export → Excel

• Direkt: Exportiert aktive Datensätze direkt als Excel-Tabelle
• Mit Template: Verwendet ein Excel-Template für die Ausgabe

Features: Formatierung, Spaltenüberschriften, Mehrere Blätter möglich

DPP Export (Digital Product Passport)

Menü: Export → DPP

• Aktueller Datensatz: Einzelnes HTML für aktuellen Datensatz
• Alle (gefiltert) als ZIP: Alle Datensätze als separate HTMLs in ZIP

Features: EU-konform (Regulation 2023/1542), Responsive, Standalone HTML, Print-optimiert

→ Ausführliche DPP-Dokumentation

Web-Export

Publixx bietet vier Web-Export-Formate für unterschiedliche Anwendungsfälle:

HTML (Einzelseite)

Menü: Export → HTML

Exportiert eine einzelne, vollständig eigenständige HTML-Datei mit eingebetteten Styles und Bildern. Ideal für schnelles Teilen per E-Mail oder Einbetten in bestehende Websites.

Microsite

Menü: Export → Microsite

Generiert eine kompakte Landing Page mit Navigation und Facettensuche – alles in einer einzigen HTML-Datei.

Website (Multi-Page)

Menü: Export → Website

Generiert eine vollständige statische Website als ZIP-Archiv mit mehreren Seiten, Navigation und optionaler PWA-Unterstützung.

Bilder (PNG/JPG)

Menü: Export → Images

Exportiert hochauflösende Bilder in verschiedenen Auflösungen (1x, 2x, 3x) für Social Media, Print oder Web.

📖 How To: Schritt für Schritt

Dieser Abschnitt zeigt Ihnen den kompletten Workflow von der Datenquelle bis zum fertigen Export anhand eines praktischen Beispiels.

Beispiel: Smartphone-Produktkatalog

Wir erstellen einen professionellen Produktkatalog für eine Smartphone-Serie mit Produktbild, Spezifikationstabelle, Features-Liste und Barcode.

Schritt 1: Datenquelle verstehen

Unsere Datenquelle smartphones.json enthält ein Array von Produkten:

[
  {
    "sku": "10001",
    "ean": "4012345678901",
    "name": "SmartOne X",
    "description": "Leistungsstarkes OLED-Smartphone mit 5G und Schnellladen.",
    "price": 799.00,
    "currency": "EUR",
    "image": "https://placehold.co/800x600/png?text=SmartOne+X",
    "rows": [
      { "label": "Display", "value": "6,7\" OLED (120 Hz)" },
      { "label": "Prozessor", "value": "Octa-Core 3,0 GHz" },
      { "label": "RAM", "value": "8 GB" },
      { "label": "Speicher", "value": "256 GB" }
    ],
    "bullets": [
      "5G Highspeed",
      "Schnelles Laden (65 W)",
      "Stereo-Lautsprecher",
      "Face & Fingerprint Unlock"
    ]
  },
  { ... weitere Produkte }
]

Verfügbare Felder:

• sku - Artikelnummer (Text)
• ean - EAN-Code (für Barcode)
• name - Produktname (Text)
• description - Beschreibung (Text)
• price - Preis (Zahl)
• image - Bild-URL (Bild)
• rows - Spezifikationen (Tabelle)
• bullets - Features (Liste)

Schritt 2: Daten laden

1. Klicken Sie auf Daten laden (JSON) in der Toolbar
2. Wählen Sie die Datei smartphones.json
3. Die Daten werden geladen und das erste Produkt angezeigt

Im linken Panel unter "Felder" sehen Sie nun alle verfügbaren Datenfelder.

Schritt 3: Format wählen

1. Öffnen Sie das Format-Dropdown in der Toolbar
2. Wählen Sie A4 Hochformat (210 × 297 mm)

Schritt 4: Elemente platzieren

Ziehen Sie die folgenden Elemente aus dem Felder-Panel auf den Canvas:

Schritt 5: Layout-Ergebnis

Schritt 6: Durch Datensätze navigieren

• Nutzen Sie die Pfeiltasten in der Toolbar oder die Datensatz-Checkboxen
• Jeder Datensatz zeigt ein anderes Smartphone
• Das Template bleibt gleich, nur die Daten ändern sich

Schritt 7: Export

Wählen Sie Ihr gewünschtes Ausgabeformat:

• PDF → Druckfertige Datenblätter
• PowerPoint → Präsentation für Meetings
• HTML → Web-Ansicht
• Images → Hochauflösende Bilder für Social Media

Export-Optionen:

• Aktueller Datensatz → Nur das angezeigte Produkt
• Alle Datensätze → Kompletter Katalog (5 Seiten)
• Gefilterte Datensätze → Nur ausgewählte Produkte

Schritt 8: Präsentation im Player

1. Klicken Sie auf den Play-Button (▶)
2. Der Fullscreen Player öffnet sich
3. Alle 5 Smartphones werden als Slideshow angezeigt
4. Mit Space pausieren, mit ESC beenden

Bonus: Filter anwenden

Filtern Sie die Daten mit PQL:

// Nur Premium-Modelle (über 700 Euro)
price > 700

// Nur das Ultra-Modell
name = "SmartOne Ultra"

// Preisspanne
price >= 399 AND price <= 799

Zusammenfassung Workflow

✏️ Inline-Editing

Mit der Editierbar-Funktion können Sie bestimmte Elemente in Ihrem Template für die nachträgliche Bearbeitung freigeben. Dies ermöglicht ein zweistufiges Arbeitsmodell: Profis erstellen das Template, Endanwender passen nur die freigegebenen Inhalte an.

Editierbar aktivieren

Die Editierbar-Funktion ist für folgende Element-Typen verfügbar:

So aktivieren Sie die Funktion:

1. Wählen Sie ein Text-, FixedText-, List- oder Table-Element auf dem Canvas aus
2. Öffnen Sie im Inspector (rechte Sidebar) den Bereich „Aktionen"
3. Aktivieren Sie die Checkbox „Editierbar (✏️)"

Inhalte bearbeiten

Nachdem ein Element als editierbar markiert wurde, erscheint der Edit-Button (✏️) am Element:

1. Klick auf ✏️: Öffnet den Inline-Edit-Dialog
2. Text bearbeiten: Ändern Sie den Inhalt im Textfeld
3. Speichern: Klicken Sie auf „Übernehmen" oder drücken Sie Enter
4. Abbrechen: Klicken Sie auf „Abbrechen" oder drücken Sie Escape

Änderungen speichern & teilen

Die wichtigste Eigenschaft der Editierbar-Funktion: Alle Änderungen können per PXF exportiert und wieder importiert werden. Dies ermöglicht einen vollständigen Workflow:

Der komplette Workflow

Praxisbeispiele

• Automotive: Händler passt Kontaktdaten und lokale Preise an Fahrzeug-Datenblättern an
• Immobilien: Makler ergänzt Exposé-Vorlage mit eigenen Kontaktdaten
• Einzelhandel: Filiale passt Aktionspreise in Flyern an
• Veranstaltungen: Lokaler Veranstalter ergänzt Orts- und Zeitangaben

▶️ Fullscreen Player

Der Fullscreen Player verwandelt Ihre Templates in professionelle Präsentationen. Er rendert jeden Datensatz als eigenen "Slide" und ermöglicht flüssige Übergänge, Animationen und automatische Wiedergabe.

Player starten

Der Player wird über die Toolbar gestartet:

• Play-Button (▶) in der Toolbar klicken
• Alternativ: Keyboard-Shortcut (wenn fokussiert)

Der Player öffnet sich im Vollbildmodus und zeigt den aktuellen Datensatz. Bei mehreren aktiven Datensätzen (über PQL-Filter oder Checkbox-Auswahl) werden alle als Slideshow durchlaufen.

Steuerung

Die Steuerung erfolgt über Keyboard, Touch-Gesten oder die eingeblendeten Controls am unteren Bildschirmrand.

Keyboard-Shortcuts

Touch-Gesten (Mobile)

• Swipe links: Nächster Slide
• Swipe rechts: Vorheriger Slide
• Tap: Controls ein-/ausblenden

Control-Buttons

Die Controls werden am unteren Bildschirmrand eingeblendet und nach 3 Sekunden automatisch ausgeblendet. Bei Mausbewegung erscheinen sie wieder.

• ◀ / ▶: Navigation
• ■: Stop (zurück zum ersten Slide)
• ▶/❚❚: Play/Pause
• 🔁: Loop-Toggle
• ⛶: Maximize-Toggle
• ⚙: Einstellungen öffnen
• ✕: Player beenden

Einstellungen

Über das Zahnrad-Symbol (⚙) öffnet sich das Einstellungs-Panel mit folgenden Optionen:

Speed Presets

Schneller Zugriff auf vordefinierte Geschwindigkeiten (1-9 Sekunden) über die Preset-Buttons oder die Zifferntasten.

Darstellungsmodi

Normal-Modus

Das Template wird zentriert mit Schatten auf hellem Hintergrund dargestellt – optimal für Präsentationen im Business-Kontext.

Maximize-Modus

Das Template wird so groß wie möglich skaliert (unter Beibehaltung des Seitenverhältnisses). Der Schatten wird entfernt für eine cleanere Darstellung.

Mobile Auto-Scale

Auf Smartphones und kleinen Bildschirmen (≤768px Breite oder ≤600px Höhe) skaliert der Player automatisch, sodass das Template vollständig sichtbar ist – auch bei großen Print-Formaten wie A3 oder Poster.

🎬 Player Export

Der Player Export erzeugt eine vollständig eigenständige HTML-Datei, die den kompletten Fullscreen Player mit allen Slides enthält. Diese Datei kann ohne Webserver, ohne Internetverbindung und auf jedem Endgerät direkt im Browser geöffnet werden.

Was ist enthalten?

Die exportierte player.html Datei beinhaltet:

Automatisch entfernt beim Export:

• Edit-Buttons (✏️): Werden für saubere Präsentation entfernt
• Resize-Handles: Keine Editor-Elemente sichtbar
• Selection-Marker: Keine Auswahl-Rahmen
• Grid-Hintergrund: Sauberer, neutraler Hintergrund

Export durchführen

1. Wählen Sie die gewünschten Datensätze (Filter, Checkboxen oder alle)
2. Öffnen Sie das Export-Menü in der Toolbar
3. Wählen Sie 🎬 Player
4. Die Datei player.html wird automatisch heruntergeladen

Anwendungsfälle

🖥️ Digital Signage & Kiosk

Ideal für Displays in Showrooms, Eingangsbereichen oder Wartezimmern:

• HTML-Datei auf USB-Stick → Display-PC → Browser im Vollbild starten
• Kein Server, keine Konfiguration, keine Wartung
• Autoplay + Loop für Dauerbetrieb

📧 Per E-Mail versenden

Teilen Sie Präsentationen direkt mit Kunden oder Kollegen:

• Als Attachment versenden (oder über Cloud-Link bei großen Dateien)
• Empfänger öffnet Datei direkt im Browser
• Kein Publixx-Zugang nötig, keine Installation

💾 Archivierung

Langzeit-Archivierung von Präsentationen:

• Standalone-Datei benötigt keine externe Software
• Funktioniert auch in Jahren noch im Browser
• Alle Inhalte in einer Datei = einfaches Backup

✈️ Offline-Präsentationen

Präsentieren ohne Internetverbindung:

• Messen und Events ohne zuverlässiges WLAN
• Kundenbesuche in Gebieten ohne Mobilfunk
• Backup-Lösung falls Online-Präsentation ausfällt

📱 Mobile Nutzung

Der Player funktioniert auf allen Geräten:

• Desktop: Chrome, Firefox, Safari, Edge
• Tablet: iPad, Android Tablets – Touch-Gesten unterstützt
• Smartphone: iPhone, Android – Auto-Scale für kleine Bildschirme

Steuerung im exportierten Player

Der exportierte Player bietet die gleichen Steuerungsmöglichkeiten wie der integrierte Fullscreen Player:

🎥 Video Export

Der Video Export wandelt Ihre Datensätze in ein abspielbereites WebM-Video um. Anders als beim Player Export, der eine interaktive HTML-Datei erzeugt, erhalten Sie hier ein echtes Video, das überall abgespielt werden kann – ohne Browser, ohne JavaScript, ohne Abhängigkeiten.

Features

Anwendungsfälle

🎪 Messen & Events

Auf Messen zählt jede Sekunde Aufmerksamkeit. Video-Content auf großen Displays zieht Besucher an:

• Produkt-Showcase: Automatisch generierte Produktvideos aus Ihrem PIM-System
• Neuheiten-Reel: Alle neuen Produkte als Video-Slideshow auf dem Messestand
• Kein Internet nötig: Video auf USB-Stick → Display → Fertig
• Dauerbetrieb: Loop-Wiedergabe ohne Unterbrechung

🏨 Hotels & Gastgewerbe

Informieren Sie Gäste elegant und automatisiert:

• Zimmer-Info-TV: Zimmerausstattung, Services, WLAN-Zugänge als Video
• Restaurant-Menüs: Tagesgerichte und Spezialitäten auf Lobby-Displays
• Event-Ankündigungen: Konferenzen, Hochzeiten, Veranstaltungen im Haus
• Mehrsprachig: Unterschiedliche Videos für verschiedene Sprachen

🖼️ Digitale Bilderrahmen

Moderne digitale Bilderrahmen spielen Videos ab – perfekt für:

• Empfangsbereiche: Mitarbeiter-des-Monats, Firmenjubiläen, News
• Showrooms: Produktpräsentationen ohne Personal
• Wartezimmer: Informationen zu Leistungen und Services
• Private Nutzung: Familienfotos mit Beschriftungen als Video-Slideshow

📦 Versand & Logistik

Visuelle Kommunikation in Lagern und Versandzentren:

• Produkt-Schulungen: Neue Artikel visuell vorstellen
• Sicherheitshinweise: Rotierende Sicherheits-Slides an Arbeitsplätzen
• Tages-Briefings: Wichtige Infos auf Monitoren im Lager
• Schichtübergaben: Visuelle Zusammenfassungen für das nächste Team

📱 Social Media Content

Generieren Sie Video-Content für Ihre Social-Media-Kanäle:

• Produkt-Teaser: Kurze Videos für Instagram, TikTok, LinkedIn
• Katalog-Videos: Komplette Produktlinien als Video für YouTube
• Automatisierte Posts: Neue Produkte → Video → Social Media
• Story-Format: Mit 9:16 Template für Instagram/TikTok Stories

🏢 Büro & Interne Kommunikation

Videos für die interne Unternehmenskommunikation:

• Onboarding: Neue Mitarbeiter mit Team-Vorstellungen begrüßen
• Kantinen-Displays: Wochenspeiseplan als Video
• Schwarzes Brett 2.0: Unternehmens-News auf Monitoren
• Jubiläen & Ehrungen: Mitarbeiter-Würdigungen als Video

Einstellungen

Auflösung

Slide-Dauer

Wie lange jeder Datensatz/Slide angezeigt wird:

• 2 Sekunden: Schnelle Slideshows, viele Produkte
• 3 Sekunden: Guter Kompromiss aus Tempo und Lesbarkeit
• 5 Sekunden: Standard – Zeit zum Erfassen aller Informationen
• 10 Sekunden: Detaillierte Inhalte, viel Text

Übergangseffekte

Sanfte Fade-Transitions zwischen den Slides:

• Kein Übergang: Harter Schnitt zwischen Slides
• Schnell (300ms): Dezenter, professioneller Übergang
• Normal (500ms): Ausgewogener Fade-Effekt
• Langsam (1000ms): Eleganter, langsamer Übergang

Vergleich: Player Export vs. Video Export

Browser-Kompatibilität

Der Video Export nutzt die native MediaRecorder API des Browsers:

• Chrome 49+: ✅ Volle Unterstützung (VP9)
• Firefox 25+: ✅ Volle Unterstützung (VP8)
• Edge 79+: ✅ Volle Unterstützung (VP9)
• Safari 14.1+: ⚠️ Eingeschränkte Unterstützung

✨ Animationen

Mit dem Animation-System können Sie einzelne Elemente zeitversetzt und mit verschiedenen Effekten erscheinen und verschwinden lassen. Dies verwandelt statische Templates in dynamische, aufmerksamkeitsstarke Präsentationen.

Animation-Typen

Publixx bietet 7 verschiedene Animationseffekte:

Konfiguration im Inspector

Animation-Einstellungen finden Sie im rechten Inspector-Panel, wenn ein Element ausgewählt ist:

Animation aktivieren

1. Element auf dem Canvas auswählen
2. Im Inspector zum Abschnitt "Animation" scrollen
3. Checkbox "Animation aktivieren" setzen

Einstellungen

Praxis-Beispiel: Professionelle Produkt-Show

Hier ein Beispiel, wie Sie eine wirkungsvolle Produktpräsentation mit gestaffelten Animationen aufbauen:

Szenario

Produktkatalog mit Fahrzeugdaten: Jeder Datensatz zeigt ein Fahrzeug mit Bild, Titel, Beschreibung und Preis.

Template-Aufbau

Animations-Choreographie

Das Ergebnis

Beim Slide-Wechsel entsteht eine flüssige Choreographie:

1. 0.0s: Logo blendet sanft ein, Hintergrund sofort sichtbar
2. 0.2s: Produktbild beginnt einzufaden
3. 0.3s: "NEU"-Badge poppt mit Scale-Effekt auf
4. 0.5s: Titel gleitet von oben herein
5. 0.7s: Untertitel folgt
6. 1.0s: Features-Liste schiebt von links rein
7. 1.5s: Preis-Badge erscheint mit Aufmerksamkeits-Effekt
8. 1.8s: Call-to-Action gleitet von rechts rein

Bei einer Slide-Dauer von 6 Sekunden hat das Publikum danach noch ~4 Sekunden, um den kompletten Slide zu erfassen, bevor die Out-Animationen beginnen und der nächste Datensatz erscheint.

Weitere Anwendungsfälle

• Immobilien-Exposés: Bild fade, Adresse slide down, Features nacheinander einblenden
• Mitarbeiter-Vorstellung: Portrait scale, Name slide, Abteilung fade
• News-Ticker: Headline slide left, Datum fade, Bild scale
• Produktvergleich: Spalten nacheinander von außen nach innen
• Event-Ankündigung: Datum scale, Titel slide down, Details fade sequentiell

Menüsystem

Die Toolbar enthält vier Dropdown-Menüs für alle wichtigen Funktionen.

📁 Datei-Menü

Daten und Templates laden, PXF Import/Export.

📤 Export-Menü

Alle 11 Export-Formate gruppiert nach Kategorie.

📐 Layout-Menü

Format-Einstellungen und Layout-Funktionen.

⚙️ Config-Menü

Anwendungs-Einstellungen und Entwickler-Tools.

💡 incoxxIDEA

incoxxIDEA ist der Template-Assistent für die schnelle Erstellung von Marketing-Materialien aus Excel-Daten.

Template-Assistent

Der Wizard führt in 6 Schritten zum fertigen Template:

1. Dokumenttyp wählen: Datenblatt, Flyer, Präsentation oder Preisliste
2. Export-Formate: Welche Ausgabeformate werden benötigt?
3. Layout-Einstellungen: Orientierung, Stil, Schriftart, Farbe
4. Variante wählen: Layout-Vorlage basierend auf Einstellungen
5. Daten hochladen: Excel oder CSV mit Produktdaten
6. Spalten zuordnen: Excel-Spalten → Template-Elemente

Dokumenttypen

Rezepte

Rezepte speichern Wizard-Einstellungen für die Wiederverwendung:

• Rezept speichern: Exportiert Einstellungen + Mapping als JSON
• Rezept importieren: Lädt gespeicherte Konfiguration
• In Publixx anwenden: Überträgt Template direkt in den Editor

Rezept-Inhalt

• Dokumenttyp (purpose)
• Aktivierte Export-Formate
• Layout-Einstellungen (Orientierung, Stil, Schrift, Farbe)
• Spalten-Mapping (Excel → Template)

🔌 API Plugins

Modulares Plugin-System für externe API-Integrationen. Erweitert Publixx um Übersetzung, Sprachsynthese, KI-Transformation und Bildanalyse.

Google Translate

Google Cloud Translation API für Übersetzungen in 100+ Sprachen.

OpenAI

GPT-basierte Übersetzung und Text-Transformation.

OpenAI Übersetzer

Kontextbewusste Übersetzung mit GPT – besonders für Marketing-Texte.

OpenAI Transform

Textanpassung nach Vorgaben: Kürzen, Erweitern, Tonalität ändern, Format anpassen.

Google Cloud TTS

Text-to-Speech mit Google Neural Voices für hochwertige Sprachsynthese.

Google Vision

Bild-Analyse mit Google Cloud Vision API.

Verfügbare Presets

API-Keys konfigurieren

API-Keys werden in der project-config.json hinterlegt:

{
  "apiKeys": {
    "OPENAI": "sk-...",
    "GOOGLE_TRANSLATE": "AIza...",
    "GOOGLE_TTS": "AIza...",
    "GOOGLE_VISION": "AIza..."
  }
}

🎨 Brand-Kits

Das Brand-Kit System ermöglicht die zentrale Verwaltung von Markenfarben, Logos und Typografie. Templates können mit einem Klick auf das Corporate Design verschiedener Kunden oder Marken umgestellt werden.

Kit-Auswahl

Brand-Kits werden über den Settings-Dialog (⚙️ Config → Einstellungen) oder direkt im Code konfiguriert. Eigene Brand-Kits können in der Datei brandkit.js definiert werden.

Brand-Kit Struktur

Jedes Brand-Kit definiert folgende Eigenschaften:

{
  id: 'mein-kunde',
  name: 'Mein Kunde GmbH',
  description: 'Corporate Design für Kunde XY',

  colors: {
    primary:    { value: '#003366', label: 'Hauptfarbe' },
    secondary:  { value: '#FFFFFF', label: 'Sekundär' },
    accent:     { value: '#FF6600', label: 'Akzent' },
    background: { value: '#FFFFFF', label: 'Hintergrund' },
    text:       { value: '#111111', label: 'Text' },
    textLight:  { value: '#666666', label: 'Text Hell' }
  },

  fonts: {
    heading: 'Headline Font',
    body: 'Body Font',
    accent: 'Accent Font'
  },

  logos: {
    main:     { url: 'assets/logos/kunde-logo.svg', alt: 'Logo' },
    wordmark: { url: 'assets/logos/kunde-wordmark.svg', alt: 'Schriftzug' }
  }
}

Farben & Logos

Jedes Brand-Kit enthält:

Farbpalette

• primary – Hauptfarbe (Buttons, Akzente)
• secondary – Sekundärfarbe
• accent – Highlight-Farbe
• background – Hintergrundfarbe
• text / textLight – Textfarben
• gray90/60/40/20 – Graustufen
• success/warning/error – Statusfarben

Logos

• main – Hauptlogo (SVG/PNG)
• wordmark – Schriftzug
• icon – Favicon/Icon

Fonts

• heading – Überschriften-Schriftart
• body – Fließtext-Schriftart
• accent – Akzent-Schriftart

Verwendung im Code

// Aktives Brand-Kit abrufen
const kit = BrandKits.getActive();

// Farbe auslesen
const primaryColor = BrandKits.getColor('primary');
// → "#003366"

// Auf CSS-Variablen anwenden
BrandKits.applyToCSS();

// Kit wechseln
BrandKits.setActive('mein-kunde');

⚙️ Einstellungen

Der Settings-Dialog ermöglicht die zentrale Konfiguration von Publixx-Einstellungen. Öffnen Sie ihn über Config → Einstellungen.

Branding

Typografie & Farben

Weitere Einstellungen

• Asset Base URL – Basis-URL für relative Bildpfade
• Kontakt URL/Email – Kontakt-Adresse für Exporte
• Impressum URL – Link zum Impressum
• Test-Modus – Zeigt Testbilder bei fehlenden Assets

👁️ Inspector-Modus

Der Inspector-Modus reduziert die Komplexität der rechten Sidebar. Zwei Modi stehen zur Verfügung:

Beginner Mode

Zeigt nur die wichtigsten Einstellungen für eine schnelle Bearbeitung:

• Daten / Text – Bind-Pfad, Feldauswahl
• Typographie & Layout – Font, Größe, Farbe, Ausrichtung
• Aktionen – Editierbar, Löschen

Expert Mode

Zeigt alle erweiterten Einstellungen:

• Position & Größe (X, Y, W, H)
• Präfix/Suffix-Konfiguration
• Bild-URL Zusammensetzung
• Hyperlinks
• Listen- und Tabellen-Styling
• Karten- und EXIF-Konfiguration
• Sichtbarkeits-Regeln

Umschalten

📐 Best Fit

Best Fit optimiert die UI-Darstellung automatisch basierend auf Bildschirmgröße und Canvas-Format. Mit einem Klick werden Zoom und Sidebars optimal angepasst.

Presets

Verwendung

// Standard Best Fit
BestFit.run();

// Mit Preset
BestFit.run({ mode: 'compact' });
BestFit.run({ mode: 'balanced' });
BestFit.run({ mode: 'editing' });
BestFit.run({ mode: 'presentation' });

// Mit UI-Skalierung (auch Schriften anpassen)
BestFit.run({ scaleUI: true });

// Zurücksetzen
BestFit.reset();

Keyboard Shortcut

Ctrl+Shift+F – Führt Best Fit mit Standard-Einstellungen aus.

🔀 Template Router

Der Template Router ermöglicht automatische Template-Auswahl basierend auf Datensatz-Eigenschaften. Unterschiedliche Produkttypen können so automatisch unterschiedliche Layouts erhalten.

Routing-Regeln

Regeln werden in der project-config.json definiert:

{
  "templates": [
    { "name": "Standard", "template": "standard.json" },
    { "name": "Premium", "template": "premium.json" },
    { "name": "Aktion", "template": "aktion.json" }
  ],
  "templateRouting": {
    "enabled": true,
    "rules": [
      { "field": "HTG", "operator": "equals", "value": "NEU", "templateIndex": 1 },
      { "field": "promotion", "operator": "isNotEmpty", "templateIndex": 2 }
    ],
    "defaultTemplateIndex": 0
  }
}

Verfügbare Operatoren

Status-Badge

Wenn Template-Routing aktiv ist, erscheint ein Badge auf dem Canvas, das das aktuelle Template anzeigt. Wenn das empfohlene Template vom aktuellen abweicht, kann per Klick auf das Badge gewechselt werden.

Warum Template-Routing?

Konkrete Vorteile

• Ein Projekt, viele Templates – Statt separate Projekte für Neu- und Gebrauchtwagen zu pflegen, definieren Sie Regeln, die automatisch das richtige Template wählen
• Konsistenz bei Massenexporten – Bei Export von 1.000 Produkten erhält jedes automatisch das passende Layout, ohne manuelle Prüfung
• Keine Fehler durch Anwender – Händler oder Marketing-Teams können keine falschen Templates auswählen, weil das System die Entscheidung trifft
• Flexibilität ohne Programmierung – Neue Regeln können über die Konfiguration hinzugefügt werden, ohne Code-Änderungen
• Skalierbarkeit – Egal ob 10 oder 10.000 Datensätze – die Regeln gelten einheitlich

Typische Anwendungsfälle

• Fahrzeughandel – Unterschiedliche Layouts für Neu-, Jahres- und Gebrauchtwagen basierend auf HTG oder condition
• E-Commerce – Premium-Darstellung für Produkte über 1.000 €, Standard für günstigere Artikel
• Aktionen & Promotions – Sonder-Template wenn ein promotion-Feld gefüllt ist
• Produktkategorien – Verschiedene Layouts für Elektronik, Bekleidung, Zubehör basierend auf category
• Lagerbestand – „Ausverkauft"-Template wenn stock = 0

Mit Template-Routing wird aus einer statischen Template-Sammlung ein intelligentes System, das sich automatisch an die Daten anpasst.

📦 iiRDS Export

iiRDS (intelligent information Request and Delivery Standard) ist ein offener Metadatenstandard der tekom für den Austausch von technischer Dokumentation im Automotive-Aftermarket.

Features

• iiRDS 1.2 konform – Entspricht dem tekom-Standard
• Flexible Feld-Mappings – Keine hartcodierten Feldnamen
• Bild-Einbettung – Bilder werden automatisch ins Paket integriert
• PDF-Einbettung – URLs mit .pdf werden als Dokumente eingebettet
• RDF/XML Metadaten – Vollständige Metadaten-Struktur
• Progress & Abort – Fortschrittsanzeige mit ESC-Abbruch
• Memory-Monitoring – Automatische Speicherüberwachung bei großen Exporten

Feld-Mapping

Der Mapping-Dialog (📦 Export → iiRDS) ermöglicht die flexible Zuordnung von Datenfeldern zu iiRDS-Metadaten:

Paket-Struktur

Das exportierte .iirds-Paket enthält:

export.iirds (ZIP)
├── mimetype                 # application/iirds+zip (unkomprimiert)
├── META-INF/
│   ├── container.xml        # Container-Beschreibung
│   └── metadata.rdf         # RDF/XML Metadaten
├── content/
│   ├── topic_0001.html      # HTML für Datensatz 1
│   ├── topic_0002.html      # HTML für Datensatz 2
│   └── ...
├── assets/
│   ├── image_001.jpg        # Eingebettete Bilder
│   └── ...
└── documents/
    ├── manual.pdf           # Eingebettete PDFs
    └── ...

Export starten

1. Mapping konfigurieren – iiRDS → Datenfelder zuordnen
2. Paket-Info – Titel und Sprache festlegen
3. Export starten – Progress-Dialog zeigt Fortschritt
4. Download – .iirds-Datei wird automatisch heruntergeladen

Warum iiRDS?

Konkrete Vorteile

• Systemübergreifender Austausch – iiRDS-Pakete können direkt in Werkstattinformationssysteme wie TecAlliance, TecRMI oder Fahrzeug-Diagnose-Tools importiert werden
• Zukunftssicherheit – Als offener tekom-Standard wird iiRDS kontinuierlich weiterentwickelt und von der Industrie unterstützt
• Maschinenlesbare Metadaten – RDF/XML ermöglicht automatische Klassifizierung und Suche in großen Dokumentationsbeständen
• Reduzierte Integrationskosten – Statt individueller Schnittstellen zu jedem Partner-System genügt ein Standardformat
• Compliance-Anforderungen – Viele OEMs fordern von Zulieferern bereits iiRDS-konforme Dokumentation

Typische Anwendungsfälle

• Ersatzteil-Kataloge – Teile-Nummern, Abbildungen und Einbauanleitungen als strukturiertes Paket
• Reparaturanleitungen – Schritt-für-Schritt-Dokumentation für Werkstätten
• Technische Datenblätter – Produktspezifikationen für den Aftermarket
• Wartungshandbücher – Intervalle, Prozeduren, Warnhinweise

Mit dem iiRDS-Export in Publixx können Sie aus Ihren Produktdaten direkt austauschfähige Dokumentationspakete erstellen – ohne separate Redaktionssysteme oder teure Spezial-Software.

Erweiterte Funktionen

Magic Layout

Buttons: Magic 1, Magic 2

Automatisches Layout-System, das Elemente intelligent anordnet:

• Magic 1 (Hero 50%): Große Hero-Section + Grid
• Magic 2 (Hero Flat): Flache Hero + Spalten

AutoFit

Button: Fit

Passt Element-Größen automatisch an Inhalt an.

Fullscreen Player

Button: Play

Startet Präsentations-Modus mit:

• Vollbild-Darstellung
• Tastatur-Navigation (← →)
• Auto-Play (optional)

Steuerung: Pfeiltasten (Vor/Zurück), ESC (Beenden), Leertaste (Pause)

Data Picker

Button: Datensätze wählen ...

Dialog zur Auswahl von Datensätzen mit Multi-Select, Sortierung und Filterung nach Primärfeldern.

📄 Digital Product Passport (DPP)

Der Digital Product Passport (DPP) ist ein standardisiertes HTML-Format für Produktinformationen, das die EU-Verordnung 2023/1542 (Ecodesign for Sustainable Products Regulation) erfüllt.

Features

• EU-konform: Erfüllt EU Regulation 2023/1542 und ISO 14067:2018
• Responsive Design: Optimiert für Desktop, Tablet und Mobile (3 Breakpoints)
• Standalone HTML: Funktioniert ohne externe Dependencies, per E-Mail verschickbar
• Print-optimiert: Saubere Druckansicht verfügbar (Strg+P)
• Sticky Navigation: Schnelle Navigation zwischen Sections
• Customizable: Anpassbares Styling via externe CSS-Datei für Kunden-Branding
• Progress & Abort: Progress-Dialog bei Bulk-Exporten mit Abbruch (ESC/Strg+Q)

Export-Optionen

DPP-Struktur

Ein Digital Product Passport besteht aus folgenden Standard-Sections:

Datenstruktur

Die JSON-Datensätze sollten folgende Struktur haben:

{
  // Hero Section - Grunddaten
  "sku": "10001",
  "brand": "SmartOne",

  // Produktinformationen
  "productInfo": {
    "brandName": "SmartOne",
    "modelDesignation": "SmartOne X",
    "productCategory": "Smartphone",
    "description": "Premium Smartphone mit KI-Features...",
    "price": "799.00",
    "currency": "EUR"
  },

  // Technische Daten
  "technicalData": {
    "display": "6.7\" OLED",
    "processor": "Octa-Core 3.2 GHz",
    "storage": "256 GB",
    "ram": "12 GB",
    "camera": "50 MP Triple Camera",
    "weight": "195 g",
    "dimensions": "159 x 74 x 8.2 mm"
  },

  // Materialien (Array)
  "materials": [
    {
      "name": "Aluminium",
      "percentage": 35,
      "recyclable": true
    },
    {
      "name": "Glas",
      "percentage": 25,
      "recyclable": true
    },
    {
      "name": "Kunststoff (recycelt)",
      "percentage": 20,
      "recyclable": true
    }
  ],

  // CO₂-Fußabdruck (ISO 14067:2018)
  "carbonFootprint": {
    "totalEmissions": 75,
    "unit": "kg CO₂e",
    "methodology": "ISO 14067:2018",
    "breakdown": {
      "production": 55,
      "transport": 12,
      "usage": 8
    }
  },

  // Batterie-Informationen
  "battery": {
    "capacity": "5000 mAh",
    "type": "Li-Ion",
    "removable": false,
    "chargeCycles": 800,
    "fastCharging": true,
    "warranty": "2 Jahre"
  },

  // Compliance & Zertifizierungen
  "compliance": {
    "certifications": ["CE", "RoHS", "REACH", "Energy Star"],
    "standards": ["ISO 14001", "ISO 9001", "IEC 62368-1"],
    "ecoLabel": "EU Ecolabel"
  },

  // Entsorgung & Recycling
  "disposal": {
    "recyclingInfo": "Über kommunale Sammelstellen oder Rücknahme...",
    "repairability": "7/10",
    "spareParts": "5 Jahre Verfügbarkeit",
    "manual": "https://example.com/repair-guide.pdf"
  }
}

Verwendung

1. Daten vorbereiten: JSON mit DPP-Struktur erstellen
2. In Publixx laden: JSON-Datei über "JSON..." Button laden
3. Datensätze filtern (optional): PQL-Filter oder Data Picker verwenden
4. Export starten:
   • DPP Current: Einzelnes HTML für aktuellen Datensatz
   • DPP All as ZIP: Alle gefilterten Datensätze als ZIP
5. HTML-Dateien verteilen:
   • Direkt im Browser öffnen
   • Auf Webserver hochladen
   • Per E-Mail verschicken
   • In Produktdokumentation einbetten

Branding & Customization

Das DPP-Design kann über die Datei dpp.css im Root-Verzeichnis angepasst werden:

/* Beispiel: Rotes Branding */
:root {
  --dpp-primary: #bb0a30;        /* Rot */
  --dpp-primary-light: #dd0c3a;
  --dpp-font: 'Corporate Font', Arial, sans-serif;
}

/* Beispiel: Blaues Branding */
:root {
  --dpp-primary: #001e50;        /* Dunkelblau */
  --dpp-primary-light: #003875;
}

/* Custom Branding */
:root {
  --dpp-primary: #0066cc;
  --dpp-text: #1a1a1a;
  --dpp-border: #e0e0e0;
}

Workflow

1. dpp.css im Root-Verzeichnis öffnen
2. CSS Variables anpassen (Farben, Schriften)
3. Datei speichern
4. DPP exportieren → Branding wird automatisch übernommen

Die generierten HTML-Dateien enthalten das CSS embedded und sind vollständig standalone.

ZIP-Export Struktur

Bei "All as ZIP" Export wird folgende Ordnerstruktur erstellt:

dpp-products.zip
└── products/
    ├── DPP-10001-SmartOne-X.html
    ├── DPP-10002-SmartOne-Pro.html
    ├── DPP-10003-SmartOne-Lite.html
    ├── DPP-10004-SmartOne-Max.html
    └── DPP-10005-SmartOne-Ultra.html

Dateinamen-Pattern: DPP-{SKU}-{Model}.html

Performance

• Progress-Anzeige: Bei Bulk-Exporten wird ein Progress-Dialog angezeigt
• Abbruch-Möglichkeit: ESC oder Strg+Q während des Exports
• Effizient: CSS wird einmal geladen und für alle Produkte verwendet
• Fallback: Falls dpp.css nicht gefunden wird, wird Fallback-CSS verwendet

Einsatzbereiche

• Automotive: Batteriepass (ab 2027 verpflichtend)
• Elektronik: Smartphones, Laptops, Haushaltsgeräte
• Textilien: Fashion Brands, Sportbekleidung
• Möbel: Nachhaltigkeits-Nachweis
• Bauprodukte: EPD (Environmental Product Declaration)

Best Practices

• Vollständige Daten: Alle relevanten Sections befüllen für maximale Compliance
• Hochauflösende Bilder: Mindestens 800x800px für Hero-Section
• ISO 14067:2018: CO₂-Daten nach Standard berechnen lassen
• Mehrsprachigkeit: Separate JSON-Dateien für verschiedene Sprachen vorbereiten
• Versionierung: DPPs mit Versionsnummer versehen (z.B. v1.0)
• QR-Codes: DPP-URL als QR-Code auf Produkt/Verpackung drucken

API-Steuerung

Publixx kann vollständig über URL-Parameter gesteuert werden - ideal für Automatisierung.

URL-Parameter Übersicht

index.html?config=TEMPLATE&data=DATA&action=ACTION&format=FORMAT&mode=MODE&filter=FILTER

Parameter

Anwendungs-Beispiele

1. Template + Daten laden

index.html?config=templates/catalog.json&data=data/vehicles.json

2. Direkt PDF exportieren

index.html?config=templates/product.json&data=data/products.json&action=export&format=pdf&mode=all

3. Mit Filter exportieren

index.html?config=templates/catalog.json&data=api/products.json&filter=price>500&action=export&format=pptx&mode=all

4. Fullscreen Player mit Autoplay

index.html?config=templates/slideshow.json&data=data/products.json&action=play

5. Live-API-Anbindung (PIM/CRM)

# Direkte Anbindung an REST API
index.html?config=templates/catalog.json&data=https://api.example.com/products?format=json

# Mit API-Key über Proxy
index.html?config=templates/catalog.json&data=https://proxy.example.com/pim-export

# Shell-Script für automatisierten Export
curl "https://publixx.example.com/index.html?\
config=templates/daily-catalog.json&\
data=https://pim.example.com/api/products&\
filter=status=active&\
action=export&\
format=pdf&\
mode=zip"

6. Digital Signage Integration

# Kiosk-Display mit automatischem Player-Start
index.html?config=templates/infoscreen.json&data=api/announcements.json&action=play

# Parameter für Kiosk-Modus
index.html?config=templates/slideshow.json&data=data/products.json&action=play&loop=true&interval=5000

Integration mit Drittsystemen

Publixx lässt sich nahtlos an beliebige Datensysteme anbinden. Ob PIM, PXM, CMS, CRM oder ERP – jede Datenquelle, die eine REST API mit JSON-Output bereitstellt, kann visualisiert werden.

Anforderungen an die Datenquelle

• REST API mit JSON-Response
• CORS-Header erlauben (oder Proxy nutzen)
• Flache Struktur bevorzugt (kein tiefes Nesting)
• Array von Objekten für Multi-Record Templates

Ideales Datenformat

[
  {
    "id": "10001",
    "name": "Produkt A",
    "description": "Kurze Beschreibung",
    "price": 799.00,
    "image": "https://cdn.example.com/product-a.jpg",
    "features": ["Feature 1", "Feature 2", "Feature 3"],
    "specs": [
      { "label": "Gewicht", "value": "250g" },
      { "label": "Material", "value": "Aluminium" }
    ]
  },
  { ... }
]

Integrations-Architektur

Typische Szenarien

Beispiel: API-Endpoint anbinden

# Publixx direkt mit API-Endpoint aufrufen
index.html?data=https://api.example.com/products?format=json

# Mit Authentifizierung (via Proxy)
index.html?data=https://proxy.incoxx.com/api/products

# Kombination mit Template
index.html?config=templates/product-sheet.json&data=https://pim.example.com/api/export/products

Best Practices

Template-Design

1. Grid verwenden: Konsequentes 8px Grid für professionelles Layout
2. Elemente gruppieren: Verwandte Elemente nah beieinander
3. Hierarchie schaffen: Schriftgrößen und -gewichte für visuelle Hierarchie
4. Weißraum nutzen: Genug Padding und Abstände
5. Konsistente Farben: Farbschema definieren und einhalten

Daten-Management

1. Flache Strukturen: JSON möglichst flach halten
2. Konsistente Feldnamen: CamelCase oder snake_case durchgehend
3. Fehlende Werte: Leere Strings statt null
4. Asset-Base nutzen: Zentrale URL für alle Bilder
5. vfetch für Relationen: Mehrere Datenquellen verknüpfen

Performance

1. Live-Modus aus: Bei vielen Elementen deaktivieren
2. Bild-Optimierung: Bilder vor Upload komprimieren
3. PQL-Filter: Daten vor Rendering filtern
4. Zoom reduzieren: Bei komplexen Templates Zoom < 100%

Troubleshooting

Bilder werden nicht angezeigt

Ursachen:

• Falsche URL im Datensatz
• CORS-Probleme bei externen Bildern
• Asset-Base-URL nicht konfiguriert

Lösungen:

• URL im Browser testen
• Asset-Base-URL setzen
• Bilder auf gleicher Domain hosten

Export funktioniert nicht

Ursachen:

• Browser-Pop-up-Blocker
• Zu viele Datensätze (Timeout)
• Fehlende Daten

Lösungen:

• Pop-ups erlauben
• Kleinere Batches exportieren
• Daten validieren

Performance-Probleme

Lösungen:

• Live-Modus deaktivieren
• Bilder komprimieren
• Zoom reduzieren

Keyboard Shortcuts

Editor

Fullscreen Player

Format-Referenz

Print-Formate (mm)

Screen-Formate (px)

© 2025 incoxx GmbH | Publixx Template Designer
Version 2.0 | Stand: Dezember 2025