Construção de GUI's utilizando Python e

QtDesigner
PyQt4  2.6.6 - 4.6.2

Humberto Luz Oliveira, Hans Günther Bramhs Jr. e Lu as Vargas H. Mesquita

a IFRS/Câmpus Osório

Resumo
Este do umento é parte omplementar do relatório nal do projeto de pesquisa
 Aprendendo uma libguage de programação: Python. Apli ações de funções matemá-
ti as nas soluções de problemas em me âni a . Des revemos as tarefas exe utadas
no período entre 11 de outubro de 2011 e 13 de janeiro de 2012 pelos bolsistas sob
minha orientação. São des ritos o uso de um software livre para desenvolvimento de
interfa e grá a ao usuário para os programas onstruídos até o presente momento.
Como exemplo, mostramos omo riar um janela de dialogo e o resultado de jogo
apli ando equações de movimento oblíquo, onteúdo estudado pelos alunos do médio
integrado.

Palavras Chaves: Python  QtDesigner  Interfa e Grá a  Cinemáti a

Email address: humberto.oliveiraosorio.ifrs.edu.br (Humberto Luz Oliveira, Hans

Günther Bramhs Jr. e Lu as Vargas H. Mesquita).

Python 2.6.6 21 de agosto de 2012

1 Introdução

Neste artigo, on entramos a atenção na onstrução de interfa es grá as ao usuário

e aqui hamadas, abreviadamente, pela sigla GUI. Para elaborar estas GUI's utilizamos
Python e QtDesigner, que são duas linguagens de programação modernas e poderosas
om alta portabilidade entre os sistemas opera ionais mais utilizados, Windows, Linux
e Ma OS.

Podemos desenvolver todo o ódigo em Python, isto é, tanto o algoritmo omo a inter-
fa e grá a para o usuário, já que python é uma linguagem ompleta. Python vem om
um módulo (TKinter ) nativo para o desenvolvimento de apli ativos grá os. Entretanto
o módulo TKinter é um tanto sem apelo visual, além do que não possui uma integra-
ção om ferramenta visual para onstrução de apli ativos grá os. Assim, pre isamos de
outra ferramenta para gerar essas GUI's. Portanto, utilizamos QtDesigner, que é uma
ferramenta que possui um editor visual para riar as janelas (interfa es para dialogs ,
widgets personalizadas e janelas prin ipais windows). O resultado nal de qualquer
projeto desenvolvido om QtDesigner, são janelas (dialogs ) bem elaboradas e realizadas
num tempo muito urto.

