Cores e fonts no Tkinter


Durante o desenvolvimento de programas que utilizam bibliotecas gráficas, tais como o kivy, tkinter , wxPython e outras, necessitamos muitas vezes selecionar cores na tela e fonts de caracteres que criem uma experiencia agradável para o usuário do programa, Neste artigo vamos falar sobre como definimos cores e fonts no tkinter, mas o conceito vale para outras bibliotecas gráficas.

Disponibilizamos também dois scripts gráficos que facilitam em muito a escolha da cor e dos fonts durante o desenvolvimento. Eles nos permitem identificar qual é a composição RGB de uma dada cor, e avaliar a adequabilidade de um dado font por apresentar o seu nome (nome do font) na configuração gráfica correspondente ao font. Estes scripts operam em Python 3.5. O sistema operacional no qual foram desenvolvidos é o linux Mint 18.1 , e o editor utilizado foi o Geany 1.27.

Cores no Tkinter

Existem duas formas básicas de representar cores no Tkinter. Como uma string hexadecimal e através do nome da cor:

No primeiro caso você especifica um cor no padrão vermelho, verde e azul (red, green ,blue), em digitos hexadecimais, conforme os seguintes exemplos:

  • #000000 preto
  • #ff0000 vermelho
  • #00ff00 verde
  • #00ffff ciano (verde mais azul)

Ao invés de especificar em hexa, você pode utilizar o nome das cores. Existem muitos nomes, mas aquelas que estão disponíveis em todas as plataformas são:

  • “white”, branco
  • “black”, preto
  • “red”, vermelho
  • “green”, verde
  • “blue”, azul
  • “cyan”, ciano
  • “yellow”, amarelo
  • “magenta”, magenta.

Opções que tem a cor como parâmetro

O parâmetro de cor é utilizado nos widgets nas seguintes opções:

  • activebackground: Cor de fundo do widget quando o mesmo está ativo.
  • activeforeground: Cor de frente do widget quando o mesmo está ativo.
  • background (ou bg): Cor de fundo do widget.
  • disabledforeground: Cor de frente do widget quando o mesmo está desabilitado.
  • foreground (ou fg): Cor de frente do widget.
  • highlightbackground: Cor de fundo da região salientada quando o widget está no foco.
  • highlightcolor: Cor de frente da região salientada quando o widget está no foco.
  • selectbackground: Cor de fundo para o item selecionado do widget.
  • selectforeground: Cor de frente para o item selecionado do widget.

Conhecendo as cores disponíveis no seu sistema

O script python a seguir mostra as cores existentes no seu sistema. Desloque os cursores nas barras de cores e veja a cor resultante e a codificação hexa da mesma.

.mostrando as cores do seu sistema
#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  mostraCores.py
#  Copyright 2017-08-03 tavares <tavares arroba cadernodelaboratorio.com.br>
#  0.1
#  This program is free software; you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation; either version 2 of the License, or
#  (at your option) any later version.
#  
#  
#  



import tkinter as tk
import tkinter.colorchooser
from tkinter import messagebox

import sys


class myApp(object):
    
    def __init__(self, **kw):
        #insira toda a inicialização aqui 
                           
        self.root = tk.Tk()
        self.root.title("Tkinter selecionador cor")
        self.root.geometry('400x400')
        self.create_menu_bar()
        self.create_canvas_area()
        self.create_status_bar()
        
        
        color = tkinter.colorchooser.askcolor() 
               
        
    def create_status_bar(self):
        self.status = tk.Label(self.root, 
                               text="Bem vindo ao selecionador de cor do caderno de laboratório", 
                               bd=1, relief=tk.SUNKEN, anchor=tk.W)
        self.status.pack(side=tk.BOTTOM, fill=tk.X)



    def clear_status_bar(self):
        self.status.config(text="")
        self.status.update_idletasks()  
        
    def set_status_bar(self, texto):
        self.status.config(text=texto)
        self.status.update_idletasks()        

    def create_menu_bar(self):            
        menubar = tk.Menu(self.root)
        
        filemenu = tk.Menu(menubar, tearoff=0)
        filemenu.add_command(label="Exit", command=self.finaliza_software)
       
       
        menubar.add_cascade(label="File", menu=filemenu)
        
        helpmenu = tk.Menu(menubar, tearoff=0)
        helpmenu.add_command(label="About", command=self.mnu_about)
        menubar.add_cascade(label="Help", menu=helpmenu)
        
        self.root.config(menu=menubar)

    def create_canvas_area(self):
        pass
 
    def finaliza_software(self):
        self.root.quit()        
    
        
    def mnu_about(self):
        msg= "Este programa mostra as cores existentes no sistema.\n "
        msg += "Mais informações visite www.cadernodelaboratorio.com.br"
        
        messagebox.showinfo("Sobre mostraCores v 0.1", msg)
        
 
    
    def execute(self):
        self.root.mainloop()




def main(args):
    app_proc = myApp()
    app_proc.execute()
    return 0


