Skip to main content

Responsives Design verwenden

Anmerkung

Ab der CODESYS Visualization Version 4.7.0.0 können Sie Visualisierungen responsiv gestalten.

Ein responsives Design passt sich automatisch an die Größe und Ausrichtung der Darstellungsvariante an. Je nachdem, ob es sich um einen Desktop, einen Laptop, ein Tablet, ein Panel oder ein Smartphone handelt, werden die Vorgaben des jeweiligen Geräts berücksichtigt und die Visualisierung in Größe und Layout angepasst.

Um dieses komfortable Feature für den Visualisierungsbenutzer zur Verfügung zu stellen, müssen Sie die Darstellungsvarianten und die Visualisierungselemente abhängig von der Clientgröße konfigurieren. Dies ist für die WebVisu relevant, da hier unterschiedliche Clientgrößen vorliegen. Für die TargetVisu kann das Feature aber in gleicher Weise genutzt werden.

Hinweis

0_Sample_ProjectBeispielprojekt "Bedarfsorientiertes Design"

Responsives Design bietet sich vor allem für die WebVisu an. Aber auch bei der TargetVisu oder der Integrierten Visualisierung müssen Konfigurationseinstellungen vorgenommen werden.

Prozedur. Vorbereitung WebVisu

  1. Öffnen Sie das Objekt WebVisu unter dem Visualisierungsmanager.

  2. Legen Sie die Skalierungsart fest.

    • Aktivieren Sie die Skalierungoption Fest .

      Und aktivieren Sie die Option Automatisch ermittelte Clientgröße verwenden.

      Bei der Skalierungsart Fest wird der Inhalt des Visualisierungsobjekt (Hauptseite) unskaliert angezeigt. Die Darstellungsgröße wird automatisch ermittelt.

      Die Variable Container ist im Projekt bekannt.

      Sie können die Visualisierungselemente nun so wie unten beschrieben konfigurieren, um zu erreichen, dass diese Clientabhängig verschoben oder verbreitert dargestellt werden.

    • Oder aktivieren eine der Skalierungsoptionen Isotropisch oder Anisotropisch.

      1. Öffnen Sie den Visualisierungsmanager, der sich im Gerätebaum befindet.

        In Registerkarte Einstellungen in der Gruppe Zusätzliche Einstellungen befindet sich die Option Responsive Visualisierungsgröße.

      2. Aktivieren Sie die Option.

        Das Feature "Responsive Visualisierung" ist applikationsweit aktiviert.

      Bei den Skalierungsarten Isotropisch und Anisotropisch wird der gesamte Inhalt einer Hauptseite in die vom Client zur Verfügung gestellte Darstellungsgröße skaliert. Die Clientgröße wird automatisch ermittelt.

      Sie können die Visualisierungselemente nun so wie unten beschrieben konfigurieren, um zu erreichen, dass diese Clientabhängig positioniert und verbreitert dargestellt werden.

Zugriff auf Clientgröße

Um auf die Größe der aktuellen Visualisierung zuzugreifen, können die Variablen Visu.Width und Visu.Height in Ausdrücken eingefügt werden. Um auf die Größe des aktuellen Containers zuzugreifen, können die Variablen Container.Width und Container.Height in Ausdrücken eingefügt werden.

Um auf die Gesamtgröße des Clients in einer tief strukturierten Visualisierung zu bestimmen, können in Ausdrücken die Variablen VisuElems.CurrentClient.Width und VisuElems.CurrentClient.Height eingefügt werden. Solche Ausdrücke können Sie dann in den Eigenschaften von Visualisierungselementen angeben.

Damit kann auf die Gesamtgröße eines Clients in einer tief strukturierten Visualisierung zugegriffen werden. Beispielsweise kann so über das Hoch- oder Querformat entschieden werden.

Für weitere Informationen siehe: Position und Größe optimal anpassen

Verwendung mit Skalierungsart "Fest"

