Kỹ thuật lập trình hệ cơ điện tử= Programming Engineering in Mechatronics. Chapter IV. Graphical User Interface80

QT in Visual StudioCreating Qt GUI Application Projects Select New Project > Installed > Templates > Visual C++ > Qt > Qt Application In the Name field, enter AddressBook, and then selec

Trang 1

KỸ THUẬT LẬP TRÌNH HỆ CƠ Đ Programming Engineering in Mech

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

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

Đơn vị : Bộ môn Cơ điện tử , Viện Cơ

Hà Nội, 2018

Trang 2

Chapter IV Graphical User Inte

1 What is QT?

2 QT Framework

3 QT in Visual Studio

4 Qt5 C++ GUI Development

Trang 3

1 What is QT?

2 QT Framework

Trang 4

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

Trang 5

1 What is QT?

2 QT Framework

Trang 6

QT Framework

Qt is cross-platform application and UI framework.

Qt provides a well defined API that can make development quic 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

Trang 7

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

Trang 8

QT Framework

Trang 9

Qt Framework Application Cl –

Trang 10

QT Creator Development to –

Trang 11

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();

Trang 12

Widgets

Trang 13

Signals & Slots

Signals & Slots

Signals and slots are used for communication between objects The smechanism is a central feature of Qt and probably the part that differsfeatures provided by other frameworks

Signals

Events occur and cause a signal

Widgets contain a list of predefined signals, but you can subclass a wown 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

Trang 14

Running Supplied Demo Applic

There are over 300 demo and example applications supplied in t

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

Trang 15

1 What is QT?

2 QT Framework

Trang 16

QT in Visual Studio

Download and Install Qt

Download the open source version of Qt that is suitable for your oper

https://www.qt.io/download

Start the installation: select Tools, Qt Source, Qt chart and also Qt DaVisualization

Trang 17

Download and Install Qt Visual Studio Tools

Download Qt Visual Studio Tools and Install

https://marketplace.visualstudio.com/items?itemName=TheQtCompadioTools2019

Open Visual studio, if the Qt VS Tools were correctly installed, you menu item “Qt VS Tools”

Trang 18

Add the path towards the

components for the compiler: Qt

VS Tools -> Qt Options-> Add

button, Use the folder where you

installed Qt

Trang 19

Creating Qt GUI Application Projects

Select New Project > Installed > Templates > Visual C++ > Qt > Qt 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

Trang 20

Creating Qt GUI Application Projects

Select the Lower case filenames check box to only use lower case chnames of the generated files

Select the Precompiled header check box to use a precompiled headeSelect the Add default application icon check box to use a default appfor the application

Select Finish to create the project

Select Build > Build Solution to build it, and then select Debug > StaDebugging to run it For now, the result is an empty window

Trang 21

1 What is QT?

2 QT Framework

Trang 22

Qt5 C++ GUI Development

Trang 23

Qt5 C++ GUI Developmen

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/

Trang 24

.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

Trang 25

The header file h:

Trang 26

The cpp files:

Trang 27

The ui file: we design our GUI application in here

Trang 28

Run the project and this will be the result

Trang 29

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/

Trang 30

Signal And Slots

Creating New Project in Qt5 C++

Open your mainwindow.ui

Add a QProgressbar and a Horizontal Slider

Trang 31

Signal And Slots

For connecting the signal and slots you need to open your mainwindoconstructor add this line of code

https://codeloop.org/qt5-c-signal-and-slots-introduction/

