C

Design UI using Qt Design Studio (NXP i.MX RT1170)

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.
    • Select 720 x 1280 as the resolution.

      Selecting the resolution for the project in Qt Design Studio.

    • Name your project and select Create.

      Naming the project in Qt Design Studio.

    You should now see the Design Mode UI with a Rectangle and Text item visible in the 2D view . On the left you should see the Navigator pane and on the right the Properties pane.

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

  2. Select the Rectangle either in the Navigator pane or 2D view 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 item in the Properties pane.

  3. Select the Text item either in the Navigator pane or 2D view 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 LED.

      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.

      Adding a new Rectangle item to the project in the 2D view.

    • 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.
      • Size to 140 W x 70 H.

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

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

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

      • Drag the existing Text component onto the new Rectangle in the Navigator pane.

        Dragging the Text item onto the new Rectangle item in the Navigator pane.

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

      Naming the Text item in the Navigator pane.

    • Name the inner Rectangle item as buttonRectangle.
    • Name the parent Rectangle item as backgroundRectangle.
  6. Add a MouseArea:
    • Find the MouseArea component in the Components pane under the Basic components. Drag it onto the inner Rectangle in the Navigator pane.

      Dragging a MouseArea item onto the new Rectangle item in the Navigator pane.

    • Double-click the MouseArea component to name it as buttonMouseArea.
    • Anchor it to span its parent, buttonRectangle.

      Anchoring the MouseArea item to its parent in the Properties pane.

  7. Bind the button's color property to the pressed property of MouseArea:
    • Select buttonRectangle in the Navigation pane.
    • Select Connections from the View > Views menu.

      Selecting the Connections view in the View menu.

    • Switch to the Rectangle tab in the Properties pane.
    • Select the settings icon to set 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 in the Binding Editor that opens up and select OK:
      buttonMouseArea.pressed ?
          UICommunicator.led1Status ? "green" : "grey" :
          UICommunicator.led1Status ? "darkgreen" : "dimgrey"

      Entering the binding expression in the Binding Editor.

    Note: UICommunicator is the C++ backend that you add in the next topic.

  8. Add a connection for the onClicked handler of MouseArea:
    • Select buttonMouseArea in the Navigator pane.
    • Select the Connections tab in the Connections view.

      Adding a connection for the MouseArea item in the Connections tab.

    • Select + to add a new connection.
    • Select the manual conditions icon in the dialog box to open the Connection Editor.

      Selecting the manual conditions icon to open the Connection Editor.

    • Enter the following code into the Connection Editor and select OK:
      UICommunicator.sendFromUI(
          UICommunicator.LED1State,
          !UICommunicator.led1Status)

      Entering the connection code in the Connection Editor.

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

Available under certain Qt licenses.
Find out more.