Difference between revisions of "Getting Started With Qt Creator"

From wiki.emacinc.com
Jump to: navigation, search
Line 3: Line 3:
 
|title=Getting Started with Qt Creator
 
|title=Getting Started with Qt Creator
 
|titlemode=append
 
|titlemode=append
|keywords=
+
|keywords=Qt Creator, Tutorial, Qt Creator Examples
 
|description=The following page can be used to get familiarized with EMAC Qt Creator.
 
|description=The following page can be used to get familiarized with EMAC Qt Creator.
 
}}
 
}}
Line 38: Line 38:
 
After installing EMAC SDK, launch the EMAC Qt Creator desktop icon.
 
After installing EMAC SDK, launch the EMAC Qt Creator desktop icon.
  
1. Press the Windows key and search for "Qt Creator EMAC"
+
1. Press the Windows key and search for '''Qt Creator EMAC'''
  
 
2. Put the Qt Creator EMAC icon on the Launcher for easy access.
 
2. Put the Qt Creator EMAC icon on the Launcher for easy access.
  
[[File:Qt_Creator_Icon.jpg|600px|left|thumb|Figure 1: Qt Launcher Icon]]
+
[[File:Qt_Creator_Icon.png|600px|left|thumb|Figure 1: Qt Launcher Icon]]
 
<br clear=all>
 
<br clear=all>
  
3. To generate a new project from Qt Creator, select "New Project" on the opening splash window. The examples being used are all written in <code> C programming </code> language.
+
3. To generate a new project from Qt Creator, select '''New Project''' on the opening splash window. The examples being used are all written in <code> C programming </code> language.
  
4. After selecting "New Project" a new window will pop up. To run a <code> C programming </code> example using EMAC hardware, select "EMAC Project" under the Projects tab. Then select "EMAC C Project (CMake Build)". Click the "Choose" button on the bottom right of window to continue to the next page as shown in Figure 2.
+
[[File:Qtcreator_gui.png|600px|left|thumb|Figure 2: Qt Creator GUI]]
 +
<br clear=all>
 +
 
 +
4. After selecting '''New Project''' a new window will pop up. To run a <code> C programming </code> example using EMAC hardware, select '''EMAC Project''' under the Projects tab. Then select '''EMAC C Project (CMake Build)'''. Click the '''Choose''' button on the bottom right of window to continue to the next page as shown in Figure 3.
  
[[File:EMAC_C_Project.png|600px|left|thumb|Figure 2: Qt Creator EMAC Project]]
+
[[File:EMAC_C_Project.png|600px|left|thumb|Figure 3: Qt Creator EMAC Project]]
 
<br clear=all>
 
<br clear=all>
  
5. The next page will be "Introduction and Project Location". Select a name for the <code> C </code> project. Once the project name is given, choose a a directory to store the project. Note: It is '''highly recommended''' to store your project other than the default location. For this example, we used ''/home/developer/Projects''.
+
5. The next page will be '''Introduction and Project Location'''. Select a name for the <code> C </code> project. Once the project name is given, choose a a directory to store the project. Note: It is highly recommended to store your project other than the default location. For this example, we used ''/home/developer/Projects''.
  
[[File:Project_location1.png|600px|left|thumb|Figure 3: Qt Creator Project Location]]
+
[[File:Project_location1.png|600px|left|thumb|Figure 4: Qt Creator Project Location]]
 
<br clear=all>
 
<br clear=all>
  
6. The next page summarizes the '''EMAC C Project'''. Click "Finish" to continue.
+
6. The next page summarizes the '''EMAC C Project'''. Click '''Finish''' to continue.
  
[[File:Project_summary1.png|600px|left|thumb|Figure 4: Qt Creator Project Summary]]
+
[[File:Project_summary1.png|600px|left|thumb|Figure 5: Qt Creator Project Summary]]
 
<br clear=all>
 
<br clear=all>
  
