Sitara Linux Training - Hands On With QT

Sitara Linux Training: Hands on with QT
Introduction
This lab is going to give you a hands on tutorial on QT, the GUI devolpment tool, which is a component of the Sitara SDK. Each of the following sections below will walk you through a particular Lab exercise, the key points to take away, and the step-by-step instructions to complete the lab. The labs in this section will utilize both a command line build approach and a IDE approach using QT Creator. Hands On Session: - In the vmware image, there are cheater files: /home/sitara/QT_Lab You can cut and paste section of code from this file rather than have to type them in. You can find a copy here, just right click and select "Save Target As": Wiki Training: - You can find the necessary code segments embedded in the this wiki article. You can cut and paste them from the wiki as needed. NOTE: In this guide commands to be executed for each step will be marked in BOLD
Lab Configuration
The following are the hardware and software configurations for this lab. The steps in this lab are written against this configuration. The concepts of the lab will apply to other configurations but will need to be adapted accordingly.
Hardware
AM335x EVM-SK (TMDSSK3358) - Order Now [1] NOTE All Sitara boards with an LCD display or HDMI/DVI out can be used for these labs, but the steps below related to serial and ethernet connections may differ. Router connecting AM335x EVM-SK and Linux Host USB cable connection between AM335x EVM-SK and Linux Host using the micro-USB connector (J3/USB0) NOTE The AM335x EVM uses a standard DB9 connector and serial cable. New Win7 based Host PCs may require a USB-to-Serial cable since newer laptops do not have serial ports. Additionally, since the serial connection is not required for these labs, you can telnet or ssh into the target over ethernet instead of using a serial terminal for target interaction. 5V power supply (typically provided with the AM335x EVM-SK)
Software
A Linux host PC configured as per the Linux Host Configuration [2] page Sitara Linux SDK installed. This lab assumes the latest Sitara Linux SDK is installed in /home/sitara. If you use a different location please modify the below steps accordingly. SD card with Sitara Linux SDK installed. For help creating a 2 partition SD card with the SDK conent see the create_sdcard.sh script page QT Creator installed on your Linux host. You can download Qt Creator from http://sourceforge.net/projects/qtcreator.mirror/files/ Qt%20Creator%202.7.1/ [3] Select Qt Creator 2.7.1 for Linux/X11 32-bit (62 MB)
Supported Platforms and revisions

The following platforms are system tested to verify proper operation. am335x am37x am35x am180x BeagleBoard XM This current version has been validated on Sitara SDK 06.00.00 using QT Creator 2.7.1. For Sitara SDK versions 05.04.01 - 05.07.00 Download an older version of Hands on with QT training. Validated with QT Creator 2.4.1: [Download version compatible with QT creator 2.4.1 [4]] NOTE Other SDK's such as the DaVinci EZSDK can only build the project. In order to deploy the executable onto the device with Qt Creator, the DropBear utilities must be added to the Linux filesystem first NOTE Beaglebone is not supported because it currently does not come with an LCD
LAB 1: Hello World Command Line

Description
This LAB is optional, it introduces where to find QT components and build tools in the Sitara SDK. Approximate time to complete this LAB: 15 minutes. This section will cover the following topics Introduction to build tools enviroment setup script The QT component of the Sitara SDK where to find things in the Sitara SDK
Key Points
Where in the SDK to find the build tools Where in the SDK to find the QT components How to setup your build environment How to utilize the above points to create a Hello World application.
Lab Steps
1. Connect the cables to the EVM. For details on where to connect these cables see the Quick Start Guide that came with your EVM. 1. Connect the Serial cable to provide access to the console. 2. Connect the network cable 3. Insert the SD card into the SD connector 4. Insert the power cable into the 5V power jack 2. Power on the EVM and allow the boot process to finish. You will know when the boot process has finished when you see the Matrix application launcher on the LCD screen NOTE You may be required to calibrate the touchscreen. If so follow the on screen instructions to calibrate the touchscreen. 3. Open a terminal window on your Linux host by double clicking the Terminal icon on the desktop 4. The cross-compiler is located in the linux-devkit/bin directory of the SDK installation directory. In the terminal window enter the following commands, replacing the <machine> and <sdk version> fields with the target machine you are using and the SDK version installed. NOTE You can use TAB completion to help with this cd /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/sysroots/i686-arago-linux/usr/bin ls 5. You should see a listing of the cross-compile tools available like the one below.
6. To locate the pre-built ARM libraries perform the following commands: cd /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/sysroots/armv7ahf-vfp-neon-3.2-oe-linux-gnueabi/usr/lib ls 7. You should now see a listing of all the libraries (some are contained within their individual sub-directories) available as pre-built packages within the SDK. 8. Now list only the QT libraries from the same directory by listing all libs starting with libQt. ls libQt* 9. You should see a listing of QT related libraries that can be used to build and run QT projects.
10. You can also find out where the QT header files are located. At the directory below are sub directories full of QT header files. cd /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/sysroots/armv7ahf-vfp-neon-3.2-oe-linux-gnueabi/usr/include/qtopia ls 11. In order to make it easier to perform cross-compilations and ensure linking with the proper cross-compiled libraries instead of the host system libraries the environment-setup script has been created in the linux-devkit directory. This script will configure many standard variables such as CC to use the cross-compile toolchain, as well as adding the toolchain to your PATH and configuring paths for library locations. To utilize the setting provided by the environment-setup script you will need to source the script. Perform the following commands to source the environment-setup script and observe the change in the QMAKESPEC variable: 12. echo $QMAKESPEC source /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/environment-setup echo $QMAKESPEC You should see the changes that were applied by executing the setup script.
13. You should have observed that the QMAKESPEC variable now contains the path to the QMAKESPEC files. Additionally your compile tools were added. There was also another change that occurred which was that your standard prompt changed from sitara@ubuntu to [linux-devkit]. The purpose of this change is to make it easy to identify when the environment-setup script has been sourced. This is important because there are times when you DO NOT want to source the environment-setup script. A perfect example is when building the Linux kernel. During the kernel build there are some applications that get compiled which are meant to be run on the host to assist in the kernel build process. If the environment-setup script has been sourced then the standard CC variable will cause these applications to be built for the ARM, which in turn will cause them to fail to execute on the x86 host system. 14. As mentioned above sometimes it is not appropriate to source the environment-setup script, or you only want to source it during a particular build but not affect your default environment. The way this is done in the SDK is to source the environment-setup script inside of the project Makefile so that it is used only during the build process. 15. Take a look at the enviroment setup file to see what all is going on there. Look through file to see where the compile tools variables such as CC and CPP and PATH are defined. gedit /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/environment-setup 16. It is now time to build a Hello World project using QT. You need to create two files: helloworld.cpp and helloworld.pro mkdir /home/sitara/ti-sdk-<machine>-<sdk version>/example_applications/helloworld cd /home/sitara/ti-sdk-<machine>-<sdk version>/example_applications/helloworld gedit helloworld.cpp and add the following code IMPORTANT You can find pre-written files in the in the /home/sitara/sitara-training-helper-files/QT_Lab/lab1 directory. You can just copy those files to your directory instead of typing the contents if you want to
#include <QApplication> #include <QLabel> int main(int argc, char **argv)
{ QApplication app(argc,argv); QLabel label("Hello World"); label.show(); return app.exec(); }

gedit helloworld.pro and add code IMPORTANT You can find pre-written files in the in the /home/sitara/sitara-training-helper-files/QT_Lab/lab1 directory. You can just copy those files to your directory instead of typing the contents if you want to
QT += core gui SOURCES += helloworld.cpp

17. Now lets use qmake to create a Makefile qmake helloworld.pro 18. Notice how qmake automatically generated a Makefile for us, now lets build. make 19. Notice the build is using our cross-compiler- arm-linux-gnueabihf-g++
20. Also notice we now have an executable, lets see what type of file we created file helloworld 21. You should see something similar to the following: helloworld: ELF 32-bit LSB executable, ARM, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.31, BuildID[sha1]=0x8569a0956d8efffcfde68fca5c883be5fa4f1c31, not stripped 22. Finally lets copy the helloworld over to our target file system and run it. If you have not already done so connect with minicom and type ifconfig to find your target's ip address
Sitara Linux Training: Hands on with QT NOTE You can also get your ip address from Matrix if it is running. Select Settings->Network Settings On your Linux host console issue the command scp helloworld root@xx.xx.xx.xx:/home/root replacing the xx.xx.xx.xx below with you target's ip address. When asked for password, just hit return Type yes when asked if you would like to continue Move back over to your minicom window and execute it. You should find the helloworld in your default /home/root directory on the target.
./helloworld -qws 23. You should see something like the below on your target board.
24. Extra investigation: What does the -qws do? Try running with and without adding the -qws. Also try running with Matrix running and with Matrix not running. You can start and stop matrix with the following commands from minicom: /etc/init.d/matrix-gui2.0 start /etc/init.d/matrix-gui2.0 stop
LAB 2: QT Creator Hello World

