Open main menu

DAVE Developer's Wiki β

Difference between revisions of "DESK-MX-L-AN-0007: Getting Started With QT Creator"
 
(28 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
= Setting up Qt Creator to build for XELK =
+
{{InfoBoxTop}}
−
To install Qt Creator inside your toolchain lunch a terminal emulator and run  
+
{{AppliesToAXEL Lite AN}}
 +
{{InfoBoxBottom}}
 +
{{WarningMessage|text=This application note was validated against specific versions of the kit only. It may not work with other versions. Supported versions are listed in the ''History'' section.}}
 +
=History=
 +
 
 +
{| class="wikitable" border="1"
 +
!Page version
 +
!Date
 +
!XELK version
 +
!Notes
 +
|-
 +
|1.0.0
 +
|March 2018
 +
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 3.0.0]]
 +
|First release
 +
|-
 +
|{{oldid|8847|2.0.0}}
 +
|August 2019
 +
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 4.0.0]]
 +
|Updated XELK version
 +
|-
 +
|3.0.0
 +
|August 2022
 +
|{{pageoldid|DESK-MX6-L|15794|DESK-MX6-L 1.0.0}}
 +
|DESK-MX6-L version
 +
|}
 +
 
 +
= Introduction =
 +
 
 +
This application note details QT Creator setup and configuration in [[DESK-MX6-L|DESK-MX6-L]] [[Managed Virtual Machine (MVM)|MVM]]
 +
 
 +
= Setting up Qt Creator to build for DESK-MX6-L =
 +
{{ImportantMessage|text=Note: The version of Qt Creator may differ from images below. The version used is the release is 4.4.1 which can be downloaded form [https://download.qt.io/archive/qtcreator/4.4/4.4.1/ Qt archive server]}}
 +
 
 +
== Qt Creator Installation ==
 +
 
 +
To install Qt Creator inside your toolchain launch a terminal emulator and run  
 +
 
 
<pre>
 
<pre>
−
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
+
dvdk@vagrant:~$ cd desk-mx-l/
−
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.run
 
 
</pre>
 
</pre>
−
An installation wizard will appear
+
<pre>
 +
dvdk@vagrant:~/desk-mx-l$ ./qt-creator-opensource-linux-x86_64-4.4.1.run
 +
</pre>
 +
 
 +
An installation wizard will appear. Clik '''Next''' to proced with the installation.
  
−
[[File:QtCreator XELK 3 0 0 01.png|200px|border|center]]
+
[[File:QtCreator-4.4.1_setup.png|400px|border|center]]
  
−
Clik Next to proced with the installation.
+
Select '''Skip'''.
  
−
[[File:QtCreator XELK 3 0 0 02.png|200px|border|center]]
+
[[File:QtCreator-4.4.1_skip.png|400px|border|center]]
  
−
Select Skip.
+
Select '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 03.png|200px|border|center]]
+
[[File:QtCreator-4.4.1_next.png|400px|border|center]]
−
Select Next.
 
  
−
[[File:QtCreator XELK 3 0 0 04.png|200px|border|center]]
+
Select the install directory or click '''Next'''.
  
−
Select the install directory or click Next.
+
[[File:QtCreator-4.4.1_folder.png|400px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 05.png|200px|border|center]]
+
Select '''Next'''.
  
−
Select Next.
+
[[File:QtCreator-4.4.1_components.png|400px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 06.png|200px|border|center]]
+
Click '''Next''' again.
  
−
Click Next again.
+
[[File:QtCreator-4.4.1_license.png|400px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 07.png|200px|border|center]]
+
And then click '''Install''' and complete the installation.
  
−
And then click install and complete the installation.
+
[[File:QtCreator-4.4.1_install.png|400px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 08.png|200px|border|center]]
+
Then '''Finish''' to exit the setup wizard.
  
−
== Automatic configuration ==
+
[[File:QtCreator-4.4.1_finish.png|400px|border|center]]
  
−
Now it is necessary to add the definition of your board before proceding developing your first application.
+
== Manual configuration ==
  
−
For adding the board definition run.
+
If you don't want to use the automatic setup or want to customize the configuration, in this section we details all the step required.
  
−
<pre>
+
=== Devices ===
−
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
−
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-post-install.sh
 
−
</pre>
 
  
−
If the installation process went ok you should see inside the Tools->Options menu Kits named XELK.
+
Go to <code>Tools -> Options</code> menu:
  
−
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_tools-options.png|1000px|border|center]]
  
−
Select the Kits tab and make sure that your configurations mateches the one displayed.
+
Select <code>Devices</code> and click '''Add''':
−
 
−
[[File:QtCreator XELK 3 0 0 10.png|400px|border|center]]
 
  
−
== Manual configuration ==
+
[[File:QtCreator-4.4.1_devices-add.png|700px|border|center]]
  
−
Go to Tools->Options menu Devices
+
Choose the ''Generic Linux device'':
  
−
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-device.png|500px|border|center]]
  
