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

From DAVE Developer's Wiki
Jump to: navigation, search
Line 1: Line 1:
−
= Installing Qt Creator =
+
= Setting up Qt Creator to build for XELK =
−
To add this new toolchain to QTCreator, run it
+
To install Qt Creator inside your toolchain lunch a terminal emulator and run  
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
Line 9: Line 9:
 
[[File:QtCreator XELK 3 0 0 01.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 01.png|200px|border|center]]
  
−
Clik Next to proced the installation.
+
Clik Next to proced with the installation.
  
 
[[File:QtCreator XELK 3 0 0 02.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 02.png|200px|border|center]]
  
−
Select Skip
+
Select Skip.
  
 
[[File:QtCreator XELK 3 0 0 03.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 03.png|200px|border|center]]
−
Select Next
+
Select Next.
 +
 
 
[[File:QtCreator XELK 3 0 0 04.png|200px|border|center]]
 
[[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 XELK 3 0 0 05.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 05.png|200px|border|center]]
−
Select Next
+
 
 +
Select Next.
 +
 
 
[[File:QtCreator XELK 3 0 0 06.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 06.png|200px|border|center]]
 +
 +
Click Next again.
 +
 
[[File:QtCreator XELK 3 0 0 07.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 07.png|200px|border|center]]
 +
 +
And then click install and complete the installation.
 +
 
[[File:QtCreator XELK 3 0 0 08.png|200px|border|center]]
 
[[File:QtCreator XELK 3 0 0 08.png|200px|border|center]]
 +
 +
== Automatic configuration ==
 +
 
Now it is necessary to add the definition of your board before proceding developing your first application.
 
Now it is necessary to add the definition of your board before proceding developing your first application.
−
For adding the board definition run
+
 
 +
For adding the board definition run.
 +
 
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
 
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 Tools->Options menu Kits named XELK.
 +
 +
[[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.
 +
 +
[[File:QtCreator XELK 3 0 0 10.png|400px|border|center]]
 +
 +
== Manual configuration ==
 +
 +
Go to Tools->Options menu Devices
 +
 +
[[File:QtCreator XELK 3 0 0 09.png|400px|border|center]]
 +
 +
Select the Devices tab and press 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 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 XELK 3 0 0 24.png|400px|border|center]]
 +
 +
If everithing went ok you should see a dialog like the next one
 +
 +
[[File:QtCreator XELK 3 0 0 25.png|400px|border|center]]
 +
 +
And finally this is how the device window should look like
 +
 +
[[File:QtCreator XELK 3 0 0 26.png|400px|border|center]]
 +
 +
Next you need to configure the cross compilation tool inside Build & Run -> Compiler.
 +
 +
[[File:QtCreator XELK 3 0 0 27.png|400px|border|center]]
 +
 +
Click Add -> GCC and add the compiler path at
 +
 +
<pre>
 +
/home/dvdk/axel/sdk/latest/sysroots/x86_64-pokysdk-linux/usr/bin/arm-poky-linux-gnueabi/arm-poky-linux-gnueabi-gcc
 +
</pre>
 +
 +
== 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 enviroment variables with the command.
 +
 
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ ./env.sh
 
dvdk@vagrant-ubuntu-trusty-64:~$ ./env.sh
 
</pre>
 
</pre>
−
In the same terminal digit the following command if you diden't change the installation directory
+
 
 +
In the same terminal digit the following command if you diden't change the installation directory.
 +
 
 
<pre>
 
<pre>
 
dvdk@vagrant-ubuntu-trusty-64:~$ ./qtcreator-4.3.0/bin/qtcreator
 
dvdk@vagrant-ubuntu-trusty-64:~$ ./qtcreator-4.3.0/bin/qtcreator
 
</pre>
 
</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|400px|border|center]]
+
 
−
Select the Kits tab and make sure that your configurations mateches the one displayed
+
 
−
[[File:QtCreator XELK 3 0 0 10.png|400px|border|center]]
+
Close the tab and create a new project.
−
Close the tab and create a new project
+
 
 
[[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 name Test and pres Next
+
 
 +
Now call the name Test and pres 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]]
−
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 XELK 3 0 0 15.png|400px|border|center]]
−
Click finish and conclude the setup
+
 
 +
Click finish and conclude the setup.
 +
 
 
[[File:QtCreator XELK 3 0 0 16.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 16.png|400px|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
 
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
 +
 
[[File:QtCreator XELK 3 0 0 17.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 17.png|400px|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!"
+
 
 +
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!".
 +
 
 
[[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 line inside the Test.pro file
 +
 
<pre>
 
<pre>
 
target.path = /tmp/Test # path on device
 
target.path = /tmp/Test # path on device
 
INSTALLS += target
 
INSTALLS += target
 
</pre>
 
</pre>
−
Where /temp/Test is the path in which your application will be dowloaded inside the device  
+
 
 +
Where /temp/Test is the path in which your application will be dowloaded 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 select the Project window select the Run configuration and as Arguments.
 +
 
 
<pre>
 
<pre>
 
-platform eglfs
 
-platform eglfs
 
</pre>
 
</pre>
 +
 
[[File:QtCreator XELK 3 0 0 20.png|400px|border|center]]
 
[[File:QtCreator XELK 3 0 0 20.png|400px|border|center]]
−
After these changes you are ready to debug your application directly inside your board with the Run/Debug command
+
 
 +
After these changes you are ready to debug your application directly inside your board with the Run/Debug command.
 +
 
 
[[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 08:57, 22 February 2018

HOME SOMs SBCs ToloMEO Embedded Assistant Sale-tag.pngGET A QUOTE Customer-service.pngONLINE HELPDESK
Roadmap IoT Services ML/AI services Embedded Design Services

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

To install Qt Creator inside your toolchain lunch 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

QtCreator XELK 3 0 0 01.png

Clik Next to proced with the installation.

QtCreator XELK 3 0 0 02.png

Select Skip.

QtCreator XELK 3 0 0 03.png

Select Next.

QtCreator XELK 3 0 0 04.png

Select the install directory or click Next.

QtCreator XELK 3 0 0 05.png

Select Next.

QtCreator XELK 3 0 0 06.png

Click Next again.

QtCreator XELK 3 0 0 07.png

And then click install and complete the installation.

QtCreator XELK 3 0 0 08.png

Automatic configuration[edit | edit source]

Now it is necessary to add the definition of your board before proceding developing your first application.

For adding the board definition run. 

dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/
dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-post-install.sh

If the installation process went ok you should see inside the Tools->Options menu Kits named XELK.

QtCreator XELK 3 0 0 09.png

Select the Kits tab and make sure that your configurations mateches the one displayed.

QtCreator XELK 3 0 0 10.png

Manual configuration[edit | edit source]

Go to Tools->Options menu Devices

QtCreator XELK 3 0 0 09.png

Select the Devices tab and press 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 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.

QtCreator XELK 3 0 0 24.png

If everithing went ok you should see a dialog like the next one

QtCreator XELK 3 0 0 25.png

And finally this is how the device window should look like

QtCreator XELK 3 0 0 26.png

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 at 

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

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 enviroment variables with the command. 

dvdk@vagrant-ubuntu-trusty-64:~$ ./env.sh

In the same terminal digit the following command if you diden't change the installation directory. 

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


Close the tab and create a 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 name Test and pres 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 and conclude the setup.

QtCreator XELK 3 0 0 16.png

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

QtCreator XELK 3 0 0 17.png

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

QtCreator XELK 3 0 0 18.png

After that, you need to insert the following 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 dowloaded inside the device.

QtCreator XELK 3 0 0 19.png

The last step before running the application inside the device is to select the Project window select the Run configuration and as Arguments. 

-platform eglfs
QtCreator XELK 3 0 0 20.png

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

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=7585"