GUI Design

Step 1: Create a Font

The first thing that I need to do is to add a font for the HMI to use.

We will need to go to Tools->Font Generator to generate a font to use in the project. For this project I am going to use Times New Roman with a font size of 16. For encoding select UTF-8 to incorporate all languages.

After generating the font, I need to add the font by clicking on the Font tab in the bottom left toolbar. Then I need to click the plus icon and navigate to the directory where the font was saved.

Step 2: Design the Interface

Now I can design the user interface by using widgets that are in the toolbox in the top left toolbar.

For this tutorial I just want to simply turn on and off the relays as I want. This could be done with a button, a dual state button, or a switch. Since we are using the intelligent series I can use the switch to switch between the on and off state. I am also going to use a text box to label which switch controls which relay.

Next I want to use the Attribute toolbar to edit the properties of each widget. For example I want to change the text in the textbox to say relay one and relay two. I also want to change the text on the switches from the default False/True to OFF/ON.

I also want to change the page color from boring white to purple (37302). Again this can be done in the pages attribute toolbar.

You will notice that the textboxes still have a white backgound color. This can be fixed to also have a purple background color. To do this change the "sta" properties box from solid color to transparent.

Now you can click on the Debug button to simulate your interface.

Now lets write some code to make the buttons actually do something.