Arquivo de Programação

DrawingArea – Desenhando na tela com PyGTK

Posted in gtk, Linux, Programação, pygtk, Python with tags , , , , , , on 15 / junho / 2008 by medeubranco

Nos artigos anteriores sobre PyGTK, eu apresentei quatro widgets básicos:

  • gtk.Window – uma janela
  • gtk.VBox – um container para acomodar os widgets
  • gtk.Button – botão
  • gtk.Label – uma etiqueta para texto

Muitos outros widgets básicos não foram nem mencionados, como o gtk.Entry (caixa de texto), gtk.TreeView (lista em árvore), gtk.Toolbar (barra de ferramentas), entre outros.

Acontece que não vou mostrar nenhum deles aqui ainda.

Vamos falar de um componente que é menos usado nas aplicações em geral mas é muito útil. É o gtk.DrawingArea, Uma simples janela X onde podemos desenhar qualquer coisa, inclusive quadrados verdes com borda preta, de 50×50 pixels. E é exatamente isso que vamos fazer aqui.
Vamos construir, passo a passo, uma janela que contem uma área de desenho (DrawingArea) e um botão. Vamos chamar a área de desenho de tela.
A cada clique de mouse na tela, um quadrado verde é desenhado, tendo como centro o ponto clicado.

O botão vai limpar a tela.

Se você ainda não sabe como criar uma janela em PyGTK, leia primeiro esses dois pequenos artigos:

Criando uma simples janela com pygtk
Criando uma simples janela em pygtk – parte II

O grande astro da noite é a gtk.DrawingArea. Então vamos criar nossa tela:

tela=gtk.DrawingArea()

Como deveríamos saber, interfaces gráficas trabalham com eventos, como cliques em um botão, cliques e movimentos de mouse, teclas pressionadas, janelas arrastadas, minimizadas, escondidas por outras, etc. O usuário simplesmente dispara os eventos, o programador cuida de criar respostas a eles. Para uma DrawingArea um evento importante é o expose-event, disparado quando a tela é reexibida. Se a tela estava oculta, quando ela volta a aparecer precisa ser redesenhada, então vamos conectar o expose-event à função que vai desenhar os nossos preciosos quadrados verdes:

tela.connect('expose-event',desenha)

Outro evento importante para o nosso programa é o button-press-event, disparado quando você clica na tela com o mouse; mas este evento não está configurado, então vamos adicioná-lo à nossa tela, e então fazer a conexão com a função que vai criar nossos imprescindíveis quadrados verdes:

tela.add_events( gtk.gdk.BUTTON_PRESS_MASK )
tela.connect('button-press-event',cria_quadrado)

Não nos esqueçamos do objetivo deste programa: criar quadrados verdes. Os quadrados serão armazenados em uma lista. Listas são um tipo de dados que o Python nos provê. Criaremos a lista de quadrados:

quadrados=[]

Agora a coisa começa a ficar mais interessante. Dê uma olhada na função criar_quadrado(), que será executada a cada clique na tela:

def cria_quadrado(tela,evento):
    global quadrados
    coor=evento.get_coords()
    x=coor[0]
    y=coor[1]
    novo_quadrado=[ x-25 , y-25 , 50 , 50 ]
    quadrados.append(novo_quadrado)
    desenha(tela,None)

A função recebe dois parâmetros: a tela onde ocorreu o evento, e o evento propriamente dito.

A segunda linha da função declara como global a lista de quadrados, ou seja, um objeto criado fora da função pode ser acessado de dentro dela sem ter sido passado como parâmetro.

A terceira linha pega as coordenadas do evento. O ponto exato onde ocorreu o clique. O método get_coords() retorna uma tupla com as coordenadas X e Y. Assim: (X,Y).

A quarta e quinta linhas criam duas variáveis para conter os valores da tupla.

A sexta linha finalmente cria o nosso quadrado (não desenha, só cria) e a sétima o adiciona à lista de quadrados. O quadrado, então, nada mais é que uma outra lista contendo as coordenadas de inicio, a largura e a altura.

Vamos analisar melhor o quadrado criado:

x-25 : é o primeiro item da lista. Indica a coordenada X do canto superior esquerdo do quadrado.

y-25: é o segundo item da lista e indica a coordenada Y do canto superior esquerdo do quadrado.
Os valores x e y vieram do evento de mouse. Subtraímos 25 (alguém reparou que 25 é metade de 50?) de cada para que o ponto clicado fosse o centro do quadrado.

Em uma DrawingArea, as coordenadas são orientadas de cima para baixo e da esquerda para a direita.

