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

No post anterior mostrei como preparar o ambiente com Qt5 - Comunicação Serial com Arduino utilizando Qt5 Console Application para realizar comunicação serial via console e, para isso, utilizamos um Arduino. Desta vez vamos seguir o mesmo raciocínio de ambiente, realizando a comunicação serial com Arduino e Qt5 Widgets Application, uma interface gráfica no Qt5.

 

O post sera divido em duas partes, nesta primeira vamos conhecer, criar e personalizar nossa interface gráfica com Qt5 Widgets. Na segunda parte vamos fazer toda a programação para realizar comunicação serial e ações com a interface gráfica com Qt5 Widgets.

 

Se o Qt é novo pra você, pode conferir um post que escrevi sobre a ferramenta, Qt5 - Conhecendo um verdadeiro canivete-suiço, e se ainda não possui a ferramenta instalada e está usando Linux, pode seguir o passo a passo no post Qt5 – Instalação em ambiente Linux.

 

 

Configuração do ambiente host

 

Estou utilizando a distribuição Linux Mint 17 Qiana 64 bits, mas sem problemas em utilizar um Ubuntu ou Debian. 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.

 

 

Qt5 Widgets Application

 

Neste post o Qt5 Widgets será utilizado em ambiente host Linux e com desenvolvimento de aplicação para target Linux (x86 ou arm), porém Qt5 pode ser instalado tanto em Windows, Linux ou MacOS.

 

Abrindo o Qt Creator vamos criar nosso projeto com GUI (interface gráfica), para isso clique em File > New File or Project... e uma janela como na Figura 1 surgirá e você deverá escolher Applications > Qt Widgets Application e clicar em Choose.

 

Criando Projeto Qt5 Widgets com Interface Grafica
Figura 1 - Criando Projeto Qt5 com Interface Grafica

 

Assim como na Figura 2 escolhemos um nome para o projeto, no caso, usaremos comunicação_serial_qt_gui. O diretório do projeto pode ser de sua preferência, no caso vou criar no /tmp apenas para didática do post, e clique em Next.

 

Nome e local do projeto
Figura 2 - Nome e local do projeto

 

Na Figura 3 selecionamos os kits para o projeto, vamos deixar o padrão ainda, em outro post estudaremos esta opção e sua importância. Clique em Next.

 

Seleção do Kit
Figura 3 - Seleção do Kit

 

Na etapa a seguir pode-se optar por QMainWindow, QWidget e QDialog, basicamente todos são Widgets. Por isso quando se cria o projeto com interface gráfica (GUI) escolhemos Qt Widgets Application.

 

Se deseja desenvolver uma aplicação com várias telas que podem ser chamadas no decorrer da aplicação ou da janela principal o ideal é usar QMainWindow, até por que possui barra de status e título, digamos ser uma opção de interface gráfica de um nível superior. Já se é uma aplicação que você pretende usar os vários Widgets disponíveis (Buttons, Inputs, Display, Containers e Layouts) em uma única tela, use o QWidget. O QDialog é muito utilizado para uma janela temporária como as de erros, alertas e confirmações.

 

Mais informações e diferenças entre Qt5 Console Application e Qt5 Widgets Application você pode conferir no post Qt5 – Qt Console e Qt Widgets.

 

Então em Base class, escolha QWidget e clique em Next, como na Figura 4.

 

Seleção da Base Class que iremos usar para interface grafica
Figura 4 - Seleção da Base Class que iremos usar para interface grafica

 

A janela a seguir é para escolher uma ferramenta para versionamento, deixaremos como None e um resumo é exibido logo abaixo como caminho do projeto, nome e os arquivos a serem criados. Para criar o projeto clique em Finish.

 

Tela final para selecionar versionamento ou finalizar a criação
Figura 5 - Tela final para selecionar versionamento ou finalizar a criação

 

Assim, nosso projeto será criado e uma estrutura será criada e exibida pra você como a Figura 6.

 

Estrutura de arquivos do projeto inicial
Figura 6 - Estrutura de arquivos do projeto inicial

 

Uma estrutura um pouco diferente do projeto com Qt Console Application, certo? Correto, mas é simples de entender. Os arquivos <seu_projeto>.pro e main.cpp são criados em ambos, e agora temos os arquivos (Sources/widget.cpp, Headers/widget.h e Forms/widget.ui), referentes ao QWidget criado, sendo o código-fonte (.cpp e .h) e a interface gráfica (.ui User Interface).

 

Dando dois cliques nos arquivo .cpp e .h será carregado para edição na opção Edit e dando dois cliques no .ui será carregado para edição na opção Design, onde você irá dimensionar a janela, configurá-la (lado direito), arrastar e soltar componentes (lado esquerdo) e criar a interface gráfica da sua aplicação, como na Figura 7.

 

Tela inicial para desenhar a tela com Qt5 Widgets
Figura 7 - Tela inicial para desenhar a tela

 

Sem programar uma linha de código, você já pode clicar em Run (Ctrl+R) e uma janela irá aparecer na tela, com a Figura 8.

 

Build padrão da tela inicial com Qt5 Widgets
Figura 8 - Build padrão da tela inicial

 

 

Criando a Interface Gráfica com Qt5 Widgets

 

Vamos criar nossa primeira interface.

 

Montando a interface grafica para comunicação serial com Qt5 Widgets
Figura 9 - Montando a interface grafica para comunicação serial

 

No estilo clicar, arrastar e soltar, montamos a tela da Figura 9.

 

A lista de componentes e seus tipos podem ser vistos na Tabela 1:

 

Tabela1 - Componentes, Nomes e tipos usados no Qt5 Widgets
NomeComponenteDescrição/Função
lbTituloQLabel Label com Titulo da Aplicação
flConfSerial QFormLayout Layout para organizar componentes no GroupBox 
gbConfSerial QGroupBox GroupBox das configurações da serial 
lbDevice QLabel Label da Porta 
cbDevice QComboBox ComboBox para as Portas Seriais 
lbBaudRate QLabel Label do BaudRate 
cbBaudRate QComboBox ComboBox com os valores de BaudRate 
pbOpenSerial QPushButton Botão Conectar 
pbCloseSerial QPushButton Botão Desconectar 
leCmdQLineEditEntrada de texto dos comandos
pbSendCmdQPushButtonBotão para enviar comandos pela serial
teLogQTextEditCaixa de texto com log da aplicação (Receção Serial)

 

Se clicarmos em Run (Ctrl+R) vamos ver nossa primeira tela, deve ser algo como da Figura 10.

 

Tela Comunicação Serial Finalizada
Figura 10 - Tela Comunicação Serial Finaliza

 

 

O que vem por aí...

 

Na parte 2 vamos dar continuidade no desenvolvimento e criar uma classe para lidar com toda parte de comunicação serial usando o QSerialPort, dar ações aos Widgets e realizar a comunicação serial com o Arduino.

 

 

Referências

 

https://www.embarcados.com.br/comunicacao-serial-com-arduino-utilizando-qt5-console-application/

http://cleitonbueno.com/qt5-conhecendo-um-verdadeiro-canivete-suico/

http://cleitonbueno.com/qt5-instalacao-em-ambiente-linux/

http://cleitonbueno.com/qt5-qt-console-e-qt-widgets/

http://doc.qt.io/qt-5/gettingstartedqt.html

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.