Qt “Hello World!” Application

As an introduction to creating your Qt based end product application, let’s walk from start to finish through the creation of the ubiquitous “Hello World!” application using Qt Creator.

Important

This section assumes that you have completed the section on connecting the G3 module to your developer host machine and have verified all connections are working.

Tip

This project demonstrates the expected application paths on the G3 module. Pay attention wherever you see /data/bin (and don’t use something else).

Create a New Project

  • Open Qt Creator.

    Look for the icon on the VM desktop or in the XFCE menu.

  • Click Projects -> + New or go to File -> New File or Project.

    ../_images/hello_world1.png

    Start a New Project, Method 1

— OR —

../_images/hello_world2.png

Start a New Project, Method 2

  • Select Application -> Projects -> Qt Widgets Application.

    ../_images/hello_world3.png

    Template Selection Dialog

  • Enter the project name and file location then click Next.

    ../_images/hello_world4.png

    Project Location Dialog

  • Select the default Build System, qmake, then click Next.

    ../_images/hello_world5.png

    Define Build System Dialog

  • Enter your class parameters then click Next.

    ../_images/hello_world6.png

    Class Information Dialog

  • A translation file is not required for this project; click Next.

    ../_images/hello_world7.png

    Translation File Dialog

  • Check Select all kits for the kit(s) to use in this project then click Next.

    ../_images/hello_world8.png

    Kit Selection Dialog

  • Click Finish.

    ../_images/hello_world9.png

    Project Management Dialog

  • The new project opens.

    ../_images/hello_world10.png

    New Project Open in Edit Mode

  • Delete the main.h file:

    • Expand the Headers folder.

    • Right-click main.h and select Remove.

      ../_images/hello_world11.png

      Delete main.h

    • Check Delete file permanently and click OK.

      ../_images/hello_world12.png

      Delete File Confirmation

  • Create a QML source file:

    • Right-click the project folder and select Add New.

      ../_images/hello_world13.png

      Select Add New

    • Select Qt -> QML File (Qt Quick 2) then click Choose….

      ../_images/hello_world14.png

      New File Template Dialog – Select QML File

    • Name the file, set the path then click Next.

      ../_images/hello_world15.png

      New File Location Dialog

    • Add the file to your project… click Finish.

      ../_images/hello_world16.png

      Project Management Dialog

  • Edit the main.qml file:

    • Double-click main.qml to open it in the editor.

    • Replace the auto-generated code with the following…

    ../_images/hello_world17.png

    Your main.qml File Should Look Like This

    Note

    Replace the width and height numbers shown with the screen resolution values of your G3 module.

    Todo

    This needs a much higher res screenshot… source code is barely readable

  • Create a QRC file:

    • Right-click the project folder and select Add New.

      ../_images/hello_world18.png

      Select Add New

    • Select Qt -> Qt Resource File then click Choose….

      ../_images/hello_world19.png

      New File Template Dialog – Select Qt Resource File

    • Name the file, set the path then click Next.

      ../_images/hello_world20.png

      New File Location Dialog

    • Add the file to your project… click Finish.

      ../_images/hello_world21.png

      Project Management Dialog

  • Set the qml.qrc file properties:

    • Click Add Prefix, enter a “/” character in the Prefix: text box.

      ../_images/hello_world22.png

      Setting the Resource Prefix

    • Click Add Files, pick your main.qml file then click Open.

      ../_images/hello_world23.png

      Adding main.qml to the Project Resources

  • Edit the main.cpp file:

    • Double-click main.cpp to open it in the editor.

    • Replace the auto-generated code with the following…

      ../_images/hello_world24.png

      Your main.cpp File Should Look Like This

  • Edit the Hello.pro project file:

    • Double-click “Hello.pro” to open it in the editor.

    • Replace the auto-generated code with the following…

      ../_images/hello_world25.png

      Your Hello.pro File Should Look Like This

Deploy the Project to the G3 Module

Todo

this section needs code blocks and more screenshots

  • In the VM, open a Terminal to the G3 module using picocom:

    • Open a terminal window.

    • Enter the command ls -l /dev/ttyU*.

      Assuming you setup the USB Device Filters correctly when you installed the VM, you should see /dev/ttyUSB0 and /dev/ttyUSB1 in the output. These are the “COM” ports used to communicate with the G3 module.

    • Enter picocom -b 115200 /dev/ttyUSB0.

    • After picocom displays “Terminal ready”, press <ENTER>.

    • If you now see a login prompt, you’re on the correct port for the Debug Interface.1

      If not:

      • Open a 2nd terminal window.

      • Enter picocom -b 115200 /dev/ttyUSB1.

      • After picocom displays “Terminal ready”, press <ENTER>.

      • If you now see a login prompt, you’re on the correct port for the Debug Interface.

    • Log in as root. There is no password.

  • Stop the currently running user application or demo… if one is running:

    • Enter /etc/init.d/user_app stop.2

  • Determine the IP address of the module:

    • Enter ifconfig to display your system’s network interface information.

      The IP address we need is for interface eth0. The IP address value will look something like “192.168.1.2” but yours will likely be different.

  • Set the IP address of the target (the G3 module) in Qt Creator:

    • Go to Tools -> Options.

      ../_images/hello_world27.png

      Open Tools -> Options

    • Open the Devices tab.

    • Enter the IP address for eth0 in the Host name text box.

      ../_images/hello_world28.png

      Enter the IP Address of the G3 module (replace this screenshot, buttons clipped off)

    • Click Apply then click OK.

  • Run the project:

    • Click on the little terminal icon near the bottom of the left side toolbar to enter Deploy mode and verify that Yocto -> Release is selected.

      ../_images/hello_world29.png

      Yocto Warrior SDK Selected

    • Click Run (green arrow) to build and deploy the project to the G3 module.

      ../_images/hello_world30.png

      Run the project

    • You should now see “Hello World!” on the G3 module.

      ../_images/hello_world31_lg.png

      Hello World on the G3 Module

Footnotes:

1

Congratulations! You get a Tootsie-Pop!

2

It is not harmful to run this command even if there is no user application or demo running.