7. Next, it will prompt you to the "CMake Wizard Build Location". Click "Next" to continue. Note: It is '''highly recommended''' to use the default build directory as stated below in Figure 5.  
+
7. Next, it will prompt you to the '''CMake Wizard Build Location'''. Click '''Next''' to continue. Note: It is highly recommended to use the default build directory as stated below in Figure 6.  
  
[[File:Build_location.png|600px|left|thumb|Figure 5: Qt Creator Build Location]]  
+
[[File:Build_location.png|600px|left|thumb|Figure 6: Qt Creator Build Location]]  
 
<br clear=all>
 
<br clear=all>
  
8. "CMake Wizard" will then prompt you to "Run CMake". For setting up the Desktop Kit, click "Run CMake" and the output should be similar to Figure 6 below. Click "Finish" to start new project.
+
8. '''CMake Wizard''' will then prompt you to '''Run CMake'''. For setting up the Desktop Kit, click '''Run CMake''' and the output should be similar to Figure 7 below. Click '''Finish''' to start new project.
 +
 
 +
[[File:Run_cmake1.png|600px|left|thumb|Figure 7: Qt Creator Run CMake]]
 +
<br clear=all>
  
[[File:Run_cmake1.png|600px|left|thumb|Figure 6: Qt Creator Run CMake]]
+
9. The next step is to setup your device which you'll be using for the Qt Creator examples. Click Tools -> Options
<br clear=all
+
{{note|The board being used will be the iPac-9x25. The iPac-9x25 is a 32-bit ARM architecture.}}
  
>9. Once the Desktop Kit is configured, the hardware architecture kit needs to be installed. Navigate to "Add Kit" in the "Projects" tab. Under "Add Kit" select the architecture for the board being used. Click "EMAC OE 5.0 arm". 
+
10. Select '''Devices''' from the left pane.
{{note|The board being used will be the iPac-9x25. The iPac-9x25 is a 32-bit architecture armv5te. }}
 
  
[[File:Add_kit_arm.jpg|600px|left|thumb|Figure 7: Qt Creator Add Kit]]
+
[[File:Options_devices.png|600px|left|thumb|Figure 8: Qt Creator Device Option]]
 
<br clear=all>
 
<br clear=all>
  
10. As previously stated in step 7 it will prompt you to the "CMake Wizard Build Location". Click "Next" to continue. Note: It is '''highly recommended''' to use the default build directory as stated below in Figure 8.
+
11. Press the '''Add''' button
 +
 
 +
12. Select Generic Linux Device, then press '''Start Wizard'''.
  
[[File:Add_arm.png|600px|left|thumb|Figure 8: Qt Creator Add Kit Build Location]]
+
[[File:Generic_linux.png|600px|left|thumb|Figure 9: Qt Creator Wizard Selection]]
 
<br clear=all>
 
<br clear=all>
  
11. "CMake Wizard" will then prompt you to "Run CMake". For setting up the iPac-9x25 arm kit, click the box next to "Arguments". Copy and paste the string below:   
+
13. Type in a name, the IP address, user name and password for the device. Use the credentials below to sign in.
 +
 
 +
{| class="wikitable"
 +
!colspan="2"|Table 4: Default Login Credentials
 +
|-
 +
! Username !! Password
 +
|-
 +
| root || emac_inc
 +
|}
 +
 
 +
[[File:Device_connection.png|600px|left|thumb|Figure 10: Qt Creator Configuration Setup]]
 +
<br clear=all>
 +
 
 +
14. Click '''Next'''.
 +
 
 +
15. Click '''Finish'''.
 +
 
 +
16. A connection will be established with the target device.
 +
 
 +
[[File:Device_test.png|600px|left|thumb|Figure 11: Qt Creator Device Test]]
 +
<br clear=all>
 +
 
 +
17. Click '''Close'''.
 +
 
 +
18. Click '''Apply'''.
 +
 
 +