50: terceiro e quarto itens da lista; respectivamente altura e largura do quadrado.
A oitava linha da função ‘cria_quadrado’ chama a função ‘desenha’. A tela é passada como parâmetro. None é o segundo parâmetro, e só está aí porque a função pede um segundo parâmetro (ela também é disparada quando ocorre o expose-event).

Já sabemos como criar os quadrados na memória. O próximo passo é desenhá-los na tela:


def desenha( tela , evento ):
    global quadrados
    gc=tela.get_style().fg_gc[gtk.STATE_NORMAL]

    verde=gtk.gdk.Color(0,48255,0,0)
    preto=gtk.gdk.Color(0,0,0,0)
    fundo=gtk.gdk.Color(65535,65535,65535,0)

    #pintando o fundo da nossa tela
    gc.set_rgb_fg_color(fundo)
    tela.window.draw_rectangle(gc,True,0,0,800,600 )

    for q in quadrados:
        gc.set_rgb_fg_color(verde)
        tela.window.draw_rectangle(gc,True,q[0],q[1],q[2],q[3])
        gc.set_rgb_fg_color(preto)
        tela.window.draw_rectangle(gc,False,q[0],q[1],q[2],q[3])

Dissecando a função:

Aqui vamos usar a lista de quadrados, que foi criada fora do contexto desta função e é modificada por outra função. Por isso o global quadrados.
Precisamos também criar um graphics context (gc):

    gc=tela.get_style().fg_gc[gtk.STATE_NORMAL]

Um graphics context armazena informações como cor de fundo, de primeiro plano e espessura da linha de desenho.

Precisamos de algumas cores para fazer nossa arte:

    verde=gtk.gdk.Color(0,48255,0,0)
    preto=gtk.gdk.Color(0,0,0,0)
    fundo=gtk.gdk.Color(65535,65535,65535,0)

Vamos dar um fundo branco para a nossa tela:

    gc.set_rgb_fg_color(fundo)
    tela.window.draw_rectangle(gc,True,0,0,800,600 )

Os dois comandos acima serão usados novamente agora, pois vamos percorrer a lista de quadrados e desenhar cada um deles. Se a lista estiver vazia, nenhum quadrado será desenhado:

    for q in quadrados:
        # desenhando um quadrado preenchido de verde
        gc.set_rgb_fg_color(verde)
        tela.window.draw_rectangle(gc,True,q[0],q[1],q[2],q[3])
    #desenhando a borda preta do quadrado
        gc.set_rgb_fg_color(preto)
        tela.window.draw_rectangle(gc,False,q[0],q[1],q[2],q[3])

Em gc.set_rgb_fg_color( cor ) definimos a cor a ser usada ao desenhar.

O método draw_rectangle precisa ser compreendido. Vejamos os parâmetros usados:

gc : o graphics context criado lá em cima.

False ou True : indica se o quadrado será preenchido.

q[0] até q[3]: são os quatro valores do quadrado criado lá em cima.

Faltou o botão para apagar a tela. Ele está presente no código completo mais abaixo. Por enquanto basta dizer que apaga-se a tela simplesmente limpando a lista de quadrados e disparando novamente a função ‘desenha()’.

Vamos ver como ficou o nosso programa:

#!/usr/bin/env python
import pygtk
import gtk

#declarando a lista de quadrados
quadrados=[]

def cria_quadrado(tela,evento):
    global quadrados

    #obtendo as coordenadas do clique de mouse
    coor=evento.get_coords()
    x=coor[0]
    y=coor[1]

    #criando um novo quadrado e incluindo ele na lista
    novo_quadrado=[x-25,y-25,50,50]
    quadrados.append(novo_quadrado)

    # disparando a funcao 'desenha()'
    # para incluir o nosso novo quadrado
    desenha(tela,None)

# a funcao desenha() deve ser chamada sempre que
# quisermos redesenhar a tela
# ou quando a tela precisar ser redesenhada
# por ter sido encoberta por outra janele, por
# exemplo
def desenha(tela,evento ):
    global quadrados
    #criando um "graphics context"
    gc=tela.get_style().fg_gc[gtk.STATE_NORMAL]

    #definindo as cores
    verde=gtk.gdk.Color(0,48255,0,0)
    preto=gtk.gdk.Color(0,0,0,0)
    fundo=gtk.gdk.Color(65535,65535,65535,0)

    #pintando o fundo da nossa tela
    gc.set_rgb_fg_color(fundo)
    tela.window.draw_rectangle(gc,True,0,0,800,600 )

    # desenhando cada um dos quadrados
    for q in quadrados:

        #desenhando o quadrado preenchido
        gc.set_rgb_fg_color(verde)
        tela.window.draw_rectangle(gc,True,q[0],q[1],q[2],q[3])

        #desenhando a borda do quadrado
        gc.set_rgb_fg_color(preto)
        tela.window.draw_rectangle(gc,False,q[0],q[1],q[2],q[3])

