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

From DAVE Developer's Wiki
Jump to: navigation, search
(Created page with "= Installing Qt Creator = To add this new toolchain to QTCreator, run it <pre> dvdk@vagrant-ubuntu-trusty-64:~$ cd axel/ dvdk@vagrant-ubuntu-trusty-64:~/axel$ ./qt-creator-ope...")
 
Line 7: Line 7:
 
An installation wizard will appear
 
An installation wizard will appear
  
[[File:QtCreator XELK 3 0 0 01.png|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 01.png|200px|border|center]]
  
 
Clik Next to proced the installation.
 
Clik Next to proced the installation.
  
[[File:QtCreator XELK 3 0 0 02.png|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 02.png|200px|border|center]]
  
 
Select Skip
 
Select Skip
[[File:QtCreator XELK 3 0 0 03.png|200px|left|alt text]]
+
 
 +
[[File:QtCreator XELK 3 0 0 03.png|200px|border|center]]
 
Select Next
 
Select Next
[[File:QtCreator XELK 3 0 0 04.png|200px|left|alt text]]
+
[[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|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 05.png|200px|border|center]]
 
Select Next
 
Select Next
[[File:QtCreator XELK 3 0 0 06.png|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 06.png|200px|border|center]]
[[File:QtCreator XELK 3 0 0 07.png|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 07.png|200px|border|center]]
[[File:QtCreator XELK 3 0 0 08.png|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 08.png|200px|border|center]]
 
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
Line 39: Line 40:
 
</pre>
 
</pre>
 
If the installation process went ok you should see inside the Tools->Options menu a Kits named XELK
 
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|alt text]]
+
[[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 mateches the one displayed  
[[File:QtCreator XELK 3 0 0 10.png|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[File:QtCreator XELK 3 0 0 15.png|200px|border|center]]
 
Click finish and conclude the setup
 
Click finish and conclude the setup
[[File:QtCreator XELK 3 0 0 16.png|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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|200px|left|alt text]]
+
[[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
<pro>
+
<pre>
 
target.path = /tmp/Test # path on device
 
target.path = /tmp/Test # path on device
 
INSTALLS += target
 
INSTALLS += target
</pro>
+
</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|200px|left|alt text]]
+
[[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
 +
<pre>
 +
-platform eglfs
 +
</pre>
 +
[[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
 +
[[File:QtCreator XELK 3 0 0 21.png|400px|border|center]]

Revision as of 16:54, 21 February 2018

Installing Qt Creator[edit | edit source]

To add this new toolchain to QTCreator, run it

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 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
QtCreator XELK 3 0 0 07.png
QtCreator XELK 3 0 0 08.png

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

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

If the installation process went ok you should see inside the Tools->Options menu a 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

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