TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

KỸ THUẬT LẬP TRÌNH HỆ CƠ ĐIỆN TỬ

Programming Engineering in Mechatronics

Giảng viên: TS. Nguyễn Thành Hùng

Đơn vị: NCM Robot, Khoa Cơ điện tử, Trường Cơ khí

Hà Nội, 2022 1
 Chapter IV. Graphical User Interface

1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development

2
 Chapter IV. Graphical User Interface

1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development

3
 What is QT?

 A software development framework

 Qt framework
 APIs
 Qt Creator IDE
 Design and debug
 Tools and toolchains
 Simulator, complier, device toolchains
 Qt is released on 1991 by Trolltech
 Nokia acquired Trolltech in 2008
 Free and open source software to puclic
 C+ is the primary programming language

4
 Chapter IV. Graphical User Interface

1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development

5
 QT Framework

 Qt is cross-platform application and UI framework.

 Qt provides a well defined API that can make development quick
and easy.
 Webkit
 Well accepted open source web browser

 Rapidly create real-time web content and services

 Use HTML and Java Script integrated in native code

6
 QT Framework

 3D Graphics with OpenGL and OpenGL ES

 Easily incorporate 3D Graphics in your applications

 Get maximum graphics performance

 Multithreading support
 Network connectivity
 Advanced GUI development

7
QT Framework

8
Qt Framework – Application Classes

9
QT Creator – Development tools

10
 Widgets

 Qt UI framework is based on widgets

 Widgets respond to UI events (key
presses/mouse movements), and update
their screen area
 Each widget has a parent, that affects its
behavior, and is embedded into it
 Most Qt classes are derived from QWidget
 Ex, QGLWidget, QPushbutton …
QPushButton * myButton = new QPushButton(…);
myButton->doSomethingAPI();

11
Widgets

12
 Signals & Slots

 Signals & Slots

 Signals and slots are used for communication between objects. The signals and slots
mechanism is a central feature of Qt and probably the part that differs most from the
features provided by other frameworks.
 Signals
 Events occur and cause a signal
 Widgets contain a list of predefined signals, but you can subclass a widget to add your
own signal
 Example – button press, or Process complete

 Slots
 Slots are the functions which are assigned to handle a signal.
 Widgets contain a list of predefined slots.
 You can subclass a widget and add your own slots

13
 Running Supplied Demo Applications

 There are over 300 demo and example applications supplied in the SDK.
 They come from the QT SDK
 Wide variety of applications. The same application from QT Demo.
 Use QT Creator to pull in the project and build and run it on the target.

14
 Chapter IV. Graphical User Interface

1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development

15
 QT in Visual Studio

 Download and Install Qt

 Download the open source version of Qt that is suitable for your operating system
https://www.qt.io/download
 Start the installation: select Tools, Qt Source, Qt chart and also Qt Data
Visualization

16
 QT in Visual Studio

 Download and Install Qt Visual Studio Tools

 Download Qt Visual Studio Tools and Install
https://marketplace.visualstudio.com/items?itemName=TheQtCompany.QtVisualStu
dioTools2019
 Open Visual studio, if the Qt VS Tools were correctly installed, you should find a new
menu item “Qt VS Tools”.

17
 QT in Visual Studio

 Add the path towards the

components for the compiler: Qt
VS Tools -> Qt Options-> Add
button, Use the folder where you
installed Qt

18
 QT in Visual Studio

 Creating Qt GUI Application

Projects
 Select New Project > Installed
> Templates > Visual C++ > Qt
> Qt GUI Application
 In the Name field, enter
AddressBook, and then select
OK
 To acknowledge the Welcome
dialog, select Next
 Select the modules to include in
the project, and then select Next
 In the Base class field, enter
QWidget as the base class type

19
 QT in Visual Studio

 Creating Qt GUI Application Projects

 Select the Lower case filenames check box to only use lower case characters in the
names of the generated files
 Select the Precompiled header check box to use a precompiled header file
 Select the Add default application icon check box to use a default application icon
for the application
 Select Finish to create the project
 Select Build > Build Solution to build it, and then select Debug > Start
Debugging to run it. For now, the result is an empty window.

20
 Chapter IV. Graphical User Interface

1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development

21
 Qt5 C++ GUI Development

➢ First GUI Application ➢ QListWidget

➢ Signal And Slots ➢ QMessageBox
➢ Layout Management ➢ QMenu And QToolbar
➢ Qt5 Style Sheets ➢ QFileDialog
➢ QPushButton ➢ QProgressBar
➢ QCheckBox ➢ Draw Text & Line with QPainter
➢ QRadioButton ➢ Draw Rectangle
➢ QComboBox ➢ Draw Ellipse

22
 Qt5 C++ GUI Development

 First GUI Application

 Create a new Project in your Qt5 framework
 Choose Qt Widget Application
 Click on next and finish your project

https://codeloop.org/qt5-c-first-gui-application/ 23
 Qt5 C++ GUI Development

 First GUI Application

 .PRO file: PRO files include
references to project libraries,
assets, and source code files, as
well as other files such as
application resources (.QRC
files), project includes (.PRI
files), translation sources (.TS
files), phrase books (.QPH files),
and style sheets (.QSS files).Qt
projects are used for creating
applications that run on the Qt
framework.

https://codeloop.org/qt5-c-first-gui-application/ 24
 Qt5 C++ GUI Development

 First GUI Application

 The header file .h:

https://codeloop.org/qt5-c-first-gui-application/ 25
 Qt5 C++ GUI Development

 First GUI Application

 The .cpp files:

https://codeloop.org/qt5-c-first-gui-application/ 26
 Qt5 C++ GUI Development

 First GUI Application

 The .ui file: we design our GUI application in here

https://codeloop.org/qt5-c-first-gui-application/ 27
 Qt5 C++ GUI Development

 First GUI Application

 Run the project and this will be the result

https://codeloop.org/qt5-c-first-gui-application/ 28
 Qt5 C++ GUI Development

 Signal And Slots

 Creating New Project in Qt5 C++
 Open your mainwindow.ui
 Add a QPushButton

https://codeloop.org/qt5-c-signal-and-slots-introduction/ 29
 Qt5 C++ GUI Development

 Signal And Slots

 Creating New Project in Qt5 C++
 Open your mainwindow.ui
 Add a QProgressbar and a Horizontal Slider

https://codeloop.org/qt5-c-signal-and-slots-introduction/ 30
 Qt5 C++ GUI Development

 Signal And Slots

 For connecting the signal and slots you need to open your mainwindow.cpp and in the
constructor add this line of code
connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->progressBar, SLOT(setValue(int)));

https://codeloop.org/qt5-c-signal-and-slots-introduction/ 31
 Qt5 C++ GUI Development

 Layout Management
 All QWidget subclasses can use layouts to manage their children. The
QWidget::setLayout() function applies a layout to a widget.
 When a layout is set on a widget in this way, it takes charge of the following tasks:
 Positioning of child widgets
 Sensible default sizes for windows

 Sensible minimum sizes for windows

 Resize handling

 Automatic updates when contents change:

➢ Font size, text or other contents of child widgets

➢ Hiding or showing a child widget
➢ Removal of child widgets

https://codeloop.org/qt5-layout-management-introduction/ 32
 Qt5 C++ GUI Development

 Layout Management
 The built-in layout managers: QHBoxLayout, QVBoxLayout, QGridLayout, and
QFormLayout

QHBoxLayout QVBoxLayout QFormLayout

QGridLayout

https://codeloop.org/qt5-layout-management-introduction/ 33
 Qt5 C++ GUI Development

 Qt5 Style Sheets

 allows you to customize the appearance of widgets
 subclass Qstyle
 HTML Cascading Style Sheets (CSS)
 QApplication::setStyleSheet() and QWidget::setStyleSheet()
 Example

https://codeloop.org/qt5-style-sheets-introduction-and-example/ 34
 Qt5 C++ GUI Development

 Qt5 Style Sheets

 The Style Sheet Syntax And Rules
 HTML CSS
 A style rule is made up of a selector and a declaration.

 The selector specifies which widgets are affected by the rule

 The declaration specifies which properties should be set on the widget

selector declaration

https://codeloop.org/qt5-style-sheets-introduction-and-example/ 35
 Qt5 C++ GUI Development

 Qt5 Style Sheets

 Example

https://codeloop.org/qt5-style-sheets-introduction-and-example/ 36
 Qt5 C++ GUI Development

 Qt5 Style Sheets

 Example

https://codeloop.org/qt5-style-sheets-introduction-and-example/ 37
 Qt5 C++ GUI Development

 QPushButton
 The most commonly used widget in any graphical user interface

 A push button emits the signal clicked() when it is activated by the mouse, the
Spacebar or by a keyboard shortcut.
 Push buttons also provide less commonly used signals, for example pressed() and
released().

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 38
 Qt5 C++ GUI Development

 QPushButton
 Example

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 39
 Qt5 C++ GUI Development

 QPushButton
 Example

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 40
 Qt5 C++ GUI Development

 QPushButton
 Example
mainwindow.cpp

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 41
 Qt5 C++ GUI Development

 QPushButton
 Example

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 42
 Qt5 C++ GUI Development

 QCheckBox
 A QCheckBox is an option button that can be switched on (checked) or off (unchecked).
 Signal: stateChanged()
 Slot: isChecked()

Checkboxes Exclusive Checkboxes Non Exclusive

https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 43
 Qt5 C++ GUI Development

 QCheckBox
 Example
mainwindow.ui

https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 44
 Qt5 C++ GUI Development

 QCheckBox
 Example
mainwindow.cpp

https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 45
 Qt5 C++ GUI Development

 QCheckBox
 Example
mainwindow.cpp

https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 46
 Qt5 C++ GUI Development

 QCheckBox
 Example

https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 47
 Qt5 C++ GUI Development

 QRadioButton
 A QRadioButton is an option button that can be switched on (checked) or off
(unchecked).
 Radio buttons typically present the user with a “one of many” choice.

 Example

https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 48
 Qt5 C++ GUI Development

 QRadioButton
 Example

https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 49
 Qt5 C++ GUI Development

 QRadioButton
 Example

https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 50
 Qt5 C++ GUI Development

 QRadioButton
 Example

https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 51
 Qt5 C++ GUI Development

 QComboBox
 A combobox is a selection widget that displays the current item, and can pop up a list
of selectable items.
 A combobox may be editable, allowing the user to modify each item in the list.
 Example

https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 52
 Qt5 C++ GUI Development

 QComboBox
 Example: first way

https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 53
 Qt5 C++ GUI Development

 QComboBox
 Example: first way

https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 54
 Qt5 C++ GUI Development

 QComboBox
 Example: second way

https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 55
 Qt5 C++ GUI Development

 QComboBox
 Example: second way

https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 56
 Qt5 C++ GUI Development

 QListWidget
 QListWidget is a convenience class that provides a list view similar to the one
supplied by QListView, but with a classic item-based interface for adding and
removing items.
 Example:

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 57
 Qt5 C++ GUI Development

 QListWidget
 Example: first way

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 58
 Qt5 C++ GUI Development

 QListWidget
 Example: second way

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 59
 Qt5 C++ GUI Development

 QListWidget
 Example: Design UI

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 60
 Qt5 C++ GUI Development

 QListWidget
 Example: Coding

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 61
 Qt5 C++ GUI Development

 QListWidget
 Example:

https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 62
 Qt5 C++ GUI Development

 QMessageBox
 QMessageBox supports four predefined message severity levels, or message types,
which really only differ in the predefined icon they each show.
 The following rules are guidelines:

https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 63
 Qt5 C++ GUI Development

 QMessageBox
 Example

https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 64
 Qt5 C++ GUI Development

 QMessageBox
 Example

https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 65
 Qt5 C++ GUI Development

 QMessageBox
 Example

https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 66
 Qt5 C++ GUI Development

 QMessageBox
 Example

https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 67
 Qt5 C++ GUI Development

 QMenu And QToolbar

 What is a Menu?

https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 68
 Qt5 C++ GUI Development

 QMenu And QToolbar

 What is a QToolbar?

https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 69
 Qt5 C++ GUI Development

 QMenu And QToolbar

https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 70
 Qt5 C++ GUI Development

 QFileDialog
 QFileDialog class enables a user to traverse the file system in order to select one or
many files or a directory.

https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 71
 Qt5 C++ GUI Development

 QFileDialog
 Example: right click on your Open menu item in Signals And Slot Editor, after that
choose Go To Slot and from the dialog choose triggered() like this.

https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 72
 Qt5 C++ GUI Development

 QFileDialog
 Example:
mainwindow.h

https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 73
 Qt5 C++ GUI Development

 QFileDialog
 Example:
mainwindow.cpp