Python é uma linguagem muito versátil, por isso, muitos programadores denem-a omo
ola Jython) . Da mesma forma que Jython, PyQt
de outras linguagens omo em (
também é uma mistura de Python om QtDesigner, onde onstruímos as janelas om
QtDesigner e onvertemos o ódigo de Qt para uma forma que Python possa interpretá-
la. O que é uma maravilha para quem deseja desenvolver programas om GUI's. Portanto,
ao ontrário de TKinter, om PyQt podemos onstruir GUI's, desenvolvendo tudo em
ódigo puro ou ombinando o ódigo python e o editor visual do QtDesigner para riar
os dialogs.

Vamos mostrar neste artigo, o desenvolvimento de um apli ativo (Jogo de Lançamento)

que utiliza on eitos de lançamento oblíquo, o qual faz parte de uma rotina do ódigo
desenvolvido para al ular e visualizar grá os da inemáti a. O Código de inemáti a foi
desenvolvido pelos bolsistas Hans G. Bramhs e Lu as V. Mesquita durante o projeto de
pesquisa e foi apresentado em duas mostras do IFRS ([1,2℄.

Do inglês: Graphi al User Interfa e  GUI.

É mais fá il dar um entendimento do que são os dialogs, do que dar uma tradução. Assim, em
pou as palavras um dialog são pequenas janelas que possuem botões, aixas de textos, barras de
rolagem, et , om o objetivo de fazer alguma oisa omo ajudar, informar, ajudar o usuário
Jython signi a a fusão de Java om Python, onde Python fun iona em onjunto om Java e
assim muitas vezes denida omo ola para outras linguagens de programação.
Entenda-se omo a sintaxe das linguagens python e qtdesigner digitadas diretamente num
editor de texto qualquer.

2
2 Desenvolvendo Interfa es para o Usuário

Antes de ini iar a onstrução do apli ativo, vamos mostrar a ferramenta visual, QtDesig-
ner,a qual será empregada no desenvolvimento da GUI. A gura 1, mostra uma imagem
do editor visual do QtDesigner. Ao ini iar o editor qtdesigner podemos denir qual

Figura 1. Interfa e Grá a do QtDesigner

objeto (janela) queremos desenvolver, se uma aixa de dialogo, om botões ou outros
apli ativos. A gura 1 apresenta na parte entral do editor Qt, uma aixa de dialogo
mostrando um texto em destaque azul (Dialog with Buttons Box) que representa a janela
que foi riada. Essa janela é exempli ada na gura 2, ontendo além da aixa de dialogo
(dialog), mais os botões de OK e Can el posi ionados na parte inferior direita da aixa.
Criamos uma janela om os botões, apenas li ando na aixa de dialogo, sem pre isar
digitar nenhuma sintaxe de ódigo Qt. O poder desse editor é justamente não pre isar
entender da linguagem Qt, apenas trabalhamos na forma de lique e arraste (drag and
drop. Dessa forma há um enorme ganho na elaboração de apli ativos grá os. É laro que
apenas onstruímos a janela, mas não foram ativadas as funções para os botões. Faremos
isso utilizando a linguagem Python. Porém, faremos em um aso real, isto é, onstruindo

3
 Figura 2. Caixa de dialogo ontendo os botões de OK e Can el.

uma aixa para o jogo de lançamento.

Para riar a janela do jogo de lançamento vamos pre isar de diversos objetos, omo botões
de ini iar jogo, m de jogo, atirar, et . Para ir pegando o jeito, ini iamos pela onstrução
de uma janela om o botão de sair que ao li ar fe he a GUI. O ódigo a seguir é o resultado
do lique e arraste de uma aixa de dialogo (Dialog ) e um botão de sair (PushButton )
feito no qtdesigner. Abaixo, mostramos os ódigos Qt e Python, em sequên ia, para
omparação das linguagens. A hamos que isso é instrutivo para um omparativo entre as
linguagens.

__________________________________________________________________________
Qt - sairform.ui

<?xml version="1.0" en oding="UTF-8"?>

<ui version="4.0">
< lass>sairForm</ lass>
<widget lass="QWidget" name="sairForm">
<property name="geometry">

4
 <re t>
<x>0</x>
<y>0</y>
<width>104</width>
<height>53</height>
</re t>
</property>
<property name="windowTitle">
<string>sairForm</string>
</property>
<widget lass="QPushButton" name="quitButton">
<property name="geometry">
<re t>
<x>6</x>
<y>2</y>
<width>91</width>
<height>51</height>
</re t>
</property>
<property name="text">
<string>Sair</string>
</property>
</widget>
</widget>
<resour es/>
< onne tions/>
</ui>
__________________________________________________________________________

__________________________________________________________________________
Py - ui_sairform.py

# -*- oding: utf-8 -*-

# Form implementation generated from reading ui file

#'/home/humberto/Designer_UI/sairform.ui'
#
# Created: Sun Feb 5 00:01:25 2012
# by: PyQt4 UI ode generator 4.7.2
#
# WARNING! All hanges made in this file will be lost!

from PyQt4 import QtCore, QtGui

5
 lass Ui_sairForm(obje t):
def setupUi(self, sairForm):
sairForm.setObje tName("sairForm")
sairForm.resize(104, 53)
self.quitButton = QtGui.QPushButton(sairForm)
self.quitButton.setGeometry(QtCore.QRe t(6, 2, 91, 51))
self.quitButton.setObje tName("quitButton")

self.retranslateUi(sairForm)
QtCore.QObje t. onne t(self.quitButton, QtCore.SIGNAL(" li ked()"), \
sairForm. lose)
QtCore.QMetaObje t. onne tSlotsByName(sairForm)

def retranslateUi(self, sairForm):

sairForm.setWindowTitle(QtGui.QAppli ation.translate("sairForm", \
"sairForm", None, QtGui.QAppli ation.Uni odeUTF8))
self.quitButton.setText(QtGui.QAppli ation.translate("sairForm", \
"Sair", None, QtGui.QAppli ation.Uni odeUTF8))

if __name__ == "__main__":
import sys
app = QtGui.QAppli ation(sys.argv)
sairForm = QtGui.QWidget()
ui = Ui_sairForm()
ui.setupUi(sairForm)
sairForm.show()
sys.exit(app.exe _())
__________________________________________________________________________

A primeira (Qt) utiliza uma sintaxe do tipo XML, enquanto a segunda é a sintaxe do
ódigo python. Utilizamos um s ript feito em python para onverter a sintaxe XML para
ódigo Python, portanto não é ne essário que o programador saiba programação XML.
Maiores informações sobre esse s ript pode ser visto em um dos livros adquiridos durante
o projeto de pesquisa, ver referên ia [3℄.

Na gura 3 apresentamos o resultado de uma janela de dialogo simples, om um botão

entral om omando de sair quando li ado sobre ele. Na gura estão indi ados o omando
de hamada para a janela de dialogo (python + nome do arquivo.py) e a saída do omando,
que é o resultado da interfa e grá a ao usuário (GUI), om a presença de um botão entral
ativo.

6
 Figura 3. Janela de dialogo hamada de uma shell de omando.

Neste exemplo, através de riação de uma simples GUI, mostramos a simpli idade no
desenvolvimento de interfa es grá os om o PyQt. Não temos a intenção neste pequeno
artigo, expli ar omo programar na fusão dessas duas linguagens (QtDesigner e Python),
mas apenas hamar a atenção para a produtividade no desenvolvimento de apli ativos
om o uso de GUI's. No próximo exemplo vamos mostrar o resultado da GUI apli ada a
equação do movimento oblíquo.

3 Jogo  Tiro ao Alvo

Na gura 4, mostramos um mosai o do jogo tiro ao alvo, uma simples brin adeira apli-
ando as equações do movimento oblíquo. Este jogo é uma apli ação lúdi a das equações
de movimento oblíquo de problemas da inemáti a, que foram apli ados aos alunos do mé-
dio integrado, durante o segundo trimestre omo uma atividade paralela para re uperação
de ompetên ias não al ançadas.

Neste mosai o, gura 4, apresentamos a onstrução da GUI nal om o título gui4.py,

passando por vários estágios. São apresentado vários objetos de dialogo (botões, fra-
mes, slider, guras geométri as, et ), desde a primeira GUI (gui1.py) até a última GUI
(gui4.py). Não é nosso objetivo expli itar nem o ódigo e tão pou o disse ar o ódigo
es lare endo ada rotina do programa, omo já foi men ionado anteriormente em seção
anterior. Entretanto vamos apresentar a parte do ódigo que orresponde ao algoritmo
das equações do movimento oblíquo, isso vai ilustrar omo é realizado a programação
em PyQt. A intenção é desmesti ar que físi a é ompli ado, mostrando omo são pro-
gramadas e apli adas as equações do movimento oblíquo, a reditamos que o pro esso
de aprendizagem tenha algum signi ado para o estudante (usuário) ao ter o ontato e
onhe imento de sua apli abilidade.

7
 Figura 4. Interfa e Grá a para o Jogo de Tiro Alvo

No ódigo de inemáti a, são apresentadas todas as equações de movimento, entretando

o movimento oblíquo, também onhe ido omo movimento bidimensional é o objeto de

programação, pelo simples fato de que desenvolver essa habilidade om os alunos foi muito

difí il e a origem do projeto de pesquisa. Voltando as equações de movimento oblíquo e o

algoritmo, abaixo um tre ho que ontém a parte prin ipal do ódigo:

def alvoRet ( self ):

gravidade = 4.0

tempo = self . timerCount / 40.0

velo idade = self . shootFor a
radianos = self . shootAngulo * 3.14159265 / 180

velx = velo idade * math . os ( radianos )

vely = velo idade * math . sin ( radianos )
x0 = ( CannonField . barrelRe t . right () + 5) * math . os ( radianos )
y0 = ( CannonField . barrelRe t . right () + 5) * math . sin ( radianos )
x = x0 + velx * tempo

8
 y = y0 + vely * tempo - 0.5 * gravidade * tempo * tempo

result = QtCore . QRe t (0 , 0, 6, 6)

result . moveCenter ( QtCore . QPoint ( QtCore . qRound (x ) ,\
self . height () - 1 - QtCore . qRound ( y )))
return result

Este tre ho do ódigo realiza o ál ulo das oordenadas de posição xo e xo em função do

tempo. O mapeamento das posições em função do tempo e a atualização dessas oordena-
das do objeto projétil (função alvoRet) no jogo, é realizada por outro tre ho do ódigo e
não estamos interessados em detalhar esta parte no programa. O tre ho a ima, des reve as
mesmas equações do movimento oblíquo, que foram trabalhadas om os alunos do médio
integrado durante a dis iplina de físi a. Estas equações também fazem parte do ódigo
de inemáti a apresentadas nos mostras ientí as [1,2℄. Estas equações foram utilizadas
omo uma atividade paralela para reposição de notas de alunos que não al ançaram os
objetivos e ompetên ias avaliadas num determinado momento do urso de físi a. Esta
atividade onsistiu de uma lista de exer í ios onde os alunos poderiam utilizar o ódigo
de inemáti a para realizar esta tarefa. Não vamos expli ar o método, por que será es opo
de um artigo a ser públi ado em breve, e, por enquanto nos reservaremos o direito de
guardar sigilo.

Para resgatar a parte físi a, vamos es rever as equações de movimento oblíquo [4,5℄ para
que possa ser feito um omparativo om o que foi programado. A seguir as equações de
movimento oblíquo (horizontal  x e verti al  y):

Equação da oordenada horizontal  x (1)

x = xo + vox t
Equação da oordenada verti al  y (2)
1
y = yo + voy t − gt
2
Não é muito difí il identi ar os parâmetros do tre ho de ódigo a ima om as variáveis
das equações de movimento em (1 e 2). Com isto, resgatamos as equações de movimento
oblíquo programadas no ódigo inemáti a e agora no jogo de tiro ao alvo, as mesmas
que foram objetos de estudo durante o urso de si a (aulas e nos estudos orientados).
Assim, mostramos que podemos onstruir objetos de aprendizagem na forma de jogos
lúdi os que podem auxiliar no pro esso de aprendizagem signi ativa.

9
Referên ias
[1℄ Brahms H. G., Mesquita, L. V. e Oliveira H. L. - Python  Físi a Matemáti a:
Apli ações em Cinemáti a. (I Parte), I Mostra Cientí a do Campus Restinga/IFRS,
I,10/2011
[2℄ Brahms H. G., Mesquita, L. V. e Oliveira H. L. - Python  Físi a Matemáti a:
Apli ações em Cinemáti a. (II Parte), VII Mostra Té ni a do Campus Restinga/IFRS,
VII,11/2011
[3℄ Summereld, M. - Rapid GUI Programming With Python and Qt, Prenti e Hall,
Pearson Edu ation, 2008 - Mi higan, EUA.
[4℄ Sampaio, J. L. e Calçada, C. S. - Físi a, Atual Editora, 2005 - 2a Ed., Vol. ùni o, São Paulo.
[5℄ Penteado P. C. M. e Torres, C. M. A. - Físi a Ciên ia e Te nologia, Editora Moderna,
2005 - 1a Ed.,Vol.1, São Paulo.

10