Description
This section will cover setting up QT Creator the integrated development environment. We start to investigate how QT Creator aids in rapid GUI development.
Key Points
Setting up QT Creator to find your tools Setting up QT Creator to communicate with the target platform Creating hello world and run using QT Creator.
Lab Steps
1. Source the enviroment setup file to ensure all the paths are setup correctly. This was done in the previous section. If you already see [linux-devkit]: as your prompt then you can skip this step. source /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/environment-setup 2. Bring up Qt Creator /home/sitara/qtcreator-2.7.1/bin/qtcreator IMPORTANT By bringing QT Creator up manually, you will pass in the environment setup. If you double click on the Qt Creator Icon from the Desktop, you will not have the enviroment setup correctly and your lab will not work later on. 3. QT creator should be up and running now
4. Now lets setup QT creator to configure qmake. From the QT creator main menu shown above select the following:
Sitara Linux Training: Hands on with QT Tools -> Options... On the left side vertical menubar click Build & Run Click the Qt Versions tab under Build & Run Remove any versions that may already exist to make sure you start with a clean configuration Click Add... on the right Navigate to /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/sysroots/i686-arago-linux/usr/bin Select qmake then click on Open Double click on Version Name and give the Qt Version a descriptive name such as QT 4.8.3 Sitara See image below.
10
IMPORTANT Notice there is a red ! icon. Don't worry, lets add in the toolchain next and it should change to yellow. Click Apply to save your changes 5. Now we will setup the toolchain Click the Compiler tab under Build & Run Click Add in the top right and add a GCC Change the name to arm-linux-gnueabihf-gcc. This can be done by editing the "Name" field. For Compiler Path select Browse Navigate to /home/sitara/ti-sdk-<machine>-<sdk version>/linux-devkit/sysroots\i686-arago-linux/usr/bin Select arm-linux-gnueabihf-gcc and click on open Make sure to click on Apply to save your changes.
11
6. Click the Kits tab under Build & Run Change the name to give the device a unique name: AM335x EVM Select Device type Generic Linux Device instead of Desktop. Select Compiler arm-linux-gnueabihf-gcc instead of the host gcc. For Debugger select Edit. Then select Browse. Select the same path as the compiler, but choose the file: arm-linux-gnueabihf-gdb For QT Version select Qt 4.8.3 Sitara Click Apply to register the options.
7. Now let's setup our Target. While still in the Tools -> Options menu On the left side of the window, select the Devices tab
Sitara Linux Training: Hands on with QT In Devices: click the Devices tab Click Add... in the top right
12
Select Generic Linux device and click on Start Wizard
The Device Configuration Wizard Selection Dialog box comes up Type in the name of the Device: AM335x EVM Type in the IP address of the Embedded Linux Device. Type the IP address for your board, not the one shown in the screen capture.
Sitara Linux Training: Hands on with QT NOTE This is the same IP address you obtained in the previous lab For Username type in root (Most Texas Instruments Boards have this username) Make sure Authentication type is Password, but leave the password field blank. Click Next
13
Click Finish. You should see that the target test passed, so you can close that window.
8. Now we need to setup an SSH key so that the host can communicate with the target Still under the Devices tab click Create New for Private key file
14
Key algorithm RSA Select Key size: 1024 Then click Generate and Save Key Pair...
Click Do not Encrypt key file
Sitara Linux Training: Hands on with QT Just use the default name qtc_id.pub and Click Save and Click Close to close the Generate SSH Key window. Under the Devices tab now click Deploy Public Key...
15
Select the file just generated (should be under /home/sitara/.ssh) IMPORTANT You may need to right click and select show hidden files Select the file qtc_id.pub and click on Open, shortly a window should show up saying "Deployment finished sucessfully"
Close the window and Click OK to exit the Linux Devices Window.
16
9. Now that we are setup lets create a project build it and run it on the host Select File -> New File or Project Then select Applications under projects then select QT Gui Applicaton on the top center Click on Choose
Type in the name of the project as terminal. We will be building on this project in the next section. Change the Create in value to /home/sitara Click on Next
17
Click on Next again Type in terminal for the Class name Click Next
Click Finish 10. Now we've setup a new project let's explore and add some code. Click on Edit on the left hand menubar and look at the project files including terminal.pro, main.cpp, terminal.cpp and terminal.ui
18
Under Forms, double click on terminal.ui This will bring up the widget editor. Remove the menuBar where it says Type Here on the top of the ui Right click on the menuBar and select Remove MenuBar Use the same procedure to remove the statusBar at the bottom of the ui. It is not that easy to see, but it is there and blank. Once again remove the ToolBar (mainToolBar). It is found at the top of the ui and is also hard to see.
Find the label widget in the category of display widgets, left click and drag it on to the User Interface (UI). Type Hello World!!! into the label widget and strech out the borders so you can see all the letters.
19
11. Now we need to check and update the build and run settings: On the left side vertical menubar select Projects Select the Build and Run tab and select Build under AM335x. For the Edit build configuration: select Add then Qmake based build, they you can select Qt 4.8.3 Sitara Debug Uncheck Shadow build as shown in the screenshot below:
20
Now under the AM335x select the Run tab Under Method click Add and select Add and then Deploy to Remote Linux Host However you see the <Remote path not set> error under the Run secton.
To fix the <Remote path not set> error do the following: Click on Edit on the left side vertical bar and click on terminal.pro
Sitara Linux Training: Hands on with QT Add the two lines below to the bottom of terminal.pro as shown in the screen shot below IMPORTANT You can find pre-written files in the in the /home/sitara/sitara-training-helper-files/QT_Lab/lab2 directory. You can just copy those files to your directory instead of typing the contents if you want to
21
target.path += /home/root INSTALLS += target
Select File -> Save Click on Projects on the left side vertical bar and you should now see the error is gone and replaced with /home/root/terminal Now in the Run portion: Select Add -> terminal (on Remote Generic Linux Host)
22
12. Finally we are ready to run IMPORTANT If matrix is not running add -qws to the Arguments in Run Settings Click the Green Arrow on the bottom left to run the project Save all files if asked
13. Extra Investigation: From minicom: run top on the target while helloworld is running. Check out CPU utilization and memory utilization for this simple app.
Sitara Linux Training: Hands on with QT See how much memory is used by helloworld by itself, you may need to kill matrix /etc/init.d/matrix-gui-2.0 stop
23
LAB 3: Terminal project