Bei der Skalierungsart Fest wird der Inhalt der Visualisierung unskaliert angezeigt. Die Elemente werden jedoch Client-abhängig verschoben oder verbreitert, wenn sie wie unten beschrieben konfiguriert sind.

. Visualisierungselement rechtsbündig andocken

Konfigurieren Sie dafür wie folgt:

  • Absolute Bewegung, Bewegung, X: Container.Width - Visu.Width

. Bereich füllen

Dies ist mit den Elementen Trend, Trace oder Kartesisches XY-Diagramm möglich.

Konfigurieren Sie dafür wie folgt:

  • Relative Bewegung, Bewegung unten rechts, X: Container.Width - Visu.Width

  • Relative Bewegung, Bewegung unten rechts, Y: Container.Height- Visu.Height

. Neue Position für ein Element festlegen

Konfigurieren Sie dafür wie folgt:

  • Absolute Bewegung, Bewegung, X: SEL(IsPortrait(Container), 0, -250)

  • Absolute Bewegung, Bewegung, Y: SEL(IsPortrait(Container), 0, 150)

. Ausblenden eines Elements

Die Elementeigenschaft Unsichtbarkeit ermöglicht für die verschiedenen Clientgrößen die Darstellung von unterschiedlich vielen Elementen.

Konfigurieren Sie dafür wie folgt:

  • Zustandsvariablen, Unsichtbarkeit: IsPortrait(Container)

Verwendung mit Skalierungsart "Isotropisch" oder "Anisotropisch"

Bei den Skalierungsarten "Isotropisch" und "Anisotropisch" wird der gesamte Inhalt einer Hauptseite in die vom Client zur Verfügung gestellte Darstellungsgröße skaliert. Wird die Seitenausrichtung, beispielsweise eines Tablets, von Querformat ("Landscape") auf Hochformat ("Portrait") gedreht, passt der Inhalt nicht zum Seitenverhältnis. Es entstehen große Balken und die Seite kann nicht optimal gefüllt werden.

Um dies zu vermeiden, war es bisher nötig, jeweils eine eigene Seite (Visualisierung) für die Formate Portrait" und Landscape zu erstellen. Diese werden über den ClientListener mit der richtigen Einstiegsseite gestartet. Dies kann nun einfacher über eine responsive Größenanpassung erreicht werden, ohne dass die Visualisierungsobjekte dupliziert werden müssen.

Bei der responsiven Größenanpassung von Querformat nach Hochformat werden Kacheln, die sich weiter rechts befinden, durch eine absolute Bewegung nach rechts unten verschoben. Die aktuelle Seitengröße passt sich der aktuellen Clientgröße dynamisch an und die Elemente werden darin optimal positioniert. Bei einem Wechsel von Hochformat nach Querformat werden die Elemente in die umgekehrte Richtung verschoben.

Beispiel 25. Beispiel

Die Hauptseite einer Visualisierung besteht aus mehreren "Kacheln", die mit Frame-Elementen programmiert sind. Diese Frame-Elemente müssen neu positioniert und verschoben werden, wenn sich die Ausrichtung der Visualisierung ändert und sie an die aktuelle Darstellungsgröße angepasst werden.

. Kachel in X- und Y-Richtung verschieben

Konfigurieren Sie wie folgt:

  • Eigenschaft Absolute Bewegung, Bewegung, X: SEL(IsPortrait(Container), 0, -250)

  • Eigenschaft Absolute Bewegung, Bewegung, Y: SEL(IsPortrait(Container), 0, 150)

Implementierung IsPortrait für die Ermittlung der Visualisieurngsgröße

FUNCTION IsPortrait : BOOL
    VAR_INPUT    sizeProvider : VisuElems.ISizeProvider;
END_VAR
IF sizeProvider.Width < sizeProvider.Height THEN 
    IsPortrait := TRUE;
END_IF

Berechnung der Verschiebung in X und Y-Richtung mit typischen Ausdrücken unter der Eigenschaft Absolute Verschiebung:

_visu_responsive_design_example.png


In diesem Abschnitt:
Siehe auch: