quinta-feira, 23 de janeiro de 2014

Introdução ao PyQt

PyQt é um conjunto de bindings ou pontes de acessso à biblioteca Qt para Python.

Documentação 
A documentação do PyQt pode ser encontrada no site da sourceforge.net. Alguns dizem que a melhor documentação para o PyQt é a do próprio Qt, mas está voltada para C++ então você terá que interpretar. Uma outra alternativa é a documentação do PySide que é facilmente adaptada para PyQt. 

Além das API References, existe um vasto material espalhado na nuvem partindo de blogs e outros, já sabemos a quem consultar!

Licenças
Na verdade, as diferenças entre o o PyQt e o PySide são minimas, acho que o maior diferencial está no tipo de licença que oferecem. O PySide tem a LGPL que é totalmente free, o PyQt possui licença comercial e GPL. 

Na prática, se eu não estiver confundido algo, a LGPL permiter qualquer tipo de comercialização ou utilização para o seu aplicativo, com a GPL você pode distribuir cópias do programa ou modificá-lo mas não pode vende-lo ou torna o seu código secreto, neste caso você precisaria de uma licença comercial.  E para quem pensa que o Qt não é free, está enganado, o Qt possui as licenças GPL e LGPL.

Estrutura básica de comandos para iniciar uma aplicação usando PyQt
Se você está interessado em iniciar o desenvolvimento de aplicações com o PyQt, abaixo seguem os comandos essenciais para iniciar uma aplicação. 

Indo direto ao ponto, abra um editor de texto de sua preferência e digite a sequência de comandos abaixo ou copie e cole. A primeira opção é mais recomendada para quem deseja melhor assimilação dos comandos.


Abrindo uma Janela no PyQt.


Para abrirmos uma jánela poderiamos utilizar a classe QMainWindow ou a classe QDialog. A principal diferença entre elas é que a QMainWindow é um pouco mais completa porque já vem com opções direcionadas à criação de menus, toobar e status bars, por exemplo. Quanto mais simples for a aplicação não haverá problemas em utilizar uma ou outra. Contudo, por mais que a nossa aplicação se encaixar nos padrões da simplicidade, utilizaremos primeiro a classe QMainWindow e depois abriremos uma outra janela utilizando uma QDialog.








Modificando o tamanho de uma Janela

Para modificar manualmente o tamanho de uma window podemos utilizar o método setGeometry(), se a janela ocupar toda a tela podemos utilizar o método showMaximized() antes do comando self.show().


QtGui.QWidget.setGeometry



O médodo setGeometry() (linha 4) possui duas funções, uma determinar a posição da janela na tela e determinar o tamanho da janela.Os primeiros dois parâmetros correspondem às cordenadas x (coluna) e y (linha) da posição da janela . O terceiro e quarto parâmetro correspondem, respectivamete, à largura e altura da Janela. Altenativamente, ao invés de setGeometry(), poderiam ser utilizados os métodos resize() e move() ambos da classe QWidget.


QtGui.QWidget.showMaximized


O médodo showMaximized() (linha 4) faz a janela ocupar todo o tamanho da tela. Seria interessante ver como se comporta o método QWidget.showFullScreen(), já li em um post que a differença deste para o showMaximized() é que o primeiro esconde a tool bar mas não fiz o teste para certificar.


Clique aqui para conhecer mais métodos

Adicionado um QPushButton à UI 

Para adicionar widgets na window basta criar atributos e instanciá-los a partir da classe desejada, e informar alguns parâmetros se necessário.  No exemplo abaixo vamos utilizar a classe QPushButton e adicionar um botão à window.




Abstraindo elementos da UI
Criamos o método setupUi (linha 12) apenas para abstrair do construtor __init__ os elementos de interface gráfica da UI, e deixar o código, na visão de alguns, mais organizado.

Atributos de classes
Tratando-se ainda do widget QPushButton, poderiamos obter o mesmo resultado substituindo o codigo do método setupUi da seguinte forma.


A diferença é sútil, apenas definimos o atributo para self ao ivés de deniní-lo no próprio método. No primeiro exemplo o atributo button não está disponivel para acesso através de uma instância de MyApp(), enquanto que no segundo exemplo temos acesso às suas propriedadades pois button está disponível na instância. O abordagem a ser utilizada vai depender da sua necessidade de acesso às propriedades de um atributo fora do método em que foi criado.

Abrindo uma Janela secundária no PyQt
 

terça-feira, 14 de janeiro de 2014

VirutalBox: Como mudar o UUID de uma imagem .vdi no Ubuntu 13.10

Estava utilizando o Virtual Box e precisei criar duas máquinas virtuais com o sistema operacional Windows. Acontece que quando tentei criar a segunda máquina virtual apareceu a seguinte mensagem:


Failed to open the hard disk file /home/edytarcio/Utilities/VM (copy)/Win7.vdi.
Cannot register the hard disk '/home/edytarcio/Utilities/VM (copy)/Win7.vdi' {ffc2ef02-852e-46a9-8bd7-b3513bd6abb2} because a hard disk '/home/edytarcio/Utilities/VM/Win7.vdi' with UUID {ffc2ef02-852e-46a9-8bd7-b3513bd6abb2} already exists.
O problema aconteceu porque as imagens que eu estava utilizando possuiam o mesmo UUID; Eu tinha apenas duplicado a primeira imagem e renomeado.

Pois bem, depois de fazer uma pesquisa no google descobri a solução. No Ubuntu, apenas digite:

$ VBoxManage internalcommands sethduuid Win7.vdi /path/to/virtualdisk.vdi

UUID changed to: 24b203de-4388-4278-a510-594f8919aa80

Será gerado um novo UUID para a sua imagem .vdi.  
Observe que o caminho deve ser substituído pelo endereço da imagem, exemplo:

$ VBoxManage internalcommands sethduuid Win7.vdi





sexta-feira, 30 de novembro de 2012

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.


../_images/guide-3.jpg
 
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.

quarta-feira, 21 de novembro de 2012

Kivy: Criando um Accordion


Este post trata da criação de widgets com o framework Kivy, aqui serão mostrados os procedimentos essenciais para a criação de Accordions ou acordeões em uma tradução livre.

Accordion é um widget utilizado na criação de menus, onde você tem uma ou mais abas exibidas verticalmente ou horizontalmente. O conteúdo de cada aba é mostrado no momento em que você a clica ou a toca, fazendo-a com que ganhe o foco.

No Kivy,  estas abas são chamadas de AccordionItems, que é o termo que será utilizado a partir de agora.


Aqui está o código para o widget mostrado na imagem acima, este também está disponível no pacote de instalação do Kivy na pasta  kivy\examples\widgets.



O código descrito acima deve ser criado e salvo com a extenção .py.  Clique aqui para obter instruções sobre a instalação e procedimento para executar arquivos .py utilizando o Kivy.
 

Descompilando o código:
Linha 1: Aqui fazemos a importação da biblioteca kivy.

Linha 2: Com a instrução  kivy.require você espécifica a versão mínima necessária para funcionamento da sua aplicação. Se a versão do kivy onde sua aplicação for executada não atender ao requisito, então a execução do aplicativo resultará em uma exception.

Linhas 4, 5 e 6: Importamos dos módulos kivy.uix.accordion, kivy.uix.label e kivy.app somente as classes que serão utilizadas na execução da aplicação.

Linha 8: Criamos uma derivação da classe App() do repositório kivy.app. A classe App() é a classe principal para criação de uma aplicação com o kivy, funciona como um ponto de ciclo de execução da aplicação. Aqui você está tornando a classe MyApp uma sub-classe de App() no momento em que App() é instanciada.


Linha 9: O método build(self) na linha 9, inicializa a aplicação.O parâmetro self faz referência à classe MyApp que o chamou. Este método não precisa ser chamado diretamente, pois o método App().run() já o faz automaticamente.  


Linha 10: Criamos o objeto 'root' instaciado pela classe Accordion().

Linha 11: Declaramos a instrução for para  criarmos um loop cujo número de iterações é definido pela função xrange().

Linha 12: Instaciamos a classe AccordionItem para criamos um novo objeto chamado item, que recebe como parametro o título "AccordionItem".

Linha 13 e 14: Utilizamos a função add_widget (classe Widget) para adicionarmos o widget Label ao objeto item. O mesmo acontece na linha 14, quando adicionamos item ao objeto root.

Linha 15: O objeto root é retornado pela função build.

Linha 17. Aqui é feito um teste lógico, com o atributo __name__, para saber como o aplicativo/script foi chamado. Se chamado a partir de um prompt de comando ou clique carregará a instrução "__main__". Caso contrário, se estiver sendo importado, __name__ será carregado com o nome do modulo importado.

Linha 18. Com o método MyApp().run(), você está chamando a sua classe MyApp para que seja executada.


É isso, estas foram as instruções essenciais para a criação de Accordions no Kivy.


domingo, 18 de novembro de 2012

Kivy: Funcionamento dos widgets


 
Este post explica um pouco sobre o funcionamento dos widgets no Kivy.

Widgets no Kivy o todos os elementos que compõem a GUI (Graphical User Interface). De forma básica, tudo que você vê na tela, que pode haver uma interação, é um widget. Acordeões, painéis, caixas de texto, caixas de seleção, barras progressivas, labels, switches e tudo que você pode clicar ou arrastar são widgets, que podem ou não fazer parte de outros widgets.



O pacote portátil de instalação do Kivy vem com vários aplicativos exemplos para desenvolvimento. O código da aplicação com exemplos de widgets mostrados nas imagens acima estão disponíveis no diretório kivy\examples\demo\showcase do pacote de instalação do Kivy.

Widgets são elementos de interface gráfica de dados encapsulados. Havendo interação, os dados são recebidos, processados e o widget é devolvido à tela com sua (nova) representação visual.

A representação gráfica de um widget ocorre de forma aninhada. Isso que dizer que são separados entre si, mas ao mesmo tempo estão agrupados ou encadeados a outros widgets formando aplicações simples ou complexas.

Um grande artifício da biblioteca Kivy é que os widgets podem ser robustamente personalizados. A biblioteca lhe oferece uma gama de opções disponíveis para a personalização de widgets já pré-definidos e para a criação de novos widgets. A classe Widget é a classe principal para a criação de widgets e foi desenvolvida com os seguintes princípios em mente:

  • Event Driven - Os widgets são movidos a eventos que ocorrem durante a interação. Não havendo mudanças em suas propriedades, então nada acontecerá. A classes Property é responsável pela mudança de propriedades.
  •  Representação gráfica separadaOs widgets são propositalmente separados de sua representação gráfica. Isso permite a você criar o seu próprio design ou apenas modificar um design padrão já existente. A classe Canvas possui todos os recursos necessários para a criação gráfica de widgets.
  •  Bounding Box e Bouding Collision - Na prática, para toques ou cliques na tela, a biblioteca lhe oferece métodos que lhe informam se aquele toque ou clique atingiram as delimitações de um widget (Bouding Box) definidos pelo seu tamanho e posição, mesmo para formas mais complexas com uma circulo ou poligono. Também lhe são fornecidos métodos para saber se houve um Bounding Collision ou seja, se um widget colidiu com um outro widget.

Segue abaixo uma lista de widgets do Kivy de acordo com a sua funcionalidade.

Widgets básicos (UX - User Experience widgets) - São os widgets clássicos mais comuns ao usuário, também são usados na criação de widgets mais complexos.

  • Label
  • Button
  • CheckBox
  • Image 
  • Slider
  • Progress Bar 
  • Text Input
  • Toggle Button
  • Switch
  • Video

Widgets de layout - São widgets que não possuem uma renderização, são usados para calcular e definir a posição de outros widgets na tela.

  • Grid Layout
  • Box Layout
  • Anchor Layout
  • Stack Layout 
  
Widgets UX complexos - São combinações dos UX Widgets. Mesmo sendo combinações não possuem exatamente o mesmo uso que os UX widgets.

  • Bubble
  • Drop-Down List
  • FileChooser
  • Popup
  • Spinner
  • TabbedPanel
  • Video Player
  • VKeyboard

Widgets de comportamento - Os widgets de comportamento, assim como os widgets de layout também não possuem renderização. São utilizados na parte gráfica ou na interação principalmente através de toques. Em outras palavras, são utilizados no controle de mudanças de posições, rotações e escala quando uma ou mais dedos são tocados na tela.

  • Scatter
  • Stencil View


Widgets de gerenciamento de telas- É utilizado no gerenciamento de controle de telas múltiplas. Possui várias opções de transições para a mudança de telas.

  • Screen Manager 

 
 
Mais informações sobre widgets são encontradas na documentação oficial do Kivy.