connect(ui->horizontalSlider, SIGNAL(valueChanged(int)), ui->progres

Trang 32

Layout Management

All QWidget subclasses can use layouts to manage their children ThQWidget::setLayout() function applies a layout to a widget

When a layout is set on a widget in this way, it takes charge of the fo

Positioning of child widgets Sensible default sizes for windows Sensible minimum sizes for windows Resize handling

Automatic updates when contents change:

Trang 34

Qt5 Style Sheets

allows you to customize the appearance of widgets

subclas Qstyle

HTML Cascading Style Sheets (CSS)

QApplication::setStyleSheet() and QWidget::setStyleSheet()

Example

Trang 35

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

https://codeloop.org/qt5-style-sheets-introduction-and-example/

selector declaration

Trang 36

Qt5 Style Sheets

Example

Trang 37

Qt5 Style Sheets

Example

https://codeloop.org/qt5-style-sheets-introduction-and-example/

Trang 38

QPushButton

The most commonly used widget in any graphical user interface

A push button emits the signal clicked() when it is activated by the mSpacebar or by a keyboard shortcut

Push buttons also provide less commonly used signals, for example preleased()

Trang 39

QPushButton

Example

https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/

Trang 40

QPushButton

Example

Trang 42

QPushButton

Example

Trang 43

https://codeloop.org/how- -create-qcheckbox- -qt5-gui/ to in

Checkboxes Exclusive Checkboxes N

Trang 44

QCheckBox

Example

mainwindow.ui

Trang 46

QCheckBox

Example

mainwindow.cpp

Trang 49

QRadioButton

Example

https://codeloop.org/qt5-gui-how- -create-qradiobutton/ to

Trang 50

QRadioButton

Example

Trang 51

QRadioButton

Example

https://codeloop.org/qt5-gui-how- -create-qradiobutton/ to

Trang 53

QComboBox

Example: first way

https://codeloop.org/qt5-gui-development-how- -create-combobox/ to

Trang 54

QComboBox

Example: first way

Trang 55

QComboBox

Example: second way

https://codeloop.org/qt5-gui-development-how- -create-combobox/ to

Trang 56

QComboBox

Example: second way

Trang 57

QListWidget

QListWidget is a convenience class that provides a list view similar tsupplied by QListView, but with a classic item-based interface for adremoving items

Example:

https://codeloop.org/qt5-gui-development-how- -create-qlistwidget/ to

Trang 58

QListWidget

Example: first way

Trang 59

QListWidget

Example: second way

Trang 60

QListWidget

Example: Design UI

Trang 61

QListWidget

Example: Coding

Trang 62

QListWidget

Example:

Trang 63

QMessageBox

QMessageBox supports four predefined message severity levels, or mwhich really only differ in the predefined icon they each show

The following rules are guidelines:

https://codeloop.org/how- -create-qmessagebox- -qt5-gui/ to in

Trang 64

QMessageBox

Example

Trang 66

QMessageBox

Example

Trang 68

QMenu And QToolbar

What is a Menu?

Trang 69

QMenu And QToolbar

What is a QToolbar?

https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/

Trang 70

QMenu And QToolbar

Trang 72

QFileDialog

Example: right click on your Open menu item in Signals And Slot Edchoose Go To Slot and from the dialog choose triggered() like this

Trang 74

QFileDialog

Example:

mainwindow.cpp

Trang 76

QFileDialog

Example: Opening and saving files

Open Files

Trang 78

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

Trang 79

QFileDialog

Adding events for the buttons

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/

Trang 80

QFileDialog

Opening an image and displaying it on the QGraphicsView

Trang 81

QFileDialog

Saving the image

http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/

Trang 84

QProgressBar

Example:

Trang 86

QProgressBar

Example:

Trang 87

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- -draw-text-line- -qt5-with-qpainter/ to in

Trang 88

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 styles.

Trang 90

Example:

mainwindow.cpp

Trang 92

Draw Rectangle

Example

mainwindow.h

Trang 94

Draw Rectangle

Example

Trang 95

Draw Ellipse

Example

https://codeloop.org/qt5-gui-qpainter-how- -draw-ellipse/ to

Trang 96

Draw Ellipse

Example

Trang 97

Draw Ellipse

Example

https://codeloop.org/qt5-gui-qpainter-how- -draw-ellipse/ to

Tiêu đề	Graphical User Interface
Người hướng dẫn	TS. Nguyễn Thành Hùn
Trường học	Trường Đại Học Bách Khoa
Chuyên ngành	Cơ điện tử
Thể loại	thesis
Năm xuất bản	2018
Thành phố	Hà Nội

Định dạng
Số trang	97
Dung lượng	11,79 MB