Description
This section shows how you can use QT Creator to create a GUI from scratch.
Key Points
Adding widgets to a an User Interface (ui). Adding code to make the widgets do something meaningful.
Lab Steps
1. We will continue on from the previous lab using the terminal project you created. First we will remove the Hello world widget and resize the ui. Click terminal.ui to bring up design mode. Click the Hello World widget, and delete it making the ui empty and clean 2. This next action is mainly for those with small displays, but will not adversely affect larger displays. Select the entire ui as shown below. Edit the Geometry values to Width = 440 and Height = 230 as shown.
3. Next we will add the Tab Widget. Just like the label widget, drag it over to the ui.
24
Select the tab widget layout. Currently, the tab widget is part of our ui, but it is just sitting at fixed location where we dragged it. On the upper right side right click on the terminal QWidget and select Lay Out -> Lay Out Vertical as shown below
Now the tab widget should completely fill the ui.
Sitara Linux Training: Hands on with QT 4. Now let's ad Two Push Button Widgets One Text Browser widget One Line Edit widget. Drag all of them up to the ui Now lets set the TabWidget layout like we did with the terminal widget Right click on the upper right QtabWidget -> Lay Out -> Lay Out in a Grid Move them around so they look somewhat like the screen shot below
25
5. Lets Rename the Push Button widgets. Double click on the PushButton text in the ui Edit the upper push button to say Send CMD Edit the lower push botton to say Exit Depending on how the grid layout worked for you, lets stretch out the Text Browser widget and the bottom Push Button widget to take up the whole screen horizontally if needed. Just click on the widget and drag the border to fill the screen See screen shot below:
26
6. Now lets give our widget objects a unique name. Select the Text Browser widget Go over to properties on the bottom right and edit ObjectName Add the text _linuxshell to the end of the textBrowser name as shown below:
7. Now create unique names for the other 3 widgets. For lineEdit: lineEdit_commandline For the Send CMD push button: pushButton_sendcmd For exit push button: pushButton_exit 8. We are not done yet, but for fun lets run this application and see what it looks like on the target.
Sitara Linux Training: Hands on with QT Push the Green Arrow at the bottom left to launch on the target. Save all files if asked. IMPORTANT You can not start a new application on the target if your previous one is still running. To exit, push the "X" on the menubar at the top right of your target. NOTE It should appear just as we designed it, but pushing the buttons has no effect because we haven't added any code yet. 9. Now we are going to add code to make the buttons do what we wish them to do. Right click on the Exit widget -> Go to slot
27
In the Go to Slot selector, select the first selection clicked() and hit OK 10. Notice this pops you over to your terminal.cpp file where some code has been automatically added for you. IMPORTANT The code additions below can also be found in the /home/sitara/sitara-training-helper-files/QT_Lab/lab3 directory and can be copied into your project Add the following line of code to on_pushButton_exit_clicked()
qApp->quit();
28
11. Now repeat the same process you did for the exit button on the send CMD button. We will add code to control that button press. NOTE You will need to go back to the ui file to do this Right click on the Send CMD widget -> Go to slot In the Go to Slot selector, select the first selection clicked() and hit OK Add the following line at the top of terminal.cpp to support QProcess.
#include <QtGui>
Add the following code to on_pushButton_sendCmd_clicked()
QString LinuxTexttoSend = ui->lineEdit_commandline->text(); // QProcess used to binaries in /usr/bin QProcess process; // Merge Channels so the output of binaries can be seen process.setProcessChannelMode(QProcess::MergedChannels); // Start whatever command is in LinuxTexttoSend process.start(LinuxTexttoSend, QIODevice::ReadWrite); // Run the command and loop the output into a QByteArray QByteArray data; while(process.waitForReadyRead()) data.append(process.readAll()); ui->textBrowser_linuxshell->setText(data.data());
29
12. Finally since we don't have a keyboard to type a command lets add a predefined command to our line Edit Widget like shown below: Double click on the line edit and add the text: date --help
13. Now run, you should see interaction with the Linux shell when you push sendCMD.
30
LAB 4: Enhancing the project with a web viewer, soft keyboard, and Style Sheets
Description
In this section we Enhance our GUI with a web browser, soft keyboard and style sheets.
Key Points
Adding a Web view. Adding a softkeyboard. How to adjust the look and feel
Lab Steps
1. One of the first things we did in the Terminal Lab was to add a Tab widget which is a container widget. So far we added a Linux shell terminal to Tab 1, now lets add a Web View widget to Tab 2 From the terminal.ui, click on Tab 2 and notice it is empty. Drag over a QWebView widget to Tab 2 Set the Layout of Tab 2 to a vertical layout NOTE Do you recall how we did this on the Terminal Lab? On the top right, right click tabWidget -> Lay Out -> Lay Out Vertically When complete with the above steps, it should look like the following:
2. Now we can add a default URL. Since we are not connected to the internet, lets bring up matrix since it is running on a local server. Select the WebView widget and on the bottom right find the url property of QWebView near the bottom of the list.
Sitara Linux Training: Hands on with QT Type in: http://localhost'''
31
NOTE Notice how the Webview in your ui tries to display the webpage but can't since it is not local to your host. Some people see this error and some do not. 3. Now we need to add the webkit libraries to our project. Go to Edit mode and bring up the terminal.pro file Add webkit as shown below
32
4. Give it a try and run it, you should see the Matrix displayed. IMPORTANT You will need to use the Exit button on Tab1 to close this program 5. Now lets address a couple of cosmetic issues. Notice how our new GUI does not fill the entire screen. Change over to Edit' mode and bring up main.cpp. Find the line w.show() Remove that line type w. and notice how QT Creator will fill in all the possible options. Also notice that when you start to type it will jump the available options with the matching text. Select w.showFullScreen(); see screen shot.
33
6. Now re-run and notice how it takes up the full screen.
IMPORTANT You will need to use the Exit button on Tab1 to close this program 7. Now lets fix another issue back on Tab 1. We hard coded in a default command: date --help Since we did not provide a keyboard, lets add a soft keyboard. Download a keyboard class from this location: Qt Keyboard Template wiki [5]. These instruction assume you downloaded the tarball to the /home/sitara directory.
Sitara Linux Training: Hands on with QT IMPORTANT If you are using a TI laptop or followed the host configuration steps you can find these files in the /home/sitara/sitara-training-helper-files/QT_Lab/keyboard directory and can skip these steps cd /home/sitara tar -xzvf Keyboard.tar.gz Copy the keyboard files to your terminal project directory cd /home/sitara/terminal/ cp -rf <keyboard extraction directory>/keyboard . Now lets add keyboard into our project. Go to Edit mode and right click on terminal -> Add Existing Files as shown below.
34
Navigate to the keyboard directory /home/sitara/terminal/keyboard and add all 4 files in that directory.
35
NOTE Notice how all four keyboard files are now part of the Terminal project. Click on the keyboard.ui and take a look. It is made up mainly of QPushButtons and one QLineEdit and layout controls Now we need to hook in the keyboard to the terminal GUI. IMPORTANT As always you can find copy that you can /home/sitara/sitara-training-helper-files/QT_Lab/lab4 directory Add some code to terminal.h At the top of the file add copy into your project in the
#include "keyboard/keyboard.h"
In private slots: add
void open_keyboard_lineEdit();
In the section private: add
Keyboard *lineEditkeyboard;
36
Now add some code to terminal.cpp In the function terminal::terminal
lineEditkeyboard = new Keyboard(); connect( ui->lineEdit_commandline ,SLOT(open_keyboard_lineEdit()));