19. Once the Desktop Kit is configured, and the device is setup the hardware architecture kit needs to be installed. Navigate to '''Add Kit''' in the '''Projects''' tab. Under '''Add Kit''' select the architecture for the board being used. Click '''EMAC OE 5.0 arm'''. 
 +
 
 +
 
 +
[[File:Add_kit_arm.jpg|600px|left|thumb|Figure 12: Qt Creator Add Kit]]
 +
<br clear=all>
 +
 
 +
20. As previously stated in step 7 it will prompt you to the '''CMake Wizard Build Location'''. Click '''Next''' to continue. Note: It is highly recommended to use the default build directory as stated below in Figure 13.
 +
 
 +
[[File:Add_arm.png|600px|left|thumb|Figure 13: Qt Creator Add Kit Build Location]]
 +
<br clear=all>
 +
 
 +
21. '''CMake Wizard''' will then prompt you to '''Run CMake'''. For setting up the iPac-9x25 arm kit, click the box next to '''Arguments'''. Copy and paste the string below:   
 
  ''-DARCH:STRING=arm''
 
  ''-DARCH:STRING=arm''
  
[[File:Arm_argument_string.png|600px|left|thumb|Figure 9: Qt Creator Argument String]]
+
[[File:Arm_argument_string.png|600px|left|thumb|Figure 14: Qt Creator Argument String]]
 
<br clear=all>
 
<br clear=all>
  
EMAC SDK provides another architectural kit for x86 hardware. If using an x86 architecture, copy and paste the argument string below in the "Arguments" box.   
+
EMAC SDK provides another architectural kit for x86 hardware. If using an x86 architecture, copy and paste the argument string below in the '''Arguments''' box.   
 
  ''-DARCH:STRING=x86''   
 
  ''-DARCH:STRING=x86''   
  
12. Once the arguments string is pasted in the box, click "Run CMake" and the output should be similar to Figure 10 below. Click "Finish" to add the arm kit to the current project.
+
22. Once the arguments string is pasted in the box, click '''Run CMake''' and the output should be similar to Figure 15 below. Click '''Finish''' to add the arm kit to the current project.
  
[[File:Run_arm_cmake.png|600px|left|thumb|Figure 10: Qt Creator Run CMake]]
+
[[File:Run_arm_cmake.png|600px|left|thumb|Figure 15: Qt Creator Run CMake]]
 
<br clear=all>
 
<br clear=all>
  
13. To confirm if the kits installed correctly, click on the "All" tab (Monitor symbol) on the left hand side of the Qt Creator window as shown in Figure 11. Both "Desktop" and "OE 5.0 arm" kit will be present.
+
23. To confirm if the kits installed correctly, click on the '''Kit Selector''' tab (Monitor symbol) on the left hand side of the Qt Creator window as shown in Figure 16. Both '''Desktop''' and '''OE 5.0 arm''' kit will be present.
  
[[File:Arm_kit.jpg|600px|left|thumb|Figure 11: Qt Creator Kits Installed]]
+
[[File:Arm_kit.jpg|600px|left|thumb|Figure 16: Qt Creator Kits Installed]]
 
<br clear=all>
 
<br clear=all>
 +
 +
