Crear una interfaz gráfica de usuario de Python con PyQt Designer

Un flujo de trabajo efectivo de Python + PyQt Designer

Antes de comenzar, se asume que tiene conocimientos intermedios a avanzados de Python. Esto incluye tipos de datos básicos (especialmente diccionarios), sentencias y funciones. El conocimiento sobre Programación Orientada a Objetos (OOP) sería útil, pero no necesario.

Este será un tutorial rápido para crear una interfaz gráfica de usuario de Python usando una combinación de la biblioteca PyQt de Python y el Diseñador. Designer es un programa que viene con PyQt y le permite crear la interfaz gráfica de usuario visualmente. Usaremos solo Diseñador y un editor de texto / IDE de Python. ¡La interfaz gráfica de Python no necesita ser complicada!

Veamos cómo crear un flujo de trabajo de interfaz gráfica de usuario de Python con estas características:

Un archivo de configuración para ajustes de usuario personalizados
Múltiples ventanas dentro del programa
Agregar funciones a botones, cuadros de entrada y otros elementos en los que se puede hacer clic
Imágenes y logotipos

Esto es realmente todo lo que necesita para una interfaz gráfica de usuario de Python simple pero robusta. En este tutorial vamos a crear un convertidor de divisas simple.

Usaremos Python 3.6 en este tutorial y yo crearemos este tutorial en un entorno virtual usando Windows 10. En este tutorial solo necesitaremos instalar PyQt5 para la interfaz gráfica de usuario y las solicitudes para nuestro proyecto de ejemplo. Esto se hará usando pip. Es importante tener en cuenta que Designer no viene con la instalación pip PyQt5 y debe instalarse por separado. El bloque de código a continuación muestra los comandos que necesita escribir:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Output of the pip install process for PyQt5

Once it is installed, just search for «Designer” in your computer and it should pop up.

Datos de Moneda

podemos obtener gratis Forex datos de ExchangeRate-API que convenientemente se tiene un API que se pueden utilizar. La API devuelve un objeto JSON con la información de moneda que se puede navegar utilizando un diccionario Python. Los tipos de cambio se basan en la moneda maestra que especifique.

En el siguiente ejemplo, queremos ver el Forex utilizando el dólar estadounidense (USD) como moneda maestra.

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}

Crear la interfaz gráfica de usuario

Ahora viene la parte divertida. ¡Creando la interfaz gráfica de usuario!

Cuando abra Qt Designer, se abrirá este mensaje. Quiero comenzar con un lienzo vacío, así que elegiré » Diálogo sin botones «y luego haré clic en»Crear».

Ahora usted tiene un vacío de la ventana de diálogo para trabajar con. Puede comenzar a agregar widgets utilizando la lista de la izquierda. Puede agregar estos widgets arrastrándolos y soltándolos en la ventana de la interfaz gráfica de usuario. Si bien hay muchos widgets, en este tutorial solo cubriré los siguientes widgets:

Etiquetas
Botón pulsador
Edición de línea
Cuadro combinado

El Cuadro Combinado también se conoce como lista desplegable y puede rellenar esta lista haciendo doble clic en el objeto del Cuadro combinado en Diseñador, le dará una ventana donde puede agregar elementos. En este caso, agregaremos las monedas que estamos utilizando. Esto le permitirá al usuario decidir qué moneda desea usar como moneda de referencia.

Rellenar el widget haciendo clic en el verde en el botón de abajo a la izquierda

Cuando usted comience a agregar estos widgets usted debe asegurarse de que están denominado correctamente de modo que usted pueda referirse a ellos fácilmente en el código de Python. Esto se hace usando el objectName en el Editor de propiedades a la derecha. Por lo general, solo añado su función al nombre existente, como labelTitle o lineEditLocationDetails. Este estilo de nomenclatura me ayuda a recordar con qué tipo de objeto GUI estoy trabajando cuando escribo el código Python.

objectName (resaltado en rojo) será el nombre de la variable, cuando trabajamos con el código de Python

el Estilo de cómo usted quiere que, pero para aquellos que siguiendo este tutorial crear una interfaz gráfica de usuario que se parece a este de abajo:

flotantes «Logo» el texto es un marcador de posición para una imagen con la que vamos a cargar. ¡Eso se explicará más adelante!

Qt Designer to Python

Guarde el archivo de interfaz de usuario en la carpeta del proyecto como «mainDialog.ui», me gusta crear una subcarpeta llamada » ui » y luego guardarla allí para que podamos mantener la carpeta del proyecto organizada.

Una vez que se guarda, tenemos que convertirlo en algo que Python realmente entienda. Con el símbolo del sistema, vaya a la subcarpeta de interfaz de usuario. Si también está haciendo esto en un entorno virtual, asegúrese de que también está en su entorno virtual que contiene la instalación de PyQt5.

Escriba este código para navegar a la carpeta que contiene el archivo de interfaz de usuario y convertirlo .archivo de interfaz de usuario a un archivo. py:

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py

En la raíz de la carpeta del proyecto, cree un archivo de Python llamado «main.py». Introduzca este código:

Ejecute el main.py archivo usando su intérprete de Python. Felicidades! Ahora Python puede ejecutar el código y su interfaz gráfica de usuario aparecerá. Explicaré las partes importantes del código hasta ahora:

Línea 5: Estamos importando la mainDialog.py archivo desde dentro de la subcarpeta de interfaz de usuario. Utilizo un alias «mainDialog» para facilitar el nombramiento.
Línea 10: Esta clase contiene todas las funciones relacionadas con su ventana mainDialog que acaba de crear. El primer argumento llama al objeto QDialog, que es el tipo de GUI que estamos utilizando. El segundo argumento se basa en el alias que declaramos y es la clase Ui_Dialog dentro del archivo Python que se generó a partir del .conversión de archivos de interfaz de usuario
Línea 12: La función _ _ init _ _ es importante porque es el código que desea ejecutar cuando se inicia el programa. Así que aquí es donde el ser.setupUi (self) viene porque desea que la interfaz de usuario se ejecute al abrir el programa. Pondremos cosas como cargar archivos de configuración y funcionalidad de botones aquí porque queremos que funcionen tan pronto como ejecutemos el software.
Línea 20: Este es el código que ejecuta y abre la interfaz gráfica de usuario.

Agregar funciones a los Botones y objetos

Ahora tenemos nuestra hermosa interfaz gráfica de usuario. ¿Cómo lo hacemos hacer Forex? Agreguemos la función para cargar las últimas tasas de Forex que mostré al principio de este post. Luego, pongamos el código para conectar los objetos al código Python.

Al intentar conectarse a los objetos que creó en Designer, debe comenzar con el «auto».”. Por lo tanto, si su objeto en PyQt Designer se llamaba labelTitle, llamará al objeto escribiendo self.Título de la etiqueta. Si su objeto se llamó lineEditInputDirectory, lo llamará escribiendo self.Dirección de corte de línea y así sucesivamente.

Echa un vistazo al gist de Github y a la explicación a continuación:

Línea 16: Esta función se llama cuando el usuario hace clic en el botón para cargar tarifas de Forex. El objeto en sí mismo es el yo.Pulsador de carga, pero adjuntamos funcionalidad cuando el usuario hace clic en ella agregando .clic.conectar(). Esta función tiene algunos matices específicos. El argumento a favor .connect() solo acepta la función sin paréntesis, por lo que en este caso, self.velocidad de carga. Si necesita agregar argumentos debido a los requisitos de la función Python, necesita usar una lambda, consulte el bloque de código a continuación:

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...))

Línea 19: .currentText() obtiene la cadena actual del objeto ComboBox que será nuestra moneda de referencia. Por lo tanto, si el usuario selecciona USD, devolverá las tasas de cambio relativas a 1 USD. Esta cadena se agrega a la URL que se utiliza para conectarse a la API en la siguiente línea.

Líneas 24-26: Se utilizan para cargar nuestros datos en objetos LineEdit. Lo usamos .setText() para modificar el texto de los objetos LineEdit. Solo acepta cadenas, por lo que los números de la API deben convertirse en cadenas.

Últimas cotizaciones de Forex cuando se compara con 1 Peso Filipino

Adición de un Archivo de Configuración

