GUI | Python

January 27, 2015 admin 1

QML and PyQT: Creating a GUI (tutorial)

Standard

If you have not done our first PyQT tutorial yet, you should do it, it’s fun! In this tutorial we will use an user interface markup language, a language that describes the graphical user interfaces and controls . An excerpt of user interface markup language code could look like:

Rectangle {
     id: simplebutton
     color: "grey"
     width: 150; height: 75

Rectangle {

id: simplebutton

color: "grey"

width: 150; height: 75

Essentially the language tells what the interface should look like. The language we will be using is called QML. Do not worry about it for now.

Start a programmed called QTCreator. The tutorial will be quite graphical to help you through the whole process. Simply type qtcreator in the terminal or start it from the menu list. This screen should pop up:

Press the big New Project button. Select QT Quick Application from the menu below. Finally press Choose on the bottom right.

A new popup will appear:

Type a name and a valid path to save your project. Then press Next. Select QT Quick 2.0 from the menu list. Press Next. Press Finish. Immediately a user interface defined in the QML language will appear.

Like all great programmers we are going to solve things the most lazy way possible. Instead of typing all the QML code by hand we are going to press the Design button that is on the left of the screen. A drag and drop screen should appear now.

We drag an image onto the area and select the source on the right. Save the project. Open a terminal and locate the qml file you just created. Alternatively you could simply copy the code in the edit box and save it to a .qml file. Enter the command:

qmlviewer main.qml

1	qmlviewer main.qml

This will display the windows as defined in the qml file without any functionality. It is simply a viewer for the interface. We then create some code to load this QML definition:

import sys

from PyQt4.QtCore import QDateTime, QObject, QUrl, pyqtSignal
from PyQt4.QtGui import QApplication
from PyQt4.QtDeclarative import QDeclarativeView

app = QApplication(sys.argv)

# Create the QML user interface.
view = QDeclarativeView()
view.setSource(QUrl('main.qml'))
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
view.setGeometry(100, 100, 400, 240)
view.show()

app.exec_()

import sys

from PyQt4.QtCore import QDateTime, QObject, QUrl, pyqtSignal

from PyQt4.QtGui import QApplication

from PyQt4.QtDeclarative import QDeclarativeView

app = QApplication(sys.argv)

# Create the QML user interface.

view = QDeclarativeView()

view.setSource(QUrl('main.qml'))

view.setResizeMode(QDeclarativeView.SizeRootObjectToView)

view.setGeometry(100, 100, 400, 240)

view.show()

app.exec_()

Finally we modify the first line main.qml to:

import Qt 4.7

1	import Qt 4.7

Simply because our QtQuick was missing. Running

python run.py

1	python run.py

Will now display our user interface as defined by QML:

All of the code is simply PyQT, so you could add code like in the previous tutorial. These are the two methods to create a graphical interface with PyQT. This method may be more loosely coupled to the code compared to the method of creating a GUI with QT in the previous tutorial. Despite that both are valid methods.

January 26, 2015 admin 3

Building an application GUI with PyQT, beginners tutorial

Standard

In this tutorial we will teach you how to create a graphical application with PyQT. You will need to install some packages:

sudo pip install pyqt
sudo apt-get install qt4-designer
sudo apt-get install pyqt4-dev-tools
sudo apt-get install python-kde4

sudo pip install pyqt

sudo apt-get install qt4-designer

sudo apt-get install pyqt4-dev-tools

sudo apt-get install python-kde4

If python-kde4 cannot be found update your repository to find it. If you are on Ubuntu use this link.

Now we can use the QT Designer application. It saves us from writing tons of layout code that you may be used to when writing HTML. Start qt4-designer from your applications menu. The QT Designer application will appear:

QT_Designer

Press Dialog without Buttons and press Create. You can now drag any component from the widget box to the form. Simple drag and drop. We added a button, label and a pixmap. (I took a random image from the web for the pixmap)

Our window looks like the image above. Press Form > Viewcode. We will get a popup box with the form code in… C++! That is great, but we want the Python code. Press File > Save as > form.ui.

The file test.ui contains your form described in XML format. (You can view it in a text editor) Open a console and type:

pyuic4 form.ui > form.py

1	pyuic4 form.ui > form.py

Running the file does nothing. Create a new file called gui.py

Paste the code below:

import sys
from PyQt4 import QtCore, QtGui
from form import Ui_Dialog


class MyDialog(QtGui.QDialog):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = MyDialog()
    myapp.show()
    sys.exit(app.exec_())

import sys

from PyQt4 import QtCore, QtGui

from form import Ui_Dialog

class MyDialog(QtGui.QDialog):

def __init__(self, parent=None):

QtGui.QWidget.__init__(self, parent)

self.ui = Ui_Dialog()

self.ui.setupUi(self)

if __name__ == "__main__":

app = QtGui.QApplication(sys.argv)

myapp = MyDialog()

myapp.show()

sys.exit(app.exec_())

Run with:

python gui.py

1	python gui.py

This will open our graphical interface. Pressing on the OK button will simply close the application.

We want to add some action when the OK button is pressed. We add these three lines to the code:

self.ui.pushButton.clicked.connect(self.OK)

    def OK(self):
        print 'OK pressed.'

self.ui.pushButton.clicked.connect(self.OK)

def OK(self):

print 'OK pressed.'

Please make sure your button is named pushButton by inspecting the form.py file. Pressing the button will print ‘OK pressed’ to the terminal.

Total application below:

gui.py

import sys
from PyQt4 import QtCore, QtGui
from form import Ui_Dialog


class MyDialog(QtGui.QDialog):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.ui.pushButton.clicked.connect(self.OK)

    def OK(self):
        print 'OK pressed.'


if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = MyDialog()
    myapp.show()
    sys.exit(app.exec_())

import sys

from PyQt4 import QtCore, QtGui

from form import Ui_Dialog

class MyDialog(QtGui.QDialog):

def __init__(self, parent=None):

QtGui.QWidget.__init__(self, parent)

self.ui = Ui_Dialog()

self.ui.setupUi(self)

self.ui.pushButton.clicked.connect(self.OK)

def OK(self):

print 'OK pressed.'

if __name__ == "__main__":

app = QtGui.QApplication(sys.argv)

myapp = MyDialog()

myapp.show()

sys.exit(app.exec_())

form.py (generated):

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'form.ui'
#
# Created: Mon Jan 26 01:18:19 2015
#      by: PyQt4 UI code generator 4.10.4
#
# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s

try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName(_fromUtf8("Dialog"))
        Dialog.resize(325, 208)
        self.label = QtGui.QLabel(Dialog)
        self.label.setGeometry(QtCore.QRect(30, 100, 341, 61))
        self.label.setObjectName(_fromUtf8("label"))
        self.pushButton = QtGui.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(10, 150, 301, 41))
        self.pushButton.setObjectName(_fromUtf8("pushButton"))
        self.kpixmapregionselectorwidget = KPixmapRegionSelectorWidget(Dialog)
        self.kpixmapregionselectorwidget.setGeometry(QtCore.QRect(-30, -20, 371, 161))
        self.kpixmapregionselectorwidget.setPixmap(QtGui.QPixmap(_fromUtf8("Desktop/IMG_0377.jpg")))
        self.kpixmapregionselectorwidget.setObjectName(_fromUtf8("kpixmapregionselectorwidget"))

        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(_translate("Dialog", "Dialog", None))
        self.label.setText(_translate("Dialog", "This form is created with Python and QT.", None))
        self.pushButton.setText(_translate("Dialog", "OK", None))

from PyKDE4.kdeui import KPixmapRegionSelectorWidget

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'form.ui'

# Created: Mon Jan 26 01:18:19 2015

# by: PyQt4 UI code generator 4.10.4

# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

try:

_fromUtf8 = QtCore.QString.fromUtf8

except AttributeError:

def _fromUtf8(s):

return s

try:

_encoding = QtGui.QApplication.UnicodeUTF8

def _translate(context, text, disambig):

return QtGui.QApplication.translate(context, text, disambig, _encoding)

except AttributeError:

def _translate(context, text, disambig):

return QtGui.QApplication.translate(context, text, disambig)

class Ui_Dialog(object):

def setupUi(self, Dialog):

Dialog.setObjectName(_fromUtf8("Dialog"))

Dialog.resize(325, 208)

self.label = QtGui.QLabel(Dialog)

self.label.setGeometry(QtCore.QRect(30, 100, 341, 61))

self.label.setObjectName(_fromUtf8("label"))

self.pushButton = QtGui.QPushButton(Dialog)

self.pushButton.setGeometry(QtCore.QRect(10, 150, 301, 41))

self.pushButton.setObjectName(_fromUtf8("pushButton"))

self.kpixmapregionselectorwidget = KPixmapRegionSelectorWidget(Dialog)

self.kpixmapregionselectorwidget.setGeometry(QtCore.QRect(-30, -20, 371, 161))

self.kpixmapregionselectorwidget.setPixmap(QtGui.QPixmap(_fromUtf8("Desktop/IMG_0377.jpg")))

self.kpixmapregionselectorwidget.setObjectName(_fromUtf8("kpixmapregionselectorwidget"))

self.retranslateUi(Dialog)

QtCore.QMetaObject.connectSlotsByName(Dialog)

def retranslateUi(self, Dialog):

Dialog.setWindowTitle(_translate("Dialog", "Dialog", None))

self.label.setText(_translate("Dialog", "This form is created with Python and QT.", None))

self.pushButton.setText(_translate("Dialog", "OK", None))

from PyKDE4.kdeui import KPixmapRegionSelectorWidget

January 23, 2015 admin 0

Creating a gui in Python with WxWidgets [tutorial for beginners]

Standard

Python programming is a lot of fun and sometimes we want to create a graphical application (GUI). WxWidgets can be used to create a graphical interface that looks like a native application on any operating system. First download and install WxPython, the Python bindings for wxWidgets.

sudo apt-get install python-wxgtk2.8 python-wxtools wx2.8-doc wx2.8-examples wx2.8-headers wx2.8-i18n

1	sudo apt-get install python-wxgtk2.8 python-wxtools wx2.8-doc wx2.8-examples wx2.8-headers wx2.8-i18n

Then install a GUI creator called wxglade:

sudo apt-get install wxglade

1	sudo apt-get install wxglade

Using a GUI builder such as wxGlade will save you a lot of time, regardless of the GUI library you use. You can easily make complex graphical interfaces because you can simply drag and drop.

Creating our first GUI with Python and wxWidgets:

Start wxglade. You will see its user interface:

Press on tiny window on the top left, below the file icon.

Press OK. An empty window will now appear. Press on the tiny [OK] button in the wxGlade panel and press on the frame. The button will now appear. Press on Application in the tree window.

Set the output file in the wxproperties window.

If you look at the window note you can select multiple programming languages and two versions of wxWidgets. Select Python and wxWidgets 2.8. Finally press Generate code. (Do NOT name the file wx.py because the import needs wx, save it as window.py or something else).

Putting it all together:
Run:

python window.py

1	python window.py

And a window with a button will appear. Pressing the button will not do anything. To start a function when pressing the button, we need to define a so called Callback. This can be as simple as:

def OnButton(self, Event, button_label):
        print "In OnButton:", button_label

1 2	def OnButton(self, Event, button_label): print "In OnButton:", button_label

Finally we bind the button to the callback function using:

self.button_1.Bind(wx.EVT_BUTTON, self.OnButton )

1	self.button_1.Bind(wx.EVT_BUTTON, self.OnButton )

Pressing the button will now write a message to the command line. Instead of the boring command line message, we want to show a message box. This can be done using this command:

wx.MessageBox( "This is a message.", "Button pressed.");

1	wx.MessageBox( "This is a message.", "Button pressed.");

The full code below:

#!/usr/bin/env python
# -*- coding: UTF-8 -*-
#
# generated by wxGlade 0.6.8 on Fri Jan 23 22:59:56 2015
#

import wx

# begin wxGlade: dependencies
import gettext
# end wxGlade

# begin wxGlade: extracode
# end wxGlade


class MyFrame(wx.Frame):
    def __init__(self, *args, **kwds):
        # begin wxGlade: MyFrame.__init__
        kwds["style"] = wx.DEFAULT_FRAME_STYLE
        wx.Frame.__init__(self, *args, **kwds)
        self.button_1 = wx.Button(self, wx.ID_ANY, _("Hello World!"))
        self.button_1.Bind(wx.EVT_BUTTON, self.OnButton )

        self.__set_properties()
        self.__do_layout()
        # end wxGlade

    def __set_properties(self):
        # begin wxGlade: MyFrame.__set_properties
        self.SetTitle(_("wxWidgets button example. talkera.org/python "))
        # end wxGlade

    def __do_layout(self):
        # begin wxGlade: MyFrame.__do_layout
        sizer_1 = wx.BoxSizer(wx.VERTICAL)
        sizer_1.Add(self.button_1, 0, 0, 0)
        self.SetSizer(sizer_1)
        sizer_1.Fit(self)
        self.Layout()
        # end wxGlade

    def OnButton(event, button_label):
        wx.MessageBox( "This is a message.", "Button pressed.");
  

# end of class MyFrame
if __name__ == "__main__":
    gettext.install("app") # replace with the appropriate catalog name

    app = wx.PySimpleApp(0)
    wx.InitAllImageHandlers()
    frame_1 = MyFrame(None, wx.ID_ANY, "")
    app.SetTopWindow(frame_1)
    frame_1.Show()
    app.MainLoop()

#!/usr/bin/env python

# -*- coding: UTF-8 -*-

# generated by wxGlade 0.6.8 on Fri Jan 23 22:59:56 2015

import wx

# begin wxGlade: dependencies

import gettext

# end wxGlade

# begin wxGlade: extracode

# end wxGlade

class MyFrame(wx.Frame):

def __init__(self, *args, **kwds):

# begin wxGlade: MyFrame.__init__

kwds["style"] = wx.DEFAULT_FRAME_STYLE

wx.Frame.__init__(self, *args, **kwds)

self.button_1 = wx.Button(self, wx.ID_ANY, _("Hello World!"))

self.button_1.Bind(wx.EVT_BUTTON, self.OnButton )

self.__set_properties()

self.__do_layout()

# end wxGlade

def __set_properties(self):

# begin wxGlade: MyFrame.__set_properties

self.SetTitle(_("wxWidgets button example. talkera.org/python "))

# end wxGlade

def __do_layout(self):

# begin wxGlade: MyFrame.__do_layout

sizer_1 = wx.BoxSizer(wx.VERTICAL)

sizer_1.Add(self.button_1, 0, 0, 0)

self.SetSizer(sizer_1)

sizer_1.Fit(self)

self.Layout()

# end wxGlade

def OnButton(event, button_label):

wx.MessageBox( "This is a message.", "Button pressed.");

# end of class MyFrame

if __name__ == "__main__":

gettext.install("app") # replace with the appropriate catalog name

app = wx.PySimpleApp(0)

wx.InitAllImageHandlers()

frame_1 = MyFrame(None, wx.ID_ANY, "")

app.SetTopWindow(frame_1)

frame_1.Show()

app.MainLoop()