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

Por

25/05/2015

ÍNDICE DE CONTEÚDO

Este post faz parte da série Comunicação serial com Arduino utilizando Qt5. Leia também os outros posts da série:

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

No post anterior mostrei como preparar o ambiente com Qt5 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 será 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, e se ainda não possui a ferramenta instalada e está usando Linux, pode seguir o passo a passo no post.

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.

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.

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.

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.

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

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.

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

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.

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.

Criando a Interface Gráfica com Qt5 Widgets

Vamos criar nossa primeira interface.

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
Nome	Componente	Descrição/Função
lbTitulo	QLabel	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
leCmd	QLineEdit	Entrada de texto dos comandos
pbSendCmd	QPushButton	Botão para enviar comandos pela serial
teLog	QTextEdit	Caixa 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.

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