Google+ Seguidores

domingo, 16 de noviembre de 2014

Primera aplicacion con Qt Designer y Python

    68

Conversor de temperaturas
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
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
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
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.

68 comentarios:
Write comentarios
  1. Saludos, muchas gracias por compartir tus conocimientos es de muchisima ayuda. yo ando actualmente trabajando con wxPython para mis GIU , tengo un largo camino que recorrer aun soy nuevo en esto. y ver este post me provoco ensuciarme las manos con Qt.Hasta la proxima.

    ResponderEliminar
    Respuestas
    1. Gracias a ti Eliomar por pasarte por el blog y participar. Seguiré subiendo mis investigaciones diseñadas en QtDesigner y Qt. Saludos

      Eliminar
    2. Estimado Diego,

      En primer lugar felicitarte por tu fantástico blog.

      Por otra parte, he seguido las indicaciones del artículo y al crear el archivo .py en sublime text 2 lanzándolo desde Tools/Build, en la consola, me sale el siguiente error:

      Traceback (most recent call last):
      File "C:\Python27\Lib\site-packages\PyQt4\tempconv.py", line 34, in
      MyWindow = MyWindowClass(None)
      File "C:\Python27\Lib\site-packages\PyQt4\tempconv.py", line 18, in __init__
      self.btn_FtoC.clicked.connect(self.btn_FtoC_clicked)
      AttributeError: 'MyWindowClass' object has no attribute 'btn_FtoC'
      [Finished in 4.0s with exit code 1]

      Te agradecería mucho me indicases que estoy haciendo mal.

      Un saludo,

      Enrique Abadin

      Eliminar
    3. Hola andfriendsfinance, como estas? Gracias por tu comentario, es lo que nos impulsa a seguir escribiendo ;).
      Seguiste el Tutorial al pie de la letra? Creaste en el QtDesigner el form con los botones tal cual el del Tuto? Porque lo que no te está reconociendo ahí es el nombre del botón "btn_FtoC". Intenta cambiar en las propiedades del archivo .ui que creaste en QtDesigner el nombre del botón "De fharenheit a Celcius" por "btn_FtoC". Luego me cuentas, Saludos

      Eliminar
    4. Estimado Diego,

      Muchísimas gracias, efectivamente el error lo tenía en donde indicabas. Ahora lanzo bien la aplicación y todo funciona a la perfección. Un saludo

      Eliminar
    5. Excelente, me alegra ya puedas implementar la aplicación. Estamos en contacto por aquí. Saludos

      Eliminar
  2. Excelente Diego, muy fácil de entender. Quise hacer siempre algo en QT pero los tutoriales en castellano son pésimos.
    Lo hice y funcionó, después voy a probar sacandole el spin y poner otro cuadro de texto.

    Abrazo

    ResponderEliminar
    Respuestas
    1. Gracias Jose por participar en el blog. En este momento estoy creando una entrada con ejercicios gráficos para practicar e investigar. Saludos

      Eliminar
  3. Muy facil de entender, gracias por publicar tus trabajos. soy nuevo en python y ver esto me entusiasmo bastante a seguir estudiando. me interesaria saber de Biopython entre otras cosas.Muchas gracias y estare pendiente de tus publicaciones

    ResponderEliminar
    Respuestas
    1. Hola, me alegro mucho te guste y te ayude lo que escribo. Gracias a ti también por pasar y participar en el blog. Saludos

      Eliminar
  4. Hola, Gracias a Python Diario por los Buenos tutoriales y por su puetso a su colectivo.
    Me gustaria ver un ejemplo de varias ventanas incluyendo la principal con su menu elaboradas en Qt Designer y enlasandolas desde python, o sea cuando doy click en en Acerca de que abra la ventana elabarada anteriormente en Qt.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola, ya van a venir más tutoriales sobre aplicaciones gráficas. El colectivo de Python Diario es la gente que visita y participa como lo has hecho tú. Gracias por pasarte.

      Eliminar
  5. Gracias por compartir la info Diego, yo soy nuevo con python he estado jugando como 1 mes con el mas o menos y cada día me gusta mas, pero llega el punto donde necesitas interfaz y pues estos vídeos ayudan a dar los primeros pasos a las ventanitas y los botones. Salu2 y Feliz año***

    ResponderEliminar
    Respuestas
    1. Hola KYKEX, gracias por visitar el blog. Y me alegra mucho te sean de ayuda los tutoriales. Saludos y Feliz año para ti tabmién ;)

      Eliminar
    2. Diego, yo hice todo lo que tu hiciste y abre bien la ventana con la interfaz que tu creaste, yo use Qt versión 4.8.6 y el código que copie de aquí lo lleve a Spyder que es un editor de anaconda3 y todo bien.. La cosa es que cuando intento usar el programa no convierte nada, es decir si pongo unos grados fahrenheit con el spinBox y le doy al boton de abajo no hace nada y en el interprete de mi editor muestra errores, y si pongo algunos celsius y le doy al boton de arriba no sucede nada y de igual forma en el interprete me salen errores.. me podes ayudar?

      Eliminar
  6. PD: uso windows 8.1 y python 3.4.1 de anaconda3. Y con el python 3.4.2 normal tampoco hace las conversiones y muestra los mismos errores

    ResponderEliminar
    Respuestas
    1. Hola KYKEX, necesitaría saber cual es el error que te da, así puedo ver que es lo que está mal . Saludos

      Eliminar
    2. esperare que pasen estos días de fiesta y luego te diré para que me ayudes Diego.. Feliz Año y que Dios te Bendiga, nos leemos en enero :)

      Eliminar
    3. Hola Diego antes que nada muchas gracias por el blog!! esta muy bueno!! Estoy empezando con la programacion recien y todo esta muy bien explicado hasta para un novato total como yo, gracias!!
      Volviendo al tema yo tengo el mismo problema que KYKEX... cuando intento convertir una unidad (aprieto el boton) no pasa nada en la ventana y en la consola me da este error: Traceback (most recent call last):
      File "tempconv.py", line 22, in btn_CtoF_clicked
      self.spinFahr.setValue(int(fahr + 0.5))
      AttributeError: 'MyWindowClass' object has no attribute 'spinFahr'

      Desde ya muchas gracias!!

      Eliminar
    4. Hola Martin, gracias por visitar el blog :). ¿Cuando hiciste el diseño de la aplicación en Designer, que nombre le pusiste a el cuadro de números de Fahrenheit? Tendría que tener el nombre: spinFhar, o el que tu quieras, pero luego tienes que cambiarlo en el codigo. Si este es el error, lo mismo te puede pasar con el otro cuadro de números. Fijate eso y despues me cuentas. Saludos

      Eliminar
    5. Diego: Gracias por tu página. Creo que el problema se debe a pequeño error ortografico: Tanto en tu respuesta anterior como en el texto de la sección "Desarrollo de la aplicación", mencionas que el cuadro de números debe tener el nombre "spinFhar" mientras que en el código usas "spinFahr" (se interecambian la a y la h).

      A mi me pasó que al estar usando el Designer copié las etiquetas desde tu explicación y luego tuve los mismos problemas señalados... hasta que me puse a revisar letra por letra!

      Felicidades por tu blog!
      Gerardo Moreno

      Eliminar
    6. Hola, muchas gracias por tu aporte y tu visita en el blog. Me imagino debe ser ese el error. Me imagino que el colega ya debe haber podido resolverlo. Gracias de nuevo. Saludos

      Eliminar
  7. Ante todo felicitarte por este excelente tutorial. El error que comenta el compañero Martin Ochoa. Podría ser debido a que también se debe renombrar el ObjectName en el MainWindow y sustituir donde pone MainWindow por MyWindow, que es el que invoca tu programa en python
    Un saludo y gracias por este excelente tutorial.

    ResponderEliminar
    Respuestas
    1. Gracias Daniel por visitar y participar en el blog. Estoy esperando respuestas del compañero para ver si soluciono su problema. Saludos

      Eliminar
  8. Hola Diego, ya realice el ejemplo en windows con python 2.7.9 y PyQt4-4.11.3-gpl-Py2.7-Qt4.8.6-x32 que es lo estoy aprendiendo, y cuando se ejecuta me da el error:
    Traceback (most recent call last):
    File "C:\cabs\gpy\conversor\tempconv.py", line 7, in
    class MyWindowClass(QtGui.QMainWindow, form_class):
    File "C:\cabs\gpy\conversor\tempconv.py", line 26, in MyWindowClass
    MyWindow = MyWindowClass(None)
    NameError: name 'MyWindowClass' is not defined
    Y para el archivo *.ui lo cambie por este: form_class = uic.loadUiType("C:/cabs/gpy/conversor/tempconv.ui")[0]
    este ejemplo es a partir ya de la version 2.7 gracias

    ResponderEliminar
    Respuestas
    1. Hola Celestino. ¿El código que implementaste está tal cual lo publicado en la entrada?. Lo acabo de probar de nuevo (copiando y pegando) solo modifico el archivo .ui que quiero cargar (con su respectiva ruta) y me funciona correctamente. Por alguna razón no te esta reconociendo la clase: MyWindowClass que se define al inicio del código. Saludos

      Eliminar
  9. hola diego estoy comenzando con python y buscaba algo para aplicaiones de forma grafica, mi duda es si necesariamente siempre tengo que salirme al ide para el codigo, o hay manera de programar el boton directamente desde qtdesigner al estilo gambas o vb, disculpa mi ignorancia. att javier

    ResponderEliminar
    Respuestas
    1. Hola, Gracias por visitar el Blog. Creo que en QtDesigner no se puede hacer, pero en QTCreator si (ya viene para diseñar y programar), tengo que probarlo. Y creo que existen más ides para esto, pero no los he probado. Saludos

      Eliminar
    2. Gracias por responder, bueno en cuanto tengas informacion publicas algo si puedes de igual manera investigare y lo informare por aca, lei por encima que boa constructor hacia este trabajo pero han dejado el proyecto a un lado.

      Eliminar
  10. Muchas gracias Diego, soy nueva en python y me ayudo bastante la forma en como explicas los ejercicios.
    Saludos :)

    ResponderEliminar
    Respuestas
    1. Hola, gracias por visitarnos ;). Me alegra te sea de ayuda lo que compartimos. Cualquier duda estamos por acá.
      Saludos

      Eliminar
    2. Muy amable Diego y espero contribuir a este blog pronto con lo que estoy aprendiendo gracias a ti.

      Att. Janneth

      Eliminar
  11. Que tal.

    Estoy entrando al mundo de python aunque ya tengo bases de programacion en lenguajes viejos que hoy pocos saben que existieron...

    El asunto es que al transcribir el ejemplo... incluso desde el mismo sublime text, me marca la ultima instruccion como no reconocida:
    app.exec ()

    y al ejecutar en la terminal con python tempconv.py... me dice lo siguiente:

    Traceback (most recent call last):
    File "tempconv.py", line 37, in
    app.exe()
    AttributeError: 'QApplication' object has no attribute 'exe'

    ME puedes ayudar?

    Gracias deantemano

    Saludos

    ResponderEliminar
  12. Estoy usando el Python portable, así como el QTDesigner portable que contiene este paquete. Tengo un problema... cuando abre la interfaz gráfica y presiono en alguno de los botones me aparece el siguiente error:

    Traceback (most recent call last):
    File "C:/Users/JooOoordy/Desktop/Conversor de temperatura/tempconv.py", line 23, in btn_CtoF_clicked
    cel = float(self.editCel.text())
    ValueError: could not convert string to float:

    ResponderEliminar
    Respuestas
    1. Hola Jordi, gracias por visitar el blog. Tienes todo el código bien tabulado? Probaste el código con python instalado y no portable? Saludos

      Eliminar
  13. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  14. Amigo, se puede editar los botones, etiquetas, etc para que queden mas o menos como tu ejemplo, con sombras y bordes mas redondeados por ejemplo?

    ResponderEliminar
    Respuestas
    1. Hola Gabibgc, gracias por visitar el blog. En QtDesigner puedes diseñarlo a tu medida. Saludos

      Eliminar
  15. Amigo Una pregunta si deseo ponerle una imagen de fondo yo la creo con un label pero a la hora de ejecutar me muestra un error me podria decir que hacer

    ResponderEliminar
    Respuestas
    1. Hola, gracias por visitar y participar en el blog. Cual es el error y cual es el código? Saludos

      Eliminar
  16. Hola,tengo una consulta, tengo una función creada, que me realiza una operación y el resultado lo necesito, cuál es la mejor opción?, llamar la función desde otro file, o copiar la función en el código de la interfaz?. Es un posicionador solar guiado por trayectoria. Gracias.

    ResponderEliminar
  17. hola, muy buen tutorial, gracias por compartir tus conocimientos, aenas estoy empezando en python y qt, actualmente manejo c# pero un amigo me dijo que aprendiera python para hacer un trabajo conjunto de programacion.
    Si tienes por ejemplo otros ejemplos te lo agradeceriamos mucho.
    saludes desde Colombia.

    ResponderEliminar
    Respuestas
    1. Me alegro te sea de ayuda. Estamos a la inversa jeje yo estoy aprendiendo C#. Saludos

      Eliminar
  18. Todo esta exelente, pero como hacer para guardar una aplicacion claro con sus datos sin programas de base de datos, asi como notas de texto o algo asi o si quieres compartir el programa que hiciste en otra PC

    ResponderEliminar
    Respuestas
    1. Hola Rodolfo, como estas? Quizá esta entrada te puede ayudar: Crear ejecutable en python
      Saludos

      Eliminar
  19. Hola gracias por tu aporte y ayuda, me gustaría saber si de casualidad tienes un codigo donde trabajes con menús y subventanas me seria de gran ayuda o si me puedes decir alguna referencia..

    ResponderEliminar
  20. Hola Sareth, como estas? espero que bien? De forma gráfica no tengo nada de lo que pides, quizá publique más adelante. Pero puedes pasarte por esta entrada:Agenda en Python con Sqlite Quizá te interese.
    Saludos y gracias por visitar el blog

    ResponderEliminar
  21. Hola Diego, estoy comenzando en esto de programar en python y mi primera prueba es con tu ejemplo, pero me sale este error" ImportError: No module named 'PyQt4'
    Me aydudas a acLarar que estoy haciendo mal o que me falto?

    ResponderEliminar
    Respuestas
    1. Hola Osleby, seguramente te falta instalar el paquete de PyQt4: te lo dejo en esta entrada --> Instalar PyQt4

      Eliminar
    2. Hola Diego, Gracias por responder. Lo primero que hice fue eso, descargar Pyqt4 desde esa entrada y luego me vine a esta para arrancar con algún ejemplo, por lo que si, ya lo tengo instalado. Revisare paso a paso oootra vez.

      Eliminar
    3. Hola, corregí algunos errores, ahora aparece una pequeñita ventana que dice Python a la izquierda y mas nada, sin botones, ni etiquetas, ni spinbox ni nada... alguna sugerencia?

      Eliminar
    4. Hola, has podido avanzar? en que sistema operativo estas trabajando? hace tiempo que no toco el código jeje

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. Hola, si, eso pensé cuando vi la fecha del post, así que gracias por responder. Estoy usando W7, PyQt4 y Python 3.4. Debería usar otra versión de alguno de estos?

      Eliminar
    7. Yo utilizo python 2.7, por ahí puede venir el problema!!!

      Eliminar
    8. No tienes instalado 2.7? o en una máquina virtual? para que puedas hacer la prueba. Saludos

      Eliminar
    9. A caramba, bueno, haré esos cambios a ver si resuelven el problema. Te estaré avisando. Muchas gracias! :)

      Eliminar
    10. Este comentario ha sido eliminado por el autor.

      Eliminar
  22. Hola! hice todo tal cual el tutorial, pero me tira el siguiente error en la consola de python.
    SyntaxError: invalid syntax
    MyWindow = MyWindowClass(none)
    Traceback (most recent call last):
    File "stdin, line 1, in module
    NameError: 'MyWindowClass' si not defined.
    No se si tiene que ver algo con la version de python que tengo. Aclaro que uso en windows. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Marcos, que version utilizas? porque en el tutorial utilizo python 2.7 y si lo copio y lo pego funciona correctamente. Saludos

      Eliminar
    2. Ahh yo estaba usando la ultima version de pyQt y la ultima version de python, pero ahora desinstale esas e instale las mismas que descargas en el tuto de instalacion de python o sea la python-2.7.4 y PyQt4-4.11.4-gpl-Py2.7-Qt4.8.7, pero me sigue tirando esos errores.

      Eliminar
    3. No entiendo por que no me reconoce las clases.

      Eliminar
  23. Hola diego muchas gracias por todo lo que bienes haciendo por la comunidad de python.
    te pido un favor enorme, tengo problemas al momentode la importacion.
    primero para aclara que la importacion solo a PyQt4 no hay problema
    >>import PyQt4

    el problema radica en esta linea....
    >>> import sys

    >>> from PyQt4 import QtCore, QtGui, uic

    Traceback (most recent call last):
    File "", line 1, in

    ImportError: DLL load failed: %1 no es una aplicaci Win32 valida.


    En realidad no se que hacer, y me desespero por que no puedo avanzar tu tutorial.
    puedes comunicarte conmigo al gnavarro82@gmail.com

    Muchas gracias.

    ResponderEliminar
  24. excelente, una duda como hago para crear una interfaz pyqt que me los valores registrados en una tabla ( ya tengo la base de datos hecha) solo que al ejecutar el programa para que haga la captura, este se bloquea. muchas gracias por la atencion prestada

    ResponderEliminar
    Respuestas
    1. Hola, tienes algo de código o puedes mostrarnos el error que tienes para poder reproducirlo? Saludos y gracias por visitar el blog ;)

      Eliminar
  25. Sabes que Hermano Linux gracias por el Código fue de gran ayuda te lo agradesco solo que en el Articulo que Publicastes Tienes un herror de dedo en esta parte el " cuadro de números de la derecha (spinFhar) " al cambiar los nombres de los bototones devería ser (spinFahar) para que sea exitosa la conexión.

    ResponderEliminar

Tu comentario es importante y nos motiva a seguir escribiendo...

Entradas más recientes

© 2014 Mi diario Python. Designed by Bloggertheme9 | Distributed By Gooyaabi Templates
Powered by Blogger.