Using the interactive functions in standard TwinCAT HMI projects

Both the Interactive Dashboard and the Interactive Chart function can be integrated into any TwinCAT HMI project independently of the One Click Dashboard. This requires a valid TwinCAT Analytics Runtime or Runtime Base license (TF3550 or TF3551) on the target system.

Installation of the NuGet packages

The required components (Analytics Framework Controls and the Analytics Server Extension) can be integrated into the HMI project via NuGet packages. To do this, the packages "Beckhoff.TwinCAT.HMI.Analytics.ControlsExtension" and "Beckhoff.TwinCAT.HMI.Analytics.Controls" must be installed in the NuGet Package Manager.

After installation, the "TcHmiAnalytics" server extension is located in the HMI project under the server node. If this does not start automatically, it must be started manually by right-clicking on the extension.

Adding the Layout Manager control

Dynamic and user-specific layouts can be created using the Layout Manager control. The Layout Manager control can be inserted into the HMI project via the toolbox using drag and drop. It is located in the "Beckhoff.TwinCAT.HMI.Analytics" area. The Layout Manager is similar to the Container Control. The difference is that the controls can be repositioned in the browser.

Using the interactive functions in standard TwinCAT HMI projects 1:

Setting the properties of the Layout Manager control

For the Layout Manager control to function optimally, the following properties should be set:

Name

Description

Identifier

Once layouts have been saved with the server extension, the identifier should no longer be changed. Otherwise, saved layouts can no longer be assigned.

WidthMode

Selection “Value” should not be changed.

HeightMode

Selection “Value” should not be changed.

The following parameters can be set optionally:

Name

Description

DarkMode

Selects whether to display the control in DarkMode.

MobileViewWidth

Pixel width from which to switch to Mobile View.

Number of columns

Number of columns that the layout should include in the normal view.

Grid Gap

Percentage distance between the controls that are positioned on the Layout Manager.

UseCustomRowHeight

This parameter can be used to activate the fixed row height, which can be set using the RowHeight parameter. Otherwise, a dynamically scaled height is used.

RowHeight

This parameter can be used to specify the row height in pixels.

LockControls

This parameter can be used to prevent interaction with the existing controls in the layout in Edit mode.

IsAnalyticsUse

This property should only be activated if the Layout Manager control is used in an Analytics-One-Click-Dashboard. This positions the menu of the Layout Manager control appropriately on the layout.

MenuControlSymbol

A control of the "Menu" type (also from the "Beckhoff.TwinCAT.HMI.Analytics" area) can optionally be linked here. This should always be visible on the dashboard and placed on the "Desktop.view". The Edit mode can also be opened and closed via the Menu control.

Adding controls

Any controls can then be added to the Layout Manager control. These can be moved as required in HMI engineering.

Using the interactive functions in standard TwinCAT HMI projects 2:

If a layout has been saved for a user using the interactive function, the items are loaded from the saved layout. If further controls are added at a later date, they are sorted into a free space within the layout. Removed controls, on the other hand, disappear directly from the layout.

Using the interactive functions in standard TwinCAT HMI projects 3:
Using the interactive functions in standard TwinCAT HMI projects 4:

Interactive chart controls can also be added in the web browser.

Building the project

To be able to use the functions of the Interactive Dashboard and Interactive Charts, the project must be built with user authentication.

Using the interactive functions in standard TwinCAT HMI projects 5:

Making user-specific changes

The interactive functions can then be used in the web browser. Information on the use of the Interactive Dashboard and the Interactive Chart can be found on the following pages.

Exporting and importing layout and chart configurations

The configurations of layouts and charts saved in the "TcHmiAnalytics" server extension can be exported and imported. This is useful if the configurations are to be transferred from a remote project (e.g. running on an HMI server) to a local project. Alternatively, the configuration of a remote project can also be updated.

The configurations can be exported and imported into the server extension via the Config page of the respective HMI project.

Using the interactive functions in standard TwinCAT HMI projects 6: