Tutorial de Computação Programação Gráfica em Python para MEC1100 v2010.11

Tutorial de Computação Programação Gráfica em Python para MEC1100 v2010.11 Linha de Equipamentos MEC Desenvolvidos por: Maxwell Bohr Instrumentação Eletrônica Ltda. Rua Porto Alegre, 212 Londrina PR Brasil http://www.maxwellbohr.com.br

1 Introdução Nesse tutorial vamos criar um projeto que possa ser utilizado como base para outros programas de controle do MEC1100. Vamos aproveitar esse projeto para mostrar passo a passo o que é necessário para criar um programa de controle para o equipamento. No final teremos um programa que permite a seleção da porta USB que será utilizada para se comunicar com o dispositivo, identificação automática da presença de um dispositivo na porta selecionada e todo o suporte para o envio de comandos de controle para o dispositivo, o que facilitará muito o desenvolvimento de outros programas, pois esse poderá ser utilizado como base. 2 Material Para esse tutorial é necessário o MEC1100 conectado em uma porta USB do computador. Em todos os tutoriais também será necessário o ambiente de programação configurado como mostrado no tutorial Programação em Python para MEC1100. Figura 1: Dispositivo usado neste tutorial. 3 Configurando o ambiente de programação gráfica Nesta seção será ensinado a instalar o aplicativo para desenvolvimento gráfico (Qt) e a biblioteca do Python para Qt (PyQt), tanto para o sistema operacional Windows como para Linux. Com o Qt-Designer é possível se produzir interfaces gráficas ricas de maneira rápida e prática, pois para adicionar um componente basta arrastá-lo para o local desejado. Por ser de fácil uso, vamos utilizá-lo para criar a parte gráfica de nosso programa. É importante salientar que existem outros editores gráficos e que tudo isso pode ser feito até mesmo num editor de texto simples. 1

Para conseguirmos utilizar a interface gráfica criado no Qt-Designer, precisamos ter a biblioteca do Python para Qt instalado no computador. Existem duas bibliotecas para este fim: uma denominada PyQt e outra PySide. Neste tutorial usaremos a PyQt. A principal diferença entre elas é a licença de uso. A licença de uso da biblioteca PyQt obriga que se pague ao seu desenvolvedor uma taxa caso o programa que a use seja comercial e o mesmo é obrigado a manter seu código aberto. Se for um programa livre, não é preciso pagar essa taxa. Já a licença do PySide é mais livre. Outra diferença entre as duas bibliotecas é a geração de bindings. Por a biblioteca PyQt estar a mais tempo no mercado a geração de bindings é mais eficiente e dificilmente gera algum tipo de erro ao contrario da PySide onde ainda estão sendo feito ajustes nesta geração de bindings. 3.1 Ubuntu Primeiramente, será ensinado a instalar o ambiente de design Qt bem como a biblioteca de Python para Qt (PyQt) no Ubuntu. 3.1.1 Instalação do Qt Nesta seção veremos como instalar o Qt e o Qt-Designer para criar a interface gráfica do programa. Para realizar a instalação do Qt no Sistema operacional Ubuntu, siga até o link: http://qt.nokia.com/products/platform/qt-for-linux-x11, clique em Download Qt. Então, irá abrir uma nova janela. Nesta, clique em Go LGPL. Em seguida, escolha o sistema operacional (no nosso caso, LINUX) e seu tipo (32bit ou 64bit), clicando em uma das opções que será mostrada na página. Então, após clicar em uma das opções, espere até que o download seja requerido e clique em salvar/save. Finalmente, espere até que o download seja concluído e siga as instruções a seguir: Na pasta onde foi salvo o arquivo.bin (no caso, o arquivo baixado), clique com o botão direto do mouse e selecione a opção open in terminal/abrir no terminal e digite as seguinte linha de comando na janela que se iniciou, substituindo nome_do_arquivo_salvo pelo nome do arquivo baixado: chmod u+x nome_do_arquivo_salvo.bin Após digitar essa linha de comando, aperte a tecla Enter e, em seguida, no mesmo terminal que fora aberto, digite a seguinte linha de código, realizando a mesma substituição descrita anteriormente:./nome_do_arquivo_salvo.bin Após realizar esses passos, automaticamente, será inicializada a instalação do Qt. Esta instalação, porém, é de fácil aplicação. Na janela aberta, clique na opção Next e, em seguida, selecione a opção I accept the agreement e novamente em Next. Nas próximas etapas, clique em Next novamente e aguarde até que a instalação seja concluída. Após a conclusão, clique em Finish e, então, o Qt será inicializado automaticamente. Abaixo, uma imagem demonstrando a janela após a conclusão da instalação: 2

