Introduction

Framework controls are user-specific controls that are not created with the graphical WYSIWYG editor. Framework controls are used if the desired behavior cannot be mapped with the standard controls or a user control. Unlike a Code Behind file, a framework control can be used independently of the HMI project, so that the source code can be reused.

Each control must have a reference in Manifest.json within a framework package in order to be able to use it.

Technology

Framework controls are developed using web development tools.

• HTML: Type and structure of the elements of the framework control
• CSS: Design of the elements of the framework control
• TypeScript/JavaScript: Logic behind the elements of the framework control

Developers are no longer bound to the TwinCAT HMI controls and can use all the elements and functionalities they are already familiar with from web development within a framework control. The standard TwinCAT HMI controls are implemented on the same basis as a framework control. It is also possible to reuse the TwinCAT HMI controls in the framework control or to add user-specific properties.

Application scenarios

Framework controls can map customer-specific and application-specific requirements. The following use cases can be implemented with a framework control:

• Mapping of complex TypeScript/JavaScript logic
• Reusing HTML, JS and CSS in a control
• Dynamic elements: Adding and removing HTML elements and controls at runtime
• Developing responsive controls
• Realizing and integrating 3D models

Use

The framework controls form part of a framework project and can be integrated directly as references in a TwinCAT HMI project if both projects are in the same Solution. Furthermore, it is possible to export the framework project as a NuGet package and install it in different HMI projects. In this way, it is possible to implement application-specific control libraries. Within the HMI project, a framework control is used like a standard TwinCAT HMI control.