Introducción a GUI con PyQt y Python

Salomón Ramı́rez∗
Análisis y Diseño de Programación de Interfaces
Especialización en Sistemas de Información Geográfica
Universidad Distrital Francisco José de Caldas
Bogotá D.C., Colombia
Septiembre de 2022

Contenido distribuido bajo Licencia Creative Commons

CC BY:
C

Abstract
Este documento muestra cómo crear una sencilla aplicación con in-
terfaz gráfica de usuario y agregar la funcionalidad de Back-End. En
particular, se mostrará cómo codificar el comportamiento de botones y
campos de un formulario, empleando el binding PyQt de la biblioteca
gráfica Qt para Python. Se asume que lector esta familiarizado con los
principios de diseño de interfaces e ingenierı́a de la interfaz, ası́ como con
los conceptos básicos de programación Orientada a Objetos y el uso del
lenguaje de programación Python.

1 Introducción
El objetivo de esta guı́a es brindar una introducción a la programación de in-
terfaz gráfica de usuario (GUI ) en Python empleando el binding PyQt de la
biblioteca gráfica Qt, sin pretender ser exhaustiva ni agotar cada capacidad que
ofrece este binding, mediante el diseño de una sencilla aplicación que convierte
valores de temperatura de Celsius a Kelvin, siendo simple pero funcional.
Se utilizará la herramienta de diseño y construcción de GUIs Qt Designer,
la cual facilita la creación de interfaces gráficas de usuario, siendo una simple
cuestión de arrastrar y soltar elementos de GUI. Su caracterı́stica de generación
automática de código simplifica el proceso de desarrollo de interfaces gráficas
de usuario, permitiendo centrarse en la lógica de la aplicación en lugar de la
arquitectura subyacente.
Desde la perspectiva de un usuario final, el uso de la aplicación es simple:
ingresar un valor de temperatura (en grados Celsius) en un cuadro de texto,
∗ [email protected]

1
realizar clic sobre el botón “Convertir”, y visualizar la temperatura convertida
(en grados Kelvin) en la ventana de la aplicación. Los botones minimizar, maxi-
mizar y cerrar se deben comportar como se espera, la aplicación también deberá
tenerte un tı́tulo que aparezca en la parte superior de la ventana principal.
Desde la perspectiva de un programador, se desarrollará la aplicación en dos
etapas principales. En primer lugar, se diseñará la GUI (Front-End ) empleando
los elementos de interfaz gráfica necesarios que ofrece Qt. Luego, se añadirá la
lógica de la aplicación (Back-End ), de modo que el programa realmente realicé
una conversión cuando el usuario presione el botón “Convertir”.
Para una guı́a más completa de las caracterı́sticas de diseño e implementación
de GUI con Qt Designer, se remite al lector al Manual de Qt Designer.

2 Creación del Front-End

Considerando que la aplicación será completamente funcional, para iniciar la
construcción de su GUI, se debe crear un formulario Qt utilizando el elemento
Main Window, el cual será un contenedor de otros elementos de GUI necesarios
para cumplir con la funcionalidad de la herramienta requerida.
Durante la creación del Front-End aplique los principios de diseño de GUIs
ası́ como las consideraciones de Joel Spolsky sobre Diseño de Interfaz de Usuario
para Programadores.

1. Ingrese a la herramienta de diseño y construcción de GUIs Qt Designer.

2. Elija la plantilla Main Window en el cuadro diálogo New Form que se
despliega al iniciar la herramienta.
3. Realice clic en el botón Create para finalizar.

2.1 Adición de elementos de GUI

La GUI de la aplicación será básica, centrándose en su diseño mediante el uso
de un subconjunto de los widgets disponibles en Qt, adicionando un par de
etiquetas, un campo de texto y un botón. Inicialmente una de las etiquetas se
utilizará para visualizar el resultado, el campo de texto se utilizará para recibir
la entrada del usuario y el botón ejecutará la funcionalidad incorporada en el
Front-End.
Para continuar con la construcción de la GUI de la aplicación se utilizará el
Widget Box, panel izquierdo de Qt Designer, donde se encuentran los widgets
que pueden ser arrastrados al formulario creado previamente, para añadir ası́
otros elementos de GUI necesarios.

1. Arrastre y suelte dos widgets de tipo Label (etiqueta) sobre el formulario

de la aplicación.
2. Arrastre y suelte un widget de tipo Line Edit (campo de texto) sobre el
formulario de la aplicación.

2
 3. Arrastre y suelte un widget de tipo Push Buton (boton) sobre el formulario
de la aplicación.

2.2 Edición de elementos de GUI

Una vez que los widgets estén en la ventana de la aplicación, es posible modificar
su tamaño, posición y otras propiedades. Continuando con la construcción de
la GUI para la aplicación se utilizará el Property Editor, panel derecho central
de Qt Designer, donde se muestran las propiedades de los widgets agregados,
para renombrar la propiedad objectName, utilizada para referirse al objeto en
el código, y la propiedad text, que corresponde al texto mostrado en la GUI.
Es buena practica de programación que el nombre asignado al objeto este
precedido por un prefijo que indique el tipo de objeto correspondiente.

1. Seleccione una de las etiquetas, la cual se usará para grados Celsius.

2. Asigne le como nombre de objeto lblCelsius y Celsius como texto a mostrar
en la GUI.
3. Repita los pasos anteriores con la otra etiqueta, que se usará para grados
Kelvin.
4. Seleccione el cuadro de texto que será usado para capturar el valor ingre-
sado por el usuario.
5. Asigne como nombre de objeto txtCelsius.

