Aula 16: Interface gráfica

Já passamos por diversas aulas até agora e fizemos muitas coisas interessantes, porém todos os resultados foram apresentados no terminal, que é uma tela preto e branco e sem graça. Você já viu algum programa comercial utilizando essa interface? Nesta aula veremos como criar interfaces gráficas, para interagir com o usuário de uma forma mais amigável e atrativa.

Imagem apresentando alguma interface simples feita no TKinter

Como falamos na nossa primeira aula sobre Python, felizmente existem diversas bibliotecas e APIs que possuem funções prontas, facilitando nossa vida na hora de programar. A TKinter é a biblioteca padrão do Python no desenvolvimento de interfaces gráficas e será a biblioteca utilizada ao criarmos nossas interfaces neste guia. Além de ser bastante completa é largamente utilizada, mesmo porque já vem pré-instalada no Python (podemos dar um descanso ao programa pip).

Não é possível utilizar a interface gráfica na Raspberry Pi via SSH, irá ocorrer um erro. Você pode rodar esses códigos direto na placa ou mesmo no seu computador, o procedimento é o mesmo.

Janelas

A primeira coisa que vamos ver na biblioteca é a criação de janelas, que são onde serão colocadas os itens que irão compor a interface. Para explicar melhor o funcionamento vamos utilizar um código bem simples que cria uma janela, experimente alterar os parâmetros deste código e ver o que acontece.

# Basta importar a biblioteca, nao precisa instalar
from tkinter import *

#criamos a janela utilizando a funcao Tk
janela = Tk()

#Alteramos o titulo da janela
janela.title("Minha janela")

#cor do fundo da janela "background"
janela["bg"] = "blue"

#largura e altura da janela
#LarguraxAltura+Dist.daEsquerda+distTopo (pixels)
janela.geometry("600x300+400+100")

#Mantem a janela aberta ate ser mandado fechar
janela.mainloop()

# Apos fechar a janela o programa continua
print("Fechou a janela")

O primeiro comando no programa é importar a biblioteca, sem a necessidade de instalar previamente. A forma como a biblioteca é importada é diferente, dessa forma não é necessário escrever “tkinter.funcao” em cada função da biblioteca que chamamos. Após isso, utilizando o comando “Tk()” criamos uma janela que chamamos no código de “janela”, bem criativo o nome. Alteramos o título da janela com  “janela.title(“Minha janela”)“, que é o que aparece na barra superior. Com “janela[“bg”]” definimos a cor da janela, escolhemos “blue“, mas poderia ser passado um código RGB na hora de definir uma cor qualquer, por exemplo “janela[“bg”] = “#56A9DE“.

O comando “janela.geometry(“600×300+400+100”)” altera as dimensões e posição da janela criada, o dado é passado no formato “AxL+De+Dt“, onde A é a altura, L é a largura De é a distância da esquerda e Dt a distância do topo do vídeo. Esses valores são passados em pixels, experimente alterá-los e veja como muda.

A fim de executar a janela que montamos, precisamos do comando “janela.mainloop()” ao final.

Com a janela ‘montada’ podemos colocar componentes nela, como textos, botões e outras entradas dos usuários.

Textos

Quando precisamos apresentar textos na tela, utilizamos outra função da biblioteca TKinter, chamada “Label“. Dentro do código, basta adicionar o seguinte trecho antes do comando “janela.mainloop()“:

#Aqui adicionamos o texto
texto = Label(janela, text = "Sou um texto", bg = "red")
texto.place(x = 150, y = 170) # O atributo place para posicionar

Mais uma vez, com muita criatividade, chamamos o texto de “texto“. A função “Label“, usada para criá-lo, recebe a janela em que o texto está. Já na criação do texto alteramos as características “text” e “bg“. Outra forma a cor do texto seria fazer como fizemos com a janela, colocando “texto[“bg”] = “red”” em outra linha. Essas características podem ser alteradas a qualquer momento no código.

Repare que foi utilizado o “place” para posicionar o texto, existem outros posicionadores, também chamados de gerenciadores de layout. A coordenada X define a distância do limite esquerdo da janela, enquanto Y é a distância do topo da janela, ambos em pixels. O canto superior esquerdo da janela seria a coordenada “(x = 0, y = 0)“.

Botões

A criação e posicionamento do botão são muito parecidas com a do texto, neste caso utiliza-se a função “Button“.

# Aqui adicionamos o botao
botao = Button(janela, text = "Ok", bg = "yellow")
botao.place(x = 250, y = 100)

Com isso o resultado é:

Com isso criamos o botão, outros atributos (também válidos para o texto) além de “text” e “bg” poderíamos alterar: “font” , mexe na fonte do texto exibido; “fg“, muda a cor do texto;  “bd“, modifica o tamanho da borda “width“, muda a largura do elemento, entre outros.