Saltar al contenido

Curso de creación de GUIs con Qt5 y Python. Capítulo 04: Icono de la ventana

Etiquetas:

Con la base establecida vamos a empezar a hacer que el GUI sea más nuestro mientras seguimos en nuestro viaje por el mundo de las aplicaciones de escritorio usando Python y Qt. En este capítulo describo como añadir un icono a la ventana principal del GUI.

Índice:

[Los materiales para este capítulo los podéis descargar de aquí]

[INSTALACIÓN] Si todavía no has pasado por el inicio del curso, donde explico cómo poner a punto todo, ahora es un buen momento para hacerlo y después podrás seguir con esta nueva receta.

Añadiendo un icono a la ventana

En esta pequeña receta vamos a hacer uso de QIcon contenido en el módulo QtGui. La documentación para esta clase la podéis encontrar aquí.

Como comento, haremos uso de QIcon para añadir iconos y vamos a empezar por añadir un icono a la ventana para que nuestra aplicación se vea bonita y lustrosa frente al resto de aplicaciones con las que estemos trabajando en nuestro escritorio.

Empecemos a escribir algo de código. Vamos a partir del código que vimos en el capítulo 02.

'''
Curso de creación de GUIs con Qt5 y Python

Author: Kiko Correoso
Website: pybonacci.org 
Licencia: MIT
'''

import os
os.environ['QT_API'] = 'pyside2'
import sys

from qtpy.QtWidgets import QApplication, QWidget

if __name__ == '__main__':

    app = QApplication(sys.argv)

    w = QWidget()
    w.resize(500, 300)
    w.move(0, 0)
    w.setWindowTitle('Hola, Mundo')
    w.show()

    sys.exit(app.exec_())

Si no sabes lo que hace el código anterior visita el capítulo 02 para poder entender lo que está pasando.

Al código anterior le vamos a añadir unas pocas líneas más que nos permitirán tener un icono para la ventana como el que vemos a continuación (el logo de Pybonacci arriba a la izquierda de la ventana):

Aviso, dependiendo del entorno de ventanas en el que os encontréis igual no veis el icono. Por ejemplo, en mi caso cuando uso Cinnamon con Linux Mint no me salen los iconos de las ventanas (los iconos de arriba a la izquierda de la ventana, no el resto).

Para conseguir lo anterior vamos a añadir el código correspondiente donde las nuevas líneas que no vimos en el capítulo 02 contienen un comentario de la siguiente forma ## NUEVA LÍNEA:

'''
Curso de creación de GUIs con Qt5 y Python

Author: Kiko Correoso
Website: pybonacci.org 
Licencia: MIT
'''

import os
os.environ['QT_API'] = 'pyside2'
import sys
from pathlib import Path ## NUEVA LÍNEA

from qtpy.QtWidgets import QApplication, QWidget
from qtpy.QtGui import QIcon ## NUEVA LÍNEA

if __name__ == '__main__':

    ruta_icono = Path('.', 'imgs', 'pybofractal.png') ## NUEVA LÍNEA
    app = QApplication(sys.argv)

    w = QWidget()
    w.resize(500, 300)
    w.move(0, 0)
    w.setWindowTitle('Hola, Icono')
    w.setWindowIcon(QIcon(str(ruta_icono))) ## NUEVA LÍNEA
    w.show()

    sys.exit(app.exec_())

Al código inicial le hemos añadido cuatro líneas nuevas que he destacado metiendo el comentario ## NUEVA LÍNEA al final del código de cada nueva línea.

Vamos a comentar estas cuatro líneas:

from pathlib import Path

Sin misterios, vamos a usar pathlib para trabajar con rutas en nuestro sistema de ficheros. Esta biblioteca está disponible en Python desde la versión 3.4 y como no es el objeto de este tutorial hablar sobre pathlib puedes visitar este otro post que ya escribimos hace algún tiempo.

from qtpy.QtGui import QIcon

Tampoco hay mucho misterio en esta línea. Importamos la clase QIcon que usaremos más tarde. Si no usas qtpy podríamos importar esto usando lo siguiente:

from PyQt5.QtGui import QIcon  ## Para PyQt5
from PySide2.QtGui import QIcon  ## Para PySide2
ruta_icono = Path('.', 'imgs', 'pybofractal.png')

