Settings

Display Devices

Im Bereich Display Devices kannst du vordefinierte Anzeigegrößen für verschiedene Endgeräte konfigurieren. Diese Funktion ermöglicht es dir, seitenbasierte Layouts gerätespezifisch anzupassen, ohne mehrere Pages anlegen zu müssen.

Ziel und Nutzen

Wenn du eine neue Page erstellst, kannst du dort bereits ein festes Layout definieren (z. B. [code_block_0] für Desktop).
Man könnte sich fragen: Warum braucht es dann zusätzlich „Display Devices“?

→ Die Antwort: Damit du dieselbe Page je nach verwendetem Gerät völlig unterschiedlich darstellen kannst.

Mit Display Devices kannst du:

  • Für den Desktop z. B. viele komplexe Controls sichtbar machen
  • Für das Smartphone dieselbe Page anzeigen – aber in stark reduzierter, angepasster Form

Du wechselst dabei nicht die Page, sondern nur das Darstellungslayout + aktive Controls, abhängig vom gewählten Gerät.

Praktisches Beispiel

  1. Du erstellst eine Page mit Layout [code_block_0] für Desktop
  2. Danach konfigurierst du ein Display Device [code_block_2]
  3. In der Page klickst du im Editor oben links auf das Device-Icon (Laptop + Smartphone)
  4. Du wählst „iPhone 15 Pro“ und passt die Page visuell, strukturell und funktional an:
    • Weniger Controls
    • Größere Buttons
    • Andere Anordnung
    • Andere Steuerlogik (z. B. Touch-optimiert)

Im Ergebnis:
Ein Gerät – eine Page – eine Darstellung.
Ein anderes Gerät – dieselbe Page – ganz andere Darstellung.

Neue Display-Größe anlegen

  1. Klicke auf „+ New“, um ein neues Gerät zu konfigurieren.
  2. Trage folgende Werte ein:
    • Name (z. B. „iPhone 15 Pro“ oder „WP400 7inch“)
    • Width (Breite in CSS-Pixeln, z. B. [code_block_3])
    • Height (Höhe in CSS-Pixeln, z. B. [code_block_4])
    • Min-Width / Max-Width (optional)

Beispielwerte:

  • iPhone 15 Pro: [code_block_5]
  • WP400 (7", physisch 1024×600 px): empfohlen [code_block_6] CSS px

Anwendung im Editor

  1. Öffne eine bestehende Page
  2. Klicke oben links auf das Device-Icon
  3. Wähle eines deiner zuvor konfigurierten Geräte
  4. Passe das Layout und die Controls für genau dieses Gerät an

Alle Änderungen gelten nur für das gewählte Display Device – andere Geräte behalten ihre Konfiguration.

Wichtig

  • Unverzichtbar für responsive Design in PLCVisu
  • Besonders nützlich bei:
    • Statischen Containern
    • Resizbaren Layouts mit optimierten Varianten für kleine Geräte
    • Gerätespezifischer Funktionalität (z. B. unterschiedliche Navigation, reduzierte Anzeige)
  • Erspart das Anlegen mehrerer Pages für verschiedene Endgeräte