viernes, 25 de marzo de 2022

El gestor de Geometría Place.

Imagen de entrada


El gestor de Geometría Place.

Este gestor se basa en colocar los diferentes widgets en base a sus coordenadas en pixeles dentro de la ventana. Es como si la ventana fuese un papel reglado y colocásemos los diferentes elementos poniendo las coordenadas de cada uno en el papel. Aunque colocar los elementos es sencillo, el tema lleva bastante trabajo porque hay que tener en cuenta que cada elemento tiene un alto y ancho determinado en pixeles y tenemos que colocarlos en la ventana especificando una coordenada (x e y) en pixeles.

Como punto de referencia tenemos que sabe que la posición (0, 0) esta en la parte superior izquierda de la ventana. 

También tenemos que saber, que como estamos especificando las posiciones en pixeles dentro de la ventana,  la posición es absoluta, por lo que si posteriormente modificamos el tamaño de la misma los widgets no se adaptarán a esta modificación, y se quedarán en el mismo sitio.

Para trabajar con este gestor nos van a venir bien dos aplicaciones.

La primera es una regla de pantalla: Kruler o Screen Ruler están bien. Kruler se puede instalar directamente desde la tienda de aplicaciones de Ubuntu por ejemplo o también desde el terminal con

$ sudo apt-get install kruler

Pero tiene la desventaja que te si utilizas Gnome como yo en Ubuntu, te instala el gestor de ventanas de KDE que son casi 500gb.

mientras que screenruler solo aparece para instalar desde terminal aunque es bastante, bastante más ligera:

$ sudo apt-get install screenruler

Como su nombre indica se tratan de eso, de una regla de pantalla con la que podemos medir distancias o tamaños para posicionar los widgets que queramos utilizar.

aplicación kruler


La segunda aunque no se necesita estrictamente para diseñar los widgets de las ventanas si que nos puede venir bien para saber cual es un color concreto de un elemento que ya está creado y que nosotros queramos replicar. El programa se llama Gpick y es muy fácil de utilizar simplemente se pasa el puntero del ratón por la zona que nos interesa saber su color y ya está. Además tiene muchas más opciones para la combinación de colores.



Dicho lo anterior vamos a la materia.

Tkinter.

Como en los casos anteriores la aplicación es básicamente igual en cuanto al diseño de los widgets.

from tkinter import *
from tkinter import ttk, font
import getpass

#GESTOR DE GEOMETRIA (PLACE)

class Aplicacion():
    def __init__(self):
        self.raiz=Tk()
        
        # Define la dimensión de la ventana
        
        self.raiz.geometry("430x200")
        
        # Establece que no se puede cambiar el tamaño de la
        # ventana.
        
        self.raiz.resizable(0,0)
        self.raiz.title("Acceso")
        self.fuente = font.Font(weight='bold')
        
        self.etiq1 = ttk.Label(self.raiz, text="Usuario:", font=self.fuente)
        self.etiq2 = ttk.Label(self.raiz, text="Contraseña:", font=self.fuente)
        
        # Declara una variable de cadena que se asigna a
        # la opción 'textvariable' de un widget 'Label' para
        # mostrar mensajes en la ventana. Se asigna el color
        # azul a la opción 'foreground' para el mensaje.
        
        self.mensa = StringVar()
        self.etiq3 = ttk.Label(self.raiz, textvariable=self.mensa, font=self.fuente, foreground='blue')
        
        self.usuario = StringVar()
        self.clave = StringVar()
        self.usuario.set(getpass.getuser())
        self.ctext1 = ttk.Entry(self.raiz, textvariable=self.usuario, width=30)
        self.ctext2 = ttk.Entry(self.raiz, textvariable=self.clave, width=30, show="*")
        self.separ1 = ttk.Separator(self.raiz,orient=HORIZONTAL)
        self.boton1 = ttk.Button(self.raiz,text="Aceptar",padding=(5,5), command=self.aceptar)
        self.boton2 = ttk.Button(self.raiz, text="Cancelar", padding=(5,5), command=quit)       