24. To run the example projects on the target board remotely, you'll need to add it to the '''Run Configuration'''. Click on '''Projects'''.
 +
 +
25. Select '''Run''' under the '''OE 5.0 arm''' tab.
 +
 +
26. Next to '''Run Configuration''', click on '''Add''' and select your project name (on Remote Generic Linux Host). In this case, our project name is Prime_Numbers (on Remote Generic Linux Host).
 +
 +
[[File:Run_config.jpg|600px|left|thumb|Figure 17: Qt Creator Run Configuration]]
 +
<br clear=all>
 +
 +
You are now all set up to run the examples below on Qt Creator.
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*****************************************      Examples        *****************************************/ -->
 
<!-- /*****************************************      Examples        *****************************************/ -->
Line 109: Line 164:
 
The first example is a basic <code> hello c </code> example project.  
 
The first example is a basic <code> hello c </code> example project.  
  
1. After creating a new project and installing the necessary kits for the target board, navigate to the "Edit" tab on Qt Creator. Qt Creator will automatically have the <code> hello c </code> example uploaded as shown in Figure 12.
+
1. After creating a new project and installing the necessary kits for the target board, navigate to the '''Edit''' tab on Qt Creator. Qt Creator will automatically have the <code> hello c </code> example uploaded as shown in Figure 18.
  
 
<syntaxhighlight lang="c">
 
<syntaxhighlight lang="c">
Line 123: Line 178:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
[[File:Edit_window.png|600px|left|thumb|Figure 12: Qt Creator Edit Window]]  
+
[[File:Edit_window.png|600px|left|thumb|Figure 18: Qt Creator Edit Window]]  
 
<br clear=all>
 
<br clear=all>
  
2. Before executing the example, you must build the program first. Click on the build icon (hammer symbol) on the bottom left of the Qt Creator. If the build was successful, a green bar will fill on the bottom right of the Qt Creator.
+
2. Before executing the example, you must build the program first. Click on the build icon (hammer symbol) on the bottom left of Qt Creator. If the build was successful, a green bar will fill on the bottom right of the window.
  
3. Once the program successfully builds, you can now run the program. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints <code> Hello EMAC OE! </code> in the "Application Output" terminal.  
+
3. Once the program successfully builds, you can now run the program. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints <code> Hello EMAC OE! </code> in the '''Application Output''' terminal.  
  
[[File:Final_output.png|600px|left|thumb|Figure 13: Qt Creator Edit Window]]
+
[[File:Final_output.png|600px|left|thumb|Figure 19: Qt Creator Edit Window]]
 
<br clear=all>
 
<br clear=all>
  
 
The second example will show how to run a <code> c programming </code> project on a target board. This example will show all prime numbers from 1 - 100 and output it on Qt Creator remote terminal.
 
The second example will show how to run a <code> c programming </code> project on a target board. This example will show all prime numbers from 1 - 100 and output it on Qt Creator remote terminal.
  
1. Create a new project and install the necessary kits for the target board just as shown before. Call this project <code> Prime_Numbers </code>. Then Navigate to the "Edit" tab on Qt Creator. Copy and paste the following code below to the Qt Creator terminal.  
+
1. Create a new project and install the necessary kits for the target board just as shown before. Call this project <code> Prime_Numbers </code>. Then Navigate to the '''Edit''' tab on Qt Creator. Copy and paste the following code below to the Qt Creator terminal.  
  
 
<syntaxhighlight lang="c">
 
<syntaxhighlight lang="c">
Line 164: Line 219:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
[[File:Prime_Numbers_edit.png|600px|left|thumb|Figure 14: Qt Creator Edit Window]]  
+
[[File:Prime_Numbers_edit.png|600px|left|thumb|Figure 210: Qt Creator Edit Window]]  
 
<br clear=all>
 
<br clear=all>
  
2. Click on the build icon (hammer symbol) on the bottom left of the Qt Creator. If the build was successful, a green bar will fill on the bottom right of the Qt Creator.
+
2. Click on the build icon (hammer symbol) on the bottom left of the Qt Creator. If the build was successful, a green bar will fill on the bottom right of Qt Creator.
  
3. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints all prime numbers from 1 - 100 in the "Application Output" terminal.  
+
3. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints all prime numbers from 1 - 100 in the '''Application Output''' terminal.  
  
[[File:Final_Prime_Numbers.png|600px|left|thumb|Figure 14: Qt Creator Edit Window]]  
+
[[File:Final_Prime_Numbers.png|600px|left|thumb|Figure 21: Qt Creator Edit Window]]  
 
<br clear=all>
 
<br clear=all>
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
Line 177: Line 232:
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
{{:Templateimpl:conclusion | initials=BS | title=Getting Started with Qt Creator | desc=The following page can be used to get familiarized with EMAC Qt Creator. | project=OE 5.0 }}
 
{{:Templateimpl:conclusion | initials=BS | title=Getting Started with Qt Creator | desc=The following page can be used to get familiarized with EMAC Qt Creator. | project=OE 5.0 }}
This page is a quick getting started tutorial on how to use EMAC Qt Creator for the first time. It shows you how to create an EMAC C Project, set up the necessary kits for your target board, and how to build and run example projects.  
+
This page is a quick getting started tutorial on how to use EMAC Qt Creator for the first time. It shows you how to create an EMAC C Project, set up the necessary kits for your target board, setup your target board, and how to build and run example projects.  
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /******************************************  More Information  *****************************************/ -->
 
<!-- /******************************************  More Information  *****************************************/ -->

Revision as of 11:10, 25 February 2015

TODO: {{#todo: NotStarted (02.03.2015-10:42->BS+)|Brian Serrano|OE 5.0,BS}}

The following page describes the process of getting familiar with EMAC Qt Creator.

Background

Qt Creator is a cross-platform Open Source Integrated Development Environment (IDE) that can be used to develop software for many different languages. It includes a visual debugger and an integrated GUI layout and forms designer. See the Qt Project site for more information http://qt-project.org/wiki/Category:Tools::QtCreator.

General Information

Tools Required

  • EMAC OE SDK 5.0
  • EMAC Qt Creator
  • GNU make
  • cmake

Setup

  1. Make sure the system is configured for the correct target machine and that the IP and user/password are set.
  2. Launch EMAC Qt Creator.

Getting Started with Qt Creator

After installing EMAC SDK, launch the EMAC Qt Creator desktop icon.

1. Press the Windows key and search for Qt Creator EMAC

2. Put the Qt Creator EMAC icon on the Launcher for easy access.

Figure 1: Qt Launcher Icon


3. To generate a new project from Qt Creator, select New Project on the opening splash window. The examples being used are all written in C programming language.

Figure 2: Qt Creator GUI


4. After selecting New Project a new window will pop up. To run a C programming example using EMAC hardware, select EMAC Project under the Projects tab. Then select EMAC C Project (CMake Build). Click the Choose button on the bottom right of window to continue to the next page as shown in Figure 3.

Figure 3: Qt Creator EMAC Project


5. The next page will be Introduction and Project Location. Select a name for the C project. Once the project name is given, choose a a directory to store the project. Note: It is highly recommended to store your project other than the default location. For this example, we used /home/developer/Projects.

Figure 4: Qt Creator Project Location


6. The next page summarizes the EMAC C Project. Click Finish to continue.

Figure 5: Qt Creator Project Summary


7. Next, it will prompt you to the CMake Wizard Build Location. Click Next to continue. Note: It is highly recommended to use the default build directory as stated below in Figure 6.

Figure 6: Qt Creator Build Location


8. CMake Wizard will then prompt you to Run CMake. For setting up the Desktop Kit, click Run CMake and the output should be similar to Figure 7 below. Click Finish to start new project.

Figure 7: Qt Creator Run CMake


9. The next step is to setup your device which you'll be using for the Qt Creator examples. Click Tools -> Options



NOTE
The board being used will be the iPac-9x25. The iPac-9x25 is a 32-bit ARM architecture.


10. Select Devices from the left pane.

Figure 8: Qt Creator Device Option


11. Press the Add button

12. Select Generic Linux Device, then press Start Wizard.

Figure 9: Qt Creator Wizard Selection


13. Type in a name, the IP address, user name and password for the device. Use the credentials below to sign in.

Table 4: Default Login Credentials
Username Password
root emac_inc
Figure 10: Qt Creator Configuration Setup


14. Click Next.

15. Click Finish.

16. A connection will be established with the target device.

Figure 11: Qt Creator Device Test


17. Click Close.

18. Click Apply.

19. Once the Desktop Kit is configured, and the device is setup the hardware architecture kit needs to be installed. Navigate to Add Kit in the Projects tab. Under Add Kit select the architecture for the board being used. Click EMAC OE 5.0 arm.


Figure 12: Qt Creator Add Kit


20. As previously stated in step 7 it will prompt you to the CMake Wizard Build Location. Click Next to continue. Note: It is highly recommended to use the default build directory as stated below in Figure 13.

Figure 13: Qt Creator Add Kit Build Location


21. CMake Wizard will then prompt you to Run CMake. For setting up the iPac-9x25 arm kit, click the box next to Arguments. Copy and paste the string below:

-DARCH:STRING=arm
Figure 14: Qt Creator Argument String


EMAC SDK provides another architectural kit for x86 hardware. If using an x86 architecture, copy and paste the argument string below in the Arguments box.

-DARCH:STRING=x86  

22. Once the arguments string is pasted in the box, click Run CMake and the output should be similar to Figure 15 below. Click Finish to add the arm kit to the current project.

Figure 15: Qt Creator Run CMake


23. To confirm if the kits installed correctly, click on the Kit Selector tab (Monitor symbol) on the left hand side of the Qt Creator window as shown in Figure 16. Both Desktop and OE 5.0 arm kit will be present.

Figure 16: Qt Creator Kits Installed


24. To run the example projects on the target board remotely, you'll need to add it to the Run Configuration. Click on Projects.

25. Select Run under the OE 5.0 arm tab.

26. Next to Run Configuration, click on Add and select your project name (on Remote Generic Linux Host). In this case, our project name is Prime_Numbers (on Remote Generic Linux Host).

Figure 17: Qt Creator Run Configuration


You are now all set up to run the examples below on Qt Creator.

Examples

This section will show how to run C programming examples through the Qt Creator IDE. The example board will be the iPac-9x25.

The first example is a basic hello c example project.

1. After creating a new project and installing the necessary kits for the target board, navigate to the Edit tab on Qt Creator. Qt Creator will automatically have the hello c example uploaded as shown in Figure 18.

#include <stdio.h>
#include <stdlib.h>

int main(int argc, char * argv[])
{
    printf("Hello EMAC OE!\n");
   
    exit(EXIT_SUCCESS);
}
Figure 18: Qt Creator Edit Window


2. Before executing the example, you must build the program first. Click on the build icon (hammer symbol) on the bottom left of Qt Creator. If the build was successful, a green bar will fill on the bottom right of the window.

3. Once the program successfully builds, you can now run the program. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints Hello EMAC OE! in the Application Output terminal.

Figure 19: Qt Creator Edit Window


The second example will show how to run a c programming project on a target board. This example will show all prime numbers from 1 - 100 and output it on Qt Creator remote terminal.

1. Create a new project and install the necessary kits for the target board just as shown before. Call this project Prime_Numbers . Then Navigate to the Edit tab on Qt Creator. Copy and paste the following code below to the Qt Creator terminal.

#include <stdio.h>
#include <stdlib.h>

int main(int argc, char * argv[])
{ 
  int i;
  int j;

  for (i = 2; i <= 100; i++)
  {
    for (j = 2; j <= i; j++)
    {
      if (i%j==0)
      {
        break;
      }
    }
    if (i == j)
    {
      printf ("%d is a prime number. \n", i);
    }
  }
  return 0;
}
Figure 210: Qt Creator Edit Window


2. Click on the build icon (hammer symbol) on the bottom left of the Qt Creator. If the build was successful, a green bar will fill on the bottom right of Qt Creator.

3. Click on the run icon (green arrow symbol) on the left hand side of Qt Creator. The program prints all prime numbers from 1 - 100 in the Application Output terminal.

Figure 21: Qt Creator Edit Window


Conclusion

This page is a quick getting started tutorial on how to use EMAC Qt Creator for the first time. It shows you how to create an EMAC C Project, set up the necessary kits for your target board, setup your target board, and how to build and run example projects.

Further Information

Where to Go Next
  • TBD
Pages with Related Content
  • TBD