https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 74
 Qt5 C++ GUI Development

 QFileDialog
 Example:

https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 75
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening and saving files
 Open Files

https://qt.misfrog.com/posts/%E3%83%A1%E3%83%A2%E3%81%AE%E4%BF%9D%E5%AD%98%E3%81%A8%E3%83%AD%E3%83%BC%
E3%83%89 76
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening and saving files
 Save Files

https://qt.misfrog.com/posts/%E3%83%A1%E3%83%A2%E3%81%AE%E4%BF%9D%E5%AD%98%E3%81%A8%E3%83%AD%E3%83%BC%
E3%83%89 77
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening, displaying and saving images
 create a new Qt Widgets application
 add a Graphics View (located under the Display Widgets)

 add two Push Buttons: openButton and saveButton

mainwindow.h

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 78
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening, displaying and saving images
 Adding events for the buttons

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 79
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening, displaying and saving images
 Opening an image and displaying it on the QGraphicsView

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 80
 Qt5 C++ GUI Development

 QFileDialog
 Example: Opening, displaying and saving images
 Saving the image

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 81
 Qt5 C++ GUI Development

 QProgressBar
 A progress bar is used to give the user an indication of the progress of an operation
and to reassure them that the application is still running.
 Example:

https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 82
 Qt5 C++ GUI Development

 QProgressBar
 Example:

https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 83
 Qt5 C++ GUI Development

 QProgressBar
 Example:

https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 84
 Qt5 C++ GUI Development

 QProgressBar
 Example:

https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 85
 Qt5 C++ GUI Development

 QProgressBar
 Example:

https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 86
 Qt5 C++ GUI Development

 Draw Text & Line with QPainter

 The QPainter class performs low-level painting on
widgets and other paint devices.
 QPainter provides highly optimized functions to do
most of the drawing GUI programs require.
 What is Qbrush?
 A brush has a style, a color, a gradient and a texture.
 The brush style() defines the fill pattern using the
Qt::BrushStyle enum.

https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ Brush Styles 87

 Qt5 C++ GUI Development

 Draw Text & Line with QPainter

 What is QPen?
 A pen has a style(), width(), brush(), capStyle() and joinStyle().
 The pen style defines the line type.

 The brush is used to fill strokes generated with the pen. Use the QBrush class to specify fill

styles.

https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 88
 Qt5 C++ GUI Development

 Draw Text & Line with QPainter

 Example:

https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 89
 Qt5 C++ GUI Development

 Draw Text & Line with QPainter

 Example:
mainwindow.cpp

https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 90
 Qt5 C++ GUI Development

 Draw Text & Line with QPainter

 Example:

https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 91
 Qt5 C++ GUI Development

 Draw Rectangle
 Example
mainwindow.h

https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 92
 Qt5 C++ GUI Development

 Draw Rectangle
 Example
mainwindow.cpp

https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 93
 Qt5 C++ GUI Development

 Draw Rectangle
 Example

https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 94
 Qt5 C++ GUI Development

 Draw Ellipse
 Example

https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 95
 Qt5 C++ GUI Development

 Draw Ellipse
 Example

https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 96
 Qt5 C++ GUI Development

 Draw Ellipse
 Example

https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 97
 Qt5 C++ GUI Development

 Draw BarChart with QtChart

 Example

 add Horizontal Layout in our gui window

 right-click on the layout widget you just
dragged to the central widget, and select
Morph into | QFrame.

https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 98
 Qt5 C++ GUI Development

 Draw BarChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 99
 Qt5 C++ GUI Development

 Draw BarChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 100
 Qt5 C++ GUI Development

 Draw BarChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 101
 Qt5 C++ GUI Development

 Draw LineChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-linechart-with-qtchart/ 102
 Qt5 C++ GUI Development

 Draw LineChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-linechart-with-qtchart/ 103
 Qt5 C++ GUI Development

 Draw PieChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-piechart-with-qtchart/ 104
 Qt5 C++ GUI Development

 Draw PieChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-piechart-with-qtchart/ 105
 Qt5 C++ GUI Development

 Draw DonutChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-donutchart-with-qtchart/ 106
 Qt5 C++ GUI Development

 Draw DonutChart with QtChart

 Example

https://codeloop.org/qt5-tutorial-creating-donutchart-with-qtchart/ 107