Kivy: Criando uma GUI - parte 1

Nesta postagem será falado um pouco sobre a criação de GUI (Graphical User Interface) no kivy, tais como elipses, triângulos, retângulos, etc. Para compreendermos a essência da utilização desses elementos gráficos usaremos como apoio a codificação de uma pequena aplicação multi-touch fornecida na documentação oficial e nos exemplos contidos no pacote portátil de instalação do Kivy.

A Interface de Programação de Aplicativo (API) gráfica do Kivy é uma abstração da API OpenGL, isso quer dizer que foram absorvidos os conceitos primordiais dessa biblioteca gráfica de aceleração de hardware. E para facilitar o uso desses elementos gráficos foram criadas metáforas que não existem no OpenGL. O canvas no kivy é um exemplo de idéia metafórica.

Uma grande vantagem da API gráfica do Kivy é que existe uma otimização automática dos comandos de desenho que o seu código produz. Vale salientar que, se preferir, você pode normalmente usar o OpenGL.

Agora partiremos dessa breve introdução teórica à prática, primeiro criamos a estrutura inicial básica de uma aplicação com o Kivy e adicionamos um pouco de código (linhas 6 e 7). Aqui estamos criando o nosso próprio widget que herda a classe Widget (linha 5). Este simples procedimento já é o suficiente para que nossa classe tenha as propriedades de qualquer outro widget convencional. Veja o código abaixo.



Para nos certificarmos de que a nossa classe já está agindo como um widget inserimos em nosso código o comando ‘print touch’ (linha 7) e executamos a aplicação. Observe que não acontecerá nada de extraordinário na tela do aplicativo mas em background, na linha de comando da qual a aplicação está sendo executada, estão sendo mostradas mensagens para cada evento recebido na tela da aplicação. O mais importante a ser entendido aqui, é que embora a aplicação não faça absolutamente nada, ela já constitui um widget de fato, que neste caso não possui uma representação visual.
Um evento recebido na tela também é chamado de MotionEvent que pode ser um toque, um clique, uma ação de arrastar um objeto, etc. Agora implementaremos um pouco mais de código à aplicação. Veja abaixo.




Entendendo o código:

Linha 3: Importamos do módulo kivy.graphics as classes Collor e Ellipse. Collor, como o próprio nome sugere, definirá as cores a utilizadas. A Ellipse é a classe utilizada para a criação de círculos.

Linha 8: É criada a função on_touch_down (ao tocar a tela), que recebe o ponteiro self e o parâmetro de função touch.

Linha 9: A instrução with indica que tudo o que estiver devidamente indentado abaixo do canvas modificará os elementos do mesmo. O canvas é uma camada usada para representar formas geométricas criadas por widgets que produzem representações gráficas.

Linha 10: Define a cor a ser utilizada pelo o widget no canvas. Aqui é seguido o sistema de cores RBG (Red, Blue and Green).

Linha 11: Aqui é especificado na variável ‘d’ o tamanho do diâmetro da elipse. Informar o valor do diâmetro em uma variável facilita a codificação caso mais tarde queiramos modificar o tamanho da arte desenhada pelo widget.

Linha 12: Com a classe Ellipse, criamos formas circulares na tela. Aqui Ellipse recebe como parâmetros a posição determinada pelos eixos ‘x’ e ‘y’ e o tamanho, que indica a altura e a largura.

Vejamos como fica o resultado da aplicação quando a tela é tocada.

 
Para que o circulo seja formado exatamente na parte central de onde foi clicando ou tocado e não na lateral, é necessário que façamos uma divisão. Ao informar as coordenadas x e y para a Ellipse, divide-se antes o valor de cada coordenada pelo tamanho do diâmetro dividido por dois. Isso é necessário porque, na verdade, o circulo que está sendo criado, possui uma caixa de delimitação chamada de bouding box, e esta, além de não ser nativamente um circulo, inicia-se, por padrão, sempre no canto superior do eixo de suas coordenadas x e y. Para compreendermos melhor, imagine um eixo x e y dividido em quatro partes ou fatias. A caixa de delimitação inicia-se sempre do lado direito e na parte superior desse eixo. Dessa forma, se não fizermos a divisão da coordenada pela metade do diâmetro desse elemento gráfico o seu bounding box se inicializará na primeira posição da coordenada resultante dos eixos x e y.