Difference between revisions of "DESK-MX6UL-AN-0002: Getting started with Qt Creator"

From DAVE Developer's Wiki
Jump to: navigation, search
(History)
(Setting up Qt Creator to build for DESK)
(7 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
!Development Kit version
 
!Development Kit version
 
|-
 
|-
| 1.0.0
+
| 1.0.1
 
| Jun 2021
 
| Jun 2021
|[[DESK-MX6UL-L/General/Release_Notes#DESK-MX6UL-L_1.0.1|DESK-MX6UL-L 1.0.1]]
+
|[[AXEL_ULite_SOM/DESK-MX6UL-L/General/Release_Notes#DESK-MX6UL-L_1.0.1|DESK-MX6UL-L 1.0.1]]
 
|-
 
|-
 
|}
 
|}
Line 19: Line 19:
 
==Introduction==
 
==Introduction==
  
This application note details QT Creator setup and configuration in [[DESK-MX6UL-L|DESK]] [[DESK-MX6UL-L/General/DVDK_Virtual_Machine|MVM]]
+
This application note details QT Creator setup and configuration in [[AXEL_ULite_SOM/DESK-MX6UL-L|DESK]] [[AXEL_ULite_SOM/DESK-MX6UL-L/General/DVDK_Virtual_Machine|MVM]]
  
 
== Setting up Qt Creator to build for DESK ==
 
== Setting up Qt Creator to build for DESK ==
 +
{{ImportantMessage|text=Note: The version of Qt Creator may differ from images below. The version provided from DESK 1.0.1 release is Qt Creator 4.11.0}}
  
{{ImportantMessage|text=Note: The NXP BSP 4.14.98 includes Qt 5.10.1 so the following instructions has been created using Qt Creator 4.5.1 included in the qt-opensource installer for this Qt version.}}
+
=== Qt Creator Installation ===
  
=== Qt Creator Installation ===
+
=== Qt versions ===
 +
{{ImportantMessage|text=The ''qt-opensource-linux'' installer will install the '''5.12.7''' Qt library version which are not aligned with the '''5.10.1''' Qt version included in the DESK-MX6UL-L BSP.<br>This is because NXP BSP includes <u> Qt 5.10.1</u> version while Qt Company does not provide the Qt Creator 5.10.1 installer anymore.}}
 +
 
 +
This is not an issue for creating and compiling Qt application for the target: the binary version deployed into the target will be created starting from the Qt included into the SDK. Only the Qt Creator IDE is configured and used for creating Qt application for the target.
  
{{ImportantMessage|text=The ''qt-opensource-linux'' installer can be downloaded form the Qt download http site, i.e. from [https://download.qt.io/new_archive/qt/5.10/5.10.1/qt-opensource-linux-x64-5.10.1.run this link].}}
+
In any case, the Qt x86 libraries installed in the MVM can be used for Qt application creation and debugging.
  
<pre>
+
=== Qt Creator Installation ===
dvdk@vagrant:~/desk-mx-l$ wget https://download.qt.io/new_archive/qt/5.10/5.10.1/qt-opensource-linux-x64-5.10.1.run
 
</pre>
 
  
To install Qt Creator inside your toolchain launch a terminal emulator and run  
+
To install Qt Creator launch a terminal emulator and run the ''qt-opensource-linux'' installer.
  
 
<pre>
 
<pre>
Line 39: Line 41:
 
</pre>
 
</pre>
 
<pre>
 
<pre>
dvdk@vagrant:~/desk-mx-l$ ./qt-opensource-linux-x64-5.10.1.run  
+
dvdk@vagrant:~/desk-mx-l$ ./qt-opensource-linux-x64.run  
 
</pre>
 
</pre>
  
 
An installation wizard will appear. Clik '''Next''' to proced with the installation.
 
An installation wizard will appear. Clik '''Next''' to proced with the installation.
  
[[File:Qt5.10.1_login.png|400px|border|center]]
+
[[File:QtCreator_setup.png|400px|border|center]]
  
 
Fill the form with ''your information'' and properly activate your account on Qt web site.
 
Fill the form with ''your information'' and properly activate your account on Qt web site.
  
[[File:Qt5.10.1_create_account.png|400px|border|center]]
+
[[File:Qt5.12.7_creat_account.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
[[File:Qt5.10.1_setup.png|400px|border|center]]
+
[[File:Qt5.12.7_setup.png|400px|border|center]]
  
 
Select the install directory or click '''Next'''.
 
Select the install directory or click '''Next'''.
  
[[File:Qt5.10.1_install_directory.png|400px|border|center]]
+
[[File:Qt5.12.7_install_directory.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
[[File:Qt5.10.1_install_components.png|400px|border|center]]
+
[[File:Qt5.12.7_install_components.png|400px|border|center]]
  
 
After carefully reading the ''License Agreement'', ''if you agree'', accept it and then press '''Next''' again.
 
After carefully reading the ''License Agreement'', ''if you agree'', accept it and then press '''Next''' again.
  
[[File:Qt5.10.1_install_license_agreement.png|400px|border|center]]
+
[[File:Qt5.12.7_install_license_agreement.png|400px|border|center]]
  
 
And then click '''Install''' and complete the installation.
 
And then click '''Install''' and complete the installation.
  
[[File:Qt5.10.1_installation.png|400px|border|center]]
+
[[File:Qt5.12.7_installation.png|400px|border|center]]
  
 
Then '''Finish''' to exit the setup wizard.
 
Then '''Finish''' to exit the setup wizard.
  
[[File:Qt5.10.1_finish.png|400px|border|center]]
+
[[File:Qt5.12.7_finish.png|400px|border|center]]
  
 
=== Manual configuration ===
 
=== Manual configuration ===
Line 86: Line 88:
 
Select <code>Devices</code> and click '''Add'''
 
Select <code>Devices</code> and click '''Add'''
  
[[File:QtCreator_devices.png|600px|border|center]]
+
[[File:QtCreator_devices_add.png|600px|border|center]]
  
 
Choose the ''Generic Linux device''
 
Choose the ''Generic Linux device''
Line 96: Line 98:
 
Then click '''Next'''.
 
Then click '''Next'''.
  
[[File:QtCreator_device_connection.png|400px|border|center]]
+
[[File:QtCreator_connection.png|400px|border|center]]
 +
 
 +
QtCreator asks you to create a deployment key for the target connection:
 +
 
 +
[[File:QtCreator_deployment_key.png|400px|border|center]]
 +
 
 +
If the target data was inserted correctly (IP address, login username) then the key will be correctly deployed into the target:
 +
 
 +
[[File:QtCreator_deployment_key_finished.png |400px|border|center]]
  
 
If everything went ok pressing ''Finish'' button you should see a dialog like the image below.
 
If everything went ok pressing ''Finish'' button you should see a dialog like the image below.
Line 104: Line 114:
 
And finally this is how the <code>Devices</code> window should look like.
 
And finally this is how the <code>Devices</code> window should look like.
  
[[File:QtCreator_device_configuration.png|700px|border|center]]
+
[[File:QtCreator_device.png|700px|border|center]]
  
 
=== GCC & Cross Compilation ===
 
=== GCC & Cross Compilation ===
  
Next you need to configure the cross compilation tool inside <code>Build & Run -> Compiler</code>.
+
Next you need to configure the cross compilation tool inside <code>Kits -> Compiler</code>.
  
[[File:QtCreator_build_and_run_compiler.png|400px|border|center]]
+
[[File:QtCreator_kits_compiler.png|400px|border|center]]
  
 
Click <code>Add -> GCC</code>, add the compiler path and set (for example) the DESK-MX-GCC compiler name.
 
Click <code>Add -> GCC</code>, add the compiler path and set (for example) the DESK-MX-GCC compiler name.
Line 120: Line 130:
 
And click '''Apply'''.
 
And click '''Apply'''.
  
[[File:QtCreator_build_run_compiler_GCC.png|400px|border|center]]
+
[[File:QtCreator_kits_compiler_GCC.png|400px|border|center]]
  
 
Do the same for the C++ cross compilation tool (DESK-MX-GCC+)
 
Do the same for the C++ cross compilation tool (DESK-MX-GCC+)
Line 128: Line 138:
 
</pre>
 
</pre>
  
[[File:QtCreator_build_run_compiler_GCC+.png|400px|border|center]]
+
[[File:QtCreator_kits_compiler_GCC+.png|400px|border|center]]
  
 
=== Debugger GDB ===
 
=== Debugger GDB ===
Line 142: Line 152:
 
and click '''Apply'''.  
 
and click '''Apply'''.  
  
[[File:QtCreator_build_run_debugger_GDB.png|400px|border|center]]
+
[[File:QtCreator_kits_debugger_GDB.png|400px|border|center]]
  
 
=== Qt Version ===
 
=== Qt Version ===
Line 181: Line 191:
  
 
<pre>
 
<pre>
dvdk@vagrant:~/desk-mx-l$ /home/dvdk/Qt5.10.1/Tools/QtCreator/bin/qtcreator
+
dvdk@vagrant:~/desk-mx-l$ /home/dvdk/Qt5.12.7/Tools/QtCreator/bin/qtcreator
 
</pre>
 
</pre>
  
 
{{ImportantMessage|text=It is important to repeat the previous two step every time you start QTCreator}}
 
{{ImportantMessage|text=It is important to repeat the previous two step every time you start QTCreator}}
 
Now click on <code>New Project</code>, select Application Qt Widgets Application and click '''Choose...'''
 
 
[[File:QtCreator_new_project.png|400px|border|center]]
 
 
Now call the Project ''Test'' and press '''Next'''.
 
 
[[File:QtCreator_qtwidgets_test.png|400px|border|center]]
 
 
Select the ''DESK Kit'' and click '''Next'''.
 
 
[[File:QtCreator_qtwidgets_DESK.png|400px|border|center]]
 
 
Choose the ''class'' name for your application.
 
 
[[File:QtCreator_qtwidgets_class.png|400px|border|center]]
 
 
Click '''Finish''' to conclude the setup.
 
 
[[File:QtCreator_qtwidgets_finish.png|400px|border|center]]
 
 
To add a clickable button to your application, select  the <code>Edit</code> window and select <code>Test -> Forms -> mainwindow.ui</code>
 
 
[[File:QtCreator XELK 3 0 0 17.png|400px|border|center]]
 
 
Click on Push Button in the Buttons tab and drag it to the main window view. In order to edit the text displayed by the label, double click it and write ''"Hello World!"''.
 
 
[[File:QtCreator XELK 3 0 0 18.png|400px|border|center]]
 
 
After that, you need to insert the following two line inside the ''Test.pro'' file
 
 
<pre>
 
target.path = /tmp/Test # path on device
 
</pre>
 
<pre>
 
INSTALLS += target
 
</pre>
 
 
Where <code>/temp/Test</code> is the path in which your application will be downloaded inside the device.
 
 
[[File:QtCreator XELK 3 0 0 19.png|400px|border|center]]
 
 
The last step before running the application inside the device is to configure Qt backend into application command line arguments: open the <code>Project</code> window and select the <code>Run</code> configuration, then type <code>-platform linuxfb</code> into <code>Arguments</code>
 
 
[[File:QtCreator_platform_linuxfb.png|400px|border|center]]
 
 
After these changes you are ready to debug your application inside your board with the <code>Run/Debug</code> command [[File:QtCreator XELK 3 0 0 35.png|30px]]
 
 
[[File:QtCreator XELK 3 0 0 21.png|400px|border|center]]
 

Revision as of 12:47, 29 June 2021

Info Box


200px-Emblem-important.svg.png

This application note has been validated using the kit version in the History table.

History[edit | edit source]

Version Date Development Kit version
1.0.1 Jun 2021 DESK-MX6UL-L 1.0.1

Introduction[edit | edit source]

This application note details QT Creator setup and configuration in DESK MVM

Setting up Qt Creator to build for DESK[edit | edit source]

200px-Emblem-important.svg.png

Note: The version of Qt Creator may differ from images below. The version provided from DESK 1.0.1 release is Qt Creator 4.11.0

Qt Creator Installation[edit | edit source]

Qt versions[edit | edit source]

200px-Emblem-important.svg.png

The qt-opensource-linux installer will install the 5.12.7 Qt library version which are not aligned with the 5.10.1 Qt version included in the DESK-MX6UL-L BSP.
This is because NXP BSP includes Qt 5.10.1 version while Qt Company does not provide the Qt Creator 5.10.1 installer anymore.

This is not an issue for creating and compiling Qt application for the target: the binary version deployed into the target will be created starting from the Qt included into the SDK. Only the Qt Creator IDE is configured and used for creating Qt application for the target.

In any case, the Qt x86 libraries installed in the MVM can be used for Qt application creation and debugging.

Qt Creator Installation[edit | edit source]

To install Qt Creator launch a terminal emulator and run the qt-opensource-linux installer.

dvdk@vagrant:~$ cd desk-mx-l/
dvdk@vagrant:~/desk-mx-l$ ./qt-opensource-linux-x64.run 

An installation wizard will appear. Clik Next to proced with the installation.

QtCreator setup.png

Fill the form with your information and properly activate your account on Qt web site.

Qt5.12.7 creat account.png

Select Next.

Qt5.12.7 setup.png

Select the install directory or click Next.

Qt5.12.7 install directory.png

Select Next.

Qt5.12.7 install components.png

After carefully reading the License Agreement, if you agree, accept it and then press Next again.

Qt5.12.7 install license agreement.png

And then click Install and complete the installation.

Qt5.12.7 installation.png

Then Finish to exit the setup wizard.

Qt5.12.7 finish.png

Manual configuration[edit | edit source]

In this section we details all the step required for configuring the SDK toolchain.

Devices[edit | edit source]

Go to Tools -> Options menu

QtCreator tools options.png

Select Devices and click Add

QtCreator devices add.png

Choose the Generic Linux device

QtCreator generic linux device.png

Insert the IP address of your device, root as username and leave password empty (this is the default configuration of DESK root file systems). Make sure that the device is connected to the network and your virtual machine networking is correctly configured (see this article for more details).

Then click Next.

QtCreator connection.png

QtCreator asks you to create a deployment key for the target connection:

QtCreator deployment key.png

If the target data was inserted correctly (IP address, login username) then the key will be correctly deployed into the target:

QtCreator deployment key finished.png

If everything went ok pressing Finish button you should see a dialog like the image below.

QtCreator device connected.png

And finally this is how the Devices window should look like.

QtCreator device.png

GCC & Cross Compilation[edit | edit source]

Next you need to configure the cross compilation tool inside Kits -> Compiler.

QtCreator kits compiler.png

Click Add -> GCC, add the compiler path and set (for example) the DESK-MX-GCC compiler name.

/home/dvdk/desk-mx-l/sdk/latest_desk-mx6ul-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc

And click Apply.

QtCreator kits compiler GCC.png

Do the same for the C++ cross compilation tool (DESK-MX-GCC+)

/home/dvdk/desk-mx-l/sdk/latest_desk-mx6ul-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
QtCreator kits compiler GCC+.png

Debugger GDB[edit | edit source]

Now it is necessary to add a debugger. In order to do this go to the Debuggers tab and click Add.

And then select the GDB debugger at the location

/home/dvdk/desk-mx-l/sdk/latest_desk-mx6ul-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb

and click Apply.

QtCreator kits debugger GDB.png

Qt Version[edit | edit source]

Next you need to add the Qt Version installed on your device. Go to Qt Version click Add and select the following qmake file.

home/dvdk/desk-mx-l/sdk/latest_desk-mx6ul-l/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
QtCreator qtversions qmake.png

Kits[edit | edit source]

The last step is to add a new kit. Go to Kits and click Add and complete the information as shown below.

QtCreator qtversions kit.png

Pay attention that in Qt mkspec you need to write

linux-oe-g++

After this your setup is complete and you can proceed and create your Qt applications.

Qt application example[edit | edit source]

Now that the setup is finished, you can create your first application

Open a new terminal and source the environment variables with the command.

dvdk@vagrant:~/desk-mx-l$ source desk-mx6ul-l-1.0.1_env.sh 

In the same terminal type the following command (we assume you didn't change the default installation directory)

dvdk@vagrant:~/desk-mx-l$ /home/dvdk/Qt5.12.7/Tools/QtCreator/bin/qtcreator


200px-Emblem-important.svg.png

It is important to repeat the previous two step every time you start QTCreator