−
Select the Devices tab and press Add
+
Insert the IP address of your device, ''root'' as username and leave password empty (this is the default configuration of DESK-MX6-L root file systems). Make sure that the device is connected to the network and your virtual machine networking is correctly configured (see [[VirtualBox Network Configuration|this]] article for more details).
  
−
[[File:QtCreator XELK 3 0 0 22.png|400px|border|center]]
+
Then click '''Next''':
  
−
Choose the generic linux device
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK.png|600px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 23.png|400px|border|center]]
+
The device will be created and the connectivity will be tested:
  
−
Insert the ip address of your device and the username and password of the root account. Make sure that the device is connected to the network and your virtual machine is configured to use a bridge connection.
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK-connect.png|600px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 24.png|400px|border|center]]
+
If everything went ok you should see a dialog like the image below.
  
−
If everithing went ok you should see a dialog like the next one
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK-test.png|500px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 25.png|400px|border|center]]
+
And finally, this is what the <code>Devices</code> window should look like.
  
−
And finally this is how the device window should look like
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK-configured.png|800px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 26.png|400px|border|center]]
+
=== GCC & Cross Compilation ===
  
−
Next you need to configure the cross compilation tool inside Build & Run -> Compiler.
+
Next you need to configure the cross compilation tool inside <code>Build & Run -> Compiler</code>.
  
−
[[File:QtCreator XELK 3 0 0 27.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-build-and-run.png|800px|border|center]]
  
−
Click Add -> GCC and add the compiler path at
+
Click <code>Add -> GCC</code> and add the compiler path.
  
 
<pre>
 
<pre>
−
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc
+
/home/dvdk/desk-mx-l/sdk/latest_desk-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc
 
</pre>
 
</pre>
  
−
And click Apply
+
And click '''Apply'''.
  
−
[[File:QtCreator XELK 3 0 0 29.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-build-and-run-gcc.png|1200px|border|center]]
  
−
Do the same fort the G++ cross compilation tool
+
Do the same for the C++ cross compilation tool.
  
 
<pre>
 
<pre>
−
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
+
/home/dvdk/desk-mx-l/sdk/latest_desk-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
 
</pre>
 
</pre>
  
−
[[File:QtCreator XELK 3 0 0 28.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-build-and-run-g++.png|1200px|border|center]]
  
−
Now it is necessary to add a debuger. In order to do this go to the Debuggers tab and click add
+
=== Debugger GDB ===
  
−
[[File:QtCreator XELK 3 0 0 30.png|400px|border|center]]
+
Now it is necessary to add a debugger. In order to do this go to the <code>Debuggers</code> tab and click '''Add''' and then select the GDB debugger at the location
−
 
 
−
And then select the GDB debugger at the location
 
  
 
<pre>
 
<pre>
−
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb
+
/home/dvdk/desk-mx-l/sdk/latest_desk-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb
 
</pre>
 
</pre>
  
−
and click Apply.  
+
and click '''Apply'''.  
 +
 
 +
[[File:QtCreator-4.4.1_devices-linux-build-and-run-gdb.png|1200px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 31.png|400px|border|center]]
+
=== Qt Version ===
  
−
Next you need to add the Qt Version installed on your devices. Go to Qt Version click Add and select the following qmake file.
+
Next you need to add the Qt Version installed on your device. Go to <code>Qt Version</code> click '''Add''' and select the following qmake file.
  
 
<pre>
 
<pre>
−
/home/dvdk/axel/sdk/xelk-3.0.1/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
+
/home/dvdk/desk-mx-l/sdk/latest_desk-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
 
</pre>
 
</pre>
  
−
[[File:QtCreator XELK 3 0 0 32.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-build-and-run-qmake.png|1200px|border|center]]
  
