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.

 

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

NEWSLETTER

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

Obrigado! Sua inscrição foi um sucesso.

Ops, algo deu errado. Por favor tente novamente.

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

Cleiton Bueno
Proprietário da B2Open onde oferecemos consultoria, treinamentos e desenvolvimento em Sistemas Embarcados. Entusiasta a filosofia open-source, mais de 10 anos de experiências em Linux e FOSS. Em sistemas embarcado do firmware baremetal ao Linux Embedded, e há aproximadamente 8 anos desenvolvendo em (C, Python, Qt e muito Shell Script), além de profiling, hardening e tuning para targets com Linux Embarcado. Graduado em Engenharia da Computação pela UNICEP com ênfase em robótica e sistemas embarcados.

8
Deixe um comentário

avatar
 
4 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Pedro Filho oliveira santosCaio PereiraAndre TenorioCleiton BuenoAbraão Allysson Recent comment authors
  Notificações  
recentes antigos mais votados
Notificar
Pedro Filho oliveira santos
Visitante
Pedro Filho

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
Visitante

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
Visitante
Caio Pereira

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
Visitante

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
Visitante
( André Tenório )

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

Cleiton Bueno
Visitante

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

Abraão Allysson
Visitante
Abraão Allysson Dos Santos

Excelente tutorial!

Cleiton Bueno
Visitante

Olá Abraão!

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

Abraço.