Esta parte es un poco difícil, y es donde tu existentes Python conocimiento será útil. En esta sección cubriremos las siguientes características:

Abrir una nueva ventana dentro del programa
Crear y usar un archivo de configuración

Ahora que tenemos un programa de trabajo, digamos que, por ejemplo, diferentes personas en su departamento tienen diferentes necesidades y todos trabajan con monedas diferentes. Podemos hacer sus vidas más fáciles agregando un archivo de configuración para que no tengan que usar el cuadro desplegable cada vez. Usando un archivo de configuración podemos guardar su configuración única y luego cargarla cuando se inicie el programa.

Aquí es donde entra en juego el botón» Config». Vamos a crear una nueva ventana para que el usuario modifique su configuración. Hacer esto nos permite mantener la ventana principal limpia y organizada.

Guardar esto en la interfaz de usuario de la carpeta como configDialog.interfaz de usuario y, como hicimos anteriormente en este tutorial, conviértala usando el mismo comando pyuic5 que se ve en el bloque de código a continuación:

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

Ahora, así es como debería verse el código actualizado a continuación. Las explicaciones para las nuevas adiciones de código se encuentran debajo de esta lista de Github:

Línea 6: Agregamos la ventana de diálogo de configuración a través de esta instrucción de importación
Línea 10-11: Nuevas instrucciones de importación que son relevantes para tener un buen flujo de trabajo de archivos de configuración. pickle y so vienen con su entorno Python predeterminado y no necesitan instalaciones adicionales.
Línea 13-14: La ubicación del archivo de configuración se usa a lo largo de todo el script en todas las clases, por lo que lo declaramos como global y lo hacemos todo en mayúsculas, ya que es una constante.
Línea 17: Esta clase contiene toda la información relevante para la ventana de configuración. Si desea llamar a objetos en el archivo de interfaz de configuración que creó, se recomienda que la llamada se realice en esta clase, no en la clase MainDialog.
Línea 23: Cargamos el archivo de configuración existente. Hacemos esto para que podamos mostrar cuál es la configuración actual al usuario.
Línea 26: Usando el archivo de configuración cargado, establecemos el texto del cuadro combinado a la configuración actual.
Línea 33: Cuando guardamos la configuración, queremos actualizar el diccionario almacenado en self.config antes de escribir el archivo de configuración.
Línea 39: Esto cierra la ventana de parámetros de configuración.
Línea 48-54: Esta es la lógica al cargar el archivo de configuración en la ventana de diálogo principal. Por cualquier razón, el archivo de configuración puede perderse y luego el programa no se iniciará debido a errores. Si falta el archivo de configuración, cree un archivo de configuración con los parámetros predeterminados para que el usuario pueda iniciar el programa y modificar los parámetros más adelante.
Línea 56: Cargamos la configuración personalizada y configuramos el cuadro combinado en la moneda preferida del usuario.
Línea 62-63: Inicia la ventana de parámetros de configuración. Esto se basa en el nombre del nombre de clase del diálogo de configuración. En este caso, la clase se llama ConfigParameters.
Línea 65-68: Después de que el usuario haya terminado de configurar sus ajustes y la ventana se cierre. El programa se actualizará y cargará el archivo de configuración de nuevo antes de actualizar el cuadro combinado moneda de referencia.

Este flujo de trabajo permite al usuario guardar sus configuraciones únicas y el programa seguirá funcionando si falta el archivo de configuración. Usted quiere tratar de dar cuenta de cada problema que su programa encontrará.

Agregar imágenes

Ahora que tiene un programa completamente funcional, agreguemos los toques finales: un logotipo. Si bien puede haber un archivo de recursos PyQt donde pueda almacenar imágenes, prefiero cargar imágenes usando etiquetas y mapas de píxeles. Esto es muy rápido.

Línea 56-58: Cargamos el logotipo que guardé en la carpeta de interfaz de usuario. Luego configuré el objeto labelLogo para cargar el mapa de píxeles y establecí el contenido para escalar al tamaño del objeto labelLogo.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Pasé incontables horas buscando en google estas cosas e incluso tutoriales pagados en Udemy fueron un poco inútiles.