Figura 2: Janela após a conclusão da instalação. Agora entre no Synaptic Package Manager e assinale o Qt-Designer para instalação. Feito isso, o Qt estará pronto para uso. 3.1.2 Instalação do PyQt Nesta seção veremos como instalar a biblioteca de Python para o Qt (PyQt) e assim utilizar a interface criada pelo Qt-Desinger. Primeiramente, vá no menu System / Administration / Synaptic Package Manager. Será solicitada a senha de usuário administrador do computador para executar o gerenciador de pacotes. Após aberto, devemos realizar uma procura por PyQt. Na lista apresentada, devemos marcar o python-qt4 para ser instalado conforme a figura a seguir: Figura 3: Marcando o PyQt para ser instalado. 3

Clique em Apply para instalar e aguarde a mesma ser concluída. Figura 4: Marcando para a instalação. Após o termino da instalação, o PyQt já pode ser utilizado normalmente. 3.2 Windows Agora, será ensinado como instalar os componentes para criação de interfaces gráficas no sistema operacional Windows. 3.2.1 Instalação do binário contendo o PyQT e o Qt Nesta seção será visto como instalar o binário disponibilizado pela riverback que contem o PyQt e o Qt-Desinger juntos e com isso poderemos criar interfaces ricas e de modo fácil. Primeiramente devemos fazer o download do binário do PyQt que se encontra no site http://www.riverbankcomputing.co.uk/software/pyqt/download, debaixo de Binary Packages. Este pacote instalará o Qt e o PyQt. Devemos estar atentos na hora do download, pois devemos baixar o correspondente a versão do Python instalada no computador. Em nossos tutoriais estamos utilizando o Python 2.6 portanto faremos o download do binário PyQt-Py2.6-gpl-4.8.1-1.exe Após o download execute o arquivo clicando duas vezes nele, com o processo de instalação será iniciado. Clique em Next para iniciar a instalação. Clique em I Agree para aceitar o contrato de uso do PyQt. Selecione o local a ser instalado e clique em Next. Cliquem em Install e a instalação será iniciada. Figura 5: Instalação do PyQt junto com o Qt. 4

3.3 Integração Qt com o Eclipse e o Python Em nosso tutoriais com interface gráfica usaremos o Qt para a criação de interfaces, o Python como linguagem e o Eclipse como IDE, integrando os outros 2 recursos anteriores. Para fazer essa integração inicie o Eclipse, selecione o menu help > Softwares updates > find and install. Será aberto a seguinte janela: Figura 6: Instalando plugin do python. Clique em add e, em Name, coloque Pydev e, em URL, http://pydev.org/updates e dê OK. Selecione as caixas de seleção conforme a figura abaixo: Figura 7: Selecionando o plugin a ser instalado. 5

Clique em Next e a instalação do plugin será iniciada. Este plugin será responsável por transformar o ambiente de programação do Eclipse de Java para Python. Com o plugin instalado já podemos criar um projeto Pydev. Para isso, devemos mudar o ambiente de programação de Java para o Pydev clicando no ícone a sinalizado na figura abaixo: Figura 8: Mudando o ambiente de programação. Neste, clique em Others e, na janela aberta, selecione Pydev, conforme a figura abaixo: Figura 9: Mudando o ambiente de programação. Com isso, basta apenas colocar o arquivo gerado pelo Qt Designer dentro da pasta do projeto. 6

4 Projeto Dividiremos este tutorial em três partes: A criação do projeto no Eclipse, a criação da interface no Qt e a codificação dessa interface utilizando a linguagem Python e o Eclipse. 4.1 Criando um novo projeto no Eclipse Nesta parte criaremos um projeto no Eclipse para armazenar todos os arquivos de nosso projeto. Este projeto deverá se comunicar com o MEC1100. Para isso, siga as instruções apresentadas a seguir: Primeiramente devemos abrir o Eclipse. Com ele aberto, devemos ir no menu File / New /Pydev Project. A seguinte janela será exibida: Figura 10: Criando um novo projeto. Em Project Name devemos colocar o nome do nosso projeto e, em seguida, clicar em Finish. Na aba Package Explorer clique com o botão direito sobre a pasta src e vá em New / File, como mostra a figura abaixo: Figura 11: Criando um novo arquivo. 7