−
The last step is to add a new kit. Go to Kits and click Add and complete the information as showed below
+
=== Kits ===
  
−
[[File:QtCreator XELK 3 0 0 33.png|400px|border|center]]
+
The last step is to add a new kit. Go to <code>Kits</code> and click '''Add''' and complete the information as shown below. Pay attention that in <code>Qt mkspec</code> you need to write
  
 +
<pre>
 +
linux-oe-g++
 +
</pre>
 +
 +
[[File:QtCreator-4.4.1_devices-linux-build-and-run-EVK.png|1200px|border|center]]
 +
 +
After this your setup is complete and you can proceed and create your Qt applications.
  
 
== Qt application example ==
 
== Qt application example ==
  
 
Now that the setup is finished, you can create your first application
 
Now that the setup is finished, you can create your first application
−
Open a new terminal and source the enviroment variables with the command.
+
 
 +
Open a new terminal and source the environment variables with the command.
  
 
<pre>
 
<pre>
−
dvdk@vagrant-ubuntu-trusty-64:~$ ./env.sh
+
dvdk@vagrant:~/desk-mx-l$ source desk-mx6-l-1.0.0_env.sh
 
</pre>
 
</pre>
  
−
In the same terminal digit the following command if you diden't change the installation directory.
+
In the same terminal type the following command (we assume you didn't change the default installation directory)
  
 
<pre>
 
<pre>
−
dvdk@vagrant-ubuntu-trusty-64:~$ ./qtcreator-4.3.0/bin/qtcreator
+
dvdk@vagrant:~$ ./qtcreator-4.4.1/bin/qtcreator
 
</pre>
 
</pre>
  
 +
{{ImportantMessage|text=It is important to repeat the previous two steps every time you start QTCreator}}
  
 +
Now click on <code>New Project</code>
  
−
Close the tab and create a new project.
+
[[File:QtCreator-4.4.1_project.png|1200px|border|center]]
  
−
[[File:QtCreator XELK 3 0 0 11.png|400px|border|center]]
+
Select Application Qt Widgets Application and click '''Choose...'''
  
−
Select Application Qt Widgets Application and click Choose...
+
[[File:QtCreator-4.4.1_new-project.png|800px|border|center]]
−
[[File:QtCreator XELK 3 0 0 12.png|400px|border|center]]
 
  
−
Now call the name Test and pres Next.
+
Now call the Project ''Test'' and press '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 13.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_new-project-test.png|800px|border|center]]
  
−
Select the XELK Kit and click Next.
+
Select the ''SBC AXEL EVK'' and click '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 14.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_new-project-SBC-AXEL-EVK.png|800px|border|center]]
  
−
Choose the class name for your application.
+
Choose the ''class'' name for your application.
  
−
[[File:QtCreator XELK 3 0 0 15.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_new-project-SBC-AXEL-EVK-class.png|800px|border|center]]
  
−
Click finish and conclude the setup.
+
Click '''Finish''' to conclude the setup.
  
−
[[File:QtCreator XELK 3 0 0 16.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_new-project-SBC-AXEL-EVK-finish.png|800px|border|center]]
  
−
Now you will add a button to your application. In order to do this, select from the Edit window and select Test->Forms->mainwindow.ui
+
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]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow.png|1200px|border|center]]
  
−
To add a Push Button click on Push Button in the Buttons tab and drag it to the main widown view. In order to edit the text displayed by the label, dubble click it and write "Hello World!".
+
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]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-Pushbutton.png|1200px|border|center]]
  
−
After that, you need to insert the following line inside the Test.pro file
+
After that, you need to insert the following two line inside the ''Test.pro'' file
  
 
<pre>
 
<pre>
−
target.path = /tmp/Test # path on device
+
target.path = /home/root/Test # path on device
 +
</pre>
 +
<pre>
 
INSTALLS += target
 
INSTALLS += target
 
</pre>
 
</pre>
  
−
Where /temp/Test is the path in which your application will be dowloaded inside the device.
+
Where <code>/home/root/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]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-TestPro.png|1200px|border|center]]
 +
 
 +
Build the project in order to complete the configuration and set the overall vars:
  
−
The last step before running the application inside the device is to select the Project window select the Run configuration and as Arguments.
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-Build.png|1200px|border|center]]
  
