qtlabs Documentation Release Vladimir Poliakov Aug 21, 2017 Contents 1 Introduction 3 1.1 What is Qt?................................................3 1.2 Framework................................................3 1.3 Toolkit..................................................4 2 Getting started with Qt 5 2.1 Prerequisites...............................................5 2.2 Qt installation..............................................6 2.3 First project in Qt Creator........................................ 12 3 Lab 1. Qt basics 19 3.1 Typical main.cpp file........................................... 19 3.2 Qt basic modules............................................. 20 3.3 QObject model philosophy........................................ 21 3.4 Conclusion and exercise......................................... 24 i ii qtlabs Documentation, Release This project aims to give basic knowledges and skills of using Qt framework. There is no special prerequisites, except some essentials in C++. Contents 1 qtlabs Documentation, Release 2 Contents CHAPTER 1 Introduction What is Qt? Qt (“cute”) is the independent technology for cross-platform development of application on desktop, embedded and mobile operating systems. It consists of toolkit, including tools for development, debugging and deployment of application, for cross-platform applications. Qt is usually refereed as a C++ framework and a set of tools for development of graphical interfaces. Indeed, at the current time Qt framework has much more capabilities, including multi-threading, networking, and can be easily integrated with other languages, such as Python, Javascript, SQL , as well as it can be combined with different tools and frameworks, for instance D-Bus and OpenCV. Thus, Qt is a platform of choice for: 1. Desktop applications 2. Mobile applications 3. Embedded systems: • in-vehicle systems • medical equipment • industrial automation devices Framework Qt framework includes next modules: 1. QtCore - Core non-graphical classes used by other modules. 2. QtGUI - Base classes for graphical user interface (GUI) components. Includes OpenGL. 3. QtMultimedia - Classes for audio, video, radio and camera functionality. 4. QtNetwork - Classes to make network programming easier and more portable. 5. QtQuick - A declarative framework for building dynamic applications with custom user interfaces. 3 qtlabs Documentation, Release 6. QtSQL - Classes for database integration using SQL. 7. QtTest -Classes for unit testing Qt applications and libraries. Toolkit Qt toolkit includes different tools for development, such as: 1. Qt Creator - IDE for development, debugging and deployment of application 2. Qt Designer - part of Qt Creator, tool for graphical design of UI 3. Qt Linguist - tool used for internationalization of application. Mainly, every Qt project can be easily build and deployed without these tools by using different IDEs or editors, but I would encourage you to try out Qt Creator cause it is nicely tuned for Qt projects. 4 Chapter 1. Introduction CHAPTER 2 Getting started with Qt This part will explain how to install Qt and how to create your first projectin Qt Creator Prerequisites Before we proceed, let’s install some packages we may need in order to build and debug our applications. Linux Linux users need few additional packages like: 1. OpenGL - open graphics library for hardware-accelerated rendering 2. GNU Make - a tool which controls the generation of executables and other non-source files of a program 3. GCC - GNU Compiler Collection 4. gdb - GNUdebugger You can install these packages using following command: sudo apt-get install gcc g++ gdb make libgl1-mesa-dev Note: The command above will only work in Debian-like distributions, such as Ubuntu, Linux Mint, KDE Neon, etc. Windows No additional software must be installed. Everything should work out of box. 5 qtlabs Documentation, Release MacOS No idea, honestly. Qt installation Let’s first start with installation of Qt and proceed with trying it out by creating a simple hello world project: Note: Installation will use approx. 1.47GiB of disk space. 1. Go to Qt download page and download Qt by picking open source version. 2. After downloading the installer run it. Linux users need to add permission for execution. For that, right click on the file -> Properties -> set flag ‘is executable’, than it should become executable. 6 Chapter 2. Getting started with Qt qtlabs Documentation, Release 3. You can skip creating a Qt account or, obviously, create one. 4. Choose the path you would like to install Qt 2.2. Qt installation 7 qtlabs Documentation, Release 5. On selecting components page pick the latest version of Qt (5.9.1 at the moment) and Tools. 8 Chapter 2. Getting started with Qt qtlabs Documentation, Release 6. Install it! If everything went good, you shall be able to start Qt Creator. Now, let’s set up the build configuration. Setting up the build configuration Before you can start using Qt you need to ensure that the build configuration isset properly. Long story short, config- uration includes selection of a compilerand a version Qt libraries. A combination of these two components (compiler and Qt version) is called a kit and is a corner stone of cross-compilation. Butwe will get back to it later. Now you ony need to check if the default kit isworking fine. To do that: 1. Start Qt creator. 2.2. Qt installation 9 qtlabs Documentation, Release 2. Go to Tools -> Options... 3. Select Build & Run in the menu on the left, then pick tab Kits, and check ifthere is an Auto-detected kit. If there is one, select it and check if both C and C++ compilers are set. If both are set, it means that your kit is properly set and you can skip the rest of this part and start with your first project. 4. If no kit is auto-detected or if auto-dected kit misses Qt version or compilers, you have to set them up manually. 5. To set up Qt version go to Qt versions tab -> Add... ,go to the Qt installation path and search for qmake file inside that folder. It should be somewhere inside a folder like 5.9/gcc_64/bin or else depending on the platform and version used. 10 Chapter 2. Getting started with Qt qtlabs Documentation, Release 6. To set up compilers go to Compilers tab -> Add, select the proper compiler that you use (usually MinGW for Windows and GCC for Linux) and search for gcc and g++ in the system. 2.2. Qt installation 11 qtlabs Documentation, Release After just click ok and that is it! You are ready for your first project! First project in Qt Creator Before we start with learning Qt we should first learn how to create and maintain the project in Qt creator: 1. Open Qt Creator, go to the Welcome page, and click Projects -> New Project 2. Since we want to check if everything is working fine, we pick Qt Quick Application and click next 3. Give a name and place for a project. It is always a nice idea to store all projects in one place, so you can create a workspace and mark it as a default project location. 12 Chapter 2. Getting started with Qt qtlabs Documentation, Release 4. Pick a minimal version of Qt libraries. Since we don’t really care about compatability so far, you can leave it as it is. But we also won’t use Qt Designer this time, so unmark “With ui.qml file”. 2.3. First project in Qt Creator 13 qtlabs Documentation, Release 5. Pick a kit to use. Most probably you will only have one kit, thus you have not so many options. But interesting part is hidden in details. Here you can define a place and a name for a building directory. By default it is located on the same level as the project folder, but you can choose any other level or a foldr name, it should not bring you any troubles except a warning. You can also see that there three possible versions: debug, release, and progile. You can freely use any of them, the differnce is only that debugging and profiling versions add some information to executable for debugging/profiling. 14 Chapter 2. Getting started with Qt qtlabs Documentation, Release 6. Finish the creation After finishing the creation Creator will open the project and show main.qml file. On the left side you can see the structure of a project. It include .pro file, you won’t usually change, it is just specifies Qt modules used in the project and sources and headers. Then the project has sources and headers sections. Since we don’t have any headers in our project, so you shall only be able to see the Sources section. Next, there is a resource section. We will later talk about what resources are, but long story short those are collections of files that will be included into executable, so later on you will only need to put one file in the target machine for deployment instead of bunch of pictures and conf files. You can see that main.qml represents some basic “hello world”-like template. Let’s change it now for something just a bit fancier to get to know how to add files to a project. Let it be clocks, for example. First update the main.cpp and main.qml files. Replace the contents ofmain.qml with following lines: import QtQuick 2.6 import QtQuick.Window 2.2 Image { visible: true id: background source: "pics/clocks_background.png" Image { id: minuteArrow 2.3. First project in Qt Creator 15 qtlabs Documentation, Release source: "pics/clocks_minute_arrow.png" x: parent.width/2 - minuteArrowRotation.origin.x y: parent.height/2 - minuteArrowRotation.origin.y transform: Rotation { id: minuteArrowRotation origin.x: minuteArrow.width/2 origin.y: minuteArrow.height - minuteArrow.width/2 Behavior on angle { RotationAnimation { duration: 400; direction: ,!RotationAnimation.Clockwise} } } } Image { id: hourArrow source: "pics/clocks_hour_arrow.png" x: parent.width/2 - width/2 y: parent.height/2 - height + width/2 transform: Rotation { id: hourArrowRotation origin.x: hourArrow.width/2 origin.y: hourArrow.height - minuteArrow.width/2 Behavior on angle { RotationAnimation { duration: 400; direction: ,!RotationAnimation.Clockwise} } } } Timer { interval: 60000 repeat: true running: true triggeredOnStart: true onTriggered: { var today = new Date() hourArrowRotation.angle = ((today.getHours()%12) * 30) minuteArrowRotation.angle = today.getMinutes() * 6 } } } QML may now look a bit weird, but later yu will see that it is very useful when implementing GUI.