This topic offers step-by-step instructions to design a simple UI that indicates the status of the user button and on-board LED. You need Qt Design Studio to get started. If you don't have it installed, install it using either Qt Online Installer or Qt Maintenance Tool.

The following instructions guide you through the complete design process:

1. Create a new project:
   • Launch Qt Design Studio and click Create Project.

     

   • Select the Qt for MCUs tab in the New Project wizard.
   • Set Width to 800 and Height to 480 for the screen resolution.

     

   • Name your project and click Create.

     

2. You should now see the Design Mode UI and the boilerplate project with a Rectangle and Text item.

   

3. Select the Rectangle either in the Navigator pane or Form Editor to change its properties in the Properties pane:
   • Change the Fill color property to black either by using the color picker or entering Hex code (#000000) manually.

     

4. Select the Text item either in the Navigator pane or Form Editor to change its properties:
   • Change Text Color to white either using the color picker or entering Hex code (#ffffff) manually.
   • Change Units to px and Size to 20.
   • Change Text to LED1.

     

5. Add the button rectangle:
   • Find the Rectangle component in the Components pane under the Basic components. Drag it onto the Rectangle in the Navigator pane.

     

   • Select the new rectangle in the Navigator pane to change some of its properties in the Properties pane:
     • Change its Fill color property to grey by either using the color picker or entering the Hex code (#808080) manually.
     • Set its size to 200 W x 100 H.

       

     • Switch to the Layout section in the Properties pane. Anchor the rectangle to the center of its parent.

       

     • Drag the existing Text component onto the new Rectangle.

       

6. Assign a unique ID to each item:
   • Name the Text item as ledStateText.

     

   • Name the inner Rectangle item as statusRect.
   • Name the parent Rectangle item as backgroundRect.
7. Create a pressed property for statusRect:
   • Select statusRect in the Navigator pane.
   • Select Connection View from the View > Views menu.

     

   • Switch to the Properties tab in the Connection View.
   • Click + to add a new property. Enter pressed under Property, select bool as Property Type and false as Property State.

     

   • Switch to the Bindings tab in the Connection View.
   • Click + to add a new binding.
   • Select color in the Property column for new binding.
   • Right-click on the new binding to select Open Binding Editor from the context menu, enter the following expression, and click OK.

     statusRect.pressed ? "#41cd52" : "#808080"

   Note: The C++ backend, which you will add in the next chapter, modifies the pressed boolean property.

   

8. Save and close.
   • Select File > Save All to save your change.
   • Select File > Close Project <your-project-name> to close the project.