Sie können eine Visualisierung als CODESYS WebVisu ausführen.

Voraussetzung dafür ist, dass das Laufzeitsystem einen Webserver mit WebVisu-Unterstützung enthält. Dies ermöglicht die Kommunikation zwischen Zielsystem und Webbrowser. Der Webserver auf dem Zielsystem wird gestartet, sobald eine Anwendung mit WebVisu-Konfiguration gestartet wird und läuft, bis alle Anwendungen mit WebVisu beendet sind. Das Gerät kann dann Visualisierungen in verbundenen HTML5-fähigen Webbrowsern anzeigen.

Die webbasierte Anzeigevariante des CODESYS Visualization ermöglicht den Fernzugriff auf eine Anlage sowie deren Fernüberwachung, -wartung und -diagnose über das Internet. Ein Webbrowser kommuniziert per Java Script (optional mit SSL-Verschlüsselung) mit dem Webserver im Controller und stellt die Visualisierung mittels HTML5 dar. Diese Technologie wird von nahezu allen Browsern unterstützt und ist somit auch auf Endgeräten mit iOS oder Android verfügbar.

Konfigurieren und Starten von Anzeigevarianten

Aufrufen einer Seite auf dem Webserver

Identifizierung von WebVisu

Um eine WebVisu mit Hilfe des Bibliotheksbausteins ‎VisuFbClientTagDataHelper‎ identifizieren zu können, benötigt die WebVisu einen Namen. Um ihn in der Anwendung gezielt ansprechen zu können, erweitern Sie den URL-Aufruf um den Parameter ‎ClientName=<Name>‎.

Beispiel:‎ http://localhost:8080/webvisu.htm?ClientName=VisClientxy‎.

Using Responsive Design

A responsive design automatically adapts to the size and layout of the display variant. Whether the device is a desktop, a laptop, a tablet, a panel, or a smartphone, the specifications of the respective device are taken into account and the size and layout of the visualization are adapted.

In order to provide this convenient feature to the visualization user, you need to configure the display variants and the visualization elements depending on the client size. This is relevant for the web visualization because there are different client sizes here. However, the feature can be used in the same way for the target visualization.

Responsive design is particularly suitable for the web visualization. However, the configuration settings also need to be made for the target visualization or the integrated visualization.

Preparing the web visualization

1. Under the Visualization Manager, open the WebVisu object.

2. Specify the scaling type.

• Select the „Fixed“ scaling option.

And select the „Use automatically detected client size“ option. With the „Fixed“ scaling type, the contents of the visualization object (main page) are displayed unscaled. The display size is determined automatically.

The ‎Container ‎ variable is recognized in the project. Now you can configure the visualization elements as described below to make sure that they are displayed moved or resized depending on the client.

• Or select one of the scaling options, „Isotropic“ or „Anisotropic“.

a. In the device tree, open the Visualization Manager. The „Responsive visualization size“ option is located on the „Settings“ tab in the „Additional Settings“ group.

b. Wählen Sie die Option. The "responsive visualization" feature is activated in the entire application. With the „Isotropic“ and „Anisotropic“ scaling types, the full contents of a main page is scaled to the display size provided by the client. The client size is detected automatically.

Now you can configure the visualization elements as described below to make sure that they are displayed positioned or resized depending on the client.

Using the "Fixed" scaling type

With the „Fixed“ scaling type, the contents of the visualization are displayed unscaled. However, the elements are moved or resized depending on the client if they are configured as described below.

Right-aligned docking of the visualization element

To do this, configure as follows:

• Absolute movement, Movement, X: ‎Container.Width - Visu.Width‎

Filling an area

This is possible with the Trend, Trace or Cartesian XY Chart elements.

To do this, configure as follows:

• Relative movement, Movement bottom-right, X: Container.Width - Visu.Width

• Relative movement, Movement bottom-right, Y: Container.Height- Visu.Height

Setting a new position for an element

To do this, configure as follows:

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

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

Hiding an element

The Invisible element property enables the display of many different elements for the different client sizes.

To do this, configure as follows:

• State variables, Invisible: ‎IsPortrait(Container)‎

Using the "Isotropic" or "Anisotropic" scaling type

With the "isotropic" and "anisotropic" scaling types, the full contents of a main page is scaled to the display size provided by the client. If the page orientation of a tablet, for example, is rotated from landscape to portrait, then the contents do not match the aspect ratio. Large bars are created and the page cannot be filled optimally.

In order to avoid this, it was previously necessary to create a separate page (visualization) for each of the portrait and landscape formats. These are started via the ClientListener with the correct starting page. Now this can be achieved more easily via responsive resizing without having to duplicate the visualization objects.

With responsive resizing from landscape to portrait format, tiles which are farther to the right side are moved to the bottom right by an absolute movement. The current page size adapts dynamically to the current client size and the elements are optimally positioned within it. When changing from portrait to landscape format, the elements are moved in the opposite direction.

Beispiel

The main page of a visualization consists of several "tiles" which are programmed with frame elements. These frame elements must be repositioned and moved if the orientation of the visualization changes and they are adapted to the current display size.

Moving the tiles in the X and Y direction

Konfigurieren Sie wie folgt:

• Property: Absolute movement, Movement, X: SEL(IsPortrait(Container), 0, -250)

• Property: Absolute movement, Movement, Y: SEL(IsPortrait(Container), 0, 150)

Implementation of IsPortrait for determining the visualization size

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

Calculation of the movement in the X and Y direction with typical expressions under the „Absolute movement“ property