def limpar(botao):
    global quadrados
    global tela
    #limpando a lista de quadrados
    quadrados=[]

    #disparando novamente a funcao "desenha()"
    #para desenhar a tela branca sem nenhum quadrado
    desenha(tela, None)

win=gtk.Window()
win.set_title( "medeubranco.wordpress.com - Desenhando na tela com PyGTK" )
win.set_size_request(800,600)
win.connect('destroy',gtk.main_quit)

box=gtk.VBox()

#aqui a nossa tela sendo criada
tela=gtk.DrawingArea()

tela.connect('expose-event',desenha)
tela.add_events( gtk.gdk.BUTTON_PRESS_MASK )
tela.connect('button-press-event',cria_quadrado)

botao=gtk.Button( "limpar" )

botao.connect("clicked",limpar)

win.add(box)
box.set_border_width(10)

box.pack_start(tela)
box.pack_start(botao,False)
win.show_all()
gtk.main()

Olha o resultado:

Na tentativa de manter este artigo o menos complexo possível, muita coisa foi omitida aqui. Há outros métodos de desenho além do draw_rectangle, e há outras formas de lidar com uma DrawingArea.

Para se aprofundar, você pode começar por aqui:

http://www.pygtk.org/pygtk2tutorial/sec-DrawingAreaWidgetAndDrawing.html
Espero que este tutorial tenha sido útil a você e que você encontre formas criativas de usar uma DrawingArea.

Até o próximo artigo deste blog.

Criando uma simples janela em pygtk – Parte II

Posted in gtk, Linux, Programação, pygtk, Python with tags , , , , , , , , , , , on 10 / junho / 2008 by medeubranco

No nosso primeiro artigo sobre este assunto, criamos uma janela sem conteúdo algum. Desta vez vamos adicionar alguma funcionalidade a esta janela. Baixe o código fonte abaixo, salve como gtk_window.py e execute-o:

#!/usr/bin/env python

import pygtk
import gtk

def clicada( botao , label ):
    if label.get_text() == "" :
        label.set_text( "obrigado" )
    else:
        label.set_text( "" )

win=gtk.Window( )
win.set_title( 'Titulo da Janela' )

win.set_size_request(200,50)
win.connect( "destroy" , gtk.main_quit )

box=gtk.VBox( )
win.add( box )

label=gtk.Label( "" )
box.pack_start( label )

botao=gtk.Button( "clique-me" )
box.pack_start( botao )
botao.connect( "clicked" , clicada , label )

win.show_all()
gtk.main()

A primeira diferença deste código para o anterior é que agora usamos uma função:

def clicada( botao , label ):
    if label.get_text() == "" :
        label.set_text( "obrigado" )
    else:
        label.set_text( "" )

Esta função, que denominamos “clicada”, está aí para ser uma função de callback para o botão que será criado mais à frente no código. Ela recebe dois parâmetros: um gtk.button e um gtk.Label.

Uma outra novidade é a gtk.VBox criada na linha 18. A VBox (Caixa Vertical) é um container; serve para “acondicionar” os widgets (botões, caixas de texto, rótulos, etc) na janela. Existem outros tipos de container e você pode aprender mais sobre eles em outro lugar.

Na linha 19 ( win.add( box ) ), a gtk.VBox é adicionada a Janela.

Um novo widget é criado na linha 21 [ label=gtk.Label( "" ) ], uma “etiqueta” com rótulo em branco. Esta “etiqueta” é adicionada à gtk.VBox na linha 22 [ box.pack_start( label ) ].

Nas linha 24 e 25 repetimos o procedimento, desta vez com um gtk.Button, um botão.

Agora atenção, pois na linha 26 é que nós dizemos o que vai acontecer quando o botão for clicado:

botao.connect( "clicked" , clicada , label )

Esta linha conecta o sinal “clicked” à função ‘clicada’ ( linhas 6 a 10 ), passando como parâmetro o objeto label. O próprio botão é passado como parâmetro aqui de forma implícita.

Na linha 28 determinamos a exibição da Janela e todos os seus componentes, e na linha 29 chamamos o loop principal.

Copie o código, salve e execute.

