Continuing on with the power of TwinCAT HMI, this blog will dive into the different types of templates available. Templates are super useful because similar to function blocks and functions in the PLC, these reusable controls speed up HMI development time by covering the core components such as buttons for sending commands to the PLC, displaying states, etc.
There are three ways to create a template (in increasing difficulty, modularity, and flexibility):
- User Control
- Framework Control via Reference
- Framework Control via NuGet
The example shown in this blog is a template inspired by expression and indirect tag bindings in Ignition. The ability to dynamically reference different tags from the same control is super useful when there are multiple instances of an object. For example, this allows for a control to reference a dropdown value to determine which instance to show in that control.
User Control
This is the simplest way to create a template. Using the graphical WYSIWYG (What You See Is What You Get) editor, parameters can be defined to use within the control.
The key parameter we will focus on here is the “path” parameter. This is a string that contains the path to the tag instead of passing the tag directly into the control.
Creating a user control will make it available in the Toolbox to be added into the application.
Here, we can see how the path is used in the application. Variables (Settings.number1 and Settings.number2) have been defined in the PLC. By concatenating the base string (Settings.number) with a number entered into a different control, this control will bind itself to the changing tag path.
This is done by defining a change event on the “path” parameter. Whenever the value of the path changes, the old binding to the Tooltip gets removed and the new binding gets added. The Tooltip is used here to store the raw value of the variable, whereas the value is shown based on the Tooltip value and the “conversion” parameter. A custom function was created to bind the path to the specific control. The key function to use here is “TcHmi.Binding.createEx2”.
As seen in the video below, the path is switching between Settings.number1 and Settings.number2 based on the value of the second input control. The value is also written to the PLC.
Please see video in LinkedIn article.
Framework Control via Reference
Similar to the PLC side of an application, it is useful to put common functionality into a library. TwinCAT HMI Framework Controls allows a developer to do this. On top of that, some controls are either impossible or incredibly difficult to create using a WYSIWYG editor. This includes editing SVG’s dynamically or implementing complex JavaScript libraries for example. See the full documentation here.
Shoutout to @Florian-Heringa for their guide on Github for helping get started on this. Please read through the PDF on how to efficiently convert a User Control to Framework Control by highlighting patterns of what to look for and how to complete the conversion. There are also two projects that show examples of the simple conversions that must be done for most user controls.
The downside of the Framework Control is there is no WYSIWYG editor. At Control Works, we have found that creating and testing the User Control first and then converting it to a Framework Control is the best process for this.
The core of what was shown above happens in the Attach function.
Please do not be scared off by advanced programming methods such as getters and setters! They are not difficult to understand with a couple of examples and usually both will just act as a passthrough.
Framework Control via NuGet
Once everything is working via a Reference, it is super simple to turn the project into a NuGet package by following these steps.
This is where all the hard work really pays off. Once the control is in a NuGet package, it can be easily added to projects, shared between developers, etc.
The only note we have here is a discrepancy in the location in which the NuGet package is stored. The actual location for 4026 users is “C:\ProgramData\Beckhoff\NuGetPackages” based on this documentation.
As always, please reach out to Control Works if you have any questions, we are happy to help with your next application!