Also add the function below to the bottom of terminal.cpp
,SIGNAL(selectionChanged()),this
void terminal::open_keyboard_lineEdit() { QLineEdit *line = (QLineEdit *)sender(); lineEditkeyboard->setLineEdit(line); lineEditkeyboard->show(); }
37
8. You are now ready to run your code. Run and verify when you touch the line edit widget, that the keyboard pops up. IMPORTANT Depending on your screen resolution you may need to double-tap the bar at the top of the keyboard to size it to full screen 9. Type in a linux command such as ps to list the running processes and verify that you get back the expected results. 10. Next lets add specific colors to the GUI components using style sheets. Go back to your ui in the upper right corner: right click on the terminal widget -> Change styleSheet
38
Cut and paste from terminal sytle sheet settings at the end of this lab section to the Terminal stylesheet settings and Apply them IMPORTANT You can find this file in the /home/sitara/sitara-training-helper-files/QT_Lab/lab4/style_sheet_terminal.txt file Do the same thing for the Tab Widget by cutting and pasting from the tab style sheet settings at the end of this Lab section IMPORTANT You can find this file in the /home/sitara/sitara-training-helper-files/QT_Lab/lab4/style_sheet_tab.txt file 11. voila ... TI colors - your setup should now match the look and feel of the one below:
39
12. Run it! 13. Extra investigation: Run a debug session and set break points in keyboard.cpp. Notice how the each QPushbutton signals the keyboardHandler slot. NOTE If breakpoints are not working for you, verify you have created a Debug version of terminal and not a Release version. Look under Projects and "Build Settings" and check Details under Build Steps. terminal style sheet settings QWidget { background-color: rgb(0, 0, 0); } QTabWidget::pane { position: absolute; border: 2px solid red; } QTabWidget::tab-bar { alignment: center; } QTabBar::tab { color: red; background-color: black; border: 2px solid red; border-radius: 0px;
Sitara Linux Training: Hands on with QT padding: 4px; margin-left: 0.25em; margin-right: 0.25em; } QTabBar::tab:selected, QTabBar::tab:hover { color: white; background: red; } QPushButton { /**font: bold 16pt; color: white; border-image: url(:/pushblueup.png); background-color: transparent; border-top: 3px transparent; border-bottom: 3px transparent; border-right: 10px transparent; border-left: 10px transparent;**/ } tab style sheet settings QWidget{ background-color: red; } QTextBrowser{ background-color: black; color: yellow; } QLineEdit{ background-color: white; color: black; } QPushButton{ } QWebView{ background-color: white; }
40
41
LAB 5: Exploring Existing Demos and Examples

