qt on i - nxp semiconductorscache.freescale.com/files/training/doc/dwf/qt_imx6_handson.pdf · qt on...

Qt on i.MX6

Hands-on Instructions

Copyright © 2012 Digia Plc.

Qt on i.MX6

Hands-on Instruction

Copyright 2012 Digia Plc.

Exercise 1a: UI Design – BMI Calculator ...................................................................... 3

Exercise 1b: Signals and Slots – BMI Calculator ........................................................... 5

Exercise 2: Deploying to an i.MX6 .............................................................................. 6

Exercise 3: Stop-Clock ............................................................................................ 11

Qt on i.MX6



Exercise 1a: UI Design – BMI Calculator

Objectives

- Learn how to create a new Qt project in QtCreator.

- Use the Qt Designer embedded in QtCreator to create the initial UI of a BMI

Calculator application

Overview

In this exercise you will create a small GUI application using a custom dialog. The

application will calculate the BMI value for the user from the given weight and height. The

initial UI will be done in this exercise and later we will add custom slot functionality to the

exercise.

Practical Outline

1. Launch QtCreator and use its new project wizard to create a new Qt project:

File -> New -> Project… -> Qt Widget Project -> Qt Gui Application

This would create a typical QWidget based GUI application.

Name your project “BMICalc” and select a suitable folder for the project. When

the wizard asks for the Qt Modules to be included, Core and Gui are sufficient.

Next the wizard asks for the class name and base class. Let’s keep it simple, and

have the selections at default. If you want to, you can rename your main class

BmiCalculator.

2. Take a look at the project structure. All the files you need to run the application are already there (main.cppmain.cppmain.cppmain.cpp, bmicalculatorbmicalculatorbmicalculatorbmicalculator.cpp/.h.cpp/.h.cpp/.h.cpp/.h or mainwindomainwindomainwindomainwindow.cpp/.hw.cpp/.hw.cpp/.hw.cpp/.h

etc.) and the project compiles without errors. You have not created the UI design

yet, so at this stage the screen would be blank.

Double click on the bmicalculatorbmicalculatorbmicalculatorbmicalculator.ui.ui.ui.ui (or mainwindow.ui if you didn’t rename the

class) file to open it for editing in the embedded Qt Designer tool. Now you should

have the Qt Designer edit buttons and tabs visible in your perspective.

3. Try to create a layout for your BMI Calculator application. Feel free to use your

imagination!

Hint: Placing the UI widgets inside the vertical and horizontal layout items might

prove to be a little tricky if you try to do it by dragging and dropping. Instead, you

could try the following for each horizontal layout:

o Drag and drop the buttons, labels and other widgets onto the designer

canvas and order them roughly in the correct position

o Select the widgets you intend to layout horizontally, right-click and set

the needed layout using the context menu

o Once the horizontal layouts and their contents have been created,

place them inside the vertical layout in the same way

Qt on i.MX6



Checkpoint: compile and run your appl icat ion.

4. Modify the properties of the widgets (like text labels and default values) to match

the correct ones. Recompile to see the changes.

5. When the application is compiled, Qt UI compiler (uic) generates a header file

containing source code corresponding to the UI design. Out of curiosity, take a look at the file ui_ui_ui_ui_bmicalculatorbmicalculatorbmicalculatorbmicalculator.h.h.h.h. This file is hidden by default, but here’s how you

can un-hide it:

6. By default, Qt Designer gives objects quite non-descriptive names such as label, label_2, etc. Since you’ll be using these objects in your code later, these default names would eventually cause unnecessary confusion.

Using the designer’s Qt C++ Property Editor, change the object names of at least

the buttons and labels to something more suitable.

7. As you know by now, signals and slots between UI components can sometimes be

connected in the Qt Designer without writing a single line of code by hand. You

can try this with two alternatives:

a. Add a slider to your project (for instance for weight input) and connect a

suitable signal of it to the lcdnumber to see them bound together.

