# 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. 

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2Fo9ssJLtnuW22ZlmUqAhm%2FFont%20Generator.PNG?alt=media&#x26;token=c44fb243-6118-4521-95e6-e486249f02a4" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FYmwWG48I2pVwsNqLVsKI%2FFonts%20Toolbar.PNG?alt=media&#x26;token=49c11dd1-f4f2-4ee3-9121-285a86b23c71" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FJv8IBp4qk3wgBFD2IaGF%2FToolbar.PNG?alt=media&#x26;token=dca319c6-0c67-4d21-a7ae-ae10394f70c0" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FMjfMYed1r4tgSaXsVtYM%2FSwitch_Textbox%20placement.PNG?alt=media&#x26;token=6d5e9cf5-1aa9-46a6-ace5-eba133f20e5a" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FO8dExRoxVLvrekRp5cEa%2FWidget%20Attributes.PNG?alt=media&#x26;token=17ce13c8-954e-4c36-ace6-2dcfb1d36741" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2F8FvdMm4nwEJXQrg1jpxt%2FPurple%20Page%20Color.PNG?alt=media&#x26;token=38dc4666-d930-4882-a6d4-c4810ea2660a" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FSnLwS7O2GW2Ie9QCnsa3%2Ftransparent.PNG?alt=media&#x26;token=0001917f-bb2f-4aa6-bd3b-060884f6a29a" alt=""><figcaption></figcaption></figure>

Now you can click on the Debug button to simulate your interface.&#x20;

<figure><img src="https://2294485001-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsTQPf3S87QRlvhJfhPos%2Fuploads%2FAU0Jk4e9H5FKWVXLW9E0%2FSimulator.PNG?alt=media&#x26;token=cc9b44b0-9838-4c64-9175-8fbd54733e55" alt=""><figcaption></figcaption></figure>

Now lets write some code to make the buttons actually do something.&#x20;