Difference between revisions of "DESK-MX-L-AN-0007: Getting Started With QT Creator"

From DAVE Developer's Wiki
Jump to: navigation, search
(→‎Qt Version)
(17 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{InfoBoxTop}}
 +
{{AppliesToAxel}}
 +
{{AppliesToAxelEsatta}}
 +
{{AppliesToAxelLite}}
 +
{{Applies To Yocto}}
 +
{{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"
 +
!Version
 +
!Date
 +
!XELK version
 +
!Notes
 +
|-
 +
|1.0.0
 +
|March 2018
 +
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 3.0.0]]
 +
|First release
 +
|-
 +
|1.0.0
 +
|August 2019
 +
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 4.0.0]]
 +
|Updated XELK version
 +
|}
 +
 +
= Introduction =
 +
 +
This application note details QT Creator setup and configuration in [[Axel_Embedded_Linux_Kit_(XELK)|XELK]] [[Managed Virtual Machine (MVM)|MVM]]
 +
 
= Setting up Qt Creator to build for XELK =
 
= Setting up Qt Creator to build for XELK =
 +
{{ImportantMessage|text=Note: The version of Qt Creator may differ from images below. The version provided from XELK 4.0.0 release is 4.5.2}}
 
== Qt Creator Installation ==
 
== Qt Creator Installation ==
 +
 
To install Qt Creator inside your toolchain launch a terminal emulator and run  
 
To install Qt Creator inside your toolchain launch a terminal emulator and run  
 +
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
Line 8: Line 41:
 
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.run
 
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.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:QtCreator XELK 3 0 0 01.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 01.png|400px|border|center]]
  
 
Select '''Skip'''.
 
Select '''Skip'''.
  
−
[[File:QtCreator XELK 3 0 0 02.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 02.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 03.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 03.png|400px|border|center]]
  
 
Select the install directory or click '''Next'''.
 
Select the install directory or click '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 04.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 04.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
−
[[File:QtCreator XELK 3 0 0 05.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 05.png|400px|border|center]]
  
 
Click '''Next''' again.
 
Click '''Next''' again.
  
−
[[File:QtCreator XELK 3 0 0 06.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 06.png|400px|border|center]]
  
 
And then click '''Install''' and complete the installation.
 
And then click '''Install''' and complete the installation.
  
−
[[File:QtCreator XELK 3 0 0 07.png|200px|border|center]]
+
[[File:QtCreator XELK 3 0 0 07.png|400px|border|center]]
  
−
And then '''Finish''' to exit the setup wizard.
+
Then '''Finish''' to exit the setup wizard.
−
 
 
−
[[File:QtCreator XELK 3 0 0 08.png|200px|border|center]]
 
  
 +
[[File:QtCreator XELK 3 0 0 08.png|400px|border|center]]
 +
<!--
 
== Automatic configuration ==
 
== Automatic configuration ==
  
 
Now it is necessary to add the definition of your board before developing and compiling your applications.
 
Now it is necessary to add the definition of your board before developing and compiling your applications.
  
−
In order to add the device information automatically, run the following commands inside your terminal emulator.
+
In order to add the device information automatically, DAVE provides a simple setup script.
 +
 
 +
<!--
 +
 
 +
User just need to run the following commands inside your terminal emulator:
  
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
−
</pre>
 
−
<pre>
 
 
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-post-install.sh
 
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-post-install.sh
 
</pre>
 
</pre>
  
−
If the installation process went ok, you should see inside the <code>Tools</code>-><code>Options</code> -> <code>Kits</code> a kit named XELK.
+
If the installation process complete successfully, you should see inside the <code>Tools -> Options -> Kits</code> a ''kit'' named XELK, as in the following screenshot:
  
 
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
  
−
Select the Kits tab and make sure that your configurations mateches the one displayed.
+
Select the Kits tab and make sure that your configurations matches the one displayed below:
 
   
 
   
 
[[File:QtCreator XELK 3 0 0 10.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 10.png|400px|border|center]]
 +
 +
-->
  
 
== Manual configuration ==
 
== Manual configuration ==
 +
 +
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.
  
 
=== Devices ===
 
=== Devices ===
−
Go to <code>Tools</code>-><code>Options</code> menu  
+
 
 +
Go to <code>Tools -> Options</code> menu  
 +
 
 
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
  
−
select <code>Devices</code> and click '''Add'''
+
Select <code>Devices</code> and click '''Add'''
  
 
[[File:QtCreator XELK 3 0 0 22.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 22.png|400px|border|center]]
  
