- 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:
| 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
Sobre o Autor
Bem interessante ! Parabéns. Acompanhando !
Legal Cleiton, bem didático!
boa!
Opa, e vai ficar melhor com a parte 2 😉
Aguardaremos!!!!