julio 30, 2024 330ohms

¿Cómo crear interfaces GUI con Python? - 330ohms

Programar en Python es bastante más sencillo que otros lenguajes de programación y Raspberry Pi ha aprovechado esta ventaja para promover la mayoría de sus tutoriales usando este lenguaje. Sin embargo, muchas veces hace falta una interfaz que muestre algo más que texto en una terminal. En este tutorial te enseñaremos como puedes crear tus propias Graphical User Interfaces (GUI) para aprovechar mucho mejor la potencia de Python.

guizero

Para crear las GUIs necesitamos instalar una librería llamada guizero. Esta librería es una herramienta para que los principiantes puedan crear fácilmente interfaces gráficas. El objetivo es poner los elementos más importantes para crear una interfaz, como son botones, texto o detectar el puntero del mouse.

Para instalar la librería usaremos el gestor de paquetes pip que viene instalado por defecto en los sistemas Raspberry Pi OS. Ejecutemos entonces el siguiente comando desde la terminal:

sudo pip3 install guizero

Primer ejercicio

Ahora podemos ir al editor de Geanny y empezar a crear nuestro primer ejemplo, que llamaremos gui_test.py. Para empezar el programa, haremos nuestro primer import, con la siguiente linea de código:

from guizero import App

Ahora en la siguiente instrucción, vamos a darle un titulo a la ventana de nuestro programa. Para mostrar nuestro resultado final usaremos app.display().

app = App(title="Hello world") app.display()

Con estas simples lineas lograremos mostrar nuestra primer interfaz. Ahora le damos a ejecutar y debe aparecer una ventana de este estilo

Añadiendo widgets de texto

Ahora veremos como añadir algunos elementos comunes al área de trabajo de la ventana, como texto, sliders, cajas para ingresar texto, botones e imágenes. Para agregar estos elementos, debes enlistarlos en el import que hicimos al principio del programa, así:

from guizero import App, Text

Esto nos permitirá manipular elementos de texto. Para crear un mensaje de bienvenida necesitamos indicarle un objeto de tipo App, que en este caso se llama app, seguido de un mensaje a mostrar. Todos estos elementos debemos agregarlos antes de ejecutar app.display() para que puedan verse. El comando quedaría así:

welcome_message = Text(app, text="Welcome to my app")

No olvides que ya llevamos cuatro líneas de código! El resultado sería el siguiente al ejecutar el programa:

Ahora intenta personalizar un poco el formato con estas opciones:

welcome_message = Text(app, text="Welcome to my app", size=40, font="Times New Roman", color="lightblue")

Por si algo salió mal este es el programa completo.

from guizero import App, Text  app = App(title="Hello world")  welcome_message = Text(app, text="Welcome to my app") app.display()

TextBox y PushButton

Para llamar a una caja de texto e ingresar tu propio mensaje puedes incluir en el import un TextBox y un PushButton para dar el evento que actualice el texto en pantalla. Entonces, para combinar todo lo que llevamos, usa el siguiente código:

from guizero import App, Text, PushButton  def say_my_name():     welcome_message.value = my_name.value  app = App(title="Hello world") welcome_message = Text(app, text="Welcome to my app", size=40, font="Times New Roman", color="lightblue") update_text = PushButton(app, command=say_my_name, text="Display my name")  app.display()

El resultado del programa anterior es que podrás ingresar un texto (en este caso tu nombre) en la caja, y cuando presiones el botón aparecerá en el lugar del mensaje de bienvenida.

Slider e Imagen

Vamos a añadir dos widgets más que te servirán para controlar aún más tu programa y para que puedas desplegar otro tipo de información al usuario. Se trata del Slider y un elemento Image, los cuales podrás agregar desde el import con los mismos nombres.

from guizero import App, Text, PushButton  def say_my_name():     welcome_message.value = my_name.value  def change_text_size(slider_value):     welcome_message.size = slider_value  app = App(title="Hello world") welcome_message = Text(app, text="Welcome to my app", size=40, font="Times New Roman", color="lightblue") update_text = PushButton(app, command=say_my_name, text="Display my name")  text_size = Slider(app, command=change_text_size, start=10, end=80) my_cat = Picture(app, image="cat.gif") #Recuerda cambiarlo por el archivo que vas a usar  app.display()