There are several TwinCAT HMI ‘getting started’ resources out there – maybe you’ve found one and gotten started. But as you’re designing your HMI, you might be missing out on a few easy-to-miss things that are really nice to have in your toolbox.
Interface and Editing
You Can Select Multiple Controls and Change the Same Parameter for all Controls at Once
Have a bunch of items in a grid, each one with the same 5% margin from the left, and suddenly you decide 3% looks much nicer? No need to click through each one nor find and replace in the HTML source files! Just select all controls and change the parameter in the properties tab. The property you changed is now changed for every control you selected.
The Document Outline is a Great Help When Working on a Screen
Having trouble selecting a control, or is a control lost behind another? As great as the main WYSIWYG (what-you-see-is-what-you-get) editor screen is, the Document Outline provides greater visibility into nested controls (when using Grids and Containers) and invisible controls. I almost always have this pinned to my XAE layouts when developing with TwinCAT HMI.
Symbols and Parameters
“Symbol” and Related Terms to Know When Searching Infosys
Symbol just refers to a tag or variable, in TwinCAT HMI. There are variations:
- Server Symbols are symbols saved in the TwinCAT HMI server. Most notably Mapped Symbols are a type of server symbol which comes from the PLC.
- Internal Symbol are symbols which are limited to a single browser instance.
- Symbol Expression refers to the text
You Can Double Click on a Symbol to Pop Up a Nifty Binding Details Window
When you have a symbol in a data binding or function binding, you can double click on it to pop up a ‘Edit Binding’ window. This can show you some details on modes and settings and can also be used to quickly edit the symbol name. In the screenshot below, I might have a similar ‘IsAlarmLowEnabled’, and I can switch this symbol binding to that symbol more quickly than reopening the Create Data Binding window
When Making a Parameter for a User Control, Comments are Very Underrated
User controls are great for creating reusable custom controls, but they’re even better when you comment any parameters you make. Now, not only can developers that use your control (including future you, probably) hover to see your comment, they’ll also be able to hover to see the datatype!
Function Bindings and Scripting
Function Bindings are Basically Javascript
Consider a function binding as a continually evaluating single JS expression where symbol expressions get evaluated as their value and the result of the JS expression is what the parameter sees.
Remember that the function binding accepts and evaluates only a single JS expression. With that in mind…
“IIFE”s are incredibly useful when you want multiple expressions in a function binding but don’t want to write a full TwinCAT HMI function
Custom Javascript or Typescript functions in TwinCAT HMI are an excellent tool, especially when you will need to run the same snippet in multiple places. But sometimes you want to have a few expressions together in a one-off function binding. Ordinarily, one can’t do the following in a function binding:
let a = 1;
let b = 2;
return(a+b);
Well, you could write that in a function binding, but you won’t get anything useful back. Instead, you can write this:
(function (){
let a = 1;
let b = 2;
return(a+b);
})();
I’ve grown to really love TwinCAT HMI for its power and extensibility, for industrial HMI applications from simple to complex. I hope these tips are useful as you create your design.
Contact us today to learn more about how we can help you achieve your goals, and our range of Automation solutions – including TwinCAT HMI services.