−
<pre>
+
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 eglfs</code> into <code>Arguments</code>
−
-platform eglfs
+
 
−
</pre>
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-eglfs.png|1200px|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 20.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-debug.png|1200px|border|center]]
  
−
After these changes you are ready to debug your application directly inside your board with the Run/Debug command.
+
The debugger (via <code>gdb server</code>) will be activated and the debug window will be ready:
  
−
[[File:QtCreator XELK 3 0 0 21.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-debug-running.png|1200px|border|center]]

Latest revision as of 14:23, 26 August 2022

HOME SOMs SBCs ToloMEO Embedded Assistant Sale-tag.pngGET A QUOTE Customer-service.pngONLINE HELPDESK
Roadmap IoT Services ML/AI services Embedded Design Services
Info Box
Warning-icon.png This application note was validated against specific versions of the kit only. It may not work with other versions. Supported versions are listed in the History section. Warning-icon.png

Contents

HistoryEdit

Page version Date XELK version Notes
1.0.0 March 2018 XELK 3.0.0 First release

2.0.0

August 2019 XELK 4.0.0 Updated XELK version
3.0.0 August 2022 DESK-MX6-L 1.0.0 DESK-MX6-L version

IntroductionEdit

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

Setting up Qt Creator to build for DESK-MX6-LEdit

 

Note: The version of Qt Creator may differ from images below. The version used is the release is 4.4.1 which can be downloaded form Qt archive server

Qt Creator InstallationEdit

To install Qt Creator inside your toolchain launch a terminal emulator and run 

dvdk@vagrant:~$ cd desk-mx-l/

dvdk@vagrant:~/desk-mx-l$ ./qt-creator-opensource-linux-x86_64-4.4.1.run

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

 

Select Skip.

 

Select Next.

 

Select the install directory or click Next.

 

Select Next.

 

Click Next again.

 

And then click Install and complete the installation.

 

Then Finish to exit the setup wizard.

 

Manual configurationEdit

If you don't want to use the automatic setup or want to customize the configuration, in this section we details all the step required.

DevicesEdit

Go to Tools -> Options menu:

 

Select Devices and click Add:

 

Choose the Generic Linux device:

 

Insert the IP address of your device, root as username and leave password empty (this is the default configuration of DESK-MX6-L 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:

 

The device will be created and the connectivity will be tested:

 

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

 

And finally, this is what the Devices window should look like.

 

GCC & Cross CompilationEdit

Next you need to configure the cross compilation tool inside Build & Run -> Compiler.

 

Click Add -> GCC and add the compiler path. 

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

And click Apply.

 

Do the same for the C++ cross compilation tool. 

/home/dvdk/desk-mx-l/sdk/latest_desk-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
 

Debugger GDBEdit

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-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb

and click Apply.

 

Qt VersionEdit

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-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
 

KitsEdit

The last step is to add a new kit. Go to Kits and click Add and complete the information as shown below. 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 exampleEdit

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-mx6-l-1.0.0_env.sh

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

dvdk@vagrant:~$ ./qtcreator-4.4.1/bin/qtcreator


 

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

Now click on New Project

 

Select Application Qt Widgets Application and click Choose...

 

Now call the Project Test and press Next.

 

Select the SBC AXEL EVK and click Next.

 

Choose the class name for your application.

 

Click Finish to conclude the setup.

 

To add a clickable button to your application, select the Edit window and select Test -> Forms -> mainwindow.ui

 

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!".

 

After that, you need to insert the following two line inside the Test.pro file 

target.path = /home/root/Test # path on device

INSTALLS += target

Where /home/root/Test is the path in which your application will be downloaded inside the device.

 

Build the project in order to complete the configuration and set the overall vars:

 

The last step before running the application inside the device is to configure Qt backend into application command line arguments: open the Project window and select the Run configuration, then type -platform eglfs into Arguments

 

After these changes you are ready to debug your application inside your board with the Run/Debug command  

 

The debugger (via gdb server) will be activated and the debug window will be ready:

 
HOME SOMs SBCs ToloMEO Embedded Assistant Sale-tag.pngGET A QUOTE Customer-service.pngONLINE HELPDESK
Roadmap IoT Services ML/AI services Embedded Design Services
Retrieved from "https://wiki.dave.eu/index.php?title=DESK-MX-L-AN-0007:_Getting_Started_With_QT_Creator&oldid=16878"