Qt5 para comunicação serial – Aplicação

Introdução

No post anterior Comunicação Serial com Arduino e Qt5 Widgets Application – Parte 2, finalizamos a nossa aplicação com Qt5 para comunicação serial com qualquer dispositivo embarcado, que para facilitar o post utilizamos um Arduino UNO.

Agora, avançando um pouco mais, vamos ver como criar ações, usando Qt5 para comunicação serial, para serem enviadas e/ou recebidas via serial e ocorrer eventos como acender/apagar um led, obter informações do microcontrolador e diversas possibilidades que você possa imaginar.

Novamente usarei um Arduino UNO para facilitar a prototipação e focar na aplicação alto nível, mas para o framework estamos usando Qt5 para comunicação serial. Então poderá aplicar o que faremos aqui em um 8051 montado na protoboard como em um ARM Cortex-M, desde que utilize comunicação serial.

Configuração do Host

Neste artigo utilizarei a distribuição Linux Mint 17 Qiana 64 bits, mas não há problemas em realizar o procedimento em um Ubuntu ou outra distribuição suportada pelo Qt5. A seguir são listados os seus pré-requisitos: 

  • Qt5 Instalado com o Qt Creator;

  • IDE Arduino >=1.6.2;

  • Arduino UNO;

  • Plugin Qt Serial.

Criando o projeto

Devemos criar o nosso projeto. Para isso abra o Qt5 e em seguida vá em FileNew File or Project…, na janela a seguir selecione Application e Qt Widgets Application e Choose…. No nome do projeto digite AppGuiArduino, na opção de Kit Selection deixe o padrão selecionado e clique em Next. Na próxima janela Class Information selecione QWidget em Base class e Next, na janela seguinte sobre opções de versionamento pode clicar em Finish.

Ficou confuso? Veja o artigo anterior Comunicação Serial com Arduino e Qt5 Widgets Application – Parte 2 que mostrei como fazer essa parte passo a passo com imagens.

É muito importante ver o artigo anterior porque neste projeto iremos novamente criar a classe comserial e anexar o mesmo código que já utilizamos, pois assim focamos em desenvolver nossa aplicação e a parte de tratar a comunicação serial utilizamos a que já foi feita anteriormente.

Desenhando a tela

Agora a parte divertida do artigo, onde o trabalho é achar os componentes em Widgets e montar a tela usando o Qt Design. No final do artigo anterior eu comentei como seria a aplicação deste post, houve algumas mudanças para trazer mais informações e ser mais didática. Segue na Figura 1 como ficará nossa aplicação com o posicionamento dos Widgets.

Qt5 para comunicacao serial: Posicionamento dos widgets
Figura 1 – Tela inicial apos posicionar os widgets

Agora vem uma etapa que pode agregar muito a aplicação e que muitos desenvolvedores não dão tanta importância. Muitas vezes a preocupação é o background ou o core da aplicação, segurança, estabilidade e outros fatores que ficam no nível mais abaixo, mas o cliente muitas vezes preza por uma aparência agradável ou um melhor layout, de fácil utilização.

E é onde focaremos agora, na “perfumaria” de nossa aplicação, adicionando ícones, colocando atalhos e informações para ajudar o operador.

Os ícones utilizados nesta aplicação foram todos obtidos no site IconsPedia, muitos possuem licenças free mas olhe as informações dos pacotes caso a ideia seja comercializar a aplicação.

No diretório do projeto criei um diretório chamado icons onde estão todos os ícones utilizados, e agora veremos como utilizar estes em nossa aplicação.

Vamos criar uma estrutura em nossa aplicação para anexar estes ícones, para isso deve-se clicar com o botão direito em cima do nome do projeto e clicar em Add New…, em seguida selecionar Qt e logo a frente Qt Resource File, como na Figura 2.

Qt5 para comunicacao serial: CriandoResourceFileQt5
Figura 2 – Criando um Resource File para os icones

Prosseguindo agora no diretório Resources que surgir em nosso projeto, expanda-o, clique com o botão direito em cima de icons.qrc, selecione Add Existing Files… e selecione todos os ícones no diretório icons em nosso projeto. E o projeto ficará como a Figura 3.

