Tkinter - de marciano a humano - sección 5 - Atributos estándar

Sección 5 - Atributos estándar

Antes de mirar los widgets, echemos un vistazo a cómo se especifican algunos de sus atributos comunes, como tamaños, colores y fuentes.

• Cada widget tiene un conjunto de opciones que afectan su apariencia y comportamiento: atributos tales como fuentes, colores, tamaños, etiquetas de texto, etc.
• Puede especificar opciones al llamar al constructor del widget utilizando argumentos de palabras clave como text='PANIC!' o height=20.
• Después de haber creado un widget, puede cambiar cualquier opción con posterioridad simplemente utilizando el método .config() del widget y puede recuperar la configuración actual de cualquier opción utilizando el método .cget() del widget. (No quiero adelantarme pero puede consultar la Sección 26).
  

5.1. Dimensiones

Se pueden describir varias longitudes, anchos y otras dimensiones de widgets en muchas unidades diferentes. 

• Si establece una dimensión en un entero, se supone que está en píxeles.
• Puede especificar unidades estableciendo una dimensión en una cadena que contenga un número seguido de:

Tabla 3: Unidades dimensionales
c	centímetros
i	pulgadas
m	milímetros
p	puntos de la impresora (aproximadamente 1/72”)

5.2. El sistema de coordenadas

Como en la mayoría de los sistemas de visualización contemporáneos, el origen de cada sistema de coordenadas está en su esquina superior izquierda, con la coordenada x aumentando hacia la derecha y la coordenada y aumentando hacia la parte inferior:

La unidad base es el píxel, con el píxel superior izquierdo con coordenadas (0,0). Las coordenadas que especifique como enteros siempre se expresan en píxeles, pero cualquier coordenada puede especificarse como una cantidad acotada; consulte la Sección 5.1, “Dimensiones” (p. 9) .

5.3. Colores

Hay dos formas generales de especificar colores en Tkinter. Puede usar una cadena que especifique la proporción de rojo, verde y azul en dígitos hexadecimales:

• #rgb ................ Cuatro bits por color
• #rrggbb ........... Ocho bits por color
• #rrrgggbbb ...... Doce bits por color

Por ejemplo, '#fff' es blanco, '#000000' es negro, '#000fff000' es verde puro y '#00ffff' es cian puro (verde más azul).

• También puede usar cualquier nombre de color estándar definido localmente. Los colores 'white' (Blanco), 'black' (Negro), 'red' (Rojo), 'green' (Verde), 'blue' (Azul), 'cyan' (Cian), 'yellow' (Amarillo) y  'magenta' (Magenta) siempre estarán disponibles, aunque otros nombres pueden llegar a funcionar dependiendo de su instalación local, el problema es que cuando distribuya el programa el que reciba su programa deberá tener esos colores disponibles en su instalación.

5.4. Fuentes tipográficas

Dependiendo de su plataforma, puede haber hasta tres formas de especificar el estilo de letra.

• Como una tupla cuyo primer elemento es la familia de fuentes, seguido de un tamaño (en puntos si es positivo, en píxeles si es negativa), seguido opcionalmente por una cadena que contiene uno o más de los modificadores de estilo bold (negrita), italic (cursiva), underline (subrayado), y overstrike.

Ejemplos: ('Helvetica', '16') para un Helvética regular de 16 puntos, ('Times', '24', 'bold italic') para un Times de 24 puntos en negrita y cursiva. Para una fuente en negrita Times de 20 píxeles, use ('Times', -20, 'bold').

Puede crear un "objeto de fuente" importando el módulo tkFont y utilizando su constructor de clase Font:

import tkFont

font=tkFont.Font (option , ...)

donde las opciones incluyen: 