Key Points
Exploring existing projects in the QT SDK. Using a SGX accelerated QT Demo
Lab Steps
1. In a console window on your host: gedit /home/sitara/ti-sdk-<machine>-<sdk version>/example-applications/matrix-gui-browser-2.0/main.cpp NOTE This is the QT application which displays matrix for all Sitara platforms. As you can see it uses a QWebView just like we did in the Terminal Enhancements Lab. The main differences are that you pass in the url as an argument, and all window framing was removed. 2. Now try this one using the minicom connection to your target, it may surpise some of you: cd usr/bin/qtopia We are now in the target Filesystem provided with Sitara SDK. Lets search for how many QT project files we can find. find . -name *.pro There are many QT project files here find . -name *.pro | wc Over 300 different projects already available in the SDK. 3. Lets take a look at one specific example hellogl_es2. This is an SGX accelerate QT demo. In your minicom window do cd /usr/bin/qtopia/examples/opengl/hellogl_es2 run this ./hellogl_es2 -qws 4. We see a black screen. This is because there are additional steps required to enable SGX acceleration. 5. You can exit this application using Ctrl-Z 6. Edit the file /etc/powervr.ini and add the following lines at the end of the file [hellogl_es2] WindowSystem=libpvrQWSWSEGL.so.1 7. The final file should look like: IMPORTANT You can find a copy of this file in the /home/sitara/sitara-training-helper-files/QT_Lab/lab5 directory [default] WindowSystem=libpvrPVR2D_FRONTWSEGL.so.1 [hellogl_es2] WindowSystem=libpvrQWSWSEGL.so.1 8. Re-run hellogl_es2 again but with these additional parameters: ./hellogl_es2 -qws -display powervr 9. You should see an SGX accelerated demo
42
10. As mentioned there are many demos available. Some may not work due to how QT was configured when it was built. 11. Some additional demos of interest: 1. /usr/bin/qtopia/demos/qtdemo -- This is a demo which lets you browse through all the demos and launch them (It is currently not building in this release, but should be fixed in future releases) 2. /usr/bin/qtopia/demos/browser -- This is the broswer demo featured in matrix. 12. Extra Excercise: Pull in one the the demos or examples into QT Creator by opening it as a project. Build it and run it on the target. NOTE You may need need to do some project setup to make sure you will run on the target
References
[1] [2] [3] [4] [5] https:/ / estore. ti. com/ TMDSSK3358-AM335x-Starter-Kit-P3110. aspx http:/ / processors. wiki. ti. com/ index. php/ Sitara_Linux_Training:_Linux_Host_Configuration http:/ / sourceforge. net/ projects/ qtcreator. mirror/ files/ Qt%20Creator%202. 7. 1/ https:/ / docs. google. com/ file/ d/ 0B9VruW-i1v3va0w5R1UwdjBxM2c/ edit?usp=sharing| http:/ / processors. wiki. ti. com/ index. php/ Qt_Keyboard_Template
Article Sources and Contributors
43
Article Sources and Contributors