b. Add an exit button to your application and connect that to the exit slot of

the mainwindow itself.

8. Compile, run and test!

9. If you have time at the end of the exercise, you can try fine tuning your UI design.

Try if you can find out how you could e.g. remove the frame around the LCDNumber object and change its segment style to flat.

Qt on i.MX6



Exercise 1b: Signals and Slots – BMI Calculator

Objectives

- Create custom slot functions for your custom dialog

- Connect signals to your custom slots, manually and automatically (by name)

- Try input validator and palette change

Overview

Exercise starting point:

Your own solution to exercise 1b.

Since the initial UI design is now finished, it is time add some actual functionality for the

BMI Calculator: how to calculate the BMI value! We will also add some input validation and

checking for logically correct values.

Practical Outline

1. Let’s start by adding a slot for our BMICalculator dialog class for calculating the BMI value. Add the following private slot function:

void calculateBMI();

In this function, calculate the BMI value from the weight and height given for the

suitable UI components. If weight is entered using a line edit, you will need to

change it to integer from QString. See QtCreator’s help (QtAssistant) on how to do this.

The formula for BMI value is

BMI = weight / heightInMeters^2

Remember to show the result in the dialog after calculating it.

2. Connect your slot function to suitable slots, so that it gets called whenever the

values of weight or height are modified. Where to connect?

3. Compile, run and test your application!

4. Let’s add a check for the program that it will change the weight line edit to red text

color if the given weight is too less or too much (let’s say under 30 or over 200).

For this, we will try an automatically connected slot function. The connection is

made based on its name. Which name should you give to the function to have it

executed every time the weight is edited?

Implement the function to have logic for checking the weight value and modifying

the QPalette of the line edit widget. See QtAssistant for syntax.

5. Build, compile and enjoy! Good job!

Qt on i.MX6



Exercise 2: Deploying to an i.MX6

Objectives

- Setting up embedded tool chains to Qt Creator

- Cross-compiling and deploying you application to the i.MX6 board

Overview

Here is the rough set of instructions you can use to deploy your existing Qt application

(like the BMICalculator) to an embedded linux device.

PART 1 – Prepare host computer and the board

1. For the host computer, you will need a Linux desktop PC with for instance Ubuntu

and the C++ development environment in place.

a. In order to get the development tools, you might need to install a separate

package, like build-essentials (depending on your distribution).

2. For your board, you will need to install a suitable Embedded Linux distribution.

a. This one you will get from Freescale’s web pages

b. The linux installation should have an SSH server so that you can remotely

deploy into it.

c. After installing the embedded linux, connect it to the same network than

your host computer and check its IP address.

3. Finally, your host computer will need a cross-compilation tool chain for you

selected Linux distribution

a. Again, this comes from Freescale

PART 2 – Qt Commercial SDK

1. For your host computer, you will need to install a version of the Qt Commercial

SDK.

a. If you are an existing Qt customer, you will get this from your customer

portal

b. If you are not yet a customer, you can download a 30-day free evaluation

version through qt.digia.com

2. The SDK is installed through an online installer. Make sure you have the Embedded

Linux targets installed as well.

PART 3 – Configuring and compiling Qt libraries

With the Qt Commercial SDK, you will get Qt libraries (source codes) that you will need to

configure and compile to your board

1. First we will create a so called mkspec (make specification) for your exact target

environment/cross-compilation tool chain

a. Go to Qt source folder under the SDK and locate folder mkspecs/qws

b. Here, you can find existing “reference” mkspecs for different QWS based

Qt builds. The one we are going to use as a basis is linux-arm -gnueabi-g++

c. You could modify this directly but you could also create your own mkspecs by copying this into a new folder, say linux-arm-fsl-gnueabi-g++

d. In this new folder, go edit the file qmake.conf. This file contains the

paths/names of the compiler tool chain binaries. Modify this in the

following manner (assuming these are the binary names of your cross-

compiler tool chain you got from Freescale in PART 1). Modifications in red:

=== CLIP START === include(../../common/linux.conf) include(../../common/gcc-base-unix.conf)

Qt on i.MX6



include(../../common/g++-unix.conf) include(../../common/qws.conf) # modifications to g++.conf QMAKE_CFLAGS = -march=armv7-a -mfpu=neon -mfloat-abi=softfp QMAKE_CXXFLAGS = -march=armv7-a -mfpu=neon -mfloat-abi=softfp QMAKE_CC = arm-fsl-linux-gnueabi-gcc QMAKE_CXX = arm-fsl-linux-gnueabi-g++ QMAKE_LINK = arm-fsl-linux-gnueabi-g++ QMAKE_LINK_SHLIB = arm-fsl-linux-gnueabi-g++ # modifications to linux.conf QMAKE_AR = arm-fsl-linux-gnueabi-ar cqs QMAKE_OBJCOPY = arm-fsl-linux-gnueabi-objcopy QMAKE_STRIP = arm-fsl-linux-gnueabi-strip load(qt_config) === CLIP END ===

2. Set the PATH environment variable to include the cross-compilation tools, for instance this way:

export PATH=/opt/freescale/fsl-linaro-toolchain/bin:$PATH

3. Configure Qt build for the specific target platform, now referencing to your newly

made qmakespec. There are many variants you can use for configure, this is just

one possibility and might not work for you. See configure --help:

./configure -embedded arm -xplatform qws/linux-arm-linaro-gnueabi-g++ -commercial -force-pkg-config -fast -exceptions -release -no-webkit -no-freetype -reduce-relocations -no-dbus -qt-libjpeg -qt-libmng -qt-libpng -qt-libtiff -no-multimedia -no-phonon -no-qt3support -no-largefile -no-openssl -no-cups -no-nis -no-accessibility -no-opengl -no-gfx-multiscreen -no-mouse-linuxtp -no-script -no-scripttools -no-svg -no-xmlpatterns -no-sql-sqlite2 -little-endian -prefix /opt/qt –no-make demos –no-make examples

In the previous, we are saying we will use the mkspecs you just created, we are opting out few libraries and we are saying that the Qt libraries will go to folder /opt/qt in the target hardware. Also, we’re not building demos and examples for building faster.

3. After successful configuration, start compilation with running ‘make’ and ‘make

install’. This might take at least half an hour if not couple of hours.

4. Now, you should have a bunch of freshly created DLLs, or actually .so files,

probably under /opt/qt, where you will need to copy these into your board’s

/opt/qt folder, for instance using scp.

a. This is where the board’s IP address will come handy.

PART 4 – Configuring Qt Creator

Now that Qt libraries have been compiled and copied to the board, we are left to tell the Qt

Creator IDE to use the specific Qt build and the related cross-compilation tool-chain. We

also want to tell the IDE how to deploy on the connected remote device.

1. Open Qt Creator and the Options menu under Tools->Options.

a. Locate “Tool Chains” under Build&Run

b. Add -> GCC

c. Search the Compiler Path of your cross-compiler g++ binary

Qt on i.MX6



2. Using this Tool Chain, let’s add a new Qt version (a set of Qt libraries) to the tool

a. Again, under the same Build&Run, locate “Qt Versions”

b. Add new one, search the qmake binary from the Qt folder you just built in

the previous phase

3. Add a new remote deployment device

a. Under options, go to “Linux Devices”

b. Add new one. Give the IP of the board, root username/password etc.

information using the wizard.

Qt on i.MX6



PART 5 – Configuring an individual project

Since far, in the previous 4 phases, we’ve done things you only need to do once. The

following few steps you will then need to do for each individual project you’re working with.

So, most of the installation is only done for the first time you do it.

1. With an existing Qt project in Qt Creator (like the BMI Calculator). Open the

“Projects” tab from the left side.

a. Add a new target (Embedded Linux) from the top.

b. To the Build side, select the tool chain and Qt version you created in the