Qt5 para comunicacao serial: ResurceFileIconsComplete
Figura 3 – Adicionando os ícones em nossa aplicação

Voltando a tela da aplicação, vamos selecionar o botão Sair e ir até o Property Editor do lado direito do QtCreator. Procure por QAbstractButton e clique na caixa de seleção na opção icon como na Figura 4.

Qt5 para comunicacao serial: QAbstrationButtonSelectionResouce
Figura 4 – Selecionando o ícone em QAbstractButton

Selecione Choose Resource…, na janela que abrir deve-se selecionar icon no lado esquerdo e no lado direito o ícone que deseja usar no botão, como podemos ver na Figura 5.

Qt5 para comunicacao serial: ChooseIconButtonQt5
Figura 5 – Selecionando o ícones para o widget PushButton

Voltando ao QAbstractButton expanda a opção iconSize e mude de 16 x 16 para 32 x 32, na sequência vamos criar um atalho para o botão Sair. Para isso clique em shortcut e pressione a tecla que será o atalho, no caso da aplicação eu pressionei F4 e veja como ficarão as propriedades do nosso botão na Figura 6.

Qt5 para comunicacao serial: QAbstrationButtonShortcut
Figura 6 – Configurando atalho e o tamanho do ícone do widget

Uma opção legal a ser utilizada é adicionar uma mensagem ao posicionar o mouse sobre o botão, por exemplo se o operador parar o cursor em cima de Sair. E se você desejar que apareça a mensagem ‘Sair da aplicação’, procure a propriedade toolTip e insira o texto, como na Figura 7.

Qt5 para comunicacao serial: QAbstrationButtonToolTip
Figura 7 – Adicionando uma descrição ao widget

Pronto, customizamos o widget PushButton do botão Sair, agora pode aplicar o mesmo procedimento nos demais botões, e por fim nossa aplicação ficará como a Figura 8.

Qt5 para comunicacao serial: Qt5ArduinoPosicionamentoIconesTelaFinal
Figura 8 – Design da tela final da nossa aplicação

Código Qt5 para comunicação serial

Chegando nesta etapa sua tela deverá estar pronta, já deverá ter criado a classe comserial com comserial.h e comserial.cpp idêntico ao artigo anterior, e agora iremos apenas criar as ações dos botões para tratar o que será enviado e recebido pela serial.

Recordando que para dar ação a um botão a maneira mais simples sem ter que lidar com Sinais e Slots neste momento é clicar com o botão direito do mouse no botão e selecionar Go to Slot… e em seguida selecionar clicked() e OK.

Segue o código utilizado em widget.h:

E agora o widget.cpp:

Se copiar e colar o código acima irá funcionar, porém você deverá utilizar os nomes corretos para os PushButtons, QLineEdit e demais Widgets. Caso prefira, faça o download de todo o projeto no final do artigo, ou crie seus widgets com os nomes que achar melhor e apenas use os códigos acima.

Os botões Sobre, Sair, Ajuda e Cor Terminal é um bônus do que você pode usar criando estas ações. O foco agora é atacar o Conectar, Desconectar, Versão, Hardware e Ligar|Desligar.

A lógica é até simples, pois para ler e escrever na serial só usamos ReadData() e WriteData(), o resto é logica e estrutura do Qt5.

Código Arduino

Segue abaixo o código utilizado para o firmware do Arduino UNO, não comentarei muito aqui sobre o mesmo pois inseri bastante comentários nos principais pontos. Mas um resumo é que estou usando o Led que posso interagir com o pino 13, e enviando pela serial o comando ‘11‘ (Acender/Apagar Led), ‘12‘ (obter informações do microcontrolador) e ‘13‘ (a versão configurada no meu firmware).

Usaremos uma simples Máquina de Estado. Para mais informações sobre Máquina de Estado, confira o excelente artigo Máquina de Estado, do Pedro Betoleti.

Executando a aplicação no Linux

Resumidamente, a função da nossa aplicação é, se tiver porta serial no computador, listar em Portas e libera o botão Conectar. Caso contrario, não libera o botão e exibe uma mensagem que não encontrou portas seriais.

