Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
9. GUI
Jan Dugacek
November 22, 2017
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
o
3
Motivation
Event-driven programming
Qt for GUI
• Introduction
9 Creating a GUI program
• Editing the GUI 9 Adding callbacks
• Manipulating contents
• Exercises Accessing files
• Reading files
• Saving files
• Exercises QCustomPlot
• Introduction
• Adding to window
• Plotting
• Exercises
A few suggestions
Homework
Jan Dugacek        9. GUI
Motivation	
Event-driven programming	
Qt for GUI	
Accessing files	
QCustomPlot	
A few suggestions	
Homework	
Motivation	
• For most users, command line programs are counter-intuitive and annoying to use
• It's practical to have a window-based application
9 Many libraries exist to deal with this issue, we'll use Qt, because it allows the same code to be compiled on most platforms
Jan Dugacek        9. GUI
Motivation	
Event-driven programming	
Qt for GUI	
Accessing files	
QCustomPlot	
A few suggestions	
Homework	
Event-driven programming	
o Usually, a program with a Graphical User Interface (GUI) waits until the user interacts with it
• Interaction with the window triggers callback functions if they are set up; usually most of the program is executed when these functions are called
• This is different from terminal programs that are usually supposed to do their job and exit
• GUI programs require support from other programs to be drawn on screen, so it cannot be done without using libraries
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
o Qt is a set of libraries that gives access to operating system specific functionality through a unified interface
• Its interface tends to be much more practical than the operating systems' interface
9 It's easy to install (as long as you use QtCreator)
• Some of its features are quite weird (like: using its own string class that isn't very compatible with std: : string), and it introduces elements alien to C++ (it converts these to C++ before compilation)
1= <\(y
Jan Dugacek
9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
• While normal projects can be converted to GUI programs in QtCreator, here's a way to create such a program at the beginning
• Go into the New Project window, select Application and Qt Widgets Application
New Project
Choose a template:
Projects
Appiication
Library Other Project Non-Qt Project Import Project
Files and Classes
Qt Widgets Application
| Qt Console Application Qt Quick Application 4\ Qt Quick Controls 2 Application V Qt Canvas 3D Application
All Templates
Creates a Qt application For the desktop. Includes a Qt Designer-based main window.
Preselects a desktop Qt For building the application if available.
Supported Platforms: Desktop
Cancel
Choose.
< □ ►
1= <\(y
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Ex6rciS6S
Between the files created, double click the on ending with .ui
jle  Edit  Build   Debug   Analyze  Tools Wind		
	Projects t	T- C-9 B+ E
7 up?' example
Edit
Lri example.pro uhj Headers
[ti] mainwindow.h
Sources
^3 main.cpp
1^1 mainwindow.cpp QeI Forms
mainwindow.ui
1
2
3
4
5
6 "
7 B
lfl
11 -
12
13
14
15
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
• The buttons, text fields and other things you put in the window are called widgets
• Add widgets to the window by dragging them on their place
mainwindow.ui* ; x Po % i% H [II s f!
" Layouts	
j= Vertical Layout	
JJJ Horizontal Layout	
ggj Grid Layout	
Form Layout	
» Spacers	
isa Horizontal Spacer	
^ Vertical Spacer	
T Buttons	
0 Push Button	
GS Tool Button	
® Radio Button	
& Check Box	
Q Command Link Button	
_aJ Dialog Button Box	
T    1 tern Views (Mod e l-B ased}	
1 List View	
*l8 Tree View	
Jan Dugäcek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
• You may change the properties of widgets on the bottom left side when the widget is selected
• You should give an appropriate name to each widget
• The text on widgets can be changed by double clicking them
PushButtcn
Fitter_
pushButton : QPushButton
Property
QObject
Value
object Name	exitButton J*
QWTdget	
enabled	m
▼ geometry	[(430, 310}r 89x25]
X	430
Y	310
Width	89
Height	25
▼ sizePolicy	[Minimum, Fixed, 0, 0]
Horizontal P... Minimum	
VorHrjl Orilirti Fivorl	
1= <\(y
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
To add a callback, right click on the widget and select Go to slot Usually, you want callbacks to buttons being pressed, so select clicked()
Select signal
Exit
Co to slot
Cancel
dickedO	QAbstractButton	
clicked(booL)	QAbstractButton	
pressed ()	QAbstractButton	
released()	QAbstractButton	
toggled (boo I)	QAbstractButton	
OK
T sizeF
H
H
H
v.
minii
► maxi
► sizel
r^i ►  <     ►  < ►
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
The previous will create a callback function and get it working It is like a regular member function
void Ha inHindm:: on_extt Bu t ton_c U c ke d {) ^Application: :quit():|
}
Jan Dugacek
9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
• It generates a member variable ui that contains all widgets, use their methods to change contents or learn of their contents
void   MainWindow : : on_exitButton_clicked ()
{
ui->exitButton->setText ("No,   I won't!");
}
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction
Creating a GUI program Editing the GUI Adding callbacks Manipulating contents Exercises
O Create a window with a button that changes its text on first click, then exits
© Create a window that contains a few check boxes and text fields and a button that becomes an exit button if they
are set properly
Advanced: O Create a simple calculator window
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Reading files Saving files Exercises
9 We should already be able to create a field where the user can write the name of a file, but that's not exactly a comfortable way of choosing files
• QFileDialog::getOpenFileName opens a open file window where you can select the file
• The second argument is the name of the window, the third argument is the folder it opens (empty means same folder as program) and the third argument is the file type it expects
O It returns QString that is quite annoying to convert to std: : string
void   MainWindow : : on_openFile_clicked ()
{
std::string  fileName = Q F i I e D i a I og : : getOpen Fi leNa me (
this ,   tr ("Open  Data") ,   " " ,
tr ("data   (*. csv )")). to Utf8 (). const Data (); std : : ifst rea m   f i I e ( f i I e N a m e ) ; std :: string line; while  (file »  line) {
data_ . push_back(std : : stof( line ));
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Reading files Saving files Exercises
Files are saved almost identically to the way they are loaded
vo i d
{
MainWindow : : on_saveFile_clicked ()
}
std
std f o r
}
:string  fileName = QFi leDia log : : getSaveFi leNa me (
this ,   tr ("Open  Data") ,   " " ,
tr ("data   (*. csv )")). to Utf8 (). const Data (); :ofstream   f i I e ( f i I e N a m e );
(unsigned   int   i = 0;   i < data_ . s i z e () ;   i++) { file « data_[i] « std::endl;
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
O Create a window with a button that loads a file (with one column of numbers), multiplies all numbers in it by a user-set constant and saves it as the user demands
Advanced:
O Create a calculator that perform operations on all numbers in the file, then saves it
Reading files Saving files Exercises
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction Adding to window Plotting Exercises
• Qt has tools for vector graphics, but no chart widget and that sucks
o QCustomPlot is a small library that fixes the problem, adding a widget that does all kinds of graphs (including 3D graphs, heatmaps and other exotic plots)
o It consists of just two files, but they are huge (the source file is over 30000 lines long)
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction Adding to window Plotting Exercises
• QCustomPlot is expected to be used as a part of your program, not as an external library, it's made of one source file and one header file
• To use it, google it, download it, unpack it into the folder where your files are, then right click on your project in QtCreator, hit Add Existing files... and select these two files
• You also need to add printsupport to your .pro file, to a line containing QT +=
• Add the graph widget into your window by first adding a Widget (group Containers), then right clicking on it, selecting Promote to... adding QCustomPlot to promotions, selecting it and promoting the widget
New Promoted Class
QWidget
Base class name:
Promoted class name: QCustomPlot
Header file: Global include
qcustomplot.h
Add
Reset
1= <\(y
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction Adding to window Plotting Exercises
• The following code will clear old plots, name the axes, set ranges and add a graph line
void   MainWindow : : on_plotButton_clicked ()
{
u i	->p	ot	—> clearGraphs();	
u i	->p	ot	—>add Graph () ;	
u i	->p	ot	—>xAxis—>setRa nge (0	, 6);
u i	->p	ot	—>yAxis—>setRa nge (0	, 70);
u i	->p	ot	->xAxis->set Label ("	line");
u i	->p	ot	->yAxis->setLabel ("	value" )
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
Introduction Adding to window Plotting Exercises
The following code will add some data to the plot and make the changes visible
for   (unsigned   int   i = 0;   i < data_ . s i z e () ;   i++) { ui —>plot —>graph (0) — >add Data (i ,  data_ [ i ]) ;
}
u i —> plot —> r e p I o t () ;
QCustomPlot's website contains a lot of information about other tricks that can be done with QCustomPlot
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework	Introduction Adding to window Plotting Exercises
Exercises	
O Create a program that is opened from the command line, reads the name of a file (as first argument) and plots it in a window (expected form are two columns, x and f(x))
© Set minimum and maximum of axes accordingly to the data
O Change the previous program to open and plot files with any number of columns (and thus plots)
Advanced:
O Create a program that plots a user-defined function (supporting only a few operations)
Jan Dugacek        9. GUI
Motivation Event-driven programming Qt for GUI Accessing files QCustomPlot A few suggestions Homework
• Use layouts to position your widgets, it's more annoying, but makes them resize properly when the window is resized
• Don't neglect the command line, it allows the program to be controlled by different programs, which opens door to new applications of your program
• If the GUI program is not simple, give it a core that can be used both from the window and from the command line
Jan Dugacek        9. GUI
Motivation	
Event-driven programming	
Qt for GUI	
Accessing files	
QCustomPlot	
A few suggestions	
Homework	
Homework	
• Create a program that is opened from the command line, reads the name of a file (as first argument) and plots it in a window (expected form are several columns, x and fi(x), f2(x), ...)
• Axes should rescale accordingly to the minima and maxima of values
Advanced homework:
• The same, but check out QCustomPlot's website to colour the lines differently and allow user interaction
Jan Dugacek        9. GUI