En esta línea definimos la ruta a la imagen que queremos usar como icono. En mi caso, estoy usando una imagen que se llama pybofractal.png que está contenida en una carpeta llamada imgs/ en el repositorio. Podéis usar la imagen que queráis o la que estoy usando yo. Simplemente, debes añadir la ruta correcta a tu imagen.

w.setWindowIcon(QIcon(str(ruta_icono)))

En esta línea, a la instancia de QWidget le pasamos el objeto QIcon con la ruta de la imagen que queremos usar mediante el método setWindowIcon.

Y eso sería todo…

Si guardamos el anterior código en un fichero que se llame, por ejemplo, main00.py, lo podríamos ejecutar desde una terminal o Anaconda Prompt (si estás en Windows) haciendo lo siguiente. Primero activamos el entorno virtual que ya deberías tener instalado:

conda activate pyboqt

Y luego, en la misma línea de comandos, primero vamos a la carpeta donde hemos guardado el fichero main00.py:

cd /ruta/a/carpeta/ # Si estás en linux o Mac

o

cd C:\ruta\a\carpeta\ # Si estás en Windows

Y cuando ya estemos en la carpeta debemos tener el fichero main00.py y una carpeta imgs con la imagen que usaremos de icono y que hayamos incluido correctamente en el código. Para ejecutar nuestra aplicación usamos:

python main00.py

Si has descargado el material desde el repositorio deberías tener el programa ya listo en la carpeta apps/04-IconoVentana/ del mismo. Puedes ir hasta esa carpeta y (con el entorno virtual activado) puedes ejecutar la línea anterior (python main00.py).

Refactorizando

Pero, en el código anterior estamos creando todo de forma un poco desorganizada. Vamos a empezar a usar clases para crear nuestros GUIs y que estén un poco mejor organizados. Por tanto, el código anterior podría quedar de la siguiente forma:

'''
Curso de creación de GUIs con Qt5 y Python

Author: Kiko Correoso
Website: pybonacci.org 
Licencia: MIT
'''

import os
os.environ['QT_API'] = 'pyside2'
import sys
from pathlib import Path

from qtpy.QtWidgets import QApplication, QWidget
from qtpy.QtGui import QIcon

class MiVentana(QWidget):
    def __init__(self):
        super().__init__()
        self._create_ui()

    def _create_ui(self):
        self.resize(500, 300)
        self.move(0, 0)
        self.setWindowTitle('Hola, Icono refactorizado')
        ruta_icono = Path('.', 'imgs', 'pybofractal.png')
        self.setWindowIcon(QIcon(str(ruta_icono)))
        self.show()

if __name__ == '__main__':

    app = QApplication(sys.argv)
    w = MiVentana()
    sys.exit(app.exec_())

Esto es muy parecido a lo anterior pero ahora estamos creando nuestra propia clase que hereda de QWidget. Esa clase contendrá la ventana principal y alguna configuración de la misma. Dentro de esta clase delegamos la configuración de la interfaz de usuario al método _create_ui. El código que contiene este método ya lo hemos comentado anteriormente. Finalmente, creamos el bucle de eventos (eventloop) e instanciamos nuestras nueva clase a continuación de declarar el bucle de eventos (penúltima línea del código anterior). Y, finalmente, ejecutamos la aplicación para que se vea en pantalla (última línea del código).

De momento, el código era corto y entendible (main00.py) pero es mejor que empecemos a organizarlo mejor como hemos hecho en esta parte. Hemos creado un método,_create_ui , al que se le delega la configuración y creación de la interfaz de usuario.

El nuevo código lo podéis guardar en el fichero main01.py y guardar ese fichero en el mismo sitio en el que habéis guardado main00.py. Una vez guardado, desde la línea de comandos en la misma carpeta donde se encuentra el fichero y con el entorno virtual activado podéis hacer:

python main01.py

Y veréis la misma ventana que anteriormente.

Ahora sí que hemos terminado por hoy.

¿Nos vemos en el siguiente capítulo?

P.D.: En este capítulo hemos hecho poca cosa pero hemos empezado a organizar un poco mejor el código. Si en ese paso no entiendes algo, por favor, usa los comentarios para preguntar tus dudas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

34 + = forty four

Pybonacci