Sitara Linux Training: Hands on with QT Source: http://processors.wiki.ti.com/index.php?oldid=159977 Contributors: Cem8101, Fcooper, Gary, Jefflance01, Kevinsc, RonBirkett, SaqibMo
Image Sources, Licenses and Contributors

Image:TIBanner.png Source: http://processors.wiki.ti.com/index.php?title=File:TIBanner.png License: unknown Contributors: Nsnehaprabha Image:Sitara-linux-training-cross-tools.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara-linux-training-cross-tools.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT library listings.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_library_listings.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT environment setup script.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_environment_setup_script.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT make using cross compile.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_make_using_cross_compile.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT SK running helloworld.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_SK_running_helloworld.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT qtcreator.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_qtcreator.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT options.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_options.jpeg License: unknown Contributors: RonBirkett Image:Sitara-compilerAndDebugger.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara-compilerAndDebugger.jpeg License: unknown Contributors: RonBirkett Image:Sitara-linux-kits.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara-linux-kits.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT options add device.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_options_add_device.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT Device Configuration Wizard Selection.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_Device_Configuration_Wizard_Selection.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux options Generic Linux Device Configuration Setup.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_options_Generic_Linux_Device_Configuration_Setup.jpeg License: unknown Contributors: RonBirkett Image:Sitara target test.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_target_test.png License: unknown Contributors: Jefflance01 Image:Sitara Linux QT create new ssh key.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_create_new_ssh_key.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT options SSH Key Configuration.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_options_SSH_Key_Configuration.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT Password for Private Key.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_Password_for_Private_Key.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT Deploy Public Key.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_Deploy_Public_Key.jpeg License: unknown Contributors: RonBirkett Image:Sitara successful deploy.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_successful_deploy.png License: unknown Contributors: Jefflance01 Image:Sitara Linux QT ok to close devices.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_ok_to_close_devices.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT new project.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_new_project.jpeg License: unknown Contributors: RonBirkett Image:Sitarea Linux Qt project terminal.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitarea_Linux_Qt_project_terminal.jpeg License: unknown Contributors: RonBirkett Image:Sitara Linux QT new terminal props.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Linux_QT_new_terminal_props.jpeg License: unknown Contributors: RonBirkett Image:Sitara-terminal-pro.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara-terminal-pro.png License: unknown Contributors: Jefflance01 Image:RemoveMenubar.png Source: http://processors.wiki.ti.com/index.php?title=File:RemoveMenubar.png License: unknown Contributors: Jefflance01 Image:Sitara hello world UI.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_hello_world_UI.png License: unknown Contributors: Jefflance01 Image:Sitara Build settings.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_Build_settings.jpeg License: unknown Contributors: RonBirkett Image:Sitara deploy remote.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_deploy_remote.jpeg License: unknown Contributors: RonBirkett Image:Sitara add target loc.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_add_target_loc.jpeg License: unknown Contributors: RonBirkett Image:Sitara remote host.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_remote_host.jpeg License: unknown Contributors: RonBirkett Image:Sitara-linux-Terminal-hello.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara-linux-Terminal-hello.jpeg License: unknown Contributors: RonBirkett Image:Resize screen.png.png Source: http://processors.wiki.ti.com/index.php?title=File:Resize_screen.png.png License: unknown Contributors: Jefflance01 Image:Sitara tab widget.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_tab_widget.png License: unknown Contributors: Jefflance01 Image:Sitara layout vertically.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_layout_vertically.png License: unknown Contributors: Jefflance01 Image:Sitara ui layout.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_ui_layout.jpeg License: unknown Contributors: RonBirkett Image:Sitara adjust widths.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_adjust_widths.png License: unknown Contributors: Jefflance01 Image:Sitara rename objects.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_rename_objects.jpeg License: unknown Contributors: RonBirkett Image:Sitara goto slot.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_goto_slot.jpeg License: unknown Contributors: RonBirkett Image:Sitara pushbutton.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_pushbutton.png License: unknown Contributors: Jefflance01 Image:Sitara SendCMD code.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_SendCMD_code.png License: unknown Contributors: Jefflance01 Image:Sitara add command.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_add_command.png License: unknown Contributors: Jefflance01 Image:Sitara webview.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_webview.jpeg License: unknown Contributors: RonBirkett Image:Sitara default url.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_default_url.png License: unknown Contributors: Jefflance01 Image:Sitara webkit.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_webkit.png License: unknown Contributors: Jefflance01 Image:Sitara fullscreen.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_fullscreen.png License: unknown Contributors: Jefflance01 Image:Sitara matrix.PNG Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_matrix.PNG License: unknown Contributors: Jefflance01 Image:Sitara addexisting.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_addexisting.png License: unknown Contributors: Jefflance01 Image:Sitara addkeyboard.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_addkeyboard.png License: unknown Contributors: Jefflance01 Image:Sitara terminal h.png Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_terminal_h.png License: unknown Contributors: Jefflance01 Image:Sitara terminal cpp.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_terminal_cpp.jpeg License: unknown Contributors: RonBirkett Image:Sitara stylesheet.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_stylesheet.jpeg License: unknown Contributors: RonBirkett Image:Sitara tabStyle.jpeg Source: http://processors.wiki.ti.com/index.php?title=File:Sitara_tabStyle.jpeg License: unknown Contributors: RonBirkett Image:Hellogl.PNG Source: http://processors.wiki.ti.com/index.php?title=File:Hellogl.PNG License: unknown Contributors: Jefflance01

Sitara Linux Training - Hands On With QT

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sitara Linux Training - Hands On With QT

Uploaded by

Copyright:

Available Formats

Sitara Linux Training: Hands on with QT