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

From DAVE Developer's Wiki
Jump to: navigation, search
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{InfoBoxTop}}
 
{{InfoBoxTop}}
{{AppliesToAxel}}
+
{{AppliesToAXEL Lite AN}}
{{AppliesToAxelEsatta}}
 
{{AppliesToAxelLite}}
 
{{Applies To Yocto}}
 
 
{{InfoBoxBottom}}
 
{{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.}}
 
{{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.}}
Line 9: Line 6:
  
 
{| class="wikitable" border="1"
 
{| class="wikitable" border="1"
!Version
+
!Page version
 
!Date
 
!Date
 
!XELK version
 
!XELK version
Line 18: Line 15:
 
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 3.0.0]]
 
|[[Axel_Embedded_Linux_Kit_(XELK)#XELK_software_components|XELK 3.0.0]]
 
|First release
 
|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 =
 
= Introduction =
  
This application note details QT Creator setup and configuration in [[Axel_Embedded_Linux_Kit_(XELK)|XELK]] [[Managed Virtual Machine (MVM)|MVM]]
+
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 XELK =
+
= 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 ==
 
== Qt Creator Installation ==
Line 31: Line 39:
  
 
<pre>
 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
+
dvdk@vagrant:~$ cd desk-mx-l/
 
</pre>
 
</pre>
 
<pre>
 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.run
+
dvdk@vagrant:~/desk-mx-l$ ./qt-creator-opensource-linux-x86_64-4.4.1.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|400px|border|center]]
+
[[File:QtCreator-4.4.1_setup.png|400px|border|center]]
  
 
Select '''Skip'''.
 
Select '''Skip'''.
  
[[File:QtCreator XELK 3 0 0 02.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_skip.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
[[File:QtCreator XELK 3 0 0 03.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_next.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|400px|border|center]]
+
[[File:QtCreator-4.4.1_folder.png|400px|border|center]]
  
 
Select '''Next'''.
 
Select '''Next'''.
  
[[File:QtCreator XELK 3 0 0 05.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_components.png|400px|border|center]]
  
 
Click '''Next''' again.
 
Click '''Next''' again.
  
[[File:QtCreator XELK 3 0 0 06.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_license.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|400px|border|center]]
+
[[File:QtCreator-4.4.1_install.png|400px|border|center]]
  
 
Then '''Finish''' to exit the setup wizard.
 
Then '''Finish''' to exit the setup wizard.
  
[[File:QtCreator XELK 3 0 0 08.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_finish.png|400px|border|center]]
 
 
== Automatic configuration ==
 
 
 
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, DAVE provides a simple setup script.
 
 
 
<!--
 
 
 
User just need to run the following commands inside your terminal emulator:
 
 
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-post-install.sh
 
</pre>
 
 
 
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]]
 
 
 
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]]
 
 
 
-->
 
  
 
== Manual configuration ==
 
== Manual configuration ==
Line 100: Line 83:
 
=== Devices ===
 
=== Devices ===
  
Go to <code>Tools -> Options</code> menu  
+
Go to <code>Tools -> Options</code> menu:
 +
 
 +
[[File:QtCreator-4.4.1_tools-options.png|1000px|border|center]]
 +
 
 +
Select <code>Devices</code> and click '''Add''':
  
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-add.png|700px|border|center]]
  
Select <code>Devices</code> and click '''Add'''
+
Choose the ''Generic Linux device'':
  
[[File:QtCreator XELK 3 0 0 22.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-device.png|500px|border|center]]
  
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 [[VirtualBox Network Configuration|this]] article for more details).
  
[[File:QtCreator XELK 3 0 0 23.png|400px|border|center]]
+
Then 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).
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK.png|600px|border|center]]
  
Then click '''Next'''.
+
The device will be created and the connectivity will be tested:
  
[[File:QtCreator XELK 3 0 0 24.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK-connect.png|600px|border|center]]
  
 
If everything went ok you should see a dialog like the image below.
 
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-4.4.1_devices-linux-device-EVK-test.png|500px|border|center]]
  
And finally this is how the <code>Devices</code> window should look like.
+
And finally, this is what the <code>Devices</code> window should look like.
  
[[File:QtCreator XELK 3 0 0 26.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-device-EVK-configured.png|800px|border|center]]
  
 
=== GCC & Cross Compilation ===
 
=== GCC & Cross Compilation ===
Line 130: Line 117:
 
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>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 <code>Add -> GCC</code> and add the compiler path.
 
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 for the C++ 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]]
  
 
=== Debugger GDB ===
 
=== Debugger GDB ===
  
Now it is necessary to add a debugger. 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''' and then select the GDB debugger at the location
 
 
[[File:QtCreator XELK 3 0 0 30.png|400px|border|center]]
 
 
 
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 XELK 3 0 0 31.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_devices-linux-build-and-run-gdb.png|1200px|border|center]]
  
 
=== Qt Version ===
 
=== Qt Version ===
Line 171: Line 154:
  
 
<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]]
  
 
=== Kits ===
 
=== Kits ===
  
The last step is to add a new kit. Go to <code>Kits</code> and click '''Add''' and complete the information as shown 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. Pay attention that in <code>Qt mkspec</code> you need to write  
 
 
[[File:QtCreator XELK 3 0 0 33.png|400px|border|center]]
 
 
 
Pay attention that in <code>Qt mkspec</code> you need to write  
 
  
 
<pre>
 
<pre>
Line 188: Line 167:
 
</pre>
 
</pre>
  
[[File:QtCreator XELK 3 0 0 34.png|400px|border|center]]
+
[[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.
 
After this your setup is complete and you can proceed and create your Qt applications.
Line 199: Line 178:
  
 
<pre>
 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~$ source env.sh
+
dvdk@vagrant:~/desk-mx-l$ source desk-mx6-l-1.0.0_env.sh
 
</pre>
 
</pre>
  
Line 205: Line 184:
  
 
<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 step every time you start QTCreator}}
+
{{ImportantMessage|text=It is important to repeat the previous two steps every time you start QTCreator}}
  
 
Now click on <code>New Project</code>
 
Now click on <code>New Project</code>
  
[[File:QtCreator XELK 3 0 0 11.png|400px|border|center]]
+
[[File:QtCreator-4.4.1_project.png|1200px|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-4.4.1_new-project.png|800px|border|center]]
  
 
Now call the Project ''Test'' and press '''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''' to 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]]
  
 
To add a clickable button to your application, select  the <code>Edit</code> window and select <code>Test -> Forms -> 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-4.4.1_project-Test-MainWindow.png|1200px|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!"''.
 
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 two 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>
 
<pre>
 
<pre>
Line 251: Line 230:
 
</pre>
 
</pre>
  
Where <code>/temp/Test</code> is the path in which your application will be downloaded 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:
 +
 
 +
[[File:QtCreator-4.4.1_project-Test-MainWindow-Build.png|1200px|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 eglfs</code> into <code>Arguments</code>
 
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>
  
[[File:QtCreator XELK 3 0 0 20.png|400px|border|center]]
+
[[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]]
 
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]]
+
[[File:QtCreator-4.4.1_project-Test-MainWindow-debug.png|1200px|border|center]]
 +
 
 +
The debugger (via <code>gdb server</code>) will be activated and the debug window will be ready:
 +
 
 +
[[File:QtCreator-4.4.1_project-Test-MainWindow-debug-running.png|1200px|border|center]]

Latest revision as of 14:23, 26 August 2022

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

History[edit | edit source]

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

Introduction[edit | edit source]

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

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

200px-Emblem-important.svg.png

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 Installation[edit | edit source]

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.

QtCreator-4.4.1 setup.png

Select Skip.

QtCreator-4.4.1 skip.png

Select Next.

QtCreator-4.4.1 next.png

Select the install directory or click Next.

QtCreator-4.4.1 folder.png

Select Next.

QtCreator-4.4.1 components.png

Click Next again.

QtCreator-4.4.1 license.png

And then click Install and complete the installation.

QtCreator-4.4.1 install.png

Then Finish to exit the setup wizard.

QtCreator-4.4.1 finish.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-4.4.1 tools-options.png

Select Devices and click Add:

QtCreator-4.4.1 devices-add.png

Choose the Generic Linux device:

QtCreator-4.4.1 devices-linux-device.png

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:

QtCreator-4.4.1 devices-linux-device-EVK.png

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

QtCreator-4.4.1 devices-linux-device-EVK-connect.png

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

QtCreator-4.4.1 devices-linux-device-EVK-test.png

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

QtCreator-4.4.1 devices-linux-device-EVK-configured.png

GCC & Cross Compilation[edit | edit source]

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

QtCreator-4.4.1 devices-linux-build-and-run.png

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.

QtCreator-4.4.1 devices-linux-build-and-run-gcc.png

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++
QtCreator-4.4.1 devices-linux-build-and-run-g++.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-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb

and click Apply.

QtCreator-4.4.1 devices-linux-build-and-run-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-mx6-l/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
QtCreator-4.4.1 devices-linux-build-and-run-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. Pay attention that in Qt mkspec you need to write

linux-oe-g++
QtCreator-4.4.1 devices-linux-build-and-run-EVK.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:~/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


200px-Emblem-important.svg.png

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

Now click on New Project

QtCreator-4.4.1 project.png

Select Application Qt Widgets Application and click Choose...

QtCreator-4.4.1 new-project.png

Now call the Project Test and press Next.

QtCreator-4.4.1 new-project-test.png

Select the SBC AXEL EVK and click Next.

QtCreator-4.4.1 new-project-SBC-AXEL-EVK.png

Choose the class name for your application.

QtCreator-4.4.1 new-project-SBC-AXEL-EVK-class.png

Click Finish to conclude the setup.

QtCreator-4.4.1 new-project-SBC-AXEL-EVK-finish.png

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

QtCreator-4.4.1 project-Test-MainWindow.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-4.4.1 project-Test-MainWindow-Pushbutton.png

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.

QtCreator-4.4.1 project-Test-MainWindow-TestPro.png

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

QtCreator-4.4.1 project-Test-MainWindow-Build.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-4.4.1 project-Test-MainWindow-eglfs.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-4.4.1 project-Test-MainWindow-debug.png

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

QtCreator-4.4.1 project-Test-MainWindow-debug-running.png