Devemos configurar a janela exibida conforme a figura abaixo. Lembrado que no campo File name deve sempre terminar com.py para identificar que aquele arquivo é um arquivo python. Figura 12: Criando um arquivo.py. Com isso, já temos um projeto com um arquivo dentro. Agora devemos copiar a biblioteca de controle do MEC1100 (mec1100.py) para a pasta do projeto. Com isso, teremos o seguinte visual do ambiente de trabalho no Eclipse: Figura 13: Eclipse com o projeto criado. Com essa etapa concluída podemos começar a criação da interface no Qt. 8

4.2 Criando a interface no Qt Nesta parte criaremos a interface gráfica do projeto no Qt Desing. Para isso, abra o programa e clique no menu File / New. Na janela exibida selecione em templates/forms a opção Widget e clique em Create. Figura 14: Criando uma interface Widget. Devemos agora mudar algumas propriedades deste Form. Essas propriedades se encontram na aba Property Editor. Figura 15: Property Editor. Vamos mudar a seguinte propriedade: - QWidget + windowstitle Projeto Base 9

Com essa propriedade alterada podemos adicionar os componentes de nossa interface. Esses componentes se encontram na aba Widget box. Figura 16: Aba Widget Box. O primeiro componente que iremos adicionar se encontra dentro do submenu Input Widgets e se chama Combo Box. Para adicioná-lo, clique em cima dele e arraste para dentro do Form. Feito isso devemos mudar algumas propriedades deste componentes. Para isso, devemos clicar no componente Combo Box e na aba Property Editor devemos mudar as seguintes propriedades: - QObject objectname - QWidget - geometry X Y Width Height comboboxserial 10 10 150 28 Segue abaixo uma figura mostrando como deve estar o nosso Form após a adição deste componente. Figura 17: Form com o componente Combo Box. 10

Com esse componente configurado, devemos passar para o próximo passo, que é a adição de um componente Frame. Este componente se encontra no submenu Containers da aba Widget box. Após adicioná-lo devemos alterar as seguintes propriedades deste componente que se encontram na aba Property Editor: - QObject objectname - QWidget - geometry X Y Width Height ledstatus 170 14 21 21 Segue abaixo uma figura mostrando como deve estar o nosso Form após a adição deste componente. Figura 18: Form após a adição do componente Frame. Falta agora adicionar com componente label, que será o responsável por mostrar o status da conexão com o MEC1100. O componente label se encontra no submenu Display Widgets da aba Widget Box. Após a adição deste componente, devemos mudar as seguintes propriedades que se encontram na aba Property Editor : - QObject objectname - QWidget - geometry X Y Width Heigth - font Point Size - QLabel text labelstatus 200 16 180 16 14 Desconectado 11

Com essa etapa concluída terminamos a criação da interface do projeto base. Figura 19: Interface final do projeto base. Devemos agora salvar este arquivo na pasta do projeto criado no Eclipse. Antes de começar a programar em cima dessa interface, devemos transformá-la em um arquivo do tipo python(.py). Na pasta onde o arquivo base.ui se encontra, clique com o botão direito do mouse e selecione a opção open in terminal/abrir no terminal e digite a seguinte linha de comando na janela que se iniciou: pyuic4 base.ui > base.py A seguir, podemos ver como a pasta de nosso projeto deve estar ao final desta etapa. Figura 20: Pasta do projeto ao final desta etapa. Agora, podemos começar a programar no Eclipse em cima dessa interface criada no Qt. 4.3 Codificando o programa Nesta parte vamos codificar a interface para que ela realize algumas funções que são interessantes para este tutorial. Para isso, abra o projeto base, criado na seção 3.1 deste tutorial, no Eclipse. 12