Conectando a porta serial, os botões são liberados e podemos executar as três ações Versão, Hardware e Ligar/Desligar, o legal que ligar e desligar o led é com o mesmo botão e o ícone do mesmo irá mudar conforme o status do led.

Em Comandos o que for digitado e a seguir pressionado ENTER é enviado ao dispositivo serial. No nosso caso podemos testar com 11, 12 e 13.

Vamos testar a aplicação e ver os resultados nas Figuras 9 e 10.

Qt5 para comunicacao serial: Qt5AplicaçãoFinalComunicandoArduino
Figura 9 – Testando a aplicação Qt5 com Arduino
Qt5 para comunicacao serial: Qt5AplicaçãoFinalCOmunicandoArduinoeComandos
Figura 10 – Aplicação Qt5 com Arduino e enviando comandos

Todo o código-fonte utilizado na aplicação e o firmware do Arduino podem ser baixados no link abaixo. Contém todo o projeto para compilar e executar, fazer as suas modificações e adaptações para uso.

[wpfilebase tag=fileurl path=’posts/ProjetoAplicaçãoQt5Embarcados.tar.gz’ linktext=’Download do Projeto’ /]

Saiba mais

– Comunicação serial com Arduino utilizando Qt5 Console Application

– Comunicação serial com Arduino e Qt5 Widgets Application – Parte 1

– Comunicação serial com Arduino e Qt5 Widgets Application – Parte 2

Referências

– Máquina de estado

– http://www.iconspedia.com/

– http://doc.qt.io/qt-5/qserialport.html

– http://doc.qt.io/qt-5/qlineedit.html

– http://doc.qt.io/qt-5/qpixmap.html

– http://doc.qt.io/qt-5/resources.html

– http://doc.qt.io/qt-5/qabstractbutton.html

Licença Creative Commons Esta obra está licenciada com uma Licença Creative Commons Atribuição-CompartilhaIgual 4.0 Internacional.

Receba os melhores conteúdos sobre sistemas eletrônicos embarcados, dicas, tutoriais e promoções.

Arduino » Qt5 para comunicação serial - Aplicação
Comentários:
Notificações
Notificar
guest
8 Comentários
recentes
antigos mais votados
Inline Feedbacks
View all comments
Pedro Filho oliveira santos
Pedro Filho
20/08/2015 19:13

Excelente Tutorial, muito bacana mesmo trabalhar com o Qt, eu que nunca tinha visto antes, começei a tentar algumas coisas aqui depois do primeiro tutorial, vi que tudo é muito simples mesmo.

Espero que esse não seja o último da série 🙂

Cleiton Bueno
Reply to  Pedro Filho
21/08/2015 08:54

Olá Pedro, fico feliz que tenha gostado desta série.
Tenho uma noticia boa e uma ruim, a ruim é que acabou esta serie de comunicação serial e a boa é que outros artigos com outros temas viram usando Qt5 😉

Abraço!

Caio Pereira
Caio Pereira
14/08/2015 10:35

Belo Artigo Cleiton, Antes de alguém pensar em fazer em Java, dê uma olhada neste artigo que ficou muito bom! Aliás, em java, o trabalho será muito maior!

Cleiton Bueno
Reply to  Caio Pereira
14/08/2015 11:09

Olá Caio!
Fico feliz que tenha gostado, realmente Qt esta ganhando muita força em termos de desenvolver aplicações gráficas multiplataforma.
E o elenco da ferramenta é forte, mais artigos com Qt estão por vir.

Abraço

Andre Tenorio
( André Tenório )
13/08/2015 14:49

Sem comentários, muto bom mesmo! Aguardamos mais! 🙂

Cleiton Bueno
Reply to  ( André Tenório )
13/08/2015 21:06

Bacana que gostou André, e realmente vem mais por ae 🙂

Abraão Allysson
Abraão Allysson Dos Santos
13/08/2015 12:16

Excelente tutorial!

Cleiton Bueno
Reply to  Abraão Allysson Dos Santos
13/08/2015 12:55

Olá Abraão!

Legal que gostou do post, e muita coisa legal esta por vir utilizando Qt.

Abraço.

Talvez você goste:

Séries

Menu