C

Design UI using Qt Design Studio (RH850)

This topic offers step-by-step instructions to design a simple UI that indicates the status of the user button and the 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:
    • Open Qt Design Studio and select Create Project.

      Initializing a project in Qt Design Studio.

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

      Setting the screen resolution in Qt Design Studio.

    • Name your project and select Create.

      Naming and creating your project in Qt Design Studio.

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

    Your project with a Rectangle and Text item in the 2D view.

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

      Changing the fill color of the Rectangle in the Properties pane.

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

      Changing the Text item properties in the Properties pane.

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

      Dragging a new Rectangle component onto the existing Rectangle component 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.

        Changing the properties of the new Rectangle in the Properties pane.

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

        Anchoring the new Rectangle to the center of its parent in the Properties pane.

      • Drag the existing Text component onto the new Rectangle.

        Dragging the existing Text component onto the new Rectangle.

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

      Naming the Text item in the Properties pane.

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

      Switching to the Connections view in the Views menu.

    • Switch to the Properties tab in the Connections view.
    • Select + to add a new property. Select bool as Type, enter pressed under Name and false under Value.

      Creating a pressed property in the Properties tab of the Connections view.

    • Switch to the Rectangle tab in the Properties view.
    • Select the settings icon to add a new binding.

      Selecting the settings icon in the Rectangle tab of the Properties pane.

      Setting a binding in the Rectangle tab of the Properties pane.

    • Enter the following expression to the Binding Editor that opens up, and select OK.
      statusRect.pressed ? "#41cd52" : "#808080"

      Entering a binding expression in the Binding Editor.

      Binding expression ready in the Connections view.

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

  7. Save and close.
    • Select File > Save All to save your change.
    • Select File > Close Project <YourProject> to close the project.

Available under certain Qt licenses.
Find out more.