Primeiramente, vamos editar um código dentro no arquivo base.py. Este código deverá retornar as portas serial/usb instaladas no computador e adicioná-las dentro do componente comboboxserial. Para isso, abra o arquivo base.py e procure a seguinte linha de código: self.comboboxserial.setobjectname("comboboxserial") Abaixo dessa linha coloque o seguinte código: #Adiciona as portas disponiveis na comboboxstatus e seta o index como "0" for port in mec.get_installed_serial_ports(): self.comboboxserial.additems([port]) self.comboboxserial.setcurrentindex(0) Porém, para que o código consiga recuperar as postas instaladas no sistema, devemos importar a biblioteca do MEC1100. Fazemos isso adicionando o seguinte código em vermelho: from PyQt4 import QtCore, QtGui from mec1100 import MEC1100 mec MEC1100() Com isso feito, podemos salvar esse arquivo e abrir o arquivo Main.py que é responsável por abrir o programa e é nele que deverá ficar os métodos de controle do MEC1100. Primeiramente, devemos importar o que vamos utilizar no arquivo. Para isso, copie as seguintes linhas de código para dentro do arquivo Main.py: import serial import sys from PyQt4 import QtCore, QtGui from PyQt4.QtCore import QTimer from base import Ui_Form from mec1100 import MEC1100 mec MEC1100() Agora, devemos criar a classe principal e chamar o Form criado no Qt, fazendo o programa iniciar. Fazemos isso nas seguintes linhas de código, que devem ser copiadas para o arquivo Main.py: class StartQT4(QtGui.QMainWindow): def init (self, parentnone): QtGui.QWidget. init (self, parent) self.ui Ui_Form() self.ui.setupui(self) if name ' main ': app QtGui.QApplication(sys.argv) projeto StartQT4() projeto.show() sys.exit(app.exec_()) Nesse momento podemos executar o projeto apertando Ctrl + F11. A figura abaixo representa o que deve ser esperado que aconteça ao executar o projeto. 13

Figura 21: Interface em execução. Agora devemos criar uma função responsável por se conectar com o MEC1100 a partir de uma porta serial/usb e retornar o estado (Desconectado ou Conectado) e ainda acender ou apagar" o componente Frame. Segue, em vermelho, o código desta função que deve ser copiado para o arquivo Main.py: class StartQT4(QtGui.QMainWindow): def init (self, parentnone): QtGui.QWidget. init (self, parent) self.ui Ui_Form() self.ui.setupui(self) def getstatus(self): try: #Armazena na variavel porta o texto selecionado na combobox porta str(self.ui.comboboxserial.currenttext()) #Abre a comunicação com o MEC1100 mec.open_communication(porta) #Variavel responsavel pela cor do labelstatus p QtGui.QPalette() self.ui.ledstatus.setautofillbackground(true) #Se o MEC1100 estiver conectado if mec.is_connected(): #Muda o texto da labelstatus para Conectado self.ui.labelstatus.settext("conectado") #Define a variavel p com a cor verde p.setcolor(qtgui.qpalette.foreground, QtCore.Qt.green) #Define a cor do labelstatus como p (Verde) self.ui.labelstatus.setpalette(p) 14

#Armazenando na variavel p a pelette contida no ledstatus p self.ui.ledstatus.palette() #Define a cor da propriedade Window como Verde claro p.setcolor(qtgui.qpalette.window, QtCore.Qt.green) #Define a palette do ledstatus como p self.ui.ledstatus.setpalette(p) else: #Muda o texto da labelstatus para Desconectado self.ui.labelstatus.settext("desconectado") #Define a variavel p com a cor vermelha p.setcolor(qtgui.qpalette.foreground, QtCore.Qt.red) #Define a cor do labelstatus como p (vermelho) self.ui.labelstatus.setpalette(p) #Armazenando na variavel p a pelette contida no ledstatus p self.ui.ledstatus.palette() #Define a cor da propriedade Window como Verde claro p.setcolor(qtgui.qpalette.window, QtCore.Qt.darkGreen) #Define a palette do ledstatus como p self.ui.ledstatus.setpalette(p) except: pass Falta agora criar apenas um timer que dispare a função criada a cada x milissegundos mantendo sempre atualizado o status do programa. Para criar esse evento adicione as seguinte linhas de código em vermelho dentro do arquivo Main.py: class StartQT4(QtGui.QMainWindow): def init (self, parentnone): QtGui.QWidget. init (self, parent) self.ui Ui_Form() self.ui.setupui(self) #Cria o timer do Status timerstatus QTimer(self) self.connect(timerstatus, QtCore.SIGNAL("timeout()"), self.getstatus) #Objeto #Tipo do Signal #Método chamado #Aciona o timer a cada 400ms timerstatus.start(400) 15

def getstatus(self): try: #Armazena na variavel porta o texto selecionado na combobox porta str(self.ui.comboboxserial.currenttext()) #Abre a comunicação com o MEC1100 mec.open_communication(porta) Feito isso, nosso projeto já estará pronto. Para testá-lo pressione Ctrl + F11. A figura abaixo mostra os 2 estados do programa, primeiro com o MEC1100 conectado e depois com ele desconectado. Figura 22: Programa finalizado, mostrando seus 2 estados. 16