• family (familia): El nombre de la familia de fuentes como una cadena.  
• size (tamaño): La altura de la fuente como un entero en puntos. Para obtener una fuente de n píxeles de altura, use -n. 
• weight (peso): 'bold' para negrita, 'normal' para peso regular. 
• slant (sesgado): 'italic' para cursiva, 'roman' para no sellado. 
• underline (subrayado): 1 para texto subrayado, 0 para normal. 
• overstrike (sobrecarga): 1 para texto sobrecargado, 0 para normal.

Por ejemplo, para obtener una negrita cursiva Helvetica de 36 puntos:

helv36=tkFont.Font(family='Helvetica', size=36, weight='bold')

• Si está ejecutando bajo el sistema X Window, puede usar cualquiera de los nombres de fuente X. Por ejemplo, la fuente llamada '- * - lucidatypewriter-medium-r - * - * - * - 140 - * - * - * - * - * - *' es una buena fuente de ancho fijo para uso en pantalla. Use el programa xfontsel para ayudarlo a seleccionar fuentes agradables.

Para obtener una lista de todas las familias de fuentes disponibles en su plataforma, llame a esta función:

tkFont.families()

El valor de retorno es una lista de cadenas.

Nota: Debe crear su ventana raíz antes de llamar a esta función.

Estos métodos se definen en todos los objetos Font:

.actual(option=None): Si no pasa argumentos, obtiene un diccionario de los atributos reales de la fuente, que pueden diferir de los que solicitó. Para recuperar el valor de un atributo, pase su nombre como argumento. 

.cget(option): Devuelve el valor de la opción dada. 

.configure(option, ...): Use este método para cambiar una o más opciones en una fuente. Por ejemplo, si tiene un objeto Font llamado titleFont, si llama titleFont.configure (family='times', size=18), esa fuente cambiará a 18pt Times y cualquier widget que use esa fuente también cambiará. 

.Copy(): Devuelve una copia de un objeto Font. 

.measure(text): Pase a este método una cadena, y devolverá el número de píxeles de ancho que esa cadena tomará en la fuente.

Advertencia: algunos caracteres inclinados pueden extenderse fuera de esta área 

.metrics(option): Si llama a este método sin argumentos, devuelve un diccionario de todas las métricas de fuente. Puede restablecer el valor de una sola métrica pasando su nombre como argumento. Las métricas incluyen:

• assent: Número de píxeles de altura entre la línea base y la parte superior del ascendente más alto. 
• descent: Número de píxeles de altura entre la línea de base y la parte inferior del ascendente más bajo.
• fixed: Este valor es 0 para una fuente de ancho variable y 1 para una fuente monoespaciada.
• linespace: Número de píxeles de altura total. Este es el líder del conjunto de tipos sólido en la fuente dada.

5.5. Anchors

El módulo Tkinter define una serie de constantes de anclaje que puede usar para controlar dónde se colocan los elementos en relación con su contexto. Por ejemplo, las anclas (anchors) pueden especificar dónde se encuentra un widget dentro de un marco cuando éste es más grande que el widget.

Estas constantes se dan como puntos cardinales, donde el norte está arriba y el oeste está a la izquierda. Pedimos disculpas a nuestros lectores del hemisferio sur por este chovinismo del hemisferio norte.

Las constantes de anclaje se muestran en este diagrama:

Por ejemplo, si crea un widget pequeño dentro de un marco grande y usa la opción anchor=tk.SE, el widget se colocará en la esquina inferior derecha del marco. Si usó anchor=tk.N, el widget se centraría a lo largo del borde superior.

Los anclajes también se utilizan para definir dónde se coloca el texto en relación con un punto de referencia. Por ejemplo, si usa tk.CENTER como un ancla de texto, el texto se centrará horizontal y verticalmente alrededor del punto de referencia. anchor=tk.NW posicionará el texto de modo que el punto de referencia coincida con la esquina noroeste (superior izquierda) del cuadro que contiene el texto. anchor=tk.W centrará el texto verticalmente alrededor del punto de referencia, con el borde izquierdo del cuadro de texto pasando por ese punto, y así sucesivamente.