Criando uma simples janela com pygtk

Posted in gtk, Linux, Programação, pygtk, Python with tags , , , , , , , , , on 7 / junho / 2008 by medeubranco

É duro querer ou precisar fazer alguma coisa e não saber nem como começar; quando a gente não faz nem idéia de como a coisa pode ser feita.

Neste artigo nós vamos fazer uma simples janela vazia com pygtk para ultrapassar essa barreira do “não tenho nem idéia de como é”.

Uma janela em gtk é criada instanciando a classe gtk.Window():
janela=gtk.Window()

A janela tem que ser exibida com o método Show():
janela.Show()

Vamos ver então um código exemplo. Salve o código abaixo com um nome sugestivo, algo como janela_gtk.py, e execute com python janela_gtk.py :

#!/usr/bin/env python

import pygtk
import gtk

win=gtk.Window()
win.set_title('Titulo da Janela')

win.set_size_request(400,400)
win.connect("destroy",gtk.main_quit)

win.show()
gtk.main()

Janela exemplo

As linhas
import pygtk
import gtk

simplesmente importam os módulos para que seu programa python possa utilizar as classes gtk.

Nas linhas
win=gtk.Window()
win.set_title('Titulo da Janela')

uma janela gtk é criada, e um título é atribuído a ela.

Em win.set_size_request(400,400) definimos o tamanho(altura, largura) da janela.

Agora vem uma coisa interessante. Na linha abaixo conectamos um determinado sinal a uma funçao:
win.connect("destroy",gtk.main_quit)
Sinais são coisas que você vai muito usar ao trabalhar com pygtk. Aqui o sinal “destroy” é conectado ao método main_quit do gtk. Grosso modo, significa que, quando você fechar a janela, o método será chamado e o loop (veja abaixo) que mantém o programa em funcionamento será encerrado.

A linha abaixo é um mistério:
win.show()
Dou um pirulito a quem descobrir para que serve.

Finalmente,
gtk.main()
chama o loop principal, que vai fazer o gtk ficar esperando por eventos (os sinais) que fazem a mágica de um programa com interface gráfica.

Gravando e Lendo dados no Mysql com Python

Posted in Linux, Programação with tags , , , , , , , on 4 / junho / 2008 by medeubranco

Dando continuidade ao que comecei em Dos Sistemas em Access para o Linux e Python, MySQL e adeus, Access, vou mostrar para o Cléberson como ele pode conectar ao MySQL seu programa em Python.

Estou acreditando que o Cléberson já conseguiu instalar o MySQL, o Python e o python-mysqldb e já consegue executar alguma coisa em python.

python-mysqldb é um módulo para o python. Deve ser importado no seu programa com a linha abaixo:

import MySQLdb

Com o modulo importado, podemos então criar uma conexão:

conexao = MySQLdb.connect('endereço do servidor' , 'usuario do mysql' , 'senha')

É bom definir o banco de dados dentro do MySQL que você vai usar:

conexao.select_db('meubanco')

Simples assim. Três linhas e o Cléberson já tem uma conexão com o MySQL em Python. Na realidade a conexão mesmo depende só das duas primeiras linhas.

Pausa. Me adiantei demais.

Vamos criar um banco de verdade agora para podermos usá-lo com o Python.

Como o Cléberson já fez a lição de casa e já sabe usar algum cliente do MySQL, ele só precisa dar 2 comandinhos no cliente MySQL que ele prefere:

create database teste;

create table teste.pessoas (nome varchar(60), idade int);

Pronto. Está criado o banco teste, que contém a tabela pessoas. A tabela pessoas tem dois campos: nome e idade. O campo nome aceita strings (texto) com até 60 caracteres. O campo idade aceita números inteiros.

Ao Python, finalmente. Faremos dois programas: uma para gravar dados na tabela pessoas, outro para exibir estes dados no terminal. Cléberson, eu peço que tenhas paciência. Nosso programa não vai ter janelas ainda. Vai rodar no terminal.

Código do primeiro programa:

# importar o modulo para 'falar' com o MySQL
import MySQLdb

def gravarPessoa(cursor,nome, idade):
    sql="insert into pessoas values( '" + nome + "'," + idade + " ) "
    try:
        cursor.execute(sql)
    except MySQLdb.Warning, w:
        print w
    except MySQLdb.Error, e:
        print "Erro executando \n " + sql
        print e

# criando uma conexao mysql
# com o servidor na mesma maquina( localhost )
# usuario root do mysql
# e senha em branco
conexao=MySQLdb.connect( 'localhost' , 'root' , '' )

