Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
17. GUI
Ján Dugáček
April 9, 2019
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Table of Contents
1 Motivation
2 Event-driven programming
3 Qt for GUI
Introduction
Creating a GUI program
Editing the GUI
Adding callbacks
Manipulating contents
Exercises
4 Accessing files
Reading files
Saving files
Exercises
5 QCustomPlot
Introduction
Adding to window
Plotting
Exercises
6 A few suggestions
7 Homework
Ján Dugáček 17. 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
Many libraries exist to deal with this issue, we’ll use Qt,
because it allows the same code to be compiled on most
platforms
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Event-driven programming
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
Ján Dugáček 17. 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
Introduction
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
It’s easy to install (not only with 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)
Ján Dugáček 17. 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
Creating a GUI program
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
Ján Dugáček 17. 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
Editing the GUI
Between the files created, double click on the file ending with .ui
Ján Dugáček 17. 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
Editing the GUI #2
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
Ján Dugáček 17. 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
Editing the GUI #3
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
Ján Dugáček 17. 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
Adding callbacks
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()
Ján Dugáček 17. 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
Adding callbacks #2
The previous will create a callback function and get it working
It is like a regular member function
Ján Dugáček 17. 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
Manipulating contents
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 ! " ) ;
}
Ján Dugáček 17. 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
Exercises
1 Create a window with a button that changes its text on
first click, then exits
2 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:
1 Create a simple calculator window
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Reading files
Saving files
Exercises
Reading files
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
It returns QString that is quite annoying to convert to std::string
void MainWindow : : on_openFile_clicked ()
{
std : : s t r i n g fileName = QFileDialog : : getOpenFileName (
t h i s , t r ( "Open Data" ) , "" ,
t r ( " data ( ∗ . csv ) " ) ) . toUtf8 ( ) . constData ( ) ;
std : : i f s t r e a m f i l e ( fileName ) ;
std : : s t r i n g l i n e ;
wh il e ( f i l e >> l i n e ) {
data_ . push_back ( std : : s t o f ( l i n e ) ) ;
}
} Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Reading files
Saving files
Exercises
Saving files
Files are saved almost identically to the way they are loaded
void MainWindow : : on_saveFile_clicked ()
{
std : : s t r i n g fileName = QFileDialog : : getSaveFileName (
t h i s , t r ( "Open Data" ) , "" ,
t r ( " data ( ∗ . csv ) " ) ) . toUtf8 ( ) . constData ( ) ;
std : : ofstream f i l e ( fileName ) ;
f o r ( unsigned i n t i = 0; i < data_ . s i z e ( ) ; i++) {
f i l e << data_ [ i ] << std : : endl ;
}
}
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Reading files
Saving files
Exercises
Exercises
1 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:
1 Create a calculator that perform operations on all
numbers in the file, then saves it
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Introduction
Adding to window
Plotting
Exercises
QCustomPlot
Qt has tools for vector graphics, but no chart widget and that
sucks
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)
It consists of just two files, but they are huge (the source file is
over 30000 lines long)
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Introduction
Adding to window
Plotting
Exercises
Adding to window
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
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Introduction
Adding to window
Plotting
Exercises
Plotting
The following code will clear old plots, name the axes, set
ranges and add a graph line
void MainWindow : : on_plotButton_clicked ()
{
ui−>plot −>clearGraphs ( ) ;
ui−>plot −>addGraph ( ) ;
ui−>plot −>xAxis−>setRange (0 , 6 ) ;
ui−>plot −>yAxis−>setRange (0 , 7 0 );
ui−>plot −>xAxis−>s e t L a b e l ( " l i n e " ) ;
ui−>plot −>yAxis−>s e t L a b e l ( " value " ) ;
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Introduction
Adding to window
Plotting
Exercises
Plotting #2
The following code will add some data to the plot and make
the changes visible
f o r ( unsigned i n t i = 0; i < data_ . s i z e ( ) ; i++) {
ui−>plot −>graph(0)−>addData ( i , data_ [ i ] ) ;
}
ui−>plot −>r e p l o t ( ) ;
}
QCustomPlot’s website contains a lot of information about
other tricks that can be done with QCustomPlot
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
Introduction
Adding to window
Plotting
Exercises
Exercises
1 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))
2 Set minimum and maximum of axes accordingly to the
data
3 Change the previous program to open and plot files with
any number of columns (and thus plots)
Advanced:
1 Create a program that plots a user-defined function
(supporting only a few operations)
Ján Dugáček 17. GUI
Motivation
Event-driven programming
Qt for GUI
Accessing files
QCustomPlot
A few suggestions
Homework
A few suggestions
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
Ján Dugáček 17. 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 f1(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
Ján Dugáček 17. GUI