Du willst dynamische Seiten-Layout mit WebIQ erstellen? Du willst deine Web-Visualisierung responsive gestalten? Erlebe mit diese WEBIQ BEST PRACTICE DEMO die wichtigsten dynamischen Basis-Layouts und verstehe, wie du diese für deine eigenen Layouts verwenden kannst.

Warum sind in der Web-Visualisierung dynamische Layouts wichtig?

Die klassische Visualisierung ist pixelorientiert. Das bedeutet: alle Breiten und Höhen, sowie Positionen der Steuerelemente sind statisch mit Pixeln definiert. Folglich ist die HMI statisch. Sie hat keine Möglichkeit, sich an andere Bildschirmgrößen, Auflösungen oder Ausrichtungen anzupassen. Sie funktioniert nur für die eine Bildschirmgröße und -auflösung, für die sie entwickelt wurde.

In der Web-Visualisierung mit WebIQ hast du Zugriff auf die modernste und leistungsfähigste Layout-Technik für die HMI-Gestaltung: die Layout Container. Du baust dein Layout mit verschiedenen Layout-Containern auf, parametrisierst diese entsprechend und platzierst Deine Steuerelemente darin. Damit kannst du deine Web-HMI so erstellen, dass diese sich automatisch an verschiedene Bildschirmgrößen und -ausrichtungen anpasst.

Beispiel pixelorientierten vs. dynamisches Layout auf unterschiedlichen Bildschirmgrößen

Dynamisches Layout ist die Voraussetzung, wenn du deine Web-HMI auf verschiedenen Bildschirmgrößen darstellen willst (Responsive Design).

Was beinhaltet die WebIQ Layout Demo?

Die Demo beinhaltet verschiedene Basis-Layouts, die wir für dich mit den Layout Containern von WebIQ erstellt haben. Dazu gehören

Basis-Layouts der WebIQ Layout Demo

Du kannst Dir diese Basis-Layouts für Dein HMI-Projekt exportieren und verwenden. Du siehst in den Beispielen, mit welchen Layout Containern wir die Basis-Layouts erstellt haben und wie diese konfiguriert sind. Du kannst, wenn Du zwei oder drei Layouts miteinander verschachtelst, nahezu jedes beliebige dynamische Layout erstellen.

Wie haben wir die Basis Layouts mit WebIQ gemacht?

Die Basis-Layouts haben wir mit unseren zwei Layout-Containern erstellt:

Layout Container Vertical Flex
Layout Container Horizontal Flex

Diese findest in der Widget List unter der Kategorie „Layout Container“. Das Beste: Du musst nicht programmieren können, um diese zu nutzen. Klicken und Konfigurieren reicht aus.

Dimensionen: Fix, Prozentual oder Flex

Bei den Layout Containern ist die Einstellung der Dimensionen (d.h. der Breite bzw. der Höhe) entscheidend. Du kannst eine Breite bzw. Höhe wie folgt eingeben:

In Pixel
Prozentual
Oder flexibel

Schauen wir uns Breiten der Layout Container für folgendes Basis-Layout an:

Zweispaltig, 1. Spalte: 25%, 2. Spalte: 75%

Die Breite des ersten Layout Containers, welche die erste Spalte darstellt wird auf 25% gesetzt. Die Breite des zweiten Layout Containers, welche die zweite Spalte darstellt wird – logisch – auf 75% gesetzt.

Nun kommt der Trick mit dem Flex-Shrink

Wenn Du nun zwischen den Layout Containern einen Abstand von beispielsweise 8 px., bzw. einen Abstand vom linken und rechten Rand einfügst, dann wirst Du feststellen, dass das Layout nicht mehr funktioniert. Warum? Weil 8px. + 25% + 8px. + 75% + 8 px. mehr als 100% sind! Das hat zur Folge, dass das zweispaltige Layout rechts herausragt. Das ist nicht gut.

Was tun? Ganz einfach: du definierst, dass einer der beiden Spalten, bzw. Layout Container auch etwas schrumpfen darf. Und dazu verwendest du die Einstellung „flex-shrink“. Setze diese auf 1 und nun funktioniert das Layout perfekt. Ein prozentuale Breite von 75% und flex-shrink = 1 bedeutet, dass der betreffende Layout Container immer ca. 75% groß ist. Aber nicht ganz genau, denn er schrumpft in der Breite um die Abstände von 8 px. zu kompensieren. Das ist der Trick.

Breite der Layout Container bei zweispaltigem Layout mit 25% / 75% Spaltenbreite

Und nun werfen wir einen Blick auf folgendes Basis-Layout:

Zweispaltig, 1. Spalte: 250 px. (fix), 2. Spalte: flexibel

Die Breite des ersten Layout Containers, welche die erste Spalte darstellt wird – du hast bestimmt erraten – auf 250 px. gesetzt. Das bedeutet, dass die Breite immer 250 px. hat. Dem zweiten Container sagen wir nun, dass er den restlichen Platz verwenden soll. Dazu setzen wir „flex-grow“ und „flex-shrink“ jeweils auf 1. Das bedeutet, dass der Container in beide Richtungen wachsen oder schrumpfen kann.

Breite der Layout Container bei zweispaltigem Layout mit 250 px. (fix) + flexible Spaltenbreite

Mit dieser Information kannst Du Dir die verschiedenen Basis Layouts anschauen und verstehen, wie wir diese erstellt haben. Mit dem Mischen und Verschachteln von Layout Containern hast Du dann die komplette Bandbreite der Layout Möglichkeiten.

Viele Wege führen nach Rom

In der WebIQ Layout Demo präsentieren wir dir eine möglichst einfache Einstellung, ein Kochrezept, welches immer funktioniert. Du kannst auch andere Einstellungen verwenden, z.B. mit flex-grow. Auch damit kannst Du interessante Effekte und Layout-Verhalten erzeugen. Hier gibt es endlose Kombinationsmöglichkeiten und Verhalten zu entdecken. Aber wir wollen in dieser Demo nicht verwirren.

Wenn Du mehr wissen willst, dann kannst Du im Internet nach „Flex Container“ suchen und Dir die betreffenden Tutorials anschauen.

Anmerkung: Styling von Layout Containern

Du kannst die Layout Container mit einem Rahmen versehen, du musst es aber nicht. In unserer WebIQ Layout Demo haben wir die Layout Container mit einem dezenten Grau von dem hellen Hintergrund abgesetzt. Dazu selektierst du den Container, gehst du im Style Cockpit zum Abschnitt „IQ STYLING“ und setzt dort die Backgroundcolor auf das betreffende Hellgrau. Du kannst aber auch den Hintergrund grau einfärben und die Layout Container in Weiß absetzen. Spiel einfach etwas mit den Möglichkeiten herum.

Jetzt bist Du dran

Probiere es einfach selbst aus. Schau Dir die Live-Demo der WebIQ Layout Demo an und lade sie in den WebIQ Designer ( > Download). Hier kannst Du sehen, wie wir die Layouts gemacht haben und deine eigenen Erfahrungen mit den Layout Containern sammeln.

Wenn Du bisher noch nicht WebIQ heruntergeladen hast, klicke doch einfach unten, um Dich zu registrieren und die kostenlose Testversion von WebIQ herunterzuladen!

Und nun viel Spaß beim Layouten!