test.con HMI example

Step by step on how to create an HMI in test.con

1. Creating a Standard project

Click on New Project:

choose a Standard application and a name for your application

The Standard application is necessary, since only the "User Kernel" has access to the Q.station Display.

2. The Basic HMI

You can access the basic page control task in "100.PCT" This controls the available pages.

Adding and deleting pages to this part of the program is not part of this article.

 

3. Create some HMI Elements

Switch to the "200.DPT" window by either choosing the Tab or via doubleclick.

Look for the "HMI Masks and Objects" folder in the Libraries:

Use drag and Drop to pull an LED onto the "200.DPT" programming surface:

The drop will automatically open the mask designer:

Choose the "151.Red" Page and click Yes

This will create a LED object on the Red page of the Basic HMI and link it to the LED Block on the programming surface.

You can Edit the name, colours, position, size and shape of the LED in the Object settings:

Then close the Mask designer with OK.
The HMI LED Block will now show the HMI surface and the object it is linked to:

Now drag and drop a "Bitmap Button/Switch" onto the programming surface.

The Red mask object will automatically be suggested as the surface. Click OK to create the Button Object.

If you did not change the position of the LED, the Button will appear at the same position as the LED.

Change the X coordinate to 70 and width to 100. You can also use the mouse to move objects and change the size.

We suggest to move the object roughly to the desired place via mouse and then use the coordinates to do the fine adjustments. (Be aware, that the human eye is capable to see a single pixel off. Aligning the objects and distances will result in a much more orderly optic)

Click OK to accept the changes to the mask designer.

4. Connect the HMI elements

Now click the Output of the Button block and connect it to the Input of the LED block:

This will show the block numbers circled in red. The red circles appear because the blocks are processed in sequence according to their block number. In this case the LED will be processed before the button, which can sometimes cause issues.

We recommend to build projects and block numbers from left to right. You can change the block number by right clicking on one of the blocks and choosing "Block Number".

You can now write the project to your controller and will be able to push the Button on the HMI to light up the LED.