if __name__ == '__main__':
    sys.exit(main(sys.argv))

A imagem na tela ficará similar à:

Diálogo com apresentação de cores

Fonts no Tkinter

Dependendo do sistema operacional, existem três diferentes maneiras de se especificar um font no Tkinter.

1- Através de tuplas

Você especifica o font como uma tupla cujo primeiro elemento é a família do font, seguido to tamanho em points, e opcionalmente um modificador escolhido entre os seguintes estilos disponíveis: bold (negrito) , italic (itálico) , underline (sublinhado) e overstrike (tachado).

exemplos:

  • (“Helvetica”, “28”) para especificar um font Helvetica regular 28-point.
  • (“Times”, “24”, “bold underline”) for a 24-point Times bold sublinhado.

Através de objetos “Fonts”

Para criar um objeto font você importa o módulo tkFonte e utiliza o construtor.

.criando um font
from tkinter import font

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

A lista de opções para o construtor é a seguinte:

  • family: Nome da família (string)
  • size: Altura do font em points. Caso prefira trabalhar com pixels -n.
  • weight: “bold” para negrito, ou “normal” se não.
  • slant: “italic” para itálico, “roman” for normal
  • underline: 1 para texto sublinhado, 0 para normal.
  • overstrike: 1 para texto tachado, 0 para normal.

Exemplo:

helv24 = tkFont.Font(family=”Helvetica”,size=246,weight=”bold”,undeline= 1)

obs: Helvetica e Arial são o mesmo font.

Para o caso de você estiver operando em um sistema operacional com X Windows:

Você pode usar qualquer nome de font disponível no seu sistema. Para saber quais são os fontes disponíveis utilize o programa sfontsel. Mas observe que uma fonte específica pode não estar  disponível em todos os sistemas. Se a fonte não estiver disponível, o Tkinter irá procurar encontrar a mais próxima, e se tiver nada parecido, vai utilizar o font “default” do sistema.

Um script python/tkinter para lhe informar os fonts disponíveis

O script python apresentado a seguir mostra quais são os fonts disponíveis no seu sistema:

.listando os fonts disponíveis

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  mostraFonts.py
#  Copyright 2017-08-03 tavares <tavares arroba cadernodelaboratorio.com.br>
#  0.1
#  This program is free software; you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation; either version 2 of the License, or
#  (at your option) any later version.
#  
#  



import tkinter as tk
from tkinter import font
from tkinter import messagebox

import sys


class myApp(object):
    
    def __init__(self, **kw):
        #insira toda a inicialização aqui 
                           
        self.root = tk.Tk()
        self.root.title("Mostra Fonts")
        self.root.geometry('400x600')
        self.create_menu_bar()
        self.create_canvas_area()
        self.create_status_bar()
        
        #codigo para apresentação dos fonts disponiveis no sistema
        fonts=list(font.families())
        fonts.sort()

        pagTexto = tk.Text(self.root, height=50, width=50)
        pagTexto.pack()

        posicaoFont=0
        
        for item in fonts:
            strPos= str (posicaoFont)
            
            posicaoFont= posicaoFont+1
            
            pagTexto.tag_config(strPos, font=(item, 14))
            pagTexto.insert(tk.END, item, strPos)
            pagTexto.insert(tk.END,"\n")
        
        
        
        
    def create_status_bar(self):
        self.status = tk.Label(self.root, 
                               text="Bem vindo ao visualizador de fonts do caderno de laboratório", 
                               bd=1, relief=tk.SUNKEN, anchor=tk.W)
        self.status.pack(side=tk.BOTTOM, fill=tk.X)



    def clear_status_bar(self):
        self.status.config(text="")
        self.status.update_idletasks()  
        
    def set_status_bar(self, texto):
        self.status.config(text=texto)
        self.status.update_idletasks()        

    def create_menu_bar(self):            
        menubar = tk.Menu(self.root)
        
        filemenu = tk.Menu(menubar, tearoff=0)
        filemenu.add_command(label="Exit", command=self.finaliza_software)
       
       
        menubar.add_cascade(label="File", menu=filemenu)
        
        helpmenu = tk.Menu(menubar, tearoff=0)
        helpmenu.add_command(label="About", command=self.mnu_about)
        menubar.add_cascade(label="Help", menu=helpmenu)
        
        self.root.config(menu=menubar)

    def create_canvas_area(self):
        pass
 
    def finaliza_software(self):
        self.root.quit()        
    
        
    def mnu_about(self):
        msg= "Este programa mostra os fonts existentes no sistema \n "
        msg += "Mais informações visite www.cadernodelaboratorio.com.br"
        
        messagebox.showinfo("Sobre mostraFonts v 0.1", msg)
 
    
    def execute(self):
        self.root.mainloop()




def main(args):
    app_proc = myApp()
    app_proc.execute()
    return 0


if __name__ == '__main__':
    sys.exit(main(sys.argv))

Executando este script uma tela similar a esta será apresentada:

Mostrando os fonts instalados no seu sistema

Até a próxima!

Deixe um comentário