Difference between revisions of "Creating a New EMAC OE SDK Project with qmake in Qt Creator"

From wiki.emacinc.com
Jump to: navigation, search
Line 1: Line 1:
{{todo| Review (11.10.2015-12:42->JJ+);(11.11.2015-16:05->JJ+);(11.12.2015-12:30->JJ+)|Jeffrey Jung| project=OE 5.0,JJ,Review }}
+
{{todo| Buggy (11.10.2015-12:42->JJ+);(11.11.2015-16:05->JJ+);(11.12.2015-12:30->JJ+);(11.12.2015-14:30->MG+)|Jeffrey Jung| project=OE 5.0,JJ,Buggy }}
 
{{#seo:
 
{{#seo:
 
|title=Creating the Project
 
|title=Creating the Project
Line 18: Line 18:
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
{{:Templateimpl:bg | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
 
{{:Templateimpl:bg | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
The user interface (UI) designer tool in Qt Creator can be used to develop applications reliant on a UI. Written in C++, these applications built using the EMAC OE SDK and the <code>qmake</code> tool can be deployed to EMAC carriers equipped with touch screen displays. Developers will be able to create software that is much more interactive with the user. For more information about Qt Creator, go to http://wiki.qt.io/Main_Page.
+
The user interface (UI) designer tool in Qt Creator can be used to develop applications reliant on a UI. Written in C++, these applications built using the EMAC OE SDK and the <code>qmake</code> tool can be deployed to EMAC carriers equipped with touch screen displays. Developers will be able to create software that is much more interactive with the user. For more information about Qt Creator, go to the [http://wiki.qt.io/Qt_Creator_Guidance Qt Creator Guidance] page.
  
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
Line 30: Line 30:
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
{{:Templateimpl:using | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
 
{{:Templateimpl:using | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
<cl>1. Launch the EMAC Qt Creator.<br />[[File:EMAC_Qt_Creator_Icon.png]]
+
<cl>1. Launch the EMAC Qt Creator. <br /><br />
 +
[[File:EMAC_Qt_Creator_Icon.png]]
 +
<br /><br />
  
* Click on "New Project".<br />[[File:Qtcreator_gui.png|800px]]
+
* Click on "New Project".<br /><br />
 +
[[File:Qtcreator_gui.png|800px]]
 +
<br /><br />
  
 
* A new window will pop up to specify the type of project you will be coding for. Select '''Application''' under the Projects column.
 
* A new window will pop up to specify the type of project you will be coding for. Select '''Application''' under the Projects column.
  
* Select '''Qt Widgets Application'''. <br /> [[File:SelectQtWidgetApplication.png|800px]]
+
* Select '''Qt Widgets Application'''. <br /> <br />
 +
[[File:SelectQtWidgetApplication.png|800px]]
 +
<br /><br />
  
* Click '''Choose'''. You'll be brought to another page requesting you to give the project a name and choose the location of the project. <br > [[File:QtAppName_Location.png| 800px]]
+
* Click '''Choose'''. You'll be brought to another page requesting you to give the project a name and choose the location of the project. <br ><br /> [[File:QtAppName_Location.png| 800px]]
 +
<br /><br />
  
 
* Once you've given your project a name and have determined the path to store the project, click '''Next'''.
 
* Once you've given your project a name and have determined the path to store the project, click '''Next'''.
  
* Select the kit required for the device(s) on which you wish to run the application. In this example, all kits are selected, but this project will be deployed to an OE 5.0 ARM device. Click '''Next'''. <br /> [[File:QtKitSelection.png|800px]]
+
* Select the kit required for the device(s) on which you wish to run the application. In this example, all kits are selected, but this project will be deployed to an OE 5.0 ARM device. Click '''Next'''. <br /> <br />
 +
[[File:QtKitSelection.png|800px]]
 +
<br /><br />
  
* Give the class a name and leave the base class as '''QMainWindow'''. The header, source, and form files will have the same name as the class name, but different extensions. These files may be modified if desired. Click '''Next''' to continue to the project summary.<br /> [[File:ClassInfo.png|800px]]
+
* Give the class a name and leave the base class as '''QMainWindow'''. The header, source, and form files will have the same name as the class name, but different extensions. These files may be modified if desired. Click '''Next''' to continue to the project summary.<br /> <br />[[File:ClassInfo.png|800px]]
 +
<br /><br />
  
 
* In the summary window, click '''Finish''' to be begin developing the project.
 
* In the summary window, click '''Finish''' to be begin developing the project.
Line 57: Line 67:
 
<cl>1. Start by double clicking on <code>HelloWorld.pro</code>.
 
<cl>1. Start by double clicking on <code>HelloWorld.pro</code>.
  
* Add the lines "<code>target.path = /tmp</code>" and "<code>INSTALLS += target</code>" at the bottom of the file. This will set the location of the object file of the project to the "<code>/tmp</code>" directory. The full path to the project will be "<code>/tmp/HelloWorld</code>". <br />[[File:DotProPathConfig.png|800px]]
+
* Add the lines "<code>target.path = /tmp</code>" and "<code>INSTALLS += target</code>" at the bottom of the file. This will set the location of the object file of the project to the "<code>/tmp</code>" directory. The full path to the project will be "<code>/tmp/HelloWorld</code>" on the target device. <br /><br />
 +
[[File:DotProPathConfig.png|800px]]
 +
<br /><br />
  
 
* Use <code>'''Ctrl + S'''</code> to save the file.
 
* Use <code>'''Ctrl + S'''</code> to save the file.
Line 65: Line 77:
 
* Click on '''Details''' for '''Upload files via SFTP''' and make sure the '''Incremental deployment''' box is unchecked.  
 
* Click on '''Details''' for '''Upload files via SFTP''' and make sure the '''Incremental deployment''' box is unchecked.  
  
* Since the applicaton will have a GUI and be run on an Embedded Linux system, the argument <code>'''-qws'''</code> is required under the '''Run''' configuration. <br /> [[File:QtProjectRunConfig.png|800px]]
+
* The <code>'''-qws'''</code> argument is required under the '''Run''' configuration to run the application as a Qt  server application. <br /> <br />
 +
[[File:QtProjectRunConfig.png|800px]]
 
</cl>
 
</cl>
  
Line 73: Line 86:
 
<cl>1. Under the '''Tools''' drop down box, select '''Options'''.
 
<cl>1. Under the '''Tools''' drop down box, select '''Options'''.
  
* Select '''Devices''' from the scroll area to the left of the '''Options''' window. <br /> [[File:Options_devices.png|800px]]
+
* Select '''Devices''' from the scroll area to the left of the '''Options''' window. <br /><br />
 +
[[File:Options_devices.png|800px]]
 +
<br /><br />
  
 
* Look to the top right of the window and click '''Add'''.
 
* Look to the top right of the window and click '''Add'''.
  
* You'll be brought to the '''Wizard Selection''' window to identify the type of device your target is. Select '''Generic Linux Device'''. <br /> [[File:Generic_linux.png]]
+
* You'll be brought to the '''Wizard Selection''' window to identify the type of device your target is. Select '''Generic Linux Device'''. <br /> <br />
 +
[[File:Generic_linux.png]]
 +
<br /><br />
  
* Click '''Start Wizard''' and set up the configuration for the device profile. Give the profile a name, set the device's IP Address, enter the username, and specify the authentication type. Provide a password if the authentication type requires it.<br /> [[File:9G45NewDeviceConnection.png]]
+
* Click '''Start Wizard''' and set up the configuration for the device profile. Give the profile a name, set the device's IP Address, enter the username, and specify the authentication type. Provide a password if the authentication type requires it.<br /><br />
 +
[[File:9G45NewDeviceConnection.png]]
 +
<br /><br />
  
 
* Click '''Next''' when all the proper information of the device is provided.  
 
* Click '''Next''' when all the proper information of the device is provided.  
  
* At the summary window, click '''Finish''' and a connection be tween the target device and the developer's desktop will be tested. <br /> [[File:Device_test.png]].
+
* At the summary window, click '''Finish''' and a connection be tween the target device and the developer's desktop will be tested. <br /><br /> [[File:Device_test.png]].
 
+
<br /><br />
* When the test has completed successfully, click '''Close'''. <br />
 
  
 +
* When the test has completed successfully, click '''Close'''.
 
* Click '''Apply''' in the '''Options''' window to save the profile.
 
* Click '''Apply''' in the '''Options''' window to save the profile.
 
+
* Click on the '''Build & Run''' section from the list box. Go to the '''Kits''' tab and click on the kit for the device. Under the '''Devices''' drop down menu, select the device profile that was just created. <br /><br />
* Click on the '''Build & Run''' section from the list box. Go to the '''Kits''' tab and click on the kit for the device. Under the '''Devices''' drop down menu, select the device profile that was just created. <br /> [[File:SelectDeviceToRun.png|800px]]
+
[[File:SelectDeviceToRun.png|800px]]
 +
<br /><br />
  
 
* Save the device profile by clicking '''Apply'''. The profile has been completed and the options can be closed by clicking '''Ok''' at the bottom right of the window.
 
* Save the device profile by clicking '''Apply'''. The profile has been completed and the options can be closed by clicking '''Ok''' at the bottom right of the window.
 
 
</cl>
 
</cl>
 
  
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
Line 108: Line 126:
 
* In the constructor, use the <code>qDebug()</code> function to print the string "<code>Hello World</code>".  
 
* In the constructor, use the <code>qDebug()</code> function to print the string "<code>Hello World</code>".  
  
* In the destructor, use the <code>qDebug()</code> function to print the string "<code>Goodbye World</code>". <br /> [[File:HelloGoodbye.png|800px]]
+
* In the destructor, use the <code>qDebug()</code> function to print the string "<code>Goodbye World</code>". <br /><br /> [[File:HelloGoodbye.png|800px]]
 +
<br /><br />
  
* Double click <code>helloworld.ui</code> under the '''Forms''' folder in the '''Edit''' tabe to the left of the screen. This displays an interface that will allow objects to be dragged on to the UI of the application. <br /> [[File:QtUIDesign.png|800px]]
+
* Double click <code>helloworld.ui</code> under the '''Forms''' folder in the '''Edit''' tabe to the left of the screen. This displays an interface that will allow objects to be dragged on to the UI of the application. <br /><br />
 +
[[File:QtUIDesign.png|800px]]
 +
<br /><br />
  
 
* Drag and drop a label to the UI.
 
* Drag and drop a label to the UI.
  
* Double click on the label to change the text to "<code>Hello World</code>". You may need to resize the label so the text can be seen. <br /> [[File:HelloUI.png|800px]]
+
* Double click on the label to change the text to "<code>Hello World</code>". You may need to resize the label so the text can be seen. <br /><br /> [[File:HelloUI.png|800px]]
 
</cl>
 
</cl>
  
Line 120: Line 141:
 
<cl>1. Click on the icon of a monitor at the bottom left of the window.  
 
<cl>1. Click on the icon of a monitor at the bottom left of the window.  
  
* Select the proper kit for your device, '''Build->Debug''', and the project name under '''Run'''. <br /> [[File:BuildDebugRun.png| 800px]]
+
* Select the proper kit for your device, '''Build->Debug''', and the project name under '''Run'''. <br /><br />
 +
[[File:BuildDebugRun.png| 800px]]
 +
<br /><br />
  
 
* Build the project by clicking the hammer icon at the bottom left of the window. A little window will momentarily pop up at the bottom right of the screen. The project has been successfully built if the green progress bar is full and now error messages have appeared.       
 
* Build the project by clicking the hammer icon at the bottom left of the window. A little window will momentarily pop up at the bottom right of the screen. The project has been successfully built if the green progress bar is full and now error messages have appeared.       
  
* Once the project has successfully built, the project may be run. Click the green triangle icon at the bottom left of the window, below the monitor icon. <br /> [[File:HelloWorldRun.png| 800px]]
+
* Once the project has successfully built, the project may be run. Click the green triangle icon at the bottom left of the window, below the monitor icon. <br /><br />
 +
[[File:HelloWorldRun.png| 800px]]
 +
<br /><br />
 
</cl>
 
</cl>
  
Line 133: Line 158:
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
{{:Templateimpl:conclusion | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
 
{{:Templateimpl:conclusion | initials=JJ | title=Creating the Project | desc=Creating a New EMAC OE SDK Project with qmake in Qt Creator | project=OE 5.0 }}
Although very similar to [[Getting_Started_With_Qt_Creator | Getting Started with Qt Creator]], this guide differes by introducing the reader to the process of developing a Qt application with a graphical user interface. Developing a new application generally follows these steps: create a new project, configure a new device profile if needed, modify the build and run conditions to allow deployment on the remote device, drag and drop the visual elements to the GUI using the UI designer, write the code needed to respond to interactions with the UI, build the application, and run the application upon a successful build.
+
Although very similar to [[Getting_Started_With_Qt_Creator | Getting Started with Qt Creator]], this guide differs by introducing the reader to the process of developing a Qt application with a graphical user interface using Qt's qmake build system. Developing a new application generally follows these steps: create a new project, configure a new device profile if needed, modify the build and run conditions to allow deployment on the remote device, drag and drop the visual elements to the GUI using the UI designer, write the code needed to respond to interactions with the UI, build the application, and run the application upon a successful build.
  
More information about running Qt applications on EMAC systems (Open Embedded Linux modules) can be found at http://doc.qt.io/qt-4.8/qt-embedded-running.html. While the UI designer is a great way to visually plan out how the GUI will turn out, the entire application may be coded within the project C++ class file, including the UI elements. Qt provides a couple of example applications with a GUI for Linux Embedded systems coded in such a way. These example can be viewed at http://doc.qt.io/qt-4.8/examples-embeddedlinux.html. A larger set of Qt example applicaitons can be found at http://doc.qt.io/qt-4.8/all-examples.html; not all of these examples will work for Embedded Linux or the EMAC OE SDK. Furthermore, these examples are form Qt version 4.8 which is the newest version supported by OE 5.0.  
+
More information about running Qt applications on EMAC systems (Open Embedded Linux modules) can be found at http://doc.qt.io/qt-4.8/qt-embedded-running.html. While the UI designer is a great way to visually plan out how the GUI will turn out, the entire application may be coded within the project C++ class file, including the UI elements. Qt provides a couple of example applications with a GUI for Linux Embedded systems coded in such a way. These example can be viewed at http://doc.qt.io/qt-4.8/examples-embeddedlinux.html. A larger set of Qt example applications can be found at http://doc.qt.io/qt-4.8/all-examples.html; not all of these examples will work for Embedded Linux or the EMAC OE SDK. Qt pre-compiled examples and source code can also be found on EMAC systems with Qt in <code>/usr/bin/qtopia</code> and in the EMAC OE SDK in  <code>/opt/emac/5.0/sysroots/target_arch/usr/bin/qtopia </code>. These examples are applicable to Qt version 4.8 which is the newest version supported by EMAC OE 5.0.  
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /*********************************************************************************************************/ -->
 
<!-- /******************************************  More Information  *****************************************/ -->
 
<!-- /******************************************  More Information  *****************************************/ -->

Revision as of 14:32, 12 November 2015

TODO: {{#todo: Buggy (11.10.2015-12:42->JJ+);(11.11.2015-16:05->JJ+);(11.12.2015-12:30->JJ+);(11.12.2015-14:30->MG+)|Jeffrey Jung|OE 5.0,JJ,Buggy}}

Alongside the EMAC OE 5.0 SDK, EMAC provides the Qt Creator IDE(Interactive Development Environment). A great feature of this IDE is its UI design tool that will allow developers to produce applications with a GUI for EMAC devices equipped with LCD displays. The UI is constructed by dragging and dropping objects to the application UI. Using slots and signals, developers can easily program a functional, interactive, and visually pleasing interface. These project requires Qt Creator's tool qmake to build these applications.

Background

The user interface (UI) designer tool in Qt Creator can be used to develop applications reliant on a UI. Written in C++, these applications built using the EMAC OE SDK and the qmake tool can be deployed to EMAC carriers equipped with touch screen displays. Developers will be able to create software that is much more interactive with the user. For more information about Qt Creator, go to the Qt Creator Guidance page.

General Information

This page will present a guide to create a basic application using Qt Creator. You'll not only write the source code, but also design a UI for the application. Once that is done, you'll compile the project and deploy it to run on a remote target machine. A "Hello World" project is used as an example to demonstrate how to use the UI designer and receive output form the IDE.

Creating the Project

  1. Launch the EMAC Qt Creator.

    EMAC Qt Creator Icon.png

  2. Click on "New Project".

    Qtcreator gui.png

  3. A new window will pop up to specify the type of project you will be coding for. Select Application under the Projects column.

  4. Select Qt Widgets Application.

    SelectQtWidgetApplication.png

  5. Click Choose. You'll be brought to another page requesting you to give the project a name and choose the location of the project.

    QtAppName Location.png

  6. Once you've given your project a name and have determined the path to store the project, click Next.

  7. Select the kit required for the device(s) on which you wish to run the application. In this example, all kits are selected, but this project will be deployed to an OE 5.0 ARM device. Click Next.

    QtKitSelection.png

  8. Give the class a name and leave the base class as QMainWindow. The header, source, and form files will have the same name as the class name, but different extensions. These files may be modified if desired. Click Next to continue to the project summary.

    ClassInfo.png

  9. In the summary window, click Finish to be begin developing the project.


For this example application, Qt will open helloworld.cpp in the editor. This is where the functionality of the application is implemented. Within main.cpp, a new object of the class will be created and launched. Almost all of the C++ code will be written in the class definition. The class definition is also capable of creating an managing UI elements, such as a push button. This example is designed to provide a quick start and won't demonstrate management of UI elements. More information on management of UI elements can be found at http://doc.qt.io/qtcreator/creator-using-qt-designer.html.

Modify deployment configurations

Before developing the project, you will need to make some modifications to allow the project to be displayed and run on the desired device.

  1. Start by double clicking on HelloWorld.pro.

  2. Add the lines "target.path = /tmp" and "INSTALLS += target" at the bottom of the file. This will set the location of the object file of the project to the "/tmp" directory. The full path to the project will be "/tmp/HelloWorld" on the target device.

    DotProPathConfig.png

  3. Use Ctrl + S to save the file.

  4. The run configurations can be modified in the Project tab at the left of the window. At the top of the Project page, click on Run under the desired kit.

  5. Click on Details for Upload files via SFTP and make sure the Incremental deployment box is unchecked.

  6. The -qws argument is required under the Run configuration to run the application as a Qt server application.

    QtProjectRunConfig.png

Create a Device Profile

A profile will need to be created for your device in order for Qt Creator to deploy the application to it.

  1. Under the Tools drop down box, select Options.

  2. Select Devices from the scroll area to the left of the Options window.

    Options devices.png

  3. Look to the top right of the window and click Add.

  4. You'll be brought to the Wizard Selection window to identify the type of device your target is. Select Generic Linux Device.

    Generic linux.png

  5. Click Start Wizard and set up the configuration for the device profile. Give the profile a name, set the device's IP Address, enter the username, and specify the authentication type. Provide a password if the authentication type requires it.

    9G45NewDeviceConnection.png

  6. Click Next when all the proper information of the device is provided.

  7. At the summary window, click Finish and a connection be tween the target device and the developer's desktop will be tested.

    Device test.png.

  8. When the test has completed successfully, click Close.

  9. Click Apply in the Options window to save the profile.

  10. Click on the Build & Run section from the list box. Go to the Kits tab and click on the kit for the device. Under the Devices drop down menu, select the device profile that was just created.

    SelectDeviceToRun.png

  11. Save the device profile by clicking Apply. The profile has been completed and the options can be closed by clicking Ok at the bottom right of the window.

Examples

Coding Hello World and Designing the User Interface

Qt Creator is now able to deploy the project to the target device. The application definition needs to be completed.

  1. Double click the class cpp file in the Edit tab.

  2. In the constructor, use the qDebug() function to print the string "Hello World".

  3. In the destructor, use the qDebug() function to print the string "Goodbye World".

    Error creating thumbnail: File missing



  4. Double click helloworld.ui under the Forms folder in the Edit tabe to the left of the screen. This displays an interface that will allow objects to be dragged on to the UI of the application.

    QtUIDesign.png

  5. Drag and drop a label to the UI.

  6. Double click on the label to change the text to "Hello World". You may need to resize the label so the text can be seen.

    HelloUI.png

Building and Running the Project

  1. Click on the icon of a monitor at the bottom left of the window.

  2. Select the proper kit for your device, Build->Debug, and the project name under Run.

    BuildDebugRun.png

  3. Build the project by clicking the hammer icon at the bottom left of the window. A little window will momentarily pop up at the bottom right of the screen. The project has been successfully built if the green progress bar is full and now error messages have appeared.

  4. Once the project has successfully built, the project may be run. Click the green triangle icon at the bottom left of the window, below the monitor icon.

    HelloWorldRun.png

The Application Output terminal will pop up and display any error messages, the termination message, and any string output by qDebug().

Conclusion

Although very similar to Getting Started with Qt Creator, this guide differs by introducing the reader to the process of developing a Qt application with a graphical user interface using Qt's qmake build system. Developing a new application generally follows these steps: create a new project, configure a new device profile if needed, modify the build and run conditions to allow deployment on the remote device, drag and drop the visual elements to the GUI using the UI designer, write the code needed to respond to interactions with the UI, build the application, and run the application upon a successful build.

More information about running Qt applications on EMAC systems (Open Embedded Linux modules) can be found at http://doc.qt.io/qt-4.8/qt-embedded-running.html. While the UI designer is a great way to visually plan out how the GUI will turn out, the entire application may be coded within the project C++ class file, including the UI elements. Qt provides a couple of example applications with a GUI for Linux Embedded systems coded in such a way. These example can be viewed at http://doc.qt.io/qt-4.8/examples-embeddedlinux.html. A larger set of Qt example applications can be found at http://doc.qt.io/qt-4.8/all-examples.html; not all of these examples will work for Embedded Linux or the EMAC OE SDK. Qt pre-compiled examples and source code can also be found on EMAC systems with Qt in /usr/bin/qtopia and in the EMAC OE SDK in /opt/emac/5.0/sysroots/target_arch/usr/bin/qtopia . These examples are applicable to Qt version 4.8 which is the newest version supported by EMAC OE 5.0.

Pages with Related Content