Lo que varía esta ahora cuando colocamos esos elementos dentro de la ventana. Veamos el código.

              self.etiq1.place(x=30, y=40)
        self.etiq2.place(x=30, y=80)
        
        # Nueva etiqueta para mostrar contraseña correcta o incorrecta.
        self.etiq3.place(x=150, y=120)
        
        self.ctext1.place(x=150, y=42)
        self.ctext2.place(x=150, y=82)
        self.separ1.place(x=5, y=145, bordermode=OUTSIDE, height=10, width=420)
        self.boton1.place(x=170, y=160)
        self.boton2.place(x=290, y=160)
        self.ctext2.focus_set()


Como se ve, los widgets se colocan en la ventana poniendo los valores de x e y en pixeles. Por ejemplo la self.etiq1.place(x=30, y=40) quiere decir que colocamos esa etiqueta a 30 pixeles a la derecha del borde superior izquierdo de la ventana y 40 pixeles por debajo. Y así con el resto de los elementos.

El bordermode=outside que figura en el separador significa la forma en que se cuenta las coordenadas. Por ejemplo, si como es el caso se utiliza "outside" las coordenadas x e y se cuentan desde la esquina superior izquierda del contenedor pero incluyendo el borde de ese elemento, mientras que "inside" cuenta las coordenadas sin incluirlo. 


parámetro bordermode

Ahora vamos a pararnos un poco más a explicar el concepto de evento.  Un evento es algo que sucede en el programa y que desencadena una reacción. Por ejemplo, vamos a  preparar el programa para que cuando hagamos clic con el botón izquierdo del ratón en la caja de la contraseña (evento) se borre un mensaje informativo que crearemos, se borre el contenido de esta caja y se ponga de nuevo el foco en la misma.  

Esto se consigue con el método bind() que asociará el evento (hacer clic con el botón izquierdo del ratón en la caja de entrada de la contraseña) expresado como <Button-1> con el método 'self.borrar_mensa' que borra el mensaje y la contraseña y devuelve el control al mismo. 

Otros ejemplos de acciones que se pueden capturar:
        <double-button-1>, <buttonrelease-1>, <enter>, <leave>,
        <focusin>, <focusout>, <return>, <shift-up>, <key-f10>, 
        <key-space>, <key-print>, <keypress-h> etc.


              self.ctext2.bind('<Button-1>', self.borrar_mensa)
        self.raiz.mainloop()

        # Declara método para validar la contraseña y mostrar
        # un mensaje en la propia ventana, utilizando la etiqueta
        # 'self.mensa'. Cuando la contraseña es correcta se
        # asigna el color azul a la etiqueta 'self.etiq3' y
        # cuando es incorrecta el color rojo. Para ello. se emplea
        # el método 'configure()' que permite cambiar los valores
        # de las opciones de los widgets.
    
    def aceptar(self):
        if self.clave.get() == 'herodoto':
            self.etiq3.configure(foreground='blue')
            self.mensa.set("Acceso permitido")
        else:
            self.etiq3.configure(foreground='red')
            self.mensa.set("Acceso denegado")
            
    # Declara un método para borrar el mensaje anterior y
    # la caja de entrada de la contraseña.
    
    def borrar_mensa(self, evento):
        self.clave.set("")
        self.mensa.set("")
        
def main():
    mi_app = Aplicacion()
    return 0

if __name__=='__main__':
    main()

Puede encontrar el código aquí el código de gestor de geometría Place con Tkinter.

Guizero. 

En Guizero se usa por defecto el método Pack y también podemos usar el gestor Grid. Sin embargo no existe un método de Guizero puro para posicionar las ventanas usando el gestor Place. Por eso, si lo queremos utilizar con widgets propios de Guizero, tendremos que hacer dos cosas.