−
Choose the generic linux device
+
Choose the ''Generic Linux device''
  
 
[[File:QtCreator XELK 3 0 0 23.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 23.png|400px|border|center]]
  
−
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 and click '''Next'''.
+
Insert the IP address of your device, ''root'' as username and leave password empty (this is the default configuration of XELK 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).
 +
 
 +
Then click '''Next'''.
  
 
[[File:QtCreator XELK 3 0 0 24.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 24.png|400px|border|center]]
  
−
If everithing went ok you should see a dialog like the next one
+
If everything went ok you should see a dialog like the image below.
  
 
[[File:QtCreator XELK 3 0 0 25.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 25.png|400px|border|center]]
  
−
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 XELK 3 0 0 26.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 26.png|400px|border|center]]
Line 89: Line 133:
 
=== GCC & Cross Compilation ===
 
=== GCC & Cross Compilation ===
  
−
Next you need to configure the cross compilation tool inside <code>Build & Run</code> -> <code>Compiler</code>.
+
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 XELK 3 0 0 27.png|400px|border|center]]
  
−
Click <code>Add</code> -> <code>GCC</code> and add the compiler path.
+
Click <code>Add -> GCC</code> and add the compiler path.
  
 
<pre>
 
<pre>
Line 103: Line 147:
 
[[File:QtCreator XELK 3 0 0 29.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 29.png|400px|border|center]]
  
−
Do the same fort the C++ cross compilation tool.
+
Do the same for the C++ cross compilation tool.
  
 
<pre>
 
<pre>
Line 113: Line 157:
 
=== Debugger GDB ===
 
=== Debugger GDB ===
  
−
Now it is necessary to add a debuger. In order to do this go to the <code>Debuggers</code> tab and click '''Add'''
+
Now it is necessary to add a debugger. In order to do this go to the <code>Debuggers</code> tab and click '''Add'''
  
 
[[File:QtCreator XELK 3 0 0 30.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 30.png|400px|border|center]]
Line 129: Line 173:
 
=== Qt Version ===
 
=== Qt Version ===
  
−
Next you need to add the Qt Version installed on your devices. Go to <code>Qt Version</code> 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/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
 
</pre>
 
</pre>
  
Line 139: Line 183:
 
=== Kits ===
 
=== Kits ===
  
−
The last step is to add a new kit. Go to <code>Kits</code> and click '''Add''' and complete the information as showed below.
+
The last step is to add a new kit. Go to <code>Kits</code> and click '''Add''' and complete the information as shown below.
  
 
[[File:QtCreator XELK 3 0 0 33.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 33.png|400px|border|center]]
  
−
Pay attention that in <code>Qt mkspec</code> you should write  
+
Pay attention that in <code>Qt mkspec</code> you need to write  
  
 
<pre>
 
<pre>
Line 151: Line 195:
 
[[File:QtCreator XELK 3 0 0 34.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 34.png|400px|border|center]]
  
−
After this your setup is complete and you can procede and create your Qt applications.
+
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-ubuntu-trusty-64:~$ source 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-ubuntu-trusty-64:~$ ./qtcreator-4.5.2/bin/qtcreator
 
</pre>
 
</pre>
  
−
<span style="color:#ff0000"> It is important to repeat the previous two step each time you close the Qt Creator application </span>
+
{{ImportantMessage|text=It is important to repeat the previous two step every time you start QTCreator}}
  
 
Now click on <code>New Project</code>
 
Now click on <code>New Project</code>
Line 174: Line 219:
 
[[File:QtCreator XELK 3 0 0 11.png|400px|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 XELK 3 0 0 12.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 12.png|400px|border|center]]
  
−
Now call the Project 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 XELK 3 0 0 13.png|400px|border|center]]
  
−
Select the XELK Kit and click '''Next'''.
+
Select the ''XELK Kit'' and click '''Next'''.
  
 
[[File:QtCreator XELK 3 0 0 14.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 14.png|400px|border|center]]
Line 193: Line 239:
 
[[File:QtCreator XELK 3 0 0 16.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 16.png|400px|border|center]]
  
−
To add a clickable button to your application, select  the <code>Edit</code> window and select <code>Test</code>-><code>Forms</code>-><code>mainwindow.ui</code>
+
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 XELK 3 0 0 17.png|400px|border|center]]
  
−
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 XELK 3 0 0 18.png|400px|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>
Line 210: Line 256:
 
