dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorConfiguring and Starting Display Variants dl-breadcrumb-item__separatorExecuting as CODESYS WebVisu
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Executing as CODESYS WebVisudl-permalink__symbolPermalink
NOTICE

NOTICE
NOTICE
NOTICE

NOTICE

NOTICE

Recommendations for data security

In order to minimize the risk of breaches of data security, we recommend the following organizational and technical measures for the system on which your applications run:

As far as possible, avoid exposing the PLC and control networks to open networks and the Internet. For protection, use additional data-link layers such as a VPN for remote access and install firewall mechanisms. Limit access to authorized persons, change any existing standard passwords during the initial commissioning and continue to change them regularly.

If you still want to publish your WebVisu, then we strongly recommend that you assign it at least a basic password protection to prevent access to the functionality of your PLC over the Internet.

You can execute a visualization as CODESYS WebVisu.

The requirement for this is that the runtime system contains a web server with WebVisu support. This enables communication between target system and web browser. The web server on the target system is started as soon as an application with WebVisu configuration is started and runs until all applications with WebVisu are ended. The device can then display visualizations in connected HTML5-capable web browsers.

The web-based display variant of the CODESYS Visualization enables remote access to a plant as well as its remote monitoring, service and diagnosis over the Internet. A web browser communicates by Java Script (optionally with SSL encryption) with the web server in the controller and displays the visualization by means of HTML5. This technology is supported by virtually all browsers and is thus also available on terminal devices with iOS or Android.

Configuring and starting display variants

An executable visualization ‎visMain‎ exists in the project.

  1. Select the object “Visualization manager” and select the command “Add object”.

  2. Select the object “WebVisu” and enter the name ‎WebVisu_A‎.

    There is a new object in the device tree underneath the object “Visualization Manager”. The associated editor opens.

    The visualization task ‎VISU_TASK‎ is automatically added under the task configuration.

  3. Select the visualization ‎visMain‎ in the “Start Visualization”.

  4. In “Name of .htm file”, enter the name ‎webvisuA‎.

  5. Click on “Show used visualizations” and check whether the selected visualization is activated for a download to the associated device.

    The visualization is configured. The settings under “Scaling options” determine the window size and the scaling.

  6. Start a suitable runtime system with web server and WebVisu support.

    Configure the communication settings for your system.

    The runtime system runs.

  7. Compile, load and start the application.

    The application and the web server run.

  8. Start a web browser with the following address: ‎http://localhost:8080/webvisuA.htm‎

    The page is displayed and you can see the data of the application and operate the application.

See also

Calling a page in the web server

Requirement: A visualization with WebVisu is started.

  1. Start a current browser with JavaScript and support of HTML5-Canvas, e.g. Firefox, Chrome, IE>=9.

  2. Enter the following address in the web browser:

    ‎http://localhost:8080/webvisu.htm‎

    Formal: ‎http://<IP address of webserver>:<port of webserver>/<name of HTM-file>‎

    ‎<name of HTM-file>‎ is the HTML start page of the visualization defined in the object “WebVisu”.

    The page is displayed and you can see the data of the application and operate the application.

Identifying WebVisu

In order to be able to identify a WebVisu with the help of the library block ‎VisuFbClientTagDataHelper‎, the WebVisu needs a name. In order to be able to specifically address it in the application, expand the URL call by the parameter ‎ClientName=<Name>‎.

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

See also

Using Responsive Design

In CODESYS Visualization version 4.7.0.0 and higher, you can design responsive visualizations.

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. Select the 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.

Example

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

Configure as follows:

• 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