Design and Develop GUI with Qt5

Qt allows you to develop a multi-platform application, that you can develop a GUI application on one platform and deploy to many others (if you avoid system-specific extra modules). Qt contains modules for creating widgets from elementary ones to OpenGL 3D, which I will discuss later. In addition it contains module with other functionalities an application may need such as SQL, XML, web channels, web views and web sockets.

Qt can be downloaded from https://www.qt.io/ or installed using the UNIX/Linux package installers.

In addition to the QT libraries and header files, there are 3 useful resources:

  • Qt Designer – A GUI tool for the generation of Python and C++ headers from a form graphically designed.
  • Qt Assistant – A reference to the Qt classes, Example, the QMake tutorial, etc.
  • qmake – an easy-to-use utility that creates the Makefile.

In the following sections, I will show how to create a project using the three tools:

Creating the Main Window

Qt Designer is an editor with which GUI designers and developers can communicate. With the designer you can create, save and edit Designer UI Files (*.ui) and create class files from them for Python and C++ programs. The QMake program discussed later can use the “.ui” file to generate a header file from it. The file can be edited by creating top level windows such as widows and dialog, and dragging and dropping widgets into them. You can also access and modify their properties; if you are a developer and have a Desiger UI file, you can find names of object in your program.

Starting:

As you start the QT Designer, the following dialog pops up:

If you don’t see the dialog, choose File->New from the editor’s menu bar, to make the dialog pop up.

Choose your top-level widget from the “templates/forms” menu, and click Create; a window will be created:

Now, from the right-hand Property Editor, you can change some properties, for example: let us change the window title:

Adding widgets and promoting them

Now, you can choose widgets from the left-hand side of the editors and drag-and-drop them into the window:

For example, let us add a push button, and change its QAbstractButton property “text” to “Push me!”.

One of the other properties we can change is the QObject property “objectName”, which will be the name of the appropriate field of class QPushButton in the created class.

By right-clicking inside the widget and choosing “Promote to..” from the context-menu, you can choose to use a class that inherits from the gadget’s class. Don’t forget to define the new class and its constructor and methods.

Previewing

You can view your design by clicking Form->Preview from the editor’s menu bar.

Saving the created class

If you don’t want the Make program to generate a header file, you can save it from the Qt Designer tool.

  1. Choose Form->View C++ Vode/View Python Code from the editor’s menu bar.
    a dialog will open.
  2. Click the “save” icon to save the created header file.

Adding Functionality

This section will describe a little Hello World program – in C++ – that uses a header file created wit QtDesigner. The purpose of the program is to print “Hello, world” to the standard output, when the “Push Me” button is clicked. To add the mouse event handling the class QPushButton has been promoted to Extended Button. This section will describe the program, and will help you train yourself using Qt Assistant.

The main function