</pre>
 
</pre>
  
−
Where <code>/temp/Test</code> is the path in which your application will be dowloaded inside the device.
+
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]]
 
[[File:QtCreator XELK 3 0 0 19.png|400px|border|center]]
  
−
The last step before running the application inside the device is to select the Project window select the Run configuration and as Arguments.
+
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>
  
−
<pre>
+
[[File:QtCreator XELK 3 0 0 20.png|400px|border|center]]
−
-platform eglfs
 
−
</pre>
 
  
−
[[File:QtCreator XELK 3 0 0 20.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]]
  
−
After these changes you are ready to debug your application inside your board with the Run/Debug command[[File:QtCreator XELK 3 0 0 35.png|30px]]
 
 
[[File:QtCreator XELK 3 0 0 21.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 21.png|400px|border|center]]

Revision as of 12:42, 30 August 2019

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
Axel-04.png Applies to Axel Ultra
Axel-02.png Applies to AXEL ESATTA
Axel-lite 02.png Applies to Axel Lite
Yocto-logo.png Applies to Yocto
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

History[edit | edit source]

Version Date XELK version Notes
1.0.0 March 2018 XELK 3.0.0 First release
1.0.0 August 2019 XELK 4.0.0 Updated XELK version

Introduction[edit | edit source]

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

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

200px-Emblem-important.svg.png

Note: The version of Qt Creator may differ from images below. The version provided from XELK 4.0.0 release is 4.5.2

Qt Creator Installation[edit | edit source]

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

dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/

dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.run

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

QtCreator XELK 3 0 0 01.png

Select Skip.

QtCreator XELK 3 0 0 02.png

Select Next.

QtCreator XELK 3 0 0 03.png

Select the install directory or click Next.

QtCreator XELK 3 0 0 04.png

Select Next.

QtCreator XELK 3 0 0 05.png

Click Next again.

QtCreator XELK 3 0 0 06.png

And then click Install and complete the installation.

QtCreator XELK 3 0 0 07.png

Then Finish to exit the setup wizard.

QtCreator XELK 3 0 0 08.png

Manual configuration[edit | edit source]

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.

Devices[edit | edit source]

Go to Tools -> Options menu

QtCreator XELK 3 0 0 09.png

Select Devices and click Add

QtCreator XELK 3 0 0 22.png

Choose the Generic Linux device

QtCreator XELK 3 0 0 23.png

Insert the IP address of your device, root as username and leave password empty (this is the default configuration of XELK 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 XELK 3 0 0 24.png

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

QtCreator XELK 3 0 0 25.png

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

QtCreator XELK 3 0 0 26.png

GCC & Cross Compilation[edit | edit source]

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

QtCreator XELK 3 0 0 27.png

Click Add -> GCC and add the compiler path. 

/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc

And click Apply.

QtCreator XELK 3 0 0 29.png

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

/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
QtCreator XELK 3 0 0 28.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

QtCreator XELK 3 0 0 30.png

And then select the GDB debugger at the location 

/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb

and click Apply.

QtCreator XELK 3 0 0 31.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/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
QtCreator XELK 3 0 0 32.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 XELK 3 0 0 33.png

Pay attention that in Qt mkspec you need to write 

linux-oe-g++
QtCreator XELK 3 0 0 34.png

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-ubuntu-trusty-64:~$ source env.sh

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

dvdk@vagrant-ubuntu-trusty-64:~$ ./qtcreator-4.5.2/bin/qtcreator


200px-Emblem-important.svg.png

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

Now click on New Project

QtCreator XELK 3 0 0 11.png

Select Application Qt Widgets Application and click Choose...

QtCreator XELK 3 0 0 12.png

Now call the Project Test and press Next.

QtCreator XELK 3 0 0 13.png

Select the XELK Kit and click Next.

QtCreator XELK 3 0 0 14.png

Choose the class name for your application.

QtCreator XELK 3 0 0 15.png

Click Finish to conclude the setup.

QtCreator XELK 3 0 0 16.png

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

QtCreator XELK 3 0 0 17.png

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

QtCreator XELK 3 0 0 18.png

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

target.path = /tmp/Test # path on device

INSTALLS += target

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

QtCreator XELK 3 0 0 19.png

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

QtCreator XELK 3 0 0 20.png

After these changes you are ready to debug your application inside your board with the Run/Debug command QtCreator XELK 3 0 0 35.png

QtCreator XELK 3 0 0 21.png
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=8847"