Beckhoff User Control, View, Region and Content

In TwinCAT HMI, user control is a control which is created by user.  A button that we find in the tool box is a control but it is system control provided by the HMI framework. User control is made by using multiple system controls.  We can make a composite control (by reusing system control as many as needed).  Then the composite control will be reused  as many time as needed. This is like a class in software engineering where we can make instance of it as many time as needed. Each instance can have different value for each class member. A User Control is an object type of its own.

A user control can be designed by following steps: We shall show the user control creation in the context of our home automation project.

In this example, the fictitious house automation has Lock (a device that can be used to lock the door), MainDoor (main gate to enter the yard) and water valve. All these devices have name and IsClosed boolean variables. These common properties will be displayed by the user control.

 

Final HMI

STEP 01:  Select the HMI project and new item

STEP 02:  Pick as many as needed basic control from the tool box and decorate your control.  In our example, we pick the name of the devices, an image and the status of the IsClosed variable. 

STEP 03: On the user control, press on ‘P’ and add all the needed parameters. We shall pass name (textblock), an icon (an image) , status (a text block) and a status image that indicates if the valve is open or closed.

 

STEP 04:  In the tool box, under HMI: User Control, we see our control. We drag and drop to the Desktop view 3 times and organize these. At this moment, if we run our example, we see an empty desktop view.

STEP 05: Select the first user control (instance of user control on the Desktop view) and press F4. This will bring the editor for providing parameters, remember we need to supply 4 parameters as our user control has 4 parameters.

STEP 06: Supply the needed parameters. First parameter is coming from the PLC program. 2nd parameter is the SVG image provided the project, this is just a device  symbol. 3rd parameter is Is_Closed variable that indicates if the valve/door is open or closed. Final parameters is also a path of a SVG image that will be shown when  the variable Is_Closed true or false. But the path is created by a Java Script function.

 

 

Download the project

We shall create a VIDEO CAST for this, please visit us again

View

An application can have many views. A user can jump from one view to another view and come back to previous view. All contents of the view is logically combined. By default, HMI engineering offers a default view, the name of the default view is “Desktop.view”. It is the landing page of any HMI system. We can load as many views possible depending on our need.

View can be used for HMI navigation purposes that we shall describe in next section.

 

We shall have 4 other views to our fictitious home automation system.

Desktop.view, default view, general info about the home automation system

Lockview.view, lock of the house info, status  and manipulation view

Thermometerview.view, it will display current temperature  and Hasoverheated alarm status

WaterValveview.view, shows the status if the valve is closed, is the solenoid valve open, valve opening/closing option

MainDoorview.view, it will display if the gate is closed, obstacle detected, allow user to insert opening time. This will give option to close/open the main gate.

Main view of the application: If we press on the icon, it will create a new view and that is displayed on the screen. We can come back to main view by pressing on the back arrow image.

The view are created by code behind file. We shall define a function for each icon in the code behind file as shown in the following code:

  // put this function block before the previous one otherwise it not work.
var destroyEvent = TcHmi.EventProvider.register(
'TcHmiImageValvetoMain.onPressed',
function (evt, data) {
var v1 = TcHmi.View.get();
console.log("hello");
TcHmi.View.load('Desktop.view', function (data) {
var v2 = TcHmi.View.get();
});
// Destroy to free event resources if event is no longer needed.
//But comment out if you need it
//destroyEvent();
}
);

TIP 01: Button, Image Id in different view should have unique name

TIP 02: If we want to have back and forth in the navigation then we should keep stuff in the memory by not destroying the event (comment out  destroyEvent())

TIP 03: We might need to reorganize the JavaScript function location inside the file for reference

TIP 04: These are done by JavaScript, so no event is configured in the image properties see more at https://www.w3schools.com/js/default.asp

Down load the source code from the link below. We shall have a YouTube Video on this here, please visit us later.

Region and Content

Region

The region is a container for content controls. The content to be displayed can be defined using the Target Content attribute. We can divide the screen to many region as necessary. The main advantage of region is better visibility and better user experiences. We can show or display in related region. One of the main use case is for example, we want to show static button in the left side all the time  but the content of right side changes as we press some other button for update the device status. Let take a look in our fictitious house automation system again as shown in the following image. As we see, we have at the top Status window where we want to display status of the device. In the left side, we have some sample button that does not change what ever we show in the pink area. At the bottom we have some images, if we click on any of this image then related  content are shown in the content area.

How to add region in visual studio:

=> From tool box  select region from the category HMI:System and drop into the desktop area

=> Change the properties of the region such as width, height, color (press F4 to get the property window)

If we press on the gate icon then the related status is shown on the top status area and the left hand side button remains there. The buttons are located in different region.

Content

A content control is an independent container object that can be loaded in a region. This control can be used, for example, 

to subdivide operating concepts into various contents. It is created under the TcHmi project tree with the context menu Add new Item.

How to create content in the visual studio:

=> Create a folder in the VS solution such as Contents

=> In the new folder, select Add | New Item  (rename it as it fits)

=> Decorate the new content page as necessary, we have 4 content pages in our example.

=> We inserted 4 images in the bottom area where we can click on an image and then we show the related content in the content area. In this case, we modify the properties of the image event (onPressed event)

Here is how the technique that shows how do we modify the content of the content area.

We shall introduce YouTube video soon that shows Step by Step

HMI Navigation

The desktop view is the start page for any application on which we can create by using Visual Studio Wizard for visualization purposes. There are no hard rules how we design the user interface. Look and feel, usability are the different factors which define how the UI will be structured.
A good method of increasing the tidiness is to split the visualization into various parts. To do this, divide it into various content objects.
These content objects can be displayed in different areas of the desktop view. For example, the visualization could be divided into
three areas in the desktop view: a status bar, a content area and a navigation bar area. Various content objects can be displayed in the content area during the runtime.
The contents of the status bar area and the contents of the navigation bar area can also be changed as needed. We shall design the HMI for our fictitious home automation system. First page will show the logo and there will be navigation at the bottom.