Qt on i - NXP Semiconductorscache.freescale.com/files/training/doc/dwf/QT_IMX6_HANDSON.pdf · Qt on...
Transcript of 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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
Qt on i.MX6
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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
Hands-on Instruction
Copyright 2012 Digia Plc.
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.