6. Seleccione el botón que será usado para realizar la operación.

7. Asigne como nombre de objeto btnConvertir y Convertir como texto a
mostrar en la GUI.
8. Indique cuál elemento de GUI controla el titulo de la ventana

9. Indique en cuál propiedad de dicho elemento se asigna el titulo de la

ventana.
10. Ası́gnele un tı́tulo para la aplicación.
11. Agregue una nueva etiqueta en la esquina inferior izquierda que muestre
su código estudiantil.
12. Obtenga una vista previa del diseño final de la GUI.
13. Indique cuál técnica de prototipado ha sido empleada hasta este momento
e indique a qué dimensión y categorı́a de prototipado corresponde.

14. Guarde la interfaz creada con el nombre conv temp gui.ui en la carpeta
del proyecto.

3
 15. Abra el archivo guardado anteriormente con un editor de texto, por ejem-
plo, NotePad++.
16. Indique en qué lenguaje se encuentra codificada la GUI y cuál es su con-
clusión de este hallazgo.

3 Creación del Back-End

A continuación se añadirá la lógica de negocio de la aplicación, la cual hará
funcional la GUI creada previamente, de acuerdo con el requerimiento inicial.
Durante la codificación del Back-End aplique las Reglas de Estilo de Python,
definidas a través del Python Enhancement Proposal Nº 8 (PEP 8).

1. Ingrese al editor de texto o al IDE Python de su preferencia.

2. Cree un nuevo modulo y guárdelo en la misma carpeta en la cual guardó
la GUI de la aplicación, nombrándolo como conv temp logica.py

Realice los comentarios que estime convenientes a lo largo del código, de tal
manera que lo pueda reutilizar con facilidad ejercicios posteriores.
Para comenzar con al codificación de la aplicación se deben importar uic del
binding PyQt.

from PyQt5 import uic

Luego se debe importar el archivo que contiene la GUI construida previ-

amente con Qt Designer, para poder hacer uso de la clase UI MainWindow
generada a partir del archivo conv temp gui.ui, de la cual heredara la clase prin-
cipal del conversor de temperatura.

DialogUi, DialogType = uic.loadUiType("conv_temp_gui.ui")

A continuación se debe crear la clase principal del conversor de temperatura,

la cual se denominará ConvTemp y heredará de las clases QMainWindow y
UI MainWindow.

class ConvTemp(DialogType, DialogUi):

En la clase ConvTemp se debe definir el método constructor de la clase

( init ), que permitirá parametrizar el objeto a instanciar, mediante el llamado
al constructor de la clase padre QMainWindow, el uso del método setupUi() de
la superclase Ui MainWindow y la conexión de los controladores de eventos.
Para dar funcionalidad al botón Convertir, se debe conectar un controlador
de eventos que responda ante una señal, en este caso la señal es la realización de
un clic sobre el botón y la respuesta es la conversión de la temperatura ingresada
en el cuadro de texto.
Para la conexión (slots) de eventos se usa el método connect() que esta
disponible para cualquier objeto que emita señales (signals), asociada al tipo de

4
evento, en este caso clicked, que a su vez esta asociado al widget cuyo nombre de
objeto es btnConvertir. El método connect() recibe como parámetro el nombre
del método que ejecutará la acción de respuesta, que en este caso se denominará
btnConvetir Clicked.

def __init__(self):
super().__init__()
self.setupUi(self)
self.btnConvertir.clicked.connect(self.btnConvetir_clicked)

Ahora se debe agregar el método btnConvetirClicked que ejecutará la acción

de respuesta, tomando mediante el método text() el valor ingresado en el widget
de cuadro de texto, realizando la operación de conversión y asignando el resul-
tado obtenido al widget correspondiente a la etiqueta de grados Kelvin mediante
el métodosetText().
Es buena practica de programación que el nombre asignado a las variables
este precedido por un prefijo que indique su tipo de dato, siempre y cuando este
sea inmutable.

def btnConvetir_clicked(self):
fltCel = float(self.txtCelsius.text())
fltKel = 272.15 + fltCel
self.lblKelvin.setText(self.lblKelvin.text())
self.lblKelvin.setText(str(fltKel) + "Kelvin")

4 Inicialización de la aplicación
Finalmente inicialice la GUI de la aplicación agregando las siguientes instruc-
ciones en un modulo nuevo nombrado como conv temp ini.py, donde primero se
deben agregar los módulos requeridos, posteriormente se debe instanciar QAp-
plication, siendo este un requisito de todas las aplicaciones PyQt, luego se debe
instanciar la clase que contiene la lógica de negocio y hacer un llamado al método
que despliega la GUI en pantalla. La ultima linea garantiza que la aplicación
finalice su ejecución de manera correcta al salir.

import sys
from PyQt5 import QtWidgets, uic
from conv_temp_logica import ConvTemp

app = QtWidgets.QApplication(sys.argv)
MyApp = ConvTemp()
MyApp.show()
sys.exit(app.exec_())

5
5 Ejecución de la aplicación
Una vez este ubicado en la ruta que contiene tanto el Front-End como el Back-
End y su respectivo modulo de inicialización, es posible ejecutar la aplicación
desde el IDE de su preferencia o directamente sobre el interprete de Python,
en este caso se realizará sobre el interprete de Python empleando la siguiente
instrucción en una interface de linea de comandos (CLI):

python conv_temp_ini.py

Ejercicio
1. Agregue un botón para salir de la aplicación.

2. Agregue un botón para limpiar los campos de la aplicación.

3. Muestre el resultado de la conversión en otro cuadro de texto.
4. Formule sus conclusiones.