s
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
Objectives Exercise 1a: UI Design BMI Calculator - 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.cpp main.cpp, bmicalculator.cpp/.h or mainwindow.cpp/.h w.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 bmicalculator.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 o o Drag and drop the buttons, labels and other widgets onto the designer canvas and order them roughly in the correct position Select the widgets you intend to layout horizontally, right-click and set the needed layout using the context menu Once the horizontal layouts and their contents have been created, place them inside the vertical layout in the same way
Checkpoint: compile and run your application. 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_bmicalculator bmicalculator.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.
Objectives Exercise 1b: Signals and Slots BMI Calculator - 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!
Objectives Exercise 2: Deploying to an i.mx6 - 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 -gnueabig++ 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 crosscompiler tool chain you got from Freescale in PART 1). Modifications in red: === CLIP START === include(../../common/linux.conf) include(../../common/gcc-base-unix.conf)
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 nomake 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
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.
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.
Objectives - Write a simple stop-clock application Exercise 3: Stop-Clock - 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
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.
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.