Primera aplicacion con Qt Designer y Python

Conversor de temperaturas

La idea de esta entrada es crear una sencilla aplicación gráfica utilizando el binding PyQt de la biblioteca gráfica Qt. En caso de no tener instalado PyQt, les dejo el enlace de la entrada que hice ya algún tiempo, explicando su instalación: www.pythondiario.com/2013/11/como-instalar-pyqt4-en-windows-linux-y.html

Una ves que ya esté todo instalado, entramos a Qt Designer (plataforma diseñada para crear aplicaciones gráficas). Esta herramienta de desarrollo GUI nos va a facilitar la tarea de construir ventanas arrastrando botones, cuadros de textos, etiquetas, como también cambiar los tamaños, ubicación de los widgets y propiedades de los mismos.

Qt Designer

Nuestra sencilla aplicación gráfica será un conversor de temperatura (de Fahrenheit a Celsius y viceversa) 

Desarrollo de la aplicación:

Al abrir Qt Designer visualizamos un cuadro de diálogo para crear un nuevo formulario. En nuestro caso elegimos Main Window porque la nuestra será una aplicación completa. Luego apretamos Create.

Main Window

Esto nos va a llevar a nuestra ventana, que en este momento está vacía, pero en breve tendrá los elementos necesarios de nuestra aplicación.
A la izquierda de Qt Designer encontramos el Widget Box, donde figuran todos los widgets que podemos arrastrar a nuestra ventana. Lo primero que haremos será arrastrar dos botones (puedes poner en el buscador de Widget Box : Push Button), también pondremos un par de etiquetas (puedes buscar las etiquetas poniendo label), agregamos también una linea de texto (Line Edit) y por último un cuadro de números (Spin Box).

Tratemos de darle la siguiente forma:

Ventana con widget

Para cambiar los nombres que se ven en los botones y las etiquetas hacemos doble clic sobre ellos y podremos editarlos.
Una ves que los widgets estén en nuestra ventana, podremos cambiarlos de tamaño (arrastrar de un borde o esquina) o de ubicación (arrastrándolos). Cada ves que seleccionemos un widget, podremos ver sus propiedades en el Editor de propiedades que se encuentra a la derecha (Property Editor). La primera propiedad que encontramos es el nombre (objectName), que se utiliza para referirse al objeto en el código. Se acostumbra cambiar estos nombres para que sean más significativos y nosotros los cambiaremos de la siguiente forma: el botón de arriba será (btn_CtoF), el de abajo (btn_FtoC), el cuadro de números de la derecha (spinFhar) y la linea de texto de la izquierda (editCel). No necesitamos cambiar el nombre de las etiquetas porque en el código no vamos a interactuar con ellas.

Guardamos nuestro proyecto con el nombre tempconv.ui en una carpeta que puede ser llamada (Conversor de temperatura).
Lo que sigue es hacer funcionar nuestros widgets, para eso creamos un archivo llamado tempconv.py en la misma carpeta que tempconv.ui (en nuestro caso la carpeta se llama Conversor de Temperatura). Dentro de nuestro archivo tempconv.py irá el siguiente código (podemos crearlo con nuestro IDE preferido, en mi caso SublimeText) que explicaré más abajo:

Código:

#!/usr/bin/python
# -*- coding: utf-8 -*-

# Convierte temperaturas
# www.pythondiario.com

import sys
from PyQt4 import QtCore, QtGui, uic

# Cargar nuestro archivo .ui
form_class = uic.loadUiType("tempconv.ui")[0]

class MyWindowClass(QtGui.QMainWindow, form_class):
 def __init__(self, parent=None):
  QtGui.QMainWindow.__init__(self, parent)
  self.setupUi(self)
  self.btn_CtoF.clicked.connect(self.btn_CtoF_clicked)
  self.btn_FtoC.clicked.connect(self.btn_FtoC_clicked)


 # Evento del boton btn_CtoF
 def btn_CtoF_clicked(self):
  cel = float(self.editCel.text())
  fahr = cel * 9 / 5.0 + 32
  self.spinFahr.setValue(int(fahr + 0.5))

 # Evento del boton btn_FtoC
 def btn_FtoC_clicked(self):
  fahr = self.spinFahr.value()
  cel = ((fahr - 32) * 5) / 9
  self.editCel.setText(str(cel))

app = QtGui.QApplication(sys.argv)
MyWindow = MyWindowClass(None)
MyWindow.show()
app.exec_()

Análisis del código:

En la parte superior importamos la biblioteca PyQt y cargamos el archivo tempconv.ui que generamos con Qt Designer.

Creamos la clase MyWindowClass y le pasamos (QtGui.QMainWindow y form_class). El método __init__ configura la interfaz GUI. En esta función tenemos que conectar los controladores de eventos:

self.btn_CtoF.clicked.connect(self.btn_CtoF_clicked)
self.btn_FtoC.clicked.connect(self.btn_FtoC_clicked)

La función connect() se usa para conectar eventos. Se toma un único parámetro, que es el nombre de la función. Notar que:
- btn_CtoF es el nombre del botón
- El método clicked.connect() es llamado cuando el botón es presionado.
- El nombre de la función de controlador de eventos es btn_CtoF_clicked.

Ahora resta crear las funciones que coincidirán con el nombre que hemos puesto en el método connect() btn_CtoF_clicked y btn_FtoC_clicked. Las funciones serán definidas en nuestra clase.

Ejemplo:

# Evento del boton btn_CtoF
 def btn_CtoF_clicked(self):
  cel = float(self.editCel.text())
  fahr = cel * 9 / 5.0 + 32
  self.spinFahr.setValue(int(fahr + 0.5))

En esta función, la variable cel captura el valor de nuestro Widget (editCel). Luego en la variable fahr se calcula la conversión a grados Fahrenheit y en la última linea se pasa el resultado a nuestro Widget (spinFahr). Lo mismo sucede con la función btn_FtoC_clicked().

Al ejecutar el código se podrán dar cuenta que el spinBox tiene un mínimo y un máximo (0 - 99). Se utilizó para no poner dos campos de texto, pero puedes cambiarlo si gustas experimentar.

Al final del código, necesitamos iniciar la interfaz gráfica:

app = QtGui.QApplication(sys.argv)
MyWindow = MyWindowClass(None)
MyWindow.show()
app.exec_()

---------------------------------------------------------------------------------------------------------------------------------

También puedes ver la entrada que hice sobre aplicaciones gráficas con Tkinter.

Esta fue una demostración de como crear una aplicación gráfica utilizando PyQt, Qt Designer y un poco de código Python.

Saludos y cualquier comentario es Bienvenido.