To learn what a the main function of a Qt Application with widgets should look like:

  1. Start the Qt Assistant if not started yet.
  2. Click the Contents tab
  3. Click Qt Widgets (highlighted in the following image:

You” see a heading reading “Getting Started Programming with Qt Widgets”. Scroll down and see the contents of a main source line.

In the Hello World program the code is as follows:

 #include "ui_example.h"
 #include <iostream>

 using namespace std;

 ExtendedButton::ExtendedButton(QWidget *parent):QPushButton(parent) {
 }
 void ExtendedButton::mouseReleaseEvent(QMouseEvent *event){
     cout<<"Hello, world!"<<endl;
 }
 int main(int argc, char **argv){
     QApplication a(argc,argv);
     Ui_MainWindow mainObject;
     QMainWindow mainWindow;
     mainObject.setupUi(&mainWindow);
     mainWindow.show();
     return a.exec();
 }

The main file includes the constructor of the class ExtendedButton. Its role is to call the parent’s constructor. Another function implemented is mouseReleaseEvent, which is an event handler. You can learn from Qt Assistant, that the method mouseReleaseEvent is an event handler by clicking Qt Widget->QWidget in the right-hand Contents tab, and then click the link reading “events” under detailed description in the pages contents.

The class ExtendedButton is defined in “extendedbutton.h”. Following is the definition:

#include <QtWidgets/QPushButton>

 class ExtendedButton:public QPushButton {
     public:
         ExtendedButton(QWidget *parent=nullptr);
         void mouseReleaseEvent(QMouseEvent *event);
 };

The main object of the application is defined in “ui_example.h”, the file generated by “Qt Designer”, you better avoid changing it manually if you want to modify the “.ui” file from which it was generated. You’ll see a warning at the beginning. The role of the Class Ui_MainWindow is to contain main window (or central widget) and its underlying widgets as public members. The method setupUi binds them.

Creating the qmake file

“qmake” is an easy-to-use utility that generates a Makefile to be used by the make command to generate binaries, objects, libraries. etc. Qt Assistant includes a Qt Manual. Following is the content of the example’s qmake file named ‘qmake.pro’:

TARGET=executable
SOURCES+=main.cpp
HEADERS+=extendedbutton.h
FORMS+=example.ui
DESTDIR=bin
QT = core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

If you want the Make program to create the main header file, you can include the “.ui” file generated by Qt Designer in a variable named “FORMS”. The “make” program in turn will generate a header file from it with the prefix “ui_” added to the “.ui” file name. For example, from a file named “example.ui” the “make” program will generate a header file named “ui_example.h”. In this case, don’t add “ui_example.h” to the variable “HEADERS”.

If you want to know what to add to QT, go to the <Class Category>->C++ Classes and click the Detailed Description link.If you want to run qmake without command line arguments, call the qmake file ‘qmake.pro’.

Widgets and Tables in Matplotlib

Matplotlib is a great python library for plotting and graphics. Graphics include formatted text, text paths and tabular data. Mathematical expressions are a good reason to use Matplotlib for rendering text. Matplotlib also supports some widgets one can use for input. If you use Matplotlib widgets, you vetter know how to size and position them unless – for example – you write a program for yourself.

Following is an example of bad code:

from matplotlib import pyplot as plt
from matplotlib.widgets import TextBox
from matplotlib.widgets import Button

fig,ax=plt.subplots()

teextbox=TextBox(ax,"Label:")
button=Button(ax,'Submit')

plt.show()

The code above create to widgets that fill up the same plotting area inside defined Axes object. In the following image, you can see that both the text entered by the user and the button text overlap. In addition. the text entered by the user exceeds the limit of the plotting area.

Get More Control over Your Widgets

For better results, there are 3 things to do:

  • Use separate plotting area for your widgets.
  • Set the plotting areas’ positions and sizes.
  • Using Event Handlers to control the input length in a TextBox and perform operations.

Separate Plotting Areas

The command plt.subplots() creates a figure, and a single plotting area, a uni-dimensional array of plotting areas or a bi-dimensional array of plotting areas. According to the number of rows and columns. The default is one row and one column. For example:

fig,ax=plt.subplots(nrows=2)

Returns a column of two plotting areas, To set the number of columns use the keyword argument ncols.

Let us see what happens if we set the number of colums (not adding widgets. yrt) by the following code:

from matplotlib import pyplot as plt
from matplotlib.widgets import TextBox
from matplotlib.widgets import Button

fig,ax=plt.subplots(nrows=2)

plt.show()

The code generates two Axes rectangles as follows:

Resizing and Positioning a Plotting Area

The Axes rectangle can be resized and positioned using the function matplotlib.axes.Axes.set_position. One of its arguments can be an array whose members are left,bottom,width and height. The position and size is relative to the figure. :

  • left=0 means that the Axes begin at the left side of the figure
  • left=1 means that the Axes begin at the right side of the figure (which makes them invisible).
  • bottom=0 means that the Axes begin at the bottom of the figure
  • bottom=1 means that the Axes begin at the top of the figure

The following code resizes the Axes rectangles, and adds the widgets:

from matplotlib import pyplot as plt
from matplotlib.widgets import TextBox
from matplotlib.widgets import Button

fig,ax=plt.subplots(nrows=2)

ax[0].set_position([0.2,0.85,0.7,0.08])
ax[1].set_position([0.495,0.6,0.1,0.1])
teextbox=TextBox(ax[0],"Label:",label_pad=0.01,color='cyan',hovercolor='red')
button=Button(ax[1],'Submit')
plt.show()

ax[0] is the rectangle containing the TextBox

ax[1] is the rectangle containing the box. It’s width is 0.1(10% of that of the figure), and its left edge is position at 0.495, which is 0.5+0.1/2. This makes its horizontal alignment centered.

In the following image you’ll see that the background color of the text box is ‘cyan’, and hovercolor defines the background color when the mouse pointer is over the text box.

Setting the Input Text’s Maximal Length and Event Handling

Event handling functions can be attached to widgets. Event handling functions can react to button clicks, text changes, submitions by pressing the Enter key, etc.

If you want to restrict the length of the input text in a TextBox, attach an event handling function as follows:

tb.on_text_change(func)

Where func is a function that gets one argument, the text. In this function, you can restrict the number of character. You better set the cursor position as well, because it increases whenever the user types a character, even if the text is changed by the event handler. Following is an example of how to check that the input matches a pattern all the way:

def tc_func(self,inp):
    if (len(inp)>self.maxlen):
        self.tb.cursor_index=self.curpos
        self.tb.set_val(self.val)
        return
    if (self.decpoint and inp.find('.')<0 and len(inp)>self.maxlen-1):
        self.tb.cursor_index=self.curpos
        self.tb.set_val(self.val)
        return
    if (not self.pattern.match(inp)):
        self.tb.cursor_index=self.curpos
        self.tb.set_val(self.val)
        return
    self.val=inp
    self.curpos=self.tb.cursor_index

From the argument self you can learn that the above function is a member of a class. Wrapping widgets in objects is recommended.

The member ‘cursor_index‘ is the position of the cursor after the event handler finishes its work. set_val sets a new value (or resets it).

The full source from which the code above is taken from my Square Root Calculator found at https://github.com/amity1/SquareRootCalculator

To handle button click events , use the function on_clicked, as follows:

button.on_clicked(click_handler)

The argument passed to the click_handler is an object of type matplotlib.backend_bases.MouseEvent. You can see in the following code how you can learn it:

from matplotlib import pyplot as plt
from matplotlib.widgets import TextBox
from matplotlib.widgets import Button

def click_handler(evt):
    print(type(evt))
    print("Button clicked with:"+ str(evt.button))

fig,ax=plt.subplots(nrows=2)

ax[0].set_position([0.2,0.85,0.7,0.08])
ax[1].set_position([0.495,0.6,0.1,0.1])
teextbox=TextBox(ax[0],"Label:",label_pad=0.01,color='cyan',hovercolor='red')
button=Button(ax[1],'Submit')
button.on_clicked(click_handler)
plt.show()

The event handler above prints the type of mits argument and the mouse button with which the button widget was clicked. Following is the output:

Button clicked with:MouseButton.LEFT

Button clicked with:MouseButton.MIDDLE

Button clicked with:MouseButton.RIGHT
<class 'matplotlib.backend_bases.MouseEvent'>
Button clicked with:MouseButton.LEFT
<class 'matplotlib.backend_bases.MouseEvent'>
Button clicked with:MouseButton.MIDDLE
<class 'matplotlib.backend_bases.MouseEvent'>
Button clicked with:MouseButton.RIGHT

Tables

A table is a widget that can be added to an Axes object in addition to other Artists.

There are two ways to create a table:

If you just choose to create a table without specifying loc, the table location in respect to the Axes, chances are you will not be satisfied.

The following code creates such a default table using the factory:

import matplotlib as mpl
from matplotlib import pyplot as plt
from matplotlib.widgets import TextBox
from matplotlib.widgets import Button

fig,ax=plt.subplots()
tab=mpl.table.table(ax,cellColours=[['red','green'],['yellow','blue']])

plt.show()

In the following image generated by the code, you will see that the table is created just under the Axes, and it overlaps the frame x-ticks.

You can create the table somewhere else by setting the loc parameter, you can set a cell’s width and height, set a column width automatically, and align text.

Setting The Table’s Location and Modify Cells

To set a table location in respect to the Axes, pass the parameter loc with one of the valid codes, for example:

tab=mpl.table.table(ax,cellText=[['Red','Green'],['Yellow','Blue']],loc='upper left'

A default text alignment in a table cell can be defined by passing the parameter cellLoc when creating a new table. When adding a cell, the argument name is loc. The valid values for loc are: ‘left’, ‘center’ and ‘right’

Accessing a table cell is easy as ABC: access the cells as if the table were a bi-dimensional array whose elements are objects of type matplotlib.table.Cell. For example:

tab[row,col]

You can modify text properties using the function set_text_props of the cell object. And you can change its position and size by modifying properties inherited from class matplotlib.patches.Rectangle.

The following code creates a table near the upper left corner of the Axes, sets the column widths to be automatic, changes the color of text cells, and enlarges one of the cells.

import matplotlib as mpl
from matplotlib import pyplot as plt

fig,ax=plt.subplots()
tab=mpl.table.table(ax,cellText=[['Red','Green'],['Yellow','Blue']],
                    cellColours=[['red','green'],['yellow','blue']],
                    loc='upper left',cellLoc='left' )
tab.auto_set_column_width(0)
tab.auto_set_column_width(1)
tab[1,1].set_height(0.5)
for i,j in ((0,0),(0,1),(1,1)):
    tab[i,j].set_text_props(color='white')

plt.show()

The code above produces the following image:

Adding a Cell

You can add single cells to a table using the function add_cell of the table.

the function should be called with the row number and column number. The caller has to specify the keyword arguments ‘width’ and ‘height’.

The new cell should be connected to the table, and may influence the heights and widths of celles in the same row or column.

The following code adds a cell in a new column and row:

import matplotlib as mpl
from matplotlib import pyplot as plt

fig,ax=plt.subplots()
tab=mpl.table.table(ax,cellText=[['Red','Green'],['Yellow','Blue']],
                    cellColours=[['red','green'],['yellow','blue']],
                    loc='upper left',cellLoc='left')
print ("Table Created")
tab.auto_set_column_width(0)
tab.auto_set_column_width(1)
tab[1,1].set_height(0.5)
for i,j in ((0,0),(0,1),(1,1)):
    tab[i,j].set_text_props(color='white')
tab[1,0].set_xy((0,0.8))
tab.AXESPAD=0
cell=tab.add_cell(2,2,height=0.1,width=0.3,text='New Cell',loc='center',facecolor='orange')
plt.show()

In the following image, you can see a new orange cell that has been added to an existing table:

Main Window Operation In Matplotlib

Matplotlib is a MATLAB-like library that allows Python programmers to create images and animations. For example, you can easily draw a graphic representation of functions with Y (and maybe Z) values generated by numpy and scipy functions.
Matplotlib can also be interactive and handle events. The command mpl_connect is used for connecting an event with a callback function.

The Backend Layer

Someone on the IRC has challenged me with questions on how to perform some operations when the window is closed. In addition, I want the window title to be other than the default, “Figure 1”.
enter image description here

Well, the layer that handles the main window is the backend layer,
To find what backend Matplotlib uses, you can add the line
print type(fig.canvas)
The result may be something like:
<class 'matplotlib.backends.backend_gtkagg.FigureCanvasGTKAgg'>
This means that the backend used is ‘GtkAgg’.
With the function ‘dir’, I’ve found that the canvass has a function named get_toplevel, and the returned value of fig.canvass.get_toplevel() is an object of type gtk.Window.
This object has the methods of a GTK window. So you can change its title with the ‘set_titlemethod. For example:
fig.canvas.get_toplevel().set_title(‘Rubic Cube’)
You can tell your application what to do when the user closes the window, by calling its 'connect' method, with 'destroy' for first arguments.
For example:
fig.canvas.get_toplevel().connect(‘destroy’, destroyFunc, ‘Goodbye, cruel world!’)
destroyFunc` is a function that accept 2 arguments (3 if a class member): the widget where the event has occurred and additional user defined data.
More about Python FTK can be found at http://www.pygtk.org/pygtk2tutorial/index.html

Last but not least, you can specify the backend Matplotlib will use, by calling the ‘use’ method of matplotlib.
For example:
matplotlib.use('GTKAgg')

Note: This method should be called before importing ‘pyplot’.

Written with StackEdit.

Cubic Equations And The Complex Field

One thing I wish to see in languages such as PHP is to find them supporting the complex type. Complex numbers are more than vectors in 2D, and I wish to see expression containing them parsed just like the ones with real numbers. Python supports them, and you have to import ‘cmath’ to use functions of a complex variable. To import cmath type

import cmath

For example, complex numbers are useful in solving cubic equations even if all its roots are real. And cubic equations can be used for Bézier curve manipulations.

Following is the Cardan formula for solving a cubic equation

Be x^3 + ax^2 + bx + c=0 a cubic equation.

Step 1

Convert the equation to the form latex y^3 + py + q = 0
Use the Taylor series formula, to find a k, such that y=x-k:
Be P(x) = x^3 + ax^2 + bx + c
Then, P(x) = P(k) + P'(k)x + {P''(k)x^2 \over 2} + {P'''(k)x^3 \over 6}
P(k) = k^3 + ak^2 + bk + c
P'(k) = 3k^2 + 2ak + b
P''(k) = 6k + 2a
P'''(k) = 6

Because P”(k)=0, 6k + 2a=0, thus:
k= - {a \over 3} .
p=P'(k) = b - {a^2 \over 3}
q=P(k) = {2a^3 \over 27} - {ba \over 3} + c

For example,
x^3 - 7x^2 +14x - 8 = 0
will become
y^3 -2{1 \over 3}y - {20 \over 27} = 0
In Python:

a = -7
b = 14
c = -8
p = b - a**2 / 3.
q = 2*a**3 / 27. - b*a/3. - 8

Step 2

Find 2 numbers u and v that will help us solve the equation. If y=u+v , then the new equation will be:
u^3 + v^3 + (p + 3uv)(u + v) + q = 0
We can find u,v such that (p + 3uv) = 0,
Thus,

and latex u^3 + v^3 = -q
Since p+3uv=0, u^3{v^3} = {-p^3 \over 27}
From both equations, we get that latex u^3 and latex v^3 are the roots of the quadratic equations
t^2 +qt - {q^3 \over 27} = 0
The roots of the quadratic equations are:
(1) u^3 = - {q \over 2} + \sqrt{{q^2 \over 4} + {p^3 \over 27}}
(2) v^3 = - {q \over 2} - \sqrt{{q^2 \over 4} + {p^3 \over 27}}
In Python, the inner root can be computed using:

innerRoot = cmath.sqrt(q**2 / 4. + p**3/27.)

Now, u and v are cubic roots of (1) and (2) respectively. They must satisfy 3uv=-p.
In Python, you get your initial u using:

u=(-q / 2. + innerRoot) ** (1/3.)

If the pair u,v does not satisfy 3uv = -p, you can multiply your v by
$latex-1 + i \sqrt 3 \over 2 $
until the pair satisfies the condition.
Now, having a solution, get the next by multiplying u by $latex-1 + i \sqrt 3 \over 2 and v by latex-1 – i \sqrt 3 \over 2

In our example:
u^3 = {20 \over 54} + \sqrt{{-263 \over 729}}
v^3 = {20 \over 54} - \sqrt{{-263 \over 729}}

Let’s find our three solutions:
u_1= (0.8333333333333335+0.28867513459481187j), v_1=(0.8333333333333335-0.28867513459481187j)
Thus, latex $y_1 = (1.666666666666667+0j)$
u_2 = (-0.6666666666666659+0.5773502691896264j), v_2=(-0.6666666666666657-0.5773502691896264j)
Thus, y_2 = (-1.3333333333333317+0j)
u_3 = (-0.1666666666666676-0.8660254037844383j), v_3=(-0.1666666666666677+0.866025403784438j)
Thus, y_3 = (-0.3333333333333353-2.220446049250313e-16j)

(The above values are output from Python script. The real results look much better.)
Now, to get the roots of the original equation, add k={-a \over 3} to each y.
In our example,
k = 2{1 \over 3}
Thus,
x_1 = 4, x_2=1, x_3=2

Writing expressions is much easier and more readable when the language supports the complex type.

The Python Language And Proper Indentation

Hello, and welcome back. I’m new to Python, so this post is not a tutorial; you can find a tutorial here. I need this language in its modules for a course I’m taking on “coursera.org“.

If you are a Linux user, you have probably heard about that language. So, what’s special about Python? One of its feature is that it forces you to use proper indentation. This is good because proper indentation makes your code more readable. In Python you don’t need symbols (usually curly braces)for the beginning and end of a command block.

Let’s look at some examples.

From your command line type ‘python’ and ….

1. Start a statement with an unnecessary space

>>>  print "Beginning with a space"
    print "Beginning with a space"
    ^
IndentationError: unexpected indent
>>>

2. Don’t indent a sub-block

>>> i=7
>>> if i<8:
... print "i<8"
File "<stdin>", line 2
print "i<8"
^
IndentationError: expected an indented block
>>>

3. An ‘if’ block with more than one statement

>>> if i<8:
...   print 'a'
...   print 'b'
...   print 'c'
... 
a
b
c
>>>

4. Nested loops

>>> for i in range(4):
...   for j in range(3):
...     print 'inner loop i=' + str(i)
...     print 'j=' + str(j)
...   print 'outer loop i=' + str(i)
... 
inner loop i=0
j=0
inner loop i=0
j=1
inner loop i=0
j=2
outer loop i=0
inner loop i=1
j=0
inner loop i=1
j=1
inner loop i=1
j=2
outer loop i=1
inner loop i=2
j=0
inner loop i=2
j=1
inner loop i=2
j=2
outer loop i=2
inner loop i=3
j=0
inner loop i=3
j=1
inner loop i=3
j=2
outer loop i=3
>>>

Summary

Proper indentation makes your code more readable. In other languages, such as C, PHP and Perl, readability won’t guarantee correctness, but in Python you are less likely to have bug if you follow rules of readability.