previous phase. This basically means, that whenever you are using this

build target, you will compile with a certain qmake that controls a certain

g++ compiler.

c. To enable deployment, go to the Run side.

d. Select Device configuration to the one you defined in Phase 4.

e. Add Run configuration

2. Finally, give the launchable binary the command line argument “-qws” to that the

window server gets launched at the same time than your application.

Qt on i.MX6



Qt on i.MX6



Exercise 3: Stop-Clock

Objectives

- Write a simple stop-clock application

- Familiarize yourself with different parts of the work flow in Qt Creator

Overview

We will write a small Qt application from the scratch familiarizing ourselves with all the

different work phases in a simple Qt project.

The application is a really simple stop clock, which is controlled with Start/Stop and Reset

buttons:

Screenshots of the application

The exercise will be made in four parts:

1) Creating the project

2) UI Design with Qt Designer

3) Start/Stop + Reset functionality with QTimer

4) Alarm

Qt on i.MX6



PART 1 – Creating the project

1. Launch the Qt Creator and create a new Qt Widget Project -> Qt GUI Application

a. Name your project and select a suitable folder,

b. You can name your Mainwindow class differently, for instance StopClock

c. Finish the wizard with default values

2. Explore the project contents. The wizard generated the following

a. .ui file, the XML for the UI Layout

b. A custom QMainWindow class which uses the UI layout and can be

extended for custom behavior. This is what we’ll do in Part 3 & 4.

c. .pro file, the Qt project definition file. Check its contents to get an

overview.

PART 2 – UI Layout

3. Open the .ui file in order to get to the Qt Designer view.

4. By adding widgets from the left hand side try to replicate a similar kind of UI

layout that in the screenshots. You will need at least

b. Pushbuttons

c. LCDNumber

d. Spinbox

e. Layout managers

5. Modify the properties of the elements to better suit this application. E.g. the lcd

number and spin box could be rather large, the text in the buttons needs to be set,

the lcd number only shows three digits, etc.

PART 3 - Start/Stop + Reset functionality with QTimer

For the actual program logics, we need to apply programming. Yes, writing code. We will

extend the behavior of our custom MainWindow class (which you might have named

StopClock).

6. Open the header file (stopclock.h or mainwindow.h).

a. Add new slot functions toggleStart(), reset() and updateTime(). The first one will either start or stop the clock and the second will reset the

clock value back to zero.

b. We shall implement the clock functionality with the class QTimer. Add one

of these as a member variable to the class (within the private scope).

Member variables in Qt are usually named with syntax m_variableName, so you can name this m_timer.

7. Open the class .cpp file and implement the following:

c. Create the m_timer object in the class constructor.

d. Implement function toggleStart() using the m_timer. Depending on m_timer’s current state (active or not) it will started or stopped, the timer

should operate with an interval 0,1 seconds. Examine the documentation of

QTimer when needed. The function can also toggle the text in the button (Start or Stop).

e. Implement reset() to set the clock (lcd number) to value 0.

f. Implement function updateTime(). This function gets called whenever the timer timeouts and needs to increase the lcd numbers value

correspondingly.

g. Finally, create the necessary connections between signals and slots in the

class constructor:

When buttons are pressed, the corresponding slot functions get called (the exit

button can call close() for the mainwindow itself)

When m_timer timeouts, updateTime() gets called.

Qt on i.MX6



8. Time to compile, test, try and play around:

PART 4 – Deploying to the board

9. Now that the application is running successfully on desktop, you can take it to your

board. Follow the instructions on Phase 5 of the previous exercise and deploy and

run your application in a device.

PART 4 - Alarm

1. Now that you got an idea on the whole work flow, try more independently to add

the alarm functionality to the application. If the alarm is set (value more than 0),

the clock will automatically stop in the alarm value.

qt on i - nxp semiconductorscache.freescale.com/files/training/doc/dwf/qt_imx6_handson.pdf · qt on...

Documents