5.6. Relief Styles

El estilo de relieve de un widget se refiere a ciertos efectos 3D simulados alrededor del exterior del widget. Aquí hay una captura de pantalla de una fila de botones que muestran todos los estilos de relieve posibles:

La anchura de estas fronteras depende de borderwidth que es una de las opciones del widget. El gráfico de arriba muestra cómo se ven con un borde de 5 píxeles, el ancho del borde predeterminado es 2.

5.7. Mapas de bits (Bitmaps)

Para las opciones de mapa de bits en widgets, se garantiza que estos mapas de bits estarán disponibles:



El gráfico de arriba muestra widgets de botones con los mapas de bits estándar. De izquierda a derecha, son 'error', 'gray75', 'gray50', 'gray25', 'gray12', 'hourglass', 'info', 'questhead', 'question', y 'warning'.

Puedes usar tus propios mapas de bits. Cualquier archivo en formato .xbm (mapa de bits X) funcionará. En lugar de un nombre de mapa de bits estándar, use la cadena '@' seguida de la ruta del archivo .xbm.

5.8 Cursores

Hay diferentes cursores disponibles, en la siguiente lista se muestra el nombre y gráfico correspondiente, el gráfico exacto puede variar según su sistema operativo.

Tabla 4. Valores de la opción de cursor
arrow based_arrow_up bogosity bottom_right_corner bottom_tee center_ptr clock cross crosshair dot middlebutton pirate question_arrow right_side rightbutton sailboat sb_h_double_arrow sb_right_arrow sb_v_double_arrow doublé_arrow draft_small exchange gobbler hand1 heart iron_cross left_side leftbutton lr_angle sizing spraycan target top_left_arrow top_right_corner top_tee ul_angle ur_angle xterm	based_arrow_down boat bottom_left_corner bottom_side box_spiral circle coffee_mug cross_reverse diamond_cross man pencil plus right_ptr right_tee rtl_logo sb_down_arrow sb_left_arrow sb_up_arrow dotbox draft_large draped_box fleur gumby hand2 icon left_ptr lefr_tee ll_angle shuttle spider star tcross top_left_corner top_side trek umbrella watch x_cursor

 

5.9. Imágenes

Existen tres métodos generales para mostrar imágenes gráficas en su aplicación Tkinter.

• Para mostrar imágenes de mapa de bits (dos colores) en el formato .xbm, consulte la Sección 5.9.1. 
• Para mostrar imágenes a todo color en formato .gif, .pgm o .ppm, consulte la Sección 5.9.2. 
• La Biblioteca de imágenes de Python (PIL) admite imágenes en una variedad mucho más amplia de formatos (Consulte el documento complementario del autor para obtener documentación de PIL).

5.9.1. La clase BitmapImage 

Para mostrar una imagen de dos colores en formato .xbm, necesitará este constructor: 
tk.BitmapImage(file=f[, background=b][, foreground=c])

donde f es el nombre del archivo de imagen .xbm.

Normalmente, los bits de primer plano (1) en la imagen se mostrarán como píxeles negros, y los bits de fondo (0) en la imagen serán transparentes. Para cambiar este comportamiento, use la opción opcional background=b para establecer el fondo en color b, y la opción opcional foreground=c para establecer el primer plano en color c. Para la especificación del color, consulte la Sección 5.3.

Este constructor devuelve un valor que puede usarse en cualquier lugar donde Tkinter espere una imagen. Por ejemplo, para mostrar una imagen como etiqueta, use un widget de etiqueta (consulte la Sección 12) y proporcione el objeto BitmapImage como el valor de la opción de imagen:

logo=tk.BitmapImage('logo.xbm', foreground='red')

Label(image=logo).grid()

5.9.2. La clase PhotoImage

Para mostrar una imagen en color en formato .gif, .pgm o .ppm, necesitará este constructor:

tk.PhotoImage(file=f)

donde f es el nombre del archivo de imagen. El constructor devuelve un valor que puede usarse en cualquier lugar donde Tkinter espere una imagen. 

5.10. Geometry Strings (Cadenas de geometría)

Una cadena de geometría es una forma estándar de describir el tamaño y la ubicación de una ventana de nivel superior en un escritorio.

Una cadena de geometría tiene esta forma general:

'wxh±x±y'

dónde:

• Las partes “w” y “h” dan el ancho y alto de la ventana en píxeles. Están separados por el caracter “x”. 
• Si la siguiente parte tiene la forma “+x”, especifica que el lado izquierdo de la ventana debe ser “x” píxeles del lado izquierdo del escritorio. Si tiene la forma “-x”, el lado derecho de la ventana es “x” píxeles del lado derecho del escritorio. 
• Si la siguiente parte tiene la forma “+y”, especifica que la parte superior de la ventana debe estar “y” píxeles debajo de la parte superior del escritorio. Si tiene la forma “-y”, la parte inferior de la ventana estará “y” píxeles arriba del borde inferior del escritorio.

Por ejemplo, una ventana creada con geometry='120x50-0+20' tendría 120 píxeles de ancho por 50 píxeles de alto, y su esquina superior derecha estará a lo largo del borde derecho del escritorio y 20 píxeles debajo del borde superior.

5.11. Nombres de ventanas

El término ventana describe un área rectangular en el escritorio.

• Una ventana de nivel superior o raíz es una ventana que tiene una existencia independiente bajo el administrador de ventanas. Cuenta con las decoraciones del administrador de ventanas y se puede mover y cambiar de tamaño de forma independiente. Su aplicación puede usar cualquier cantidad de ventanas de nivel superior. 
• El término "ventana" también se aplica a cualquier widget que sea parte de una ventana de nivel superior. Tkinter nombra todas estas ventanas usando un nombre de ruta de ventana jerárquica. 
• El nombre de la ventana raíz es '.'. 
• Las ventanas secundarias tienen nombres de la forma '.n', donde n es un número entero en forma de cadena. Por ejemplo, una ventana llamada '.135932060' es hija de la ventana raíz ('.'). 
• Las ventanas secundarias dentro de las ventanas secundarias tienen nombres de la forma 'p.n' donde p es el nombre de la ventana principal y n es algún número entero. Por ejemplo, una ventana llamada '.135932060.137304468' tiene la ventana principal '.135932060', por lo que es un nieto de la ventana raíz. 
• El nombre relativo de una ventana es la parte pasada el último '.' en el nombre del camino. Para continuar con el ejemplo anterior, la ventana del nieto tiene un nombre relativo '137304468'.

Para obtener el nombre de ruta para un widget w, use str(w), consulte también la Sección 26 para conocer los métodos que puede usar para operar en los nombres de ventanas, especialmente los métodos .winfo_name, .winfo_parent y .winfo_pathname. 

5.12 Limitar y unir estilos

Para una representación agradable y efectiva de diagramas, a veces es una buena idea prestar atención a los estilos de cap y join.

1. El estilo de límite de una línea (cap stile) es la forma del final de la línea. Los estilos son:
• tk.BUTT: el final de la línea se corta cuadrado en una línea que pasa por el punto final.
• tk.PROJECTING: el final de la línea se corta al cuadrado, pero la línea de corte se proyecta más allá del punto final una distancia igual a la mitad del ancho de la línea.
• tk.ROUND: el final describe un semicírculo centrado en el punto final.
2. El estilo de unión (join style) describe la forma en la que dos segmentos de línea se encuentran en ángulo.
• tk.ROUND: la unión es un círculo centrado en el punto donde se encuentran los segmentos de línea adyacentes.
• tk.BEVEL: se dibuja una faceta plana en un ángulo intermedio entre los ángulos de las líneas adyacentes.
• tk.MITER: los bordes de los segmentos de línea adyacentes se siguen encontrando en un punto agudo.

Esta ilustración muestra cómo funcionan las opciones de tapa y unión de Tkinter con una línea hecha de dos segmentos de línea conectados. Los pequeños círculos rojos muestran la ubicación de los puntos que definen esta línea.
 

 

 

5.13. Patrones de tablero

Varios widgets le permiten especificar un esquema discontinuo. Las opciones de guión y compensación de guión le brindan un control preciso sobre el patrón exacto de los guiones.

dash(guión)

Esta opción se especifica como una tupla de enteros. El primer entero especifica cuántos píxeles se deben dibujar. El segundo entero especifica cuántos píxeles se deben omitir antes de comenzar a dibujar nuevamente, y así sucesivamente. Cuando se agotan todos los enteros de la tupla, se reutilizan en el mismo orden hasta que se completa el borde.

Por ejemplo, dash=(3,5) produce guiones alternos de 3 píxeles separados por espacios de 5 píxeles. Un valor de dash=(7,1,1,1) produce un patrón de guión y puntos, con el guión siete veces más largo que el punto o los espacios alrededor del punto. Un valor de dash=(5,) produce guiones alternos de cinco píxeles y espacios de cinco píxeles.

dashoff

Para comenzar el patrón de guión en un punto de ciclo diferente en lugar de al principio, use una opción de dashoff=n, donde n es el número de píxeles que se omiten al comienzo del patrón.

Por ejemplo, para las opciones dash=(5, 1, 2, 1) y dash=3, el primer patrón producido será: 2 encendido, 1 apagado, 2 encendido y 1 apagado. Los patrones posteriores serán 5 encendidos, 1 apagado, 2 encendidos y 1 apagado. Aquí hay una captura de pantalla de una línea dibujada con esta combinación de opciones:

 

 

5.14. Matching stipple patterns(Patrones de punteado)

Esto puede parecer un punto de estilo increíblemente exigente, pero si dibuja un gráfico que tiene dos objetos con patrones punteados, un verdadero profesional se asegurará de que los patrones se alineen a lo largo de su límite.

Aquí hay un ejemplo, la captura de pantalla de la izquierda muestra dos cuadrados adyacentes de 100 × 100 punteados con el patrón ‘gray12’, pero el cuadrado de la derecha está desplazado verticalmente por un píxel. La línea negra corta en el centro de la figura se dibuja a lo largo del límite de las dos figuras.

 

La segunda captura de pantalla es la misma, excepto que los dos cuadrados de 100 × 100 tienen sus patrones punteados alineados.

En la práctica, esto surge en dos situaciones. La alineación de grandes áreas punteadas se controla mediante una opción denominada desplazamiento. Para figuras con contornos punteados, la opción de desplazamiento del contorno controla su alineación. Ambas opciones tienen valores de una de estas formas:

'x,y': desplaza los patrones de punteado por este valor x e y relativo a la ventana de nivel superior o al origen del lienzo.

'#x,y': Para los objetos en un lienzo, utiliza el desplazamiento x e y en relación con la ventana de nivel superior.

tk.NE, tk.SE, tk.SW, tk.NW: alinee una esquina del patrón de punteado con la esquina correspondiente del objeto contenedor. Por ejemplo, tk.NE significa que la esquina superior izquierda del patrón de punteado coincide con la esquina superior izquierda del área a puntear.

tk.N, tk.E, tk.S, tk.W: alinee el patrón de punteado con el centro de un lado del objeto que lo contiene. Por ejemplo, tk.E significa que el centro del patrón de punteado coincidirá con el centro del lado derecho del área a puntear.

tk.CENTER: alinee el centro del patrón de punteado con el centro del objeto que lo contiene.

Hasta el próximo jueves, salud y saludos!

Mauricio José Tobares