- SUPER IMPORTANTE: para que luego nos funcione la geometría Place, al diseñar el widget hay que poner el parámetro visible=False en todos los elementos de Guizero que queramos posicionar. OBLIGATORIO.

- Debemos posicionar posteriormente cada widget, al igual que hacemos en Tkinter. Esto es lógico puesto que estamos usando el posicionamiento de Tkinter para colocar elementos de Guizero. Pero solo debemos hacerlo con esta instrucción y de la siguiente forma, el resto igual:

<nombre_asignado_al_widget>.tk.place(x,y)

from guizero import *
''' SUPER IMPORTANTE: PARA QUE FUNCIONE LA GEOMETRIA PLACE HAY QUE PONER visible=False en todos
los WIDGETS DE GUIZERO QUE QUERAMOS POSICIONAR. ES COMO SI DIJERAN OCULTALOS QUE YA LOS PONGO YO'''
''' LOS WIDGET IMPORTADOS DE TKINTER.TTK EL METODO SE PONE COMO EN TKINTER EJ SEPAR1.PLACE() Y NO SEPAR1.TK.PLACE'''
from tkinter import HORIZONTAL, OUTSIDE
from tkinter.ttk import Separator
from getpass import getuser

def aceptar():
    if ctext2.value == 'herodoto':
        print('Acceso Permitido')
        print('Usuario:    ', ctext1.value)
        print('Contraseña: ', ctext2.value)
        ctext2.value="" #Borra el contenido del 2º cuadro de texto
        etiq3.text_color="blue"
        etiq3.value="Acceso Permitido"
        #quit() #Sale del programa
    else:
        print('Acceso denegado')
        etiq3.text_color="red"
        etiq3.value="Acceso Denegado"
                
def haz_esto():
    print('haz esto')
    ctext2.value=""
    etiq3.value=""

usuario = getuser()


raiz = App(title='Acceso', width=430, height=200)
raiz.tk.resizable(0,0) # Para inmovilizar la ventana equivale a resizable(width=False,height=False)

etiq1 = Text(raiz, text="Usuario:", visible=False)
etiq1.tk.place(x=30, y=40)
ctext1 = TextBox(raiz, width=30, visible=False)
ctext1.tk.place(x=150, y=42)
ctext1.value = usuario
etiq2 = Text(raiz, text="Contraseña:", visible=False)
etiq2.tk.place(x=30, y=80)
ctext2 = TextBox(raiz, width=30, visible=False)
ctext2.tk.place(x=150, y=80)
# Permite ocultar el texto tecleado True=* otro carácter se pone y ya está.
ctext2.hide_text="#"
ctext2.when_clicked= haz_esto


etiq3=Text(raiz, text="", visible=False)
etiq3.tk.place(x=150, y=120)

separ1 = Separator(raiz.tk, orient=HORIZONTAL)
separ1.place(x=5, y=145, bordermode=OUTSIDE, height=10, width=420)
boton1 = PushButton(raiz, text="Aceptar", visible=False, padx=10, pady=5, command=aceptar)
boton1.tk.place(x=170, y=160)
boton2 = PushButton(raiz, text="Cancelar", visible=False, padx=10, pady=5, command=quit)
boton2.tk.place(x=290, y=160)

ctext2.focus()
raiz.display()

Puede encontrar aquí el código de gestor de geometría Place en Guizero.

Sin embargo lo que hemos visto anteriormente con este gestor tiene un PROBLEMA. Si permitimos redimensionar la ventana y por tanto cambiamos su tamaño (ancho y alto), los elementos quedarán descolocados ya que están definidos con respecto a la esquina superior izquierda.


ventana redimensionada con método PLACE


Otra forma de utilizar el gestor de ventanas place es, en vez de especificar su posición en pixeles respecto a la esquina superior izquierda, indicar donde se sitúan los elementos en base a un porcentaje sobre el ancho y alto de la ventana que los contiene.

Veámoslo en detalle con la siguiente aplicación.

La aplicación nos permite descargar desde una dirección web que nosotros queramos un texto plano y contar el número de veces que sale cada palabra en el texto. Como ejemplo vamos a usar el Quijote e iremos paso por paso...

progama usando place pero con referencias relativas.


Comenzaremos con el diseño de la aplicación para luego implementar su parte lógica.

Para que la aplicación funcione correctamente necesitamos tener instaladas estas librerías:

- Guizero para el diseño.  (pip3 install guizero)
- request para obtener los datos de la página web donde obtengamos la información.
(pip3 install request)
- html2txt para transformar los datos recibidos como html en un archivo de texto plano.
(pip3 install html2txt)

Aunque aparece en la imagen de arriba, el link donde se encuentra alojado "EL Quijote" dentro de la página del proyecto Gutenberg es:

https://www.gutenberg.org/cache/epub/2000/pg2000.txt

aunque puedes probar con cualquier otro libro o texto siempre que este en formato txt.

Comenzamos con el diseño de la ventana principal.

Tiene que tener el siguiente aspecto:

ventana principal de la aplicación

from guizero import *

raiz = App(title='Contador de palabras en la red')
# Tamaño y posición de la ventana.
raiz.tk.geometry("700x400+350+150")
# Ventana no modificable.
raiz.tk.resizable(0, 0)

raiz.display()


Comenzamos importando el módulo Guizero con todo lo que contiene. Después creamos la ventana principal a la que llamamos app y le ponemos el título usando el parámetro "title". Una vez hecho esto especificamos  el tamaño y posición a través de un objeto interno de Tkinter.  Esto como ya vimos se realiza añadiendo el sufijo ".tk" al objeto creado en Guizero lo que nos hace posible usar las propiedades y métodos de Tkinter. Ya que no todo lo que se puede hacer con Tkinter esta implementado en Guizero, pues este esta pensado para hacer aplicaciones de forma más fácil y rápida. 

Con raiz.tk.geometry() definimos la geometría de la ventana, la cual tendrá unas dimensiones de 700 pixeles de ancho (eje X) por 400 pixeles de alto (eje Y). Estará separada de la parte izquierda de la pantalla en 350 pixeles (+x) y de la parte superior en 150 px (+Y)

root.geometry

Como no quiero que el usuario modifique el tamaño de la ventana uso raiz.tk.resizable(0,0) para no permitir cambiar ni el ancho, ni el largo. Vemos que los dos valores son iguales a 0. Si en lugar de 0 pusiésemos un 1 permitiríamos modificar el parámetro en cuestión, ya sea el ancho, el largo o ambos.

Para crear el cuadro de texto donde el usuario introducirá la url desde donde descargar el texto usamos:

raiz.tk.resizable(

# Primer cuadro de texto (titulo + cuadro)
t1 = Text(raiz, text = "Dirección:", visible=False)
t1.tk.place(relx=.03, rely=0.05)
url = TextBox(raiz, width = 50, text = '', visible=False)
url.tk.place(relx=.15, rely=0.05)

raiz.display()

A t1 la asignamos un texto donde irá el título del cuadro "Dirección:". Acordaos de poner visible=False porque luego usaremos una propiedad de tkinter y sino, no funciona. La novedad es que usaremos relx y rely para poner la posición relativa del elemento con respecto al alto y ancho de la ventana.

Con t1.tk.place(relx=.03, rely=.05) estamos diciendo al interprete que coloque este elemento a un 3% del tamaño de la ventana desde la izquierda y a un 5% desde arriba. Es decir si la ventana de ancho tiene 700 pixeles lo estamos colocando a 21 pixeles desde la izquierda (700 * 0.03) y a 20 pixeles desde arriba (400 * 5%). 

Para definir la caja donde pondremos la url usamos un cuadro de texto con una anchura de 50 y vacío, sin ningún texto asignado.

Debe quedar algo así:

insertando cuadro de url

Vamos con el botón que usaremos para descargar los datos de la url que hayamos seleccionado.  Como al pulsar el botón se ejecutará la función que descargue los datos, vamos a crear una función llamada pasar_datos(), de momento sin contenido, que será la que llame el botón al ser pulsado. La parte lógica la haremos después.

from guizero import *

def pasar_datos():
    pass

raiz = App(title='Contador de palabras en la red')
# Tamaño y posición de la ventana.
raiz.tk.geometry("700x400+350+150")
# Ventana no modificable.
raiz.tk.resizable(0, 0)

# Primer cuadro de texto (titulo + cuadro)
t1 = Text(raiz, text = "Dirección:", visible=False)
t1.tk.place(relx=.03, rely=0.05)
url = TextBox(raiz, width = 50, text = '', visible=False)
url.tk.place(relx=.15, rely=0.05)
# Botón descargar.
but1 = PushButton(raiz, text='Descargar', visible=False,
                  pady=3, command=pasar_datos)
but1.tk.place(relx=0.75, rely=0.045)

raiz.display()

Como haremos en todos los widgets hemos usado también posiciones relativas respecto al tamaño de la ventana (raiz). Con "pady=3" establecemos un poco de separación entre el texto y el borde del botón. En la práctica esto hace que el botón sea un poco más alto (eje de las y)

añadiendo botón descargar


El texto que aparecerá debajo de lo anterior para describir lo que irá en las cajas donde se mostrará el texto descargado y la tabla de frecuencias será "Texto: " y "Tabla de Frecuencias: ". Su código es el que sigue:

but1.tk.place(relx=0.75, rely=0.045)

# Texto encima de las cajas.
t2 = Text(raiz, text='Texto: ', visible=False)
t2.tk.place(relx=.03, rely=0.15)
t3 = Text(raiz, text='Tabla de frecuencias:', visible=False)
t3.tk.place(relx=.65, rely=0.15)

raiz.display()

Y para finalizar con el diseño ponemos unas cajas de texto donde aparecerá a la izquierda el texto que hayamos descargado y a la derecha se mostrará el resultado con las palabras que más se repiten:

t3.tk.place(relx=.65, rely=0.15)
t4 = TextBox(raiz, text='Prueba', height=15,
             width=50, multiline=True, visible=False, scrollbar=True)
t4.tk.place(relx=.03, rely=0.25)
t5 = TextBox(raiz, text='Palabra    |   Frecuencia', height=15,
             width=25, multiline=True, visible=False)
t5.tk.place(relx=.65, rely=0.25)

raiz.display()

Con el parámetro "multiline=True" permitimos que la caja que contendrá el texto pueda albergar múltiples líneas.

El resultado final será el diseño completo de la ventana de la aplicación.

diseño aplicación terminada


Vamos ahora con la parte lógica. Para no mezclar el código con el del archivo de diseño creamos un nuevo archivo. Yo lo llamaré "modquijote.py". Empezamos importando todas las bibliotecas necesarias que comentamos la empezar el capítulo.  Creamos también la función que descargará la página web y la convertirá en texto plano.

modquijote.py: Parte lógica del programa

import requests
import html2text
import re

def descargar_pagina(url):
    '''
    Lee una pagina web y la convierte en texto plano
    '''
    try:
        page = requests.get(url)
        if page.status_code != 200:
            return "Algo ha salido mal"
        content = html2text.html2text(page.text)
        return content
    except Exception:
        print("error")

A la función descarga_pagina(url) le pasaremos la dirección de una página web que en nuestro caso puede ser "https://www.gutenberg.org/cache/epub/2000/pg2000.txt".

El objeto page recogerá la página web a través de "request.get(url)". Pero claro, este objeto tiene muchas propiedades. La propiedad text de este objeto (page.text) lo que hace básicamente es devolver el contenido de page en formato unicode. Esto luego se lo pasamos como argumento a html2text.html2text() para terminar de obtener todo el contenido en texto plano. Si todo ha ido como debiera el page.status_code debe ser igual a 200 y devolverá el texto con el que trabajaremos, pero si no lo es, la función devolverá el mensaje "Algo ha salido mal".

En el archivo de diseño, cuando escribimos el botón "Descargar", le asignamos la función pasar_datos como parámetro.  Como te puedes imaginar será la encargada de pasar este texto dentro de Textbox (t4) que definimos anteriormente. 

Ya que estamos con la parte lógica vamos ya a dejar hecha la función que contará las palabras. Se llamará contar_palabras y le tendremos que pasar el texto plano como argumento. No voy a entrar en detalles de lo que hace pero básicamente usa una expresión regular para quitar los signo de puntuación (.!¡?¿ etc) y luego pasar todo a minúsculas y vamos guardando la frecuencia con la que aparecen las palabras en un diccionario (frec). Terminamos ordenándolo para ver las palabras más frecuentes.

El módulo final quedaría tal que así:

modquijote.py: Parte lógica del programa

import requests
import html2text
import re

def descargar_pagina(url):
    '''
    Lee una pagina web y la convierte en texto plano
    '''
    try:
        page = requests.get(url)
        if page.status_code != 200:
            return "Algo ha salido mal"
        content = html2text.html2text(page.text)
        return content
    except Exception:
        print("error")

def contar_palabras (texto) :
    '''
    Calcula la frecuencia de aparicion de cada palabra en un texto y genera una
    lista de pares (palabra, frecuencia) ordenada de mayor a menor frecuencia.
    '''
    frec={}
    texto = re.sub('[^\w\s]+', '', texto) # eliminamos signos de puntuación
    for w in texto.lower().split():
        if len(w)>3:
            frec[w]=frec.get(w, 0)+1
    # Ordenamos el diccionario por sus valores, no por sus claves. Y de mayor a menor.
    frec_sorted = sorted(frec.items(), key=lambda x: x [1] , reverse=True)   
    return frec_sorted

Solo nos queda encajar todo esto en nuestra ventana. Para ello importamos el módulo "modquijote" en nuestro archivo principal:

from guizero import *
# Importamos todo el módulo con las funciones auxiliares creadas.
import modquijote as qj

raiz = App(title='Contador de palabras en la red')
# Tamaño y posición de la ventana.

La jugada es la siguiente. El usuario introducirá la dirección de la página web a descargar en el Cuadro de texto creado para tal fin, que es el cuadro de texto que llamamos url. Al pulsar en el botón "Descargar" se lanzará un evento y se llamará a la función pasar_datos() que ya teniamos definida. Vamos a completarla:

from guizero import *
import modquijote as qj

max_frec = 20  # numero máximo de palabras a mostrar en la tabla frecuencias


def pasar_datos():
    texto = qj.descargar_pagina(url.value)
    t4.value = texto
    frec_items = qj.contar_palabras(texto)
    for k, v in frec_items[:max_frec]:
        show=f"{k:17} {v}"
        t5.append(show)


raiz = App(title='Contador de palabras en la red')

En la variable texto guardamos el texto plano que nos retorna la función descarga_página() al que hemos pasado como argumento el valor que había en la caja de texto "url" usando la propiedad "value" (url.value). Posteriormente este texto lo ponemos dentro de la caja de texto multilinea t4 usando su propiedad "value". 

t4.value = texto

Para finalizar desempaquetamos el diccionario que contiene las palabras junto con sus frecuencias ya ordenadas de mayor a  menor. Pero como no nos interesan todas, solo recorremos las 20 primeras (max_frecuc). Para terminar las añadimos a la caja de texto "t5", una por una usando append()  y formateando la palabra metiéndola dentro de una caja de 17 posiciones {k:17} para que quede bien.

Puedes encontrar los archivos en el enlace Contar_Palabras.


No hay comentarios:

Publicar un comentario