# selecionando o banco 'teste'
conexao.select_db( 'teste' )

#criando um 'cursor'
cursor=conexao.cursor()

sair=None
while sair<> 'S' :
    nome=raw_input( 'Digite o nome: ' )
    idade = raw_input('Digite a idade: ' )
    gravarPessoa( cursor , nome , idade )
    sair = raw_input( ' Digite S para sair ou tecle enter para continuar ' )

Agora salvaremos este arquivo como gravadados.py e no terminal exacutamos com python gravadados.py

O próximo artigo vai só mostrar como exibir os dados do MySQL.

Até lá.

Python, MySQL e adeus, Access

Posted in Linux, Programação with tags , , , , , , , , on 3 / junho / 2008 by medeubranco

Este post é continuação desse outro.

É, o Cléberson ficou mesmo interessado nas ferramentas que o Linux oferece.

Pois bem, Cléberson, primeiro vamos falar para que serve cada uma delas.

Os sistemas que o Cléberson desenvolveu e que tanta glória lhe trouxeram são basicamente compostos de um ou mais formulários de entrada de dados, outros de consulta e visualização desses dados e o banco de dados propriamente dito.

O Cléberson estava acostumado a desenvolver e gerenciar tudo isso de dentro de uma mesma ferramenta, o MS-Acces.

Agora, Cléberson, é hora de dividir. Cada coisa no seu devido lugar, cada ferramenta para o sua devida finalidade. No final a gente integra tudo.

Então teremos:

  • Um sistema de bancos de dados
  • Uma linguagem de programação que possa se comunicar com o banco de dados
  • Uma maneira de fazer “Janelas” com essa linguagem de programação
  • Uma maneira mais fácil de fazer Janelas

Lá vai:

1 – Banco de Dados MySQL

Para armazenamento de dados, as tabelas e consultas, vamos usar o MySQL. O MySQL é um SGDB, Sistema de Gerenciamento de Banco de Dados, que é livre e gratuito. Grandes instituições usam o MySQL e estão satisfeitas, mas o Cléberson também pode usar o MySQL nos seu sistemas, e também ficar satisfeito. Sabia, Cléberson, que o MySQL roda também no Windows?

Não se esqueça, Cléberson, de instalar o MySQL-Query-Browser junto com o servidor MySQL. Vai ficar muito fácil criar tabelas e fazer suas consultas com o Query-Browser.

Ah, Cléberson, me esqueci de avisar que você vai precisar aprender uma linguagem nova, a SQL. SQL é uma linguagem padronizada para consulta e manipulação de dados. SQL não é difícil, Cléberson, vale a pena conhecer. O Próprio Access a utiliza quando você cria uma consulta. Dá uma olhadinha no “modo SQL” das suas consultas no Access. Viu? Aquilo é SQL, mas SQL não precisa ser confusa daquele jeito. É que o Access nao gosta que você saia do modo estrutura, então ele gera um SQL bem confuso pra você se assustar.

2 – Linguagem de Programação Python

Eu sei, Cléberson, que você quer criar logo os formulários de entrada de dados. Mas a gente não está mais dentro do Access. Seus formulários precisam fazer alguma coisa, reagir aos cliques do usuário, gravar alguma coisa no banco de dados e exibir esses dados para o usuário.

Para isso, vamos ter que aprender a programar. Não, Cléberson, isso não é ruim. Essa é a parte mais divertida, e o Access sempre tentou esconder isso de você.

Python é uma linguagem de programação interpretada orientada a objetos.
É de fácil aprendizado e muito versátil. Python também existe para Windows.

Onde o cléberson pode aprender Python:

3 – PyGTK, Python e Janelas GTK

PyGTK é um módulo para python que permite criar interfaces gráficas bonitas e funcionais. A biblioteca base é a GTK, a mesma dos programas do Gnome (aquelas janelas bonitas do Ubuntu).

Um próximo artigo aqui vai dar um exemplo legal de como criar uma janela em PyGTK.

Até lá, google nele.

4 – Desenhando janelas facilmente com Glade

O Glade é uma ferramenta para criação de janelas GTK do modo mais fácil: com o mouse.

Nem vou falar muito aqui sobre o Glade, porque um cara legal resolveu fazer um vídeo super maneiro sobre essa ferramenta. Veja o vídeo e entenda o que é o glade em http://blog.ogmaciel.com/?p=415

Creio que o Cléberson, agora, já tem uma idéia de como se podem fazer programas legais no linux.

Nos próximos artigos nós vamos fazer alguns exercícios juntos. Até lá.