Changes

Jump to: navigation, search

DESK-MX-L-AN-0007: Getting Started With QT Creator

5,343 bytes added, 12:42, 30 August 2019
Qt Version
{{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 ={{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}}== Installing Qt Creator Installation == To add this new install Qt Creator inside your toolchain to QTCreator, launch a terminal emulator and run it 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
</pre>
<pre>
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-opensource.run
</pre>
An installation wizard will appear
An installation wizard will appear. Clik '''Next''' to proced with the installation. [[File:QtCreator XELK 3 0 0 01.png|200px400px|leftborder|alt textcenter]] Select '''Skip'''. [[File:QtCreator XELK 3 0 0 02.png|400px|border|center]] Select '''Next'''. [[File:QtCreator XELK 3 0 0 03.png|400px|border|center]] Select the install directory or click '''Next'''. [[File:QtCreator XELK 3 0 0 04.png|400px|border|center]] Select '''Next'''. [[File:QtCreator XELK 3 0 0 05.png|400px|border|center]] Click '''Next''' again. [[File:QtCreator XELK 3 0 0 06.png|400px|border|center]] And then click '''Install''' and complete the installation. [[File:QtCreator XELK 3 0 0 07.png|400px|border|center]] Then '''Finish''' to exit the setup wizard.
Clik Next to proced the installation[[File:QtCreator XELK 3 0 0 08.png|400px|border|center]]<!--== Automatic configuration ==
[[FileNow 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:QtCreator XELK 3 0 0 02.png|200px|left|alt text]]
Select Skip
[[File:QtCreator XELK 3 0 0 03.png|200px|left|alt text]]
Select Next
[[File:QtCreator XELK 3 0 0 04.png|200px|left|alt text]]
Select the install directory or click Next
[[File:QtCreator XELK 3 0 0 05.png|200px|left|alt text]]
Select Next
[[File:QtCreator XELK 3 0 0 06.png|200px|left|alt text]]
[[File:QtCreator XELK 3 0 0 07.png|200px|left|alt text]]
[[File:QtCreator XELK 3 0 0 08.png|200px|left|alt text]]
Now it is necessary to add the definition of your board before proceding developing your first application.
For adding the board definition run
<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 ==
 
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 ===
 
Go to <code>Tools -> Options</code> menu
 
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
 
Select <code>Devices</code> and click '''Add'''
 
[[File:QtCreator XELK 3 0 0 22.png|400px|border|center]]
 
Choose the ''Generic Linux device''
 
[[File:QtCreator XELK 3 0 0 23.png|400px|border|center]]
 
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]]
 
If everything went ok you should see a dialog like the image below.
 
[[File:QtCreator XELK 3 0 0 25.png|400px|border|center]]
 
And finally this is how the <code>Devices</code> window should look like.
 
[[File:QtCreator XELK 3 0 0 26.png|400px|border|center]]
 
=== GCC & Cross Compilation ===
 
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]]
 
Click <code>Add -> GCC</code> and add the compiler path.
 
<pre>
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc
</pre>
 
And click '''Apply'''.
 
[[File:QtCreator XELK 3 0 0 29.png|400px|border|center]]
 
Do the same for the C++ cross compilation tool.
 
<pre>
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-g++
</pre>
 
[[File:QtCreator XELK 3 0 0 28.png|400px|border|center]]
 
=== 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'''
 
[[File:QtCreator XELK 3 0 0 30.png|400px|border|center]]
 
And then select the GDB debugger at the location
 
<pre>
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gdb
</pre>
 
and click '''Apply'''.
 
[[File:QtCreator XELK 3 0 0 31.png|400px|border|center]]
 
=== Qt Version ===
 
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>
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
</pre>
 
[[File:QtCreator XELK 3 0 0 32.png|400px|border|center]]
 
=== 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.
 
[[File:QtCreator XELK 3 0 0 33.png|400px|border|center]]
 
Pay attention that in <code>Qt mkspec</code> you need to write
 
<pre>
linux-oe-g++
</pre>
 
[[File:QtCreator XELK 3 0 0 34.png|400px|border|center]]
 
After this your setup is complete and you can proceed and create your Qt applications.
 
== Qt application example ==
 
Now that the setup is finished, you can create your first application
 Open a new terminal and source the enviroment environment variables with the command. 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~$ ./source env.sh
</pre>
 In the same terminal digit type the following command if (we assume you didendidn't change the default installation directory) 
<pre>
dvdk@vagrant-ubuntu-trusty-64:~$ ./qtcreator-4.35.02/bin/qtcreator
</pre>
If the installation process went ok you should see inside the Tools->Options menu a Kits named XELK[[File:QtCreator XELK 3 0 0 09.png|200px|left{{ImportantMessage|alt text]]=It is important to repeat the previous two step every time you start QTCreator}}Select the Kits tab and make sure that your configurations mateches the one displayed [[File:QtCreator XELK 3 0 0 10.png|200px|left|alt text]]Now click on <code>New Project</code>Close the tab and create a new project[[File:QtCreator XELK 3 0 0 11.png|200px400px|leftborder|alt textcenter]] Select Application Qt Widgets Application and click '''Choose...''' [[File:QtCreator XELK 3 0 0 12.png|200px400px|leftborder|alt textcenter]] Now call the name Project ''Test '' and pres press '''Next'''. [[File:QtCreator XELK 3 0 0 13.png|200px400px|leftborder|alt textcenter]] Select the ''XELK Kit '' and click '''Next'''. [[File:QtCreator XELK 3 0 0 14.png|200px400px|leftborder|alt textcenter]] Choose the ''class '' name for your application. [[File:QtCreator XELK 3 0 0 15.png|200px400px|leftborder|alt textcenter]] Click finish and '''Finish''' to conclude the setup. [[File:QtCreator XELK 3 0 0 16.png|200px400px|leftborder|alt textcenter]]Now you will To add a clickable button to your application. In order to do this, select from the <code>Edit </code> window and select <code>Test->Forms->mainwindow.ui</code> [[File:QtCreator XELK 3 0 0 17.png|200px400px|leftborder|alt textcenter]]To add a Push Button click Click on Push Button in the Buttons tab and drag it to the main widown window view. In order to edit the text displayed by the label, dubble double click it and write ''"Hello World!"''. [[File:QtCreator XELK 3 0 0 18.png|200px400px|leftborder|alt textcenter]] After that, you need to insert the following two line inside the ''Test.pro '' file <propre>
target.path = /tmp/Test # path on device
</pre>
<pre>
INSTALLS += target
</propre> Where <code>/temp/Test </code> is the path in which your application will be dowloaded downloaded inside the device . [[File:QtCreator XELK 3 0 0 19.png|200px400px|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> [[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]] [[File:QtCreator XELK 3 0 0 21.png|400px|leftborder